Twitter Bootstrap

Migration to Twitter Bootstrap in 7 years old web application

Leszek Gruchała @LeszekGruchala !2013

2

What is Twitter Bootstrap?

▪ helps build unified, responsive layout

▪ same look & feel on all* devices

▪ support for modals, tooltips, alerts and many more (bootstrap.js, jQuery needed)

▪ precompilation with Sass/Less, custom builds

▪ version 3

▪ mobile first

▪ broken compatibility with v. 2 (changed class names, some removed)

▪ font images

▪ huge community with lots of plugins (i.e. datepicker)

3

Why we decided to move in?

▪ Main goal

▪ integration with parent system build by another company, layout unification across all connected separated applications

▪ Secondary goals

▪ code clean up in an app build since 2007

▪ two business views in our app: former build in Freemarker, latter in JSP

▪ jsp + jquery 1.2, ftp + jquery 1.3, tons of images (started with IE6!), ftl, jsp, 2 MB pages, many 1000 lines .js files

▪ optimisation of resources, page load, abandoning server side view generation

4

The light in the tunnel

▪ De facto two integration phases ▪ I phase

▪ we started to integrate with parent system even though it wasn’t build yet, causes problems with communication

▪ no layout definition of parent system to rely on yet ▪ we as first child system to integrate with ▪ no more code duplication, unified code base between two business views in our app

▪ II phase ▪ clearly defined layout and its components ▪ bigger customer’s focus on User Experience ▪ no more Frontend on the Backend

5

I phase

▪ changing 80% of HTML code ▪ building from scratch JS code on top of jQuery 1.8 ▪ building with Bootstrap, but leaving original scheme and page organisation ▪ migration of web app step by step required building backward compatibility for common JS code ▪ no more images ▪ Interesting facts of old code

▪ few implementations of same things across application (i.e. tooltips) ▪ every possible way of building JS code ▪ bit of mess with included JS files to respective pages ▪ page size reduction 2MB -> 0.5MB ▪ JS code reduction by 60%

6

II phase

▪ once again building HTML code, but with unified layout across all integrated applications

▪ Frontend does Frontend ▪ on Backend only page access verification and building simple

HTML structure ▪ async FTW! - DirectWebRemoting wrapped by Promises (q library) ▪ rendering - based on JSON with Mustache

▪ no CSS on our side, provided by parent system (rare usage of style=„” on our side)

7

Results

▪ great User Experience ▪ all connected web applications look the same ▪ end users believes its single application ▪ smoother, faster, better :-)