Over the past few weeks I’ve been getting quite a few people asking questions about transitioning to javascript - perhaps this recent post about Esri’s Roadmap for Web Developers has spurred more people into action - whatever the cause, I thought I’d share a few thoughts and links.
First off, now is a great time to get into javascript! jQuery has leveled the playing field across browsers, and the truly horrible versions of Internet Explorer are nearly in behind us. The community is exploding, and it seems every day there is some new exciting project in javascript.
Javascript Application Architecture
I’ve got some great news: over the last few years javascript has matured as a language and as a community. No longer are javascript applications “spaghetti” code by default, and cross-browser issues are much less common and painful than in the past. Myriad Model-View-Something frameworks exist to provide structure for your code, and if you’re doing anything more complex than “Hello World” I’d strongly recommend investing in learning one (or more).
I was going to list out a bunch of frameworks along with pros and cons, but then I remembered this video by Rob Conery titled “Javascript Infero”. I really like this talk as it compares 4 javascript frameworks - Knockout, Backbone, Angular, and Ember. Go ahead and click through and watch it now… I’ll wait here…
Additional Framework Thoughts
BackboneJS + Marionette
Backbone was the first of the client-side MV* frameworks that really took off. It’s also barely a framework - very un-opinionated, thus allowing you do to virtually anything. Marionette is a backbone extension that helps developers implement additional patterns by adding in formal Modules, Controllers, Layouts, Regions, various types of views, as well as an Application. Leveraging these greatly streamlines development both by reducing repetitive code and enforcing a development pattern. Personally I liked this stack because it give you lots of freedom, while still providing pattern guidance. Coming from ASP.NET / C# on the backend, this resonated with me. Last spring I did a 6 part series on building a mapping app using Marionette, that would be a good intro if Backbone + Marionette sound appealing.
For what it’s worth, this is what we used to build the ArcGIS for Open Data application, as it gave us the benefit of solid structural and architectural patterns, while still leaving us lots of flexibility to implement the interface behavior we wanted.
Polymer (aka Web Components aka The Future)
Polymer is a Google project that lets you build applications based on Web Components. The tricky bit is that Web Components is an emerging W3C standard, and no browsers have support for them yet. Undaunted, Polymer provides a set of polyfills (stop-gap code) that let you build and use web components today (IE10+ and evergreen browsers). This project just hit “alpha” in mid-February 2014, so it’s great for experiments, but I’d recommend staying away from this for production. That said, Web Components will be the future of the web, so it is worth getting a general understanding of the concepts. Another side note - both Ember and Angular are aligning themselves to slip-steam their view infrastructure into web components.
General Stuff You Should Know / Use
Underscore / Lo-Dash
Underscore is a utility belt of awesome stuff that should be part of javascript but is not (yet). Lo-dash is the mo-better-faster implementation of the same library (yeah competition!). Get to know one/both of these, as they will save you a ton of time and effort. What is really great is that these libraries are smart enough to use native implementations of functions when they are available in the running browser, so you can use the same “code” in your app and in down-level browsers it will use a javascript implementation, but in newer browsers it will use the underlying C++ implementation.
Bootstrap
Bootstrap is a css framework that allows you to create a “reasonable” web app in minutes - no wonder it’s the most popular front-end framework! Sensible defaults based on a responsive base means that you can throw markup into a file, and after only a few minutes reading the documentation, have a site that looks good on a 27inch iMac and on your phone.
What’s more - Bootstrap is so popular that when you want to level up, there are tutorials on creating themes, or you can skip that and drop two lattes worth of cash on a pre-made theme. Boom. Beautiful, and you don’t have to fight the css. Bootstrap also comes with a bunch of optional javascript helpers. Start by using them, and then as you transition up to using a framework like Angular/Ember/Backbone, you can switch over.
Getting Started…
In the famous words of Nike: Just Do It. Start something - anything. Throw it up on github. A great starting point for working with maps is the bootstrap-map-js repo. Slap up something simple. Then build something else.
Will it break? Yes. Will you have problems with Internet Explorer? Yes. Will you scream at your monitor and rue the day you learned how to spell javascript? Likely.
But honestly, that’s learning. You did that when learning Silverlight or Flex. And really, if you are going to work on the web, javascript needs to be your new best friend. Think of it like this - you could switch to native app development, and then you’d have to know Objective C for iOS, Java for Android, and C# for Windows Phone/8.
In comparison, javascript is not so bad!
Resources:
Checkout my previous blog post on Leveling up your Javascript for lots of links.
YouTube has ton’s of resources for Angular and Ember
Html5Rocks & Polymer-Project - lots of info on Polymer and Web Components