jQuery (+ mobile), Backbone.js, Coffeescript and HAML-Coffee.
I started building a single-page mobile web app side-project on the weekend (hopefully I’ll release it in the coming weeks). I spent a couple of hours creating the perfect development environment - its definitely share-worthy so here it is.Node.js + Express
Node and Express provide the basic compilation architecture.
connect-assets is responsible for compiling and minifying all of my client-side code. This means that I can develop and use refresh to recompile.
haml-coffee is my client-side templating language.
connect-assets will compile all of the templates into
.js files and then automatically include them so you don’t have to worry about dependency management.
stylus is similarly used for all my stylesheet needs.
Your entire client-side application lives in
assets. This directory is compiled for each request (basically turned into single
.js files, etc).
assets/js- put all of your application code here (and any other libraries that you want included and minified into your application code).
assets/templates- all of your hamlc templates go in here.
The other important file is your
views/layout.jade file. This file generates the page that you will request from the browser and that will run your code. Basically you need to make sure you include your main application file and any other assets you need. For example:
link(rel='stylesheet', href='/stylesheets/style.css') link(rel='stylesheet', href='http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css') script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js') script(src='http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js') != js("underscore") != js("backbone") != js("swipe") != css("style") != js("app")
The difference between
!= js("underscore") is that the former is loaded from an external site, while the latter is included as part of my application and will eventually be minified into just a single
This workflow uses
snockets (node version of
sprockets) to manage dependencies. Including another file is as simple as putting a comment at the beginning of the file:
#= require ../models
Similarly, you can require a whole directory (including sub-directories) of files by using
require_tree as such:
#= require_tree ../templates
Important tidbits for configuration - you need to add these lines to your
app.coffee file to get it to work properly.
hamlc = require("haml-coffee") assets = require("connect-assets") app.register '.hamlc', hamlc assets.jsCompilers.hamlc = match: /\.js$/ compileSync: (sourcePath, source) -> assetName = path.basename(sourcePath, '.hamlc') compiled = hamlc.template(source, assetName) compiled app.use assets()
In order to use a Coffeescript
app.coffee file - you should also create a
server.js which is what you’ll actually run with the following in it:
To use the app simply run
node server.js and navigate to
That’s the workflow - it’s amazing quick to build and experiment with and let’s you nicely build single-page web apps.