Pros and Cons of Twitter Bootstrap

Click here to load reader

description

Bootstrap presents a convenient means of organizing your front-end code, allowing for more efficient implementation of a unified look across your website. However, it is not without its downsides, as introducing an external framework to your code base can raise a number of issues. In this article we’ll look at the pros – and cons – of Twitter Bootstrap, and how they affect development for your website.

Transcript of Pros and Cons of Twitter Bootstrap

  • 1. Pros and Cons of Twitter BootstrapBootstrap presents a convenient means of organizing yourfront-end code, allowing for more efficient implementation ofa unified look across your website. However, it is not without itsdownsides, as introducing an external framework to your codebase can raise a number of issues. In this article well look atthe pros and cons of Twitter Bootstrap, and how they affectdevelopment for your website.Pro Rapid Front-end DevelopmentBootstrap relies upon a grid layout that takes a lot of the guesswork out offront-end HTML code, and allows for responsive pages organized to matchyour data. This makes setting up an appropriate presentation layer a snap,allowing you to create a clean interface from the first few lines of code.The 12-column grid that Bootstrap provides is cross-browser compatible,meaning you dont need to waste as much time sorting out inconsistencies inthe display across multiple platforms, and relies upon well-separated sourceelements that can be quickly updated via JavaScript as your data changes.Con Auto-generated HTMLWhile this may not seem a major concern at first, it is important to note thatBootstraps ease of use comes at a cost, and that that cost is non-compliantwww.backand.com

2. HTML. The HTML generated by Bootstrap is very div-heavy, resulting in a highlynested and confusingly-organized source structure. Furthermore, Bootstrapcan rely heavily upon specific classes being assigned to your elements, whichare used as flags to enable various features of the framework. In many waysthis violates one of the core precepts of web design that your presentationshould be truly independent of your data. Both of these factors can conspire tomake troubleshooting and maintenance of your site challenging, and reducere-usability of your code.Pro Robust Development CommunityBootstrap has a large development community, including developersworking on everything from reusable components to ready-made templates.Bootstraps customizable nature means that you dont need to download theentire project if you only need a portion of the functionality, and there is agood chance that any non-included functionality has already been developedas a plug-in for the framework. The active community, coupled with the manyavailable templates, makes getting a Bootstrap-driven site running a quickand painless endeavor.Con Questionable Organization of Source CodeAs with any truly flexible front-end development framework, the Bootstrapsource code can be rather complex. While this is not necessarily a majorconcern, there are a couple considerations brought on by adopting Bootstrapthat should be taken into account. The first is that the memory footprint ofBootstrap can be fairly significant the CSS consumes around 126 KB of data,while the JavaScript source itself is 29 KB. This can increase load-times and,in some cases, be the major contributor to your sites responsiveness overslow connections. Another concern is the internal structure of Bootstrap theJavaScript source code is largely written without the use of the semicolon (;).While this is not a problem in terms of JavaScript coding practices, this lack ofsemicolons can cause Bootstrap to break when minimized using a tool suchas JSMin. This keeps the size of the Bootstrap JavaScript unnecessarily large,removing one of the common tools used to fight source code size. Finally, itsimportant to note that Bootstrap doesnt play well with SASS, meaning thatif you are driving your data back-end using something like node-sass you arelikely to encounter issues when presenting your data when the JSON gets tothe front-end.www.backand.com 3. ConclusionTwitter Bootstrap is a powerful tool that allows you to quickly create a visually-coherentwebsite that is cross-browser compatible and responsive. However,this flexibility and ease of implementation comes at a price namely thereadability of your HTML, violation of web development best practices, andlarge auxiliary files that increase your sites load times. One thing to note,though, is that most of the potential negatives of Bootstrap developmentare specifically focused on the code, and not the functionality. Bootstrapworks well when used as designed, and can save a lot of time on front-enddevelopment tasks at the price of a slightly larger website footprint. Thefunctionality implemented is often worth the bloat that is introduced intothe code base, and proper use of Bootstrap can mitigate or in some casescompletely obviate the most common complaints about the framework.www.backand.comContact InformationBackand [email protected]