I am Hack Sparrow
Captain of the Internets.

Mobile Web Development in Express.js (Node.js)

Developing mobile websites in Express.js


These days it is mandatory to have a cross-platform mobile version of any website online. If you are on a commercial endeavor, not having a mobile website could mean loss of revenue. The Internet, after all, is very serious business.

So what is in store for the awesome Node.js developers who have been cranking out amazing websites using the Express framework?

Is developing a mobile version of a website easy in Node.js? Will I need to put tons of conditions checks in the Jade templates to make my website mobile-compatible? Is it easy to use mobile frameworks with Node.js? These are some of the questions developers ask when it comes to creating a mobile-friendly website using Express.js.

Good news greets you today - Express.js framework in very mobile friendly because of its extremely flexible nature. You will not need to touch any of the HTML / Jade code you have written for the desktop version. You can have a completely separate codebase for the mobile version of your websites. In this article, I show you how to go about that.

The secret to easy mobile website development is Express.js' view rendering.

For those technical enough, all you have to do is detect mobile browsers and render a different view for their requests.

Now I will explain the process to whoever could make little or no sense out of the last sentence. First, here is the code to detect if the user is using a mobile browser:

function is_mobile(req) {
var ua = req.header('user-agent');
if (/mobile/i.test(ua)) return true;
else return false;
};

You will need to pass in the req Express object to is_mobile(). It will return true if the user is using a mobile browser.

Next, after you are done setting the Jade variables etc. in the route, you specify a different view for the mobile version:

if (is_mobile(req)) res.render('mobile/profile-mobi', { layout:'mobile/layout-mobi', title:title, name:name });
else res.render('profile', { title: title, name:name });

In case you don't want to use a layout, do this instead:

if (is_mobile(req)) res.render('mobile/profile-mobi', { layout:false, title:title, name:name });
else res.render('profile', { title: title, name:name });

Keep the mobile Jade templates under a separate directory named "mobile", and suffix the Jade file names with -mobi. The views folder of an example project might look something like this:

views/
home.jade
layout.jade
profile.jade
mobile/
home-mobi.jade
layout-mobi.jade
profile-mobi.jade

The -mobi suffix is optional and is recommended just to prevent accidental edits/uploads of the view files. We are not using .mobi because res.render() 'thinks' .mobi is the file extension and ends up with a missing file error. If you insist on using .mobi instead of -mobi, you will need to pass the full file name to res.render():

res.render('mobile/profile.mobi.jade', { layout:'mobile/layout.mobi.jade', title:title, name:name });

Mobile web frameworks for Express.js

Since views are completely separate from routes in Express, there is no restrictions on which mobile frameworks you can use with the Express. You can use any mobile framework or hack one up yourself. I have come across three popular choices:

jQuery Mobile - Built by the jQuery team. Uses JavaScript/HTML5/CSS3 to make HTML5 websites mobile-friendly. If you are familiar with Flex, think MXML. My personal choice.
Sencha Touch - Built by Sencha (the guys who created Ext JS). Uses JavaScript DOM programming to create mobile web apps. If you are familiar with Flex, think ActionScript.
jQTouch - jQuery plugin to transform normal websites to iPhone, iPod Touch, and Android friendly websites.

I prefer jQuery Mobile because it covers more devices than jQTouch, and is more familiar to me as a jQuery user than Sencha Touch, besides it works even on old browsers which don't support JavaScript. I may consider using Sencha Touch, if I get into exclusive mobile app development. But for now I don't have the time to dedicate learning a whole new framework.

A useful little utility for converting HTML to Jade is the aptly named Node.js module html2jade. Use it to convert HTML files to Jade templates.

Hope this post helped you plan and develop the mobile version of your website in Node.js using Express.js. Any questions, clarifications, suggestions etc., ping me in the comments.

2 Responses to “Mobile Web Development in Express.js (Node.js)”

  1. Jamie says:

    I’ve enjoyed tutorials on your website, but this one could use some work. One, the UA string test is hardly comprehensive, there is a much more comprenhensive pattern available at: http://detectmobilebrowsers.com Two, the view code is hardly DRY, I would do something more like `layout: (is_mobile(req) ? ‘layout-mobile’ : ‘layout’ )` three you give no option for the user to set which view they want. Which is what I am still working on. That said, I’m glad for the amount of tutorials you publish and make this comment to help others looking to solve the same problem addressed here.

  2. Justin Beckwith says:

    If you’re interested, I took a slightly different approach. I hooked up a piece of middleware that checks the user agent, and dynamically changes layout and the file name (adding a mobile postfix) if it detects a mobile device. This approach is nice because you can just res.render your normal view, and the middleware takes care of deciding if it should show the mobile layout and view. Check it out:

    https://github.com/JustinBeckwith/ExpressStarter

    Sadly since Express 3.0 removes some of the parent layout stuff in favor of block/extends, I haven’t upgraded the sample yet.

Make a Comment