JSFoo 2014

This session will help developers apply practices that we have used at stayzilla.com to make our website lightweight. It will also give an overview of how we have used node js to build a production ready web application

Outline

The motivation behind building our mobile website on nodejs was to make it lightweight and also to easily integrate with our php codebase by consuming json data. Also building a seperate mobile website gave us the option to create a mobile first design and therefore make the user experience better.

1. Non Blocking IO

• Callbacks with Async waterfall & parallel
  * parallel calls made to search API to speed up response times

2. Clustering

• Launching a node process per core using the node cluster module

3. Reuse of Templates/Views

• Handlebar templates reused on server side and client side where required
  * Template to render search results is reused on server side (for SEO) and client side
• More views rendered on client side for speed

4. Overlays

• use of overlays in core flows for quick response to the user

5. lightweight client side libraries

• zepto instead of jquery
• no css framework (all native)
• avoid heavy javascript plugins (take just what is needed)
  • loading scripts inline to speed up initial page load time
  • use of image sprites

6. Build/deployment

• GruntJS used for builds

• JS/CSS minification & cache bursting
• RequireJS compiler
• SASS compiler

7. Traffic served
   • An average of 3,500 unique visitors a day
   • Loads in ~ 5s on a 3g connection

Speaker bio

I have worked on stayzilla’s mobile site since it has gone live and have a good understanding of it. I ensure that the practices we have followed initially are still being followed today.

I have about 4 years of experience in web development.

Links

• http://www.stayzilla.com/?desktop=false

Slides

http://www.slideshare.net/arvind_stayzilla/building-a-lightweight-mobile-website-using-nodejs