Over a million developers have joined DZone.

The Bootstrap Framework Controversy ... Should You Use It or Not?

· Java Zone

Discover how AppDynamics steps in to upgrade your performance game and prevent your enterprise from these top 10 Java performance problems, brought to you in partnership with AppDynamics.

Released back in 2011, Twitter’s Bootstrap framework is one of the most popular – if not the most popular – front-end website development framework out there, at least in 2015.

And not without a reason. Bootstrap provides a really easy to grasp way of crafting your site designs and thus allows you to create great looking and mobile-optimized builds in hours, instead of days.

Bootstrap should you use this framework

That being said, there’s a lot of conflicting opinions around Bootstrap with almost equal number of people on both sides of the barricade. Some experienced developers (like the guys over at ThemeShaper, for example) have addressed various issues with the framework and pointed out why it might not be the perfect web development solution after all.

So today, let’s look into some of the framework’s known traits, both in terms of the positives as well as the negatives. However, I’ll try not to sway your opinion in any direction by telling you what I consider the right solution here – in terms of using Bootstrap or not – but instead, I just want to provide enough insight for you to be able to make your own decision.

[Bad] Bootstrap was never meant to be used as a website development framework per se

Bootstrap was originally built for prototyping

Hold on, don’t shout at me yet, please!

The thing is that Bootstrap was built at Twitter, so that the developers could work faster by using a standardized interface to present their creations.

In other words, if you are a developer working on some cool feature at Twitter, you can present what this feature is through Bootstrap very quickly, without the need to spend time creating a cool web appearance from scratch.

This makes Bootstrap a really purpose-made tool. A purpose that’s not entirely in line with the standard concept of web development.

One of the consequences that this brings is that everything built with Bootstrap has a somewhat similar appearance to an extent. Of course, you can modify the files and style sheets by hand, but this questions the purpose of using the framework in the first place.

[Good] Bootstrap is TRULY open source

This may sound basic in this day and age, especially since we’re surrounded by various open source platforms. However, it has to be pointed out that Bootstrap’s straightforward license has also played a role in the framework’s popularity.

Great Bootstrap following from developer community

Bootstrap is very well maintained framework

Whereas most open source licenses go on for pages of never-ending lawyer talk, Bootstrap’s MIT license is only 159 words long, and basically allows you to do whatever you desire with the framework once you obtain a copy of it.

This, above all else, means that you can use it as the base of a client project that you can then sell to the client without worrying about anything.

And of course, there’s also the main GitHub repository, where you can participate in the community and contribute to the platform itself.

[Good] Bootstrap makes working in teams easier

One of the main advantages of Bootstrap is that it lets coders code and not worry about what the result of their efforts is going to look like. On top of that, we also have the docs, which are really well-written and detailed-enough to bring anyone up to speed with how to work with the framework.

What this means in practice is that whenever a new person joins the team, they can be easily taught all the ins and outs of the platform. The docs really seem to provide an answer to virtually every question imaginable regarding the inner mechanisms of the framework.

[Good] Bootstrap provides consistency and handles the mundane

One of the more mundane aspects of the website building process is having to prepare the styles for various form elements … drop-downs, buttons, input fields, pagination, alerts, and so on. This is one more thing that Bootstrap takes care of for you.

And most importantly, all styles are consistent throughout the platform and mobile-friendly. They actually look quite nice even despite their simple nature.

Because of this, you can divert your time to working on something else, something that’s more exciting.

[Good] Bootstrap gives you the grid

Bootstrap Grid examples

The 12-column grid is by far the most recognizable element of Bootstrap. In short, the content of a Bootstrap site is divided into 12 columns that are fluid and responsive. Also, there are predefined classes that make using the grid easy to grasp and fast.

But that’s not all, with the grid, you can also adjust how your site is going to look like on smaller vs. bigger devices – it’s not left for the framework itself to decide.

All this makes the grid possibly the best way of building mobile-friendly layouts these days.

But there is a downside…

[Bad] Bootstrap is bloated

There’s just no other way to say this. The files that Bootstrap generates are rather big (both in terms of kilobytes and in the sheer number of lines of code).

Of course, you can erase things here and there – the things you don’t need – but it kind of defeats the purpose of using a framework in the first place. I mean, if you have to go back and spend time under the hood, why not build something from the ground up yourself? And if you do decide to tweak things on your own, this brings the issue of updating the platform (more on this in a minute).

But the size of the files is one thing. Then, there’s also the size of the DOM structure that Bootstrap produces.

For instance, when working with the grid, you’re forced to fiddle around with countless different elements and their classes just to arrange the structure of the layout.

I think the best summary of Bootstrap’s logic came from a tweet by Ian Devlin:

<blockquote class="twitter-tweet" lang="en"><p>&lt;div&gt;&#10;  &lt;div&gt;&#10;  &lt;div&gt;&#10;  &lt;div&gt;&#10;  Twitter Bootstrap&#10;  &lt;/div&gt;&#10;  &lt;/div&gt;&#10;  &lt;/div&gt;&#10;&lt;/div&gt;</p>&mdash; Ian Devlin (@iandevlin) <a href="https://twitter.com/iandevlin/status/484966919779676161">July 4, 2014</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

[Bad] Updating Bootstrap framework can be a pain

One of the strengths of Bootstrap is that it’s constantly under development and that the community is very lively. This results in frequent updates. However, the problem is that those updates are not always that easy to integrate.

For instance, if you keep your files where the Bootstrap files are, you might have to think twice before overwriting anything. And if you’ve made modifications to the core files – a very likely scenario due to the architecture of the framework – then it’s a whole other level of trouble.

What this means for many projects is that the version of Bootstrap they’ve been built with becomes their final version of Bootstrap.

What’s your take?

That sums up what I had to say about the platform. As you can see, there are some advantages and disadvantages when using Bootstrap.

So I’m curious to know, what’s your verdict? Are you a fan of Bootstrap’s and plan on using it for your next project?

The Java Zone is brought to you in partnership with AppDynamics. AppDynamics helps you gain the fundamentals behind application performance, and implement best practices so you can proactively analyze and act on performance problems as they arise, and more specifically with your Java applications. Start a Free Trial.


Published at DZone with permission of Saul Zukauskas, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}