Why we choose to get rid of Bootstrap and build our own framework

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!

Share this post

Comments (5)

  • anon

    www.chrisforrence.com

    Sounds ambitious, but it definitely has an appeal to it!

    That being said, I'd like to quote from the blog announcement for the first Bootstrap 4 announcement (http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/):

    > When we shipped Bootstrap 3, we immediately discontinued all support for v2.x, causing a lot of pain for all our users out there. That was a mistake we won’t be making again. For the foreseeable future, we’ll be maintaining Bootstrap 3 with critical bug fixes and documentation improvements. v3 docs will also continue to be hosted after v4’s final release.

    Based on that, coupled with your desire to build a custom framework, you may want to consider using the pre-compiled version of Bootstrap 3 (Sass). On one hand, it would merely defer the question of v4 vs custom framework and essentially force you to migrate Tuleap's code base twice. On the other hand, it gives you time to get the right people on the team, it allows you to start migrating now, it allows you to selectively include elements, and it gives you practice working with CSS precompilers.

    Jun 01, 2016
  • anon

    Hi Chris, thanks for the idea :) A big issue, as you mentioned, is the double migration that we would have to do. Tuleap code base is quite HUGE (note the capital letters) and having to do the work twice isn't feasible. And we if we wouldn't do the second step (BS3 to BS4), we would be stuck to an old version of the framework, again… I know they'll maintain the framework, but developers of third party libraries will definitely work on Bootstrap 4 libraries, not Bootstrap 3. About the custom build of Bootstrap 3 we could compile, I agree with you it can be a quicker solution. But when I say that we have to override parts of the framework, it's not just the CSS part but also the Javascript part (e.g. you have to write some Javascript code to close a Bootstrap popover when you click outside). For sure coding our components will take more time at the beginning, but it will also prevent us to not lose extra time in the futur, especially on the Javascript part. Finally, one of the best thing I like when thinking about our framework, is that it completely works alongside Bootstrap 2 (or 3 or 4). So if one day we aren't confortable with it, we'll always be able to drop it and use Bootstrap 4 (if it's released one day…). So yeah, there're no good or bad solutions, just solutions and different ways to achieve our goal: having a stunning User Experience :)

    Jun 01, 2016
  • anon

    klufas2016.com

    Be sure that you have a proper testing strategy as well; one of the things that Bootstrap mostly eliminates, is the headaches with older browsers. Which browsers do you intend to support? I'm not 100% familiar with tuleap so I can't say for sure you are ie10+ only and obviously chrome / safari / firefox / etc.

    -Nick

    Jun 01, 2016
  • anon

    Hi Nick, We support the most recent version of Chrome and Firefox. And for IE, only the version above > IE11.

    Jun 01, 2016

Leave a comment

To prevent automated submissions please leave this field empty.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.