The Most Popular Frontend Frameworks of 2016 – part 1

Nowadays there are several open source HTML/CSS/JavaScript frameworks available for front-end UI applications.

In this article I will point out some of the most popular ones and try to explain which one of them better worked out for me; considering the installation effort, set of components, extensibility and maintenance. Another important criteria for me and perhaps for many of you is how easy /difficult it is to integrate this framework in a web project.

The frameworks that I’m going to explore are presented randomly, beginning with one of the most popular, which is, of course, Bootstrap.

Bootstrap

Bootstrap-3

Bootstrap is originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.

Bootstrap was created at Twitter in mid-2010 by @mdo and @fat. Prior to being an open-sourced framework, Bootstrap was known as Twitter Blueprint. Originally released on Friday, August 19, 2011.

The main strength of Bootstrap is its huge popularity. Technically, it’s not necessarily better than the others, but it offers many more resources (articles and tutorials, third-party plug-ins and extensions, theme builders, and so on).

Installation / Integration

Downloading and installation of Bootstrap is in my opinion well explained and straight forward. For more details click here. There are different possibilities for installation such as Bower, npm, composer and of course manual by just downloading and including all folders your self. The last one works best for me, because I like to have control on what and where to include the components. If you are building an Asp.net applications, Bootstrap is probably included in the project. Also adding Bootstrap using Nuget packages in Visual studio is straight forward, see this link.

You might want to watch this movie where Microsoft experts explain using Bootstrap in Microsoft projects very well.

Components

Bootstrap contains many components such as buttons, labels, lists, panels, dropdowns, icons … ; but also many other composed components which can be found on third party blogs and sites. In general it is easy to embed bootstrap components into your page. An overview of these components can be found here. Although Bootstrap is quite good on documentation, I also can also mention some shortcomings: Bootstrap has focused a lot on the responsive grid and the number of various components, but less on how these components come together in forms. I have spent hours on finding the best way to put input controls in forms and believe me there are plenty of different ways. It is quite frustrating why documentations lacks clear explanation on how to create complete forms. Another frequent problem is when I try to create tables. There are several types of tables that can be created, but also here you need to Google a lot to find the right class names and ways of embedding tables in your page. So my tip for you: If documentation is missing try to Google first before using Bootstrap components. There are plenty of good examples available on other sites.

Using out of the box icons of Bootstrap will help you to implement quite fast from scratch, because most of what you need will be there for you. When downloading Bootstrap you will find out that there are two different sets of icons: Glyphicons and FontAwesome icons. There are a lot of duplications and until this day it is not clear to me why they have included two sets and usually I remove one the sets afterwards. After all, in real projects you might also want to create your own icon set and remove both of them.

Extensibility / Maintenance

Extensibility and maintenance of Bootstrap depends very much on the way that you integrate it in your own project. Bootstrap supports Sass and provides the source code as well. Of course you need to put some effort in learning Sass first, but this is in my opinion very much worth it. It will save you a lot of work afterwards. Including source file in your project will help you to include / exclude the components that you like to use.

Example of importing components in your main Bootstrap Sass file:

@import “bootstrap/alerts”;

@import “bootstrap/badges”;

Tip: If you are using Visual Studio consider using Web Essentials Plugin. Personally I really like this plugin because it helps easy compile of Sass files directly from Visual Studio by just saving the file.

bootstrapfiles

Leave a Reply

Your email address will not be published. Required fields are marked *