Potential migration to "purpose-built" libraries such as TailwindCSS and TippyJS

[eightballocto]

Let me preface this by saying that this is an extremely bold proposal, and that in no way should this be considered a "feature request" or even considered (yet?).

I brought this up in a recent Gitter conversation, but we may benefit from switching to smaller, more purpose-built libraries like TailwindCSS and TippyJS.

Personal Opinion

Bootstrap is only so powerful and becomes a detriment to website performance as a website grows in size. Plus, it's pretty limited with its capabilities once you get to the large-scale stuff.

@jywarren brought to my attention, however, that it does provide for consistency across repositories, and that may be one case for not making the switch at all.

How this "switch" would go over

This is what I am most concerned about and what kept me from even starting this discussion in the first place; I have no real "roadmap" of what the migration would look like, only a mere idea that we could potentially shift away from Bootstrap to have some improvement in performance.

What this discussion should entail

This issue should cover discussion of three points, in my opinion, anyway—this is not all-inclusive.

1. What would be the pros?
2. What would be the cons?
3. What would be the cost in terms of labor and time?

Feel free to suggest more sub-topics to discuss, but in the meantime, I'd think community discussion over this would be most valuable.

[anirudhprabhakaran3]

Switching over to Tailwind could be a great idea. The approach would give us a lot more flexibility in the visuals of the website. However, it would take a long time to implement that. There is also the factor of code readability: to get something done in Tailwind, we might have to add lots of classes to an element, and that could make the code kind of ugly. But maybe Tailwind is the way for the future?

[eightballocto]

That's my biggest worry: the technical debt could prove to be a lot of work. It could end up being one of those projects that ends up not being a steady rollout, but rather one that stays in its own set of branches and then deployed at some unspecified time.

[anirudhprabhakaran3]

We could try to make like a rollout schedule, where we update some portions and deploy. We'll also need to get more people involved in this; could lead to more first-time contributions.

If the maintainers think the schedule and changes are good, we could try it out. Another point of discussion should be whether we should even make the shift. The issue with bootstrap performance is there, are there any other advantages? Getting more advantages could give us a better idea of how to make the shift

[RuthNjeri]

Hi @eightballocto and @anirudhprabhakaran3 👋🏾

Thanks for sharing your ideas @eightballocto, from the issue description, what stood out was that the motivation for the switch is that we could potentially shift away from Bootstrap to have some improvement in performance

In relation to the Bootstrap performance within the Public Lab platform;

1. Are there certain pages that you have noticed have a slow performance? Is the slow performance related to Bootstrap or many queries within those pages?
2. What is the performance percentage that Tailwind and Tippy offer against Bootstrap... they are x% faster than Bootstrap...
3. How is the learning curve for Tippy and Tailwind?
4. What are some of the drawbacks of Tippy and Tailwind? Yes, they improve performance but are they stable? Are they secure?
5. Tailwind and Tippy are entirely new libraries we are introducing, do they meet the criteria for integrating new libraries within the platform? This past check-in has a list of ideas to look into in relation to this.