JavaScript must-knows: Node, Backbone, and Angular/CoffeeScript/Sass Boilerplate

JavaScript resources this post, touching Node/Express, Backbone, and Angular. Come on down!

Evan Hahn wrote a great Express.js overview that I’ve needed for a while now. NodeJS is a platform for building network applications (i.e. non-static websites) that has become a JavaScript standard. Hahn’s article covers just what a basic Node app is, what Connect attempts to cover/simplify in Node, and then what Express attempts to cover/simplify in Connect. It’s well-structured and readable and I recommend it to everyone. It even gets into some basic Jade for HTML templating, which is a great thing to be familiar with.

I also found a great set of BackboneJS tutorials. Backbone is a popular JavaScript framework that can be used for building web apps of any scale. A basic 3-part tutorial starts here, and would be great if you want to see the way Backbone apps are structured, i.e. what all these Views, Models, Collections, Routers, etc. are for. If you want to get into the more server-side node stuff (with Restify this time) and MongoDB (with Mongoose), dive right in here.

Backbone is a great framework, but lately I highly recommend AngularJS. What’s the difference between frameworks, you ask? As I see it, the framework you choose determines how much “magic” you get. Different frameworks will do different things for you right out of the box (without you having to do anything). AngularJS, for example, does some  beautiful data-binding and live updating that would take a ton of work to achieve in other frameworks. Lots of “magic” can be very helpful, but can also lead to tricky debugging and distancing yourself from pure JavaScript. It really comes down to your personal language and architecture preferences.

That being said, I love CoffeeScript + AngularJS + Sass/Compass these days. I’ve listed below the terminal sequence I run through to get an Angular/CoffeeScript/Sass boilerplate stack up and running in just a minute or two. It’s all done via Yeoman, Grunt, and Bower, and you’ll need to use npm (Node Package Manager, super helpful, you should be using it if you aren’t already). It even includes Karma for unit testing. Execute these commands inside the directory you’d like to add the app to.

{% highlight bash %} npm install yo grunt-cli bower npm install generator-angular yo angular –coffee // Y for yes to bootstrap, scss, and all the angular stuff. npm install bower install grunt server {% endhighlight %}

If grunt isn’t found, try npm install grunt and then grunt server again. To get unit tests running (via grunt karma), you need to change bower_components in karma.conf.js to components. That should work, and if it doesn’t, let me know. I’m happy to troubleshoot with you via comments here or twitter.

Happy projamming!