This is a result of a lot of trial and error, reading, notes taken, advice from more knowledgeable people than myself over a period of a few months in my spare time. This is the basis of a web site I’m writing for a new business endeavour.
Web Frameworks evaluated
- ExpressJS Version 3.1 I talked to quite a few people on the #Node.js IRC channel and the preference in most cases was Express. I took notes around the web frameworks, but as there were not that many good contenders, and I hadn’t thought about pushing this to a blog post at the time, I’ve pretty much just got a decision here.
- Geddy Version 0.6
MV* Frameworks evaluated
- CompoundJS (old name = RailwayJS) Version 1.1.2-7
- Locomotive Version 0.3.6. built on Express
At this stage I worked out that I don’t really need a server side MV* framework, as Express.js routes are near enough to controllers. My mind may change on this further down the track, if and when it does, I’ll re-evaluate.
Templating Engines evaluated
- jade Version 0.28.2, but reasonably mature and stable. 2.5 years old. A handful of active contributors headed by Chuk Holoway. Plenty of support on the net. NPM: 4696 downloads in the last day, 54 739 downloads in the last week, 233 570 downloads in the last month (as of 2013-04-01). Documentation: Excellent. The default view engine when running the express binary without specifying the desired view engine. Discussion on LinkedIn. Discussed in the Learning Node book. Easy to read and intuitive. Encourages you down the path of keeping your logic out of the view. The documentation is found here and you can test it out here.
- handlebars Version 1.0.10 A handful of active contributors. NPM: 191 downloads in the last day, 15 657 downloads in the last week, 72 174 downloads in the last month (as of 2013-04-01). Documentation: Excellent: nettuts. Also discussed in Nicholas C. Zakas’s book under Chapter 5 “Loose Coupling of UI Layers”.
- EJS Most of the work done by the Chuk Holoway (BDFL). NPM: 258 downloads in the last day, 13 875 downloads in the last week, 56 962 downloads in the last month (as of 2013-04-01). Documentation: possibly a little lacking, but the ASP.NET syntax makes it kind of intuitive for developers from the ASP.NET world. Discussion on LinkedIn. Discussed in the “Learning Node” book by Shelley Powers. Plenty of support on the net. deoxxa from #Node.js mentioned: “if you’re generating literally anything other than all-html-all-the-time, you’re going to have a tough time getting the job done with something like jade or handlebars (though EJS can be a good contender there). For this reason, I ended up writing node-ginger a while back. I wouldn’t suggest using it in production at this stage, but it’s a good example of how you don’t need all the abstractions that some of the other libraries provide to achieve the same effects.”
- mu (Mustache template engine for Node.js) NPM: 0 downloads in the last day, 46 downloads in the last week, 161 downloads in the last month (as of 2013-04-01).
- hogan-express NPM: 1 downloads in the last day, 183 downloads in the last week, 692 downloads in the last month (as of 2013-04-01). Documentation: lacking
Middleware AKA filters
Connect
Details here https://npmjs.org/package/connect express.js shows that connect().use([takes a path defaulting to ‘/’ here], andACallbackHere) http://expressjs.com/api.html#app.use the body of andACallbackHere will only get executed if the request had the sub directory that matches the first parameter of connect().use
Styling extensions etc evaluated
- less (CSS3 extension and (preprocessor) compilation to CSS3) Version 1.4.0 Beta. A couple of solid committers plus many others. runs on both server-side and client-side. NPM: 269 downloads in the last day, 16 688 downloads in the last week, 74 992 downloads in the last month (as of 2013-04-01). Documentation: Excellent. Wiki. Introduction.
- stylus (CSS3 extension and (preprocessor) compilation to CSS3) Worked on since 2010-12. Written by the Chuk Holoway (BDFL) that created Express, Connect, Jade and many more. NPM: 282 downloads in the last day, 16 284 downloads in the last week, 74 500 downloads in the last month (as of 2013-04-01).
- sass (CSS3 extension and (preprocessor) compilation to CSS3) Version 3.2.7. Worked on since 2006-06. Still active. One solid committer with lots of other help. NPM: 12 downloads in the last day, 417 downloads in the last week, 1754 downloads in the last month (as of 2013-04-01). Documentation: Looks pretty good. Community looks strong: #sass on irc.freenode.net. forum. – less, stylus, sass comparison on nettuts. –
- rework (processor) Version 0.13.2. Worked on since 2012-08. Written by the Chuk Holoway (BDFL) that created Express, Connect, Jade and many more. NPM: 77 downloads in the last week, 383 downloads in the last month (as of 2013-04-01). As explained and recommended by mikeal from #Node.js its basically a library for building something like stylus and less, but you can turn on the features you need and add them easily. No new syntax to learn. Just CSS syntax, enables removal of prefixes and provides variables. Basically I think the idea is that rework is going to use the likes of less, stylus, sass, etc as plugins. So by using rework you get what you need (extensibility) and nothing more.
Responsive Design (CSS grid system for Responsive Web Design (RWD))
There are a good number of offerings here to help guide the designer in creating styles that work with the medium they are displayed on (leveraging media queries).
- Less Framework 3, 4, Frameless. Some further resources on the Less Framework and other grid systems: http://mashable.com/2011/03/17/less-framework-guid/ http://donebecause.co.uk/entries/less_framework_less_css
- 960 grid system.
- Bootstrap also offers a grid system. Additional documentation here.
Keeping your Node.js server running
Development
During development nodemon works a treat. Automatically restarts node when any source file is changed and notifies you of the event. I install it locally:
$ npm install nodemon
Start your node app wrapped in nodemon:
$ nodemon [your node app]
Production
There are a few modules here that will keep your node process running and restart it if it dies or gets into a faulted state. forever seems to be one of the best options. forever usage. deoxxa’s jesus seems to be a reasonable option also, ningu from #Node.js is using it as forever was broken for a bit due to problems with lazy.
Reverse Proxy
I’ve been looking at reverse proxies to forward requests to different process’s on the same machine based on different domain names and cname prefixes. At this stage the picks have been node-http-proxy and NGinx. node-http-proxy looks perfect for what I’m trying to do. It’s always worth chatting to the hoards of developers on #Node.js for personal experience. If using Express, you’ll need to enable the ‘trust proxy’ setting.
Adding less-middleware
I decided to add less after I had created my project and structure with the express executable.
To do this, I needed to do the following:
Update my package.json in the projects root directory by adding the following line to the dependencies object.
“less-middleware”: “*”
Usually you’d specify the version, so that when you update in the future, npm will see that you want to stay on a particular version, this way npm won’t update a particular version and potentially break your app. By using the “*” npm will download the latest package. So now I just copy the version of the less-middleware and replace the “*”.
Run npm install from within your project root directory:
my-command-prompt npm install npm WARN package.json my-apps-name@0.0.1 No README.md file found! npm http GET https://registry.npmjs.org/less-middleware npm http 200 https://registry.npmjs.org/less-middleware npm http GET https://registry.npmjs.org/less-middleware/-/less-middleware-0.1.11.tgz npm http 200 https://registry.npmjs.org/less-middleware/-/less-middleware-0.1.11.tgz npm http GET https://registry.npmjs.org/less npm http GET https://registry.npmjs.org/mkdirp npm http 200 https://registry.npmjs.org/mkdirp npm http 200 https://registry.npmjs.org/less npm http GET https://registry.npmjs.org/less/-/less-1.3.3.tgz npm http 200 https://registry.npmjs.org/less/-/less-1.3.3.tgz npm http GET https://registry.npmjs.org/ycssmin npm http 200 https://registry.npmjs.org/ycssmin npm http GET https://registry.npmjs.org/ycssmin/-/ycssmin-1.0.1.tgz npm http 200 https://registry.npmjs.org/ycssmin/-/ycssmin-1.0.1.tgz less-middleware@0.1.11 node_modules/less-middleware ├── mkdirp@0.3.5 └── less@1.3.3 (ycssmin@1.0.1)
So you can see that less-middleware pulls in less as well.
Now you need to require your new middleware and tell express to use it.
Add the following to your app.js in your root directory.
var lessMiddleware = require('less-middleware');
and within your function that you pass to app.configure, add the following.
app.use(lessMiddleware({
src : __dirname + "/public",
// If you want a different location for your destination style sheets, uncomment the next two lines.
// dest: __dirname + "/public/css",
// prefix: "/css",
// if you're using a different src/dest directory, you MUST include the prefix, which matches the dest public directory
// force true recompiles on every request... not the best for production, but fine in debug while working through changes. Uncomment to activate.
// force: true
compress : true,
// I'm also using the debug option...
debug: true
}));
Now you can just rename your css files to .less and less will compile to css for you.
Generally you’ll want to exclude the compiled styles (.css) from your source control.
The middleware is made to watch for any requests for a .css file and check if there is a corresponding .less file. If there is a less file it checks to see if it has been modified. To prevent re-parsing when not needed, the .less file is only reprocessed when changes have been made or there isn’t a matching .css file.
less-middleware documentation
Bootstrap
Twitters Bootstap is also really helpful for getting up and running and comes with allot of helpful components and ideas to get you kick started.
Getting started.
Docs.
Bootstrap-for-jade
As I decided to use the Node Jade templating engine, Bootstrap-for-Jade also came in useful for getting started with ideas and helping me work out how things could fit together. In saying that, I came across some problems.
ReferenceError: home.jade:23
body is not defined
at eval (eval at <anonymous> (MySite/node_modules/jade/lib/jade.js:171:8), <anonymous>:238:64)
at MySite/node_modules/jade/lib/jade.js:172:35
at Object.exports.render (MySite/node_modules/jade/lib/jade.js:206:14)
at View.exports.renderFile [as engine] (MySite/node_modules/jade/lib/jade.js:233:13)
at View.render (MySite/node_modules/express/lib/view.js:75:8)
at Function.app.render (MySite/node_modules/express/lib/application.js:506:10)
at ServerResponse.res.render (MySite/node_modules/express/lib/response.js:756:7)
at exports.home (MySite/routes/index.js:19:7)
at callbacks (MySite/node_modules/express/lib/router/index.js:161:37)
at param (MySite/node_modules/express/lib/router/index.js:135:11)
GET /home 500 22ms
I found a fix and submitted a pull request. Details here.
I may make a follow up post to this titled something like “Going Steady with Express on Node.js … and friends'”
Binarymist 