New front-end platform for UCB - demo

Delivery hero IT, May, 2013

Continuous delivery

• Same page in two countries and three platforms
• Session sharing
• Feature switch for fall-back

Node.js

• Google's V8 Javascript engine, can run on the server
• Allows sharing code between client and the back-end
• Non-blocking IO

Backpocket.js

• Framework for building API-based applications
• Unified rendering code shared by front and backend
• Allow for single-page-like apps
• Retain search engine crawler compatibility
• Improve development velocity by not having to switch technologies

Features

• Sharing almost all application code
• Fetching the same models/collections on back and frontend
• Serializing module state into URL to reinitialize the app after refresh (eg filtering and keeping the filtered list after refresh)
• Automatically creating item views for collections and keeping them updated with the model state
• Lazily fetching additional data with automatic collection view updates
• Layouting system using regions
• Hierarchical view rendering
• Declarative view creation

Technology

• Node.js as a server
• NPM as a package manager
• Express.js as the server framework
• Require.js as the module loader
• Backbone.js for having a lightweight MV* framework
• Cheerio for a lightweight server-side DOM
• Handlebars.js as the templating language
• Bower as a front-end package manager
• Grunt for building, minifying the project

Deployment and integration

• Cabrero-o-manuel
• Nginx + upstart
• Session sharing POC - Wallet

What still needs to be done

• Extract core framework
• Improve modularity
• Enable communication with UB
• Proper test coverage
• Improve markup & styles (with modularity in mind)
• Make the API fast (currently ~ 1.5 seconds for 10 restaurants and ~5.5 seconds for about 130 restaurants)