by

Current state

Since 2013, Tuleap User Interface has been based on Bootstrap 2.3.2. It really helps us by offering a wide range of components such as modal windows, styled forms, date picker… Because it’s a big framework and because Tuleap is not just a mini web application with only three different screens, it also helps us to enhance Tuleap UI in “one step”.

But we are in 2016 and we haven’t upgraded Bootstrap for 3 years now and this causes many problems:

  • the core of the framework isn’t supported anymore
  • third party libraries aren’t supported and we can’t find new ones too (e.g. date time picker)
  • our AngularJS apps (Kanban, Scrum planning view, Traffic Lights…) are based on an instable version of angular-ui-bootstrap which is unmaintained and undocumented
  • we can’t move forward when we design the Tuleap UX everyday because we’re forced to use old Bootstrap components

All these issues have convinced us to look forward: we **need** to upgrade Bootstrap.

Bootstrap or not Bootstrap?

Since last summer, we’ve known that it would not be smart to upgrade to Bootstrap 3 because the version 4 has been already announced. So we’ve decided to be patient and to wait for the release… But nearly one year after, we’re still waiting… and while we’re waiting, why not asking ourselves the crucial question:

“Do we actually need a framework?”

Thinking about it, there are many things included in Bootstrap we don’t use in Tuleap: grids (we use css’ flex), breadcrumb, scrollspy, carousel… and we’re always force to override some parts of the framework: popovers, modals, labels…

We reunited in front of a paperboard and we have listed pros and cons of Bootstrap 4 vs our own framework.

Bootstrap pros:

  • code is written
  • there are third party librairies
  • Bootstrap is used “everywhere”: huge community
  • wide and tested browser compatibility

Bootstrap cons:

  • we have to wait until an indeterminate date before the version 4 is release and this is super risky!
  • it’s H•E•A•V•Y
  • third party librairies are limited to libraries which are compatibles with Bootstrap
  • we need to override a lot of things
  • Bootstrap is used “everywhere”: we don’t have our own style
  • we won’t be able to migrate to version 4 in one step and maintaining two different versions of Bootstrap in Tuleap at the same time is hard

Tuleap CSS framework pros:

  • by building our own framework, we’ll force to have our own UI guidelines
  • it won’t be heavy, just what we need
  • we’ll have our own style
  • we’ll be able to include all kind of libraries
  • we’ll learn many things

Tuleap CSS framework cons:

  • we have to build it before using it and it takes time
  • we need to have more than one maintainer and for now, team lacks of this kind of developer

As you can see, the match is quite tight but we can’t let the release of Bootstrap 4 control the Tuleap roadmap. This is why we choose to get rid of Bootstrap.

What’s next?

We aren’t in the spirit of building something with unused components so it’s clear that we won’t build something entirely in a first step and use it only afterward. Furthermore, we know it’s kind of risky to flick the switch on a highly used Tuleap feature. This is why we choose as a first step to migrate from Bootstrap to our home made framework only the Tuleap administration part. This is where Bootstrap is the less used and where the traffic is the lower. We’ll build only the needed component and we’ll start to use them in the same time.

If you have any other questions on why take this decision or how we’ll do it, feel free to keep in touch!