Upgrading Angular app to Twitter Bootstrap v3

We upgraded to the latest version of Twitter Bootstrap v3 a few months in the summer of '15.
We were using a mix of bootstrap.js, angular-strap and ui-bootstrap for various widgets. In some cases they were conflicting with each other. In addition we had customized some 3rd party libraries, (in some cases for reasons no longer relevant). So as well as upgrading Bootstrap we wanted to cleanup and reduce our library dependencies.
We use Flatui a ui style library which sits on top of bootstrap.

Here's what our tech stack looks like now:

  • Upgraded to twitter Bootstrap v3.3.5 using the style files only (not bootstrap.js)
  • Upgraded to Flatui pro 1.3.2 (for css and js for checkbox/radios only)
  • Upgrade ui-bootstrap to v0.12.0. Standardized on ui-bootstrap for both <select> and dropdowns (as well as other widgets such as dialogs). This means we don't need twitter bootstrap.js nor do we need angular-strap files any more.
  • So far we have removed net 11 3rd party library files (removed 12, added 1). Nice.
  • We reviewed customizations and so far have found none we need to keep any more.


Our approach

  1. research & review
    • review our current library usage. We were using ui-bootstrap, twitter bootstrap, angular-strap and more. Thats too much overlap in similar functionality. We needed to simplify.
    • research changes made to 3rd party libraries; we reviewed all our 3rd party libraries related to this change; identified if will upgrade or not; identified customizations made for upgrades
  2. upgrade the styleguide
    • rather than jump straight into the main app we wanted to have a sandbox to confirm the changes worked outside of the app
    • thankfully we had a styleguide already so this would be our sandbox where we'd upgrade and test everything from typography to forms and layout to widgets
    • test cross browser
  3. change markup in the main app
    • upgrade to the new libraries and remove any unused libraries
    • fix any breakages that prevented easy navigation e.g. all dropdowns were busted so needed a fix
    • fix controls throughout the app e.g. fix all checkboxes, then all radios, then selects, alerts, forms and other such widgets
    • fix main layout issues e.g. in account pages, then home pages etc
    • fix typography
    • periodically test cross browser (Chrome, FF, IE10 & 11, Safari)
  4. run e2e tests; we have over 2k e2e tests which can be run across a number of browsers on browserstack; once the time was right were ran these and fixed bugs
  5. review and bring forward customizations
    • this was one I had major concerns for but actually we found we don't need any of the old customizations; thankfully many changes were no longer necessary. We've had Product and QA test to confirm and our e2e tests also provide a level of assurance that such changes were not needed.

We had at least 2 devs working on this effort, sometimes three so the work in step 3 was parallelized.

Some things we learned:

  • Flatui pro 1.3.2 comes with a dist folder with flat-ui-pro.js in it. But that file includes jQuery UI Core 1.10.4 and Bootstrap v3.3.1. Why? I don't know. But I found out it did when it conflicted with Bootstrap v3.3.5 we are using. So I recommend just include only the js files you need (only 2 really checkbox and radio)
  • ui-bootstrap:  we're still on angular 1.2.x for now so using ui-bootstrap v0.12.1 (not latest). We'll upgrade to latest ui-bootstrap when we upgrade to Angular v1.3 and above.
  • we standardized on ui-bootstrap for dropdowns and selects
    • ui-select directives for selects and don't need angular-strap for that any more (thats all we used it for). Angular-strap and ui-bootstrap have a lot of similar functionality so we're eliminating one and standardizing on ui-bootstrap. We removed angular strap.
      • note: ui-bootstrap includes behavior for Select2. So no need to include Select2 library separately
    • we also use ui-bootstrap directives for dropdowns thus we don't need twitter bootstrap javascript any more either

We touched almost every view file, changed implementations for controls and redid our style guide. I originally estimated close to 300 hours for the work and thought it would be close. It took approx 40% more time than estimated. Partly this is because there are so many unknowns for a change like this. You can be making great progress and then end up banging you head against a wall for a day or two. As I mentioned earlier, we also took the time to cleanup our tech stack removing 11 files. A significant cleanup and simplification. Worth the extra effort.

Job done!
horray
....except Twitter Bootstrap v4 is ont he way! where "there are a ton of major changes...". Oh boy. 

Comments

Post a Comment

Popular posts from this blog

deep dive into Material UI TextField built by mui

Image
The Material Design system is a design system used to create consistent digital experiences across platforms such as android, web and ios. Includes: a color system a typography system a shape system a grid system it addresses motion and lots more Also includes Material Theming which makes it easy to customize Material Design to match your brand. Material Design is not just a set of guidelines it is a whole ecosystem. Material itself stopped maintaining it's react implementation and recommends opensource versions.  A very popular open source implementation is  MUI ,  a react component library  built to implement Material Design . Bills itself as the "worlds most popular React UI framework" and at this time has 1.2M weekly downloads on npm and used by over 750k projects on github (did I mention it's very popular?).  Note: there are other react component libraries implementing bootstrap and ant design for example, so up to you and your design team on what you choose. 
Read more

angular js protractor e2e cheatsheet

Many from the protractor test suite category detailed task syntax example load page load a page browser.get('yoururl') browser btn actions browser back/forward browser.navigate().back() OR browser.navigate().forward() access elements on page See Protractor API list and examples from Protractors test suite access by angular ngmodel name (must match ngmodel in the html) this is the preferred approach element(by.model('person.name')); access by the css id on the page e.g, #user_name (but this can be brittle) element(by.id('user_name')) access angular binding to get generated value i.e. for {{}} element(by.binding('person.concatName')); access angular repeat list data (must match repeat stmt in the html) See Protractor test suit l
Read more

react-router v6.4+ loaders, actions, forms and more

react-router  react-router is used for in app single page app navigation, we configure routes for pages in the app to map to components react-router has over 1bn downloads, its an industry standard (but there are others e.g. Nextjs router) many apps use react-router, many on v5.x the new react-router 6.4.x the newest major version of react router v6.4 is a significant enhancement which adds a lot of new features. react-router v6.4 offers new features to load data (loaders) and handle actions (actions).  It's done gone all Remix-y which makes sense because the same guys wrote both. eliminates a lot of boilerplate code to fetch data in useEffect() and set various loading states put your data load and update logic in react-route components instead of custom code unlike Remix, react-router v6.4 is still just all on the client (not server like Remix) paradigm shifts Lets start with a couple of high level ideas; "back to the future" so to speak OR "what's old is new ag
Read more