Looking Ahead: Javascript in 2014

Posted by Dave Bouwman on January 9, 2014

Javascript in 2014

Ah 2013, what a great year you were – returning to full-time development has been a fantastic change of pace, and I’m super excited about what the next year will bring. In that spirit, here are a few things that the Esri DC team is looking forward to investigating.

Developer Tooling & Automation

This year our team is looking at adding Yeoman and Bower into the mix. We’ve been using grunt since we started our project, and I can’t imagine doing any front-end development with out it. Yeoman and Bower are companion tools that bring more awesome workflow options for front-end developers. Yeoman focuses on scaffolding out applications or components for you (think Rails or ASP.NET MVC scaffolding but for your javascript). Bower is a dependency management tool which makes it easy to pull down all the front end libraries you use, and easily update them over time. Grunt of course is a javascript task runner that can orchestrate things, and you should be using it. Or gulp.js, which is a “streaming build system”.

Web Frameworks

Although our team, and our primary project uses Ruby on Rails for a back-end web framework, as javascript developers, we can’t ignore all the activity around Express.js &Sails.js.

Personally, in switching over to OSX, I’ve been feeling a little off the back in terms of full-stack chops, so I’ve been hacking around with building simple web apps using Express, which is a back-end framework built on node.js. Express is the most mature of the node.js “frameworks” and thus the documentation is pretty good, and there are good intro and advanced books available. There are also a lot of modules that can be used to extend express.

Taking it up a level, Sails.js is a set of Express middleware that adds “stronger opinions” to Express. It is crazy quick to get started, and makes building out single-page style apps, and APIs a breeze. It’s similar to Rails in that it comes with scaffolding tools – so it’s a simple command to whip up a model and controller at the same time, and have that auto-magically become a REST and Socket.io based API. Again similar to Rails, it also has a plug-able data store model, allowing you to switch between database technologies as your project progresses. Sweet. That said, development is on-going and documentation is limited, so expect to fall back on some Express chops when you start digging into things. From a team perspective, Chris Helm (@chelm) has built the Koop project on top of Sails, so stay tuned for some interesting things coming on that front.

Front-End Javascript

If you are paying any amount of attention to the front-end web development space, you’ve likely heard people raving about Angular JS. While I am a big fan of Backbone & Marionette, the more I read about Angular, the more interested I am. Backbone is great when you want “extreme control” of the user experience (as is the case in our project), but in other scenarios, frameworks like Angular are a big win, as they can off-load a lot of work from the developer. On top of that, Angular seems to be able to play-nice with server-rendered markup, which is a big plus for building apps with really fast initial page-load times. Finally, being built by Google, using solid software engineering principles (dependency injection anyone?), with an eye towards our web-componety future (see below), I’d expect Angular to be relevant for quite some time.

I also found this very interesting post about Backbone and Angular . Not sure I completely agree with everything in there, but if you use backbone, it’s worth reading.

Speaking of looking forward over the next few years, the proposed web components standard is extremely interesting, and will be a huge shift in front-end development. At it’s core are 4 technologies (Templates, Shadow DOM, Custom Elements and Packaging) which combined will allow developers to create re-usable “components” for applications. What’s this boils down to is that we will be able to create new html tags and bake in behavior – just like built-in UI components like the

Thanks to Google, this future is available today. Chrome Canary has support for many of the underlying technologies, and the Polymer Project is a set of polyfills that allow web components to be used on all modern browsers (IE10+)

To learn more about Web Components…

If nothing else, this year will be a ton of fun as we all try to build the next awesome thing.