Resources for Leveling up your Javascript-Fu

Posted by Dave Bouwman on January 4, 2014

In the six+ months since joining Esri, I’ve spent nearly all my time learning, writing, debugging, re-learning, designing, debugging, unit testing, debugging and refactoring javascript. It’s been a lot of fun and I have learned a ton, and I thought I’d share some of the most useful resources I have found. But before diving into that, some background on our project (for context).

Our team is building an extension to ArcGIS.com that will better enable organizations to meet their Open Data initiatives. Much more about the specifics of the application functionality will be coming out in the next few months (think Esri Fed UC) but what is important in the context of this post (and partly why I joined this team @ Esri) is the technology stack. 
 
Although the “back-back-end” is the ArcGIS Online item-store, our app itself has a Rails back-end that acts (more or less) as a fancy caching proxy / search engine. Knowing just enough Ruby to be very dangerous, I'm pretty insulated from the guts of the back-end, but it does impact the front end code because we use the Rails asset pipeline to concatenate, and minify our javascript.
 
Like many web apps these days, the front-end of our application uses Backbone + Marionette. We chose this framework because it provides us enough structure to ensure consistent separation of concerns across the code-base (read: it’s maintainable and testable), while still affording lots of flexibility in terms of implementation and integration. 
 
With that in mind, here is a list of the resources that I’ve found useful… 

Editor: Sublime Text

A great editor on it’s own, sublime's plug-in ecosystem is what makes it truly rock. I’ve tried a bunch of other plugins and these are the ones that I actually end up using on a regular basis:
  • Package Control  - like npm for plugins. it’s how you install the rest of these
  • DockBlockr. snippets for code comments / documentation
  • Emmet. text-expander-ish html & css power-tools. check out the demos here, and bookmark the cheat sheet
  • Jasmine. similar thing for writing the boiler-plate describe/beforeEach/afterEach/it/expect blocks faster

Git & GitHub

I very quickly learned that using git by yourself working directly in master, is very different from working on a team that’s got a very fluid “git-flow” going. Leveling up took some time, and I still feel like I’m one bad merge away from disaster
  • git workflows book. good place to get the basics and refer to when you need to figure stuff out
  • learn git branching. interactive web app that teaches you branching
  • source tree. visual git app, windows & mac. handy for adding files to commits
 
JavaScript
 
While I’ve been working with javascript on a regular basis for the last 5+ years, I was also wearing a lot of other hats, so it was time to get into the language at a whole new level.
 
 
Backbone
 
Again, while I’d built a few backbone applications, there is a difference between using a framework, and knowing it. Reading the backbone source code is a good option, but it can be abstract. Here are some additional resources that are really helpful. 
 
  • Developing Backbone.js Applications by Addy Osmani. another great open-source book from Addy Osamani. I’d say this is a must read for anyone getting into Backbone, and it has a chapter on Marionette. It also talks about using AMD with Backbone, and unit testing Backbone apps with qunit and jasmine. 
  • Backbone.js Questions at StackOverflow. another advantage of using a super popular, relatively small framework, is that there is a huge community who have dug through nearly any use-case you can imagine.
 
Backbone + Marionette
 
Marionette is composite application library build on top of Backbone. Essentially Marionette helps remove the repetitive, boiler-plate code that is common in Backbone apps.
  • MarionetteJs.com. Main site for the project
  • Docs. well written docs that explain why each component was built, and how to use it
  • Annotated Source - the final word on how things work
  • BackboneRails.com - Brian Mann has created a set of truly amazing screen casts about building backbone + marionette applications with a rails backend. Code is in coffee script,but the ideas and patterns are great and really well explained. Highly recommended
  • Building Backbone Plugins by Derick Bailey (author of Marionette). Great description of how the marionette components were designed, and why. Also. if you use marrionette. just buy. you will certainly learn something new, and it’s a great way to give a little something back to Derick
 
Backbone Plugins
There is a great eco-system of Backbone plugins out there, and here are two that we are using
  • Backbone Fetch Cache. this uses local storage to create a cache of requested objects. It’s nice because it is just a drop-in upgrade for the fetch() method on models and collections. We use it for search results, so that when a user navigates from search results, to a datasets and back, the search results are pulled from the cache instead of making another request. 
  • Backbone Query Parameters. by default, the backbone router disregards query string parameters. which is fine if your app’s urls are all super “RESTful”, but that is not always viable (i.e. check the url of a google search). This plugin fixes this up, and converts the query string into a key/value hash. Additionally, by “respecting” the query string, it also causes the router to fire when navigating between urls that only differ by query string parameters. which is important for going “back” through search history in our app.
 
Unit Testing
How anyone can build a non-trivial javascript application without good unit testing is a mystery to me. While it takes some effort to get into the swing of writing tests, the value you get back out of it is totally worthwhile. I can’t even begin to explain how much having tests has helped our project. and we have ~50% coverage. There are lots of testing tools out there, and this is what we are using.
 
  • Jasmine. “Behavior Driven” javascript test framework
  • jquery-jasmine. extensions to make DOM assertions easier, as well as adding support for html, css and json fixtures
  •  Jasmine Chapter in Developing Backbone Applications by Addy Osmani. good overview of using Jasmine to write tests for Backbone applications. There are also chapters on using QUnit and Sinon for those interested.
  • Jasmine Javascipt Testing by Paulo Ragonha. This is an excellent book in that it explains not only how to write tests but how to organize and write javascript so that it is easy to test. It also has good coverage on writing tests for Backbone Views and Models. (Full disclosure. I was given a copy to review by the publisher. that said, it’s a great book. and you can get it before 1/3/13 for $5!)
  • Istanbul. writing tests is all well and good, but it’s important to know how much of your code has test coverage, and this is where a coverage tool comes in. We use this as a template mix-in for grunt-contrib-jasmine, and it runs as part of our automated test system

Automation: Grunt

Just because we are working a simple text editors does not mean we don’t want automation, and that is where GruntJs comes in. Written in node, it can be used to automate a lot of the “behind the scenes” work that heavier IDEs perform. i.e. syntax checking (aka linting), running unit tests, and code coverage tools. Grunt’s plugin ecosystem is huge, and although we use just a few packages, the breadth of what  you can automate is amazing. Install them by adding entries to package.json and running npm install.
  • watch plugin - watch a set of files in a tree and runs other plugins when changes occur
  • jshint plugin - a friendlier version of jshint that catches syntax errors
  • jasmine plugin - automated unit test runner
  • istanbul plugin - code coverage mix-in for jasmine
  • jst plugin - compiles underscore templates server side for much win
As I mentioned in the intro, we use Rails asset pipeline to combine + minify our javascript, and to compile the sass to css. But of course there are grunt plugins for that stuff as well. just poke around at GruntJs.com 

Debugging

If only I wrote perfect code all the time! Alas, a lot of time is spent debugging things, and so it’s good to get familiar with the tools of the trade. In the past I’d used FireBug quite a lot, but over the last year, I’ve switched to Chrome Dev Tools and never looked back. At this point the Dev Tools are practically an IDE, allowing for direct editing of source javascript and css. Support for javacript source maps and css source maps is also amazingly helpful. But that’s just the tip of the iceberg. Performance and memory profiling, mobile emulation and a console that is crazy powerful take it to the next level 
 
That’s about it. thanks to all the people who contribute their time and energy to building this amazing eco-system that helps push the web forward.