Fast prototyping apps using AngularJS, RequireJS and Twitter Bootstrap
Twitter Bootstrap
-
Upload
blstream -
Category
Technology
-
view
354 -
download
4
description
Transcript of 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 :-)