Front-end frameworks – introduction (part 2).

Benefits of front-end frameworks. When it is worth to use them?

Main advantages of front-end frameworks usage are listed below.

1. Responsive design support. Currently one of the most important features of modern, user-friendly website is responsive interface which adjusts to screen size on which it is displayed. However creating website this way is not easy, especially when developer is not familiar with such approach or/and it is necessary to create complex portal, with sophisticated layout. In such case it is worth to consider framework usage; virtually all of them support responsiveness, providing ready-made classes/styles or components. In terms of RWD, possibilities of frameworks like Bootstrap or Foundation are very extensive, plus solutions they are using are proven and continuously improved.
2. Shorter development time. One of the main ideas that stands behind frameworks (not only front-end ones) is to equip developer with ready-made solutions which he can implement (and possibly – adjust), instead of creating them completely from scratch. This results in shortening time used to develop website or application. In case front-end frameworks particularly valuable are solutions that refer to aforementioned responsiveness support; dynamic ready-made interface elements, available usually as plugins for popular JS libraries, might also turn out to be useful. However it is important to keep in mind that using framework doesn’t automatically mean that development time will be shortened. Before deciding on framework usage it is worth to consider, will and to what extent – in particular project – possibilities offered by particular framework can be used. Without such analysis it might turn out that real development time is longer because developer didn’t have a chance to use possibilities available in a tool or was forced to modify them significantly in order to meet project specification.
3. Ready-made components and plugins. Most of the front-end frameworks contain series of ready-made elements/mechanisms that can be used in the project. What’s important, these are components that are frequently used in various web projects. For example Bootstrap offers ready-made plugins for fast implementation of dynamic navigation menu, modals, sliders, accordions or tooltips. It’s extremely valuable help for less experienced developers that wish to use such solutions in projects they perform (gaining on novelty and attractiveness), but they don’t have proper knowledge or time to prepare them from scratch. In such cases, before deciding on particular tool, it is worth to analyze and check which one offers the biggest amount of required components.
4. Prompt prototyping possibility. This benefit is outcome of the above points. Frameworks offer ready solutions that can be implemented quickly. This way it is possible to quickly prepare a prototype of application’s interface or complex website. Such prototype can by 100% interactive, what increases its value. It allows verifying in practice assumptions made, responsiveness or usability of solutions used.

Disadvantages, so what to pay attention to?

Using framework in a project is related with certain cons that should be always taken into consideration.

1. Graphic design should be prepared in accordance with possibilities and characteristics of particular framework. For example in Bootstrap two-column-grid is a standard plus there are pre-defined styles imposed for the interface elements (buttons, forms, pagination, menu). In case we are dealing with highly unique layout (which is outcome of the requirements provided by the clients), it will be necessary to modify all the elements mentioned above. In practice, this means extra time required to implement and test the additions: the longest the bigger difference was between graphic designs and the styles imposed by particular framework.
2. Greater weight, what increases project’s loading time. Usually frameworks consist of few significantly extended files, which in total can weigh even hundreds of kilobytes. Despite the fact that framework creators try to provide optimized versions (compressed) of their tools, these are still large files. When using complete (containing all components) frameworks, it might turn out that their loading time noticeably extends time of entire page load. It is especially important in case popular websites with high traffic and in case mobile users. Increasing website’s loading time (e.g. on EDGE connection) has negative impact on users usage comfort and generates higher maintenance (transfer) costs.
3. One of the frameworks’ advantages is their accessibility and ease of use. We receive ready solution, often with huge possibilities and well-prepared documentation supported by examples. Based on that, fairly quickly, as from the Lego blocks, it is possible to build applications and websites. Problem appears when it is necessary to modify default interface and framework does not offer ready solution. Not all of those tools’ users are capable to meet such challenge as it requires having really extensive knowledge in the web technologies field. When commissioning a project to inexperienced or unchecked developers it might soon turn out that instead of benefits and possibilities we will encounter issues and restrictions. What is more, even in case experienced developers, interfering with certain mechanisms offered by framework might significantly increase development time.

Summary

Front-end frameworks are ready-made tools that when properly used, allow for fast development of modern and responsive web interfaces. In the examples mentioned above, these are highly extended tools that offer huge possibilities for their users.

Properly selected and skillfully used framework gives an opportunity for fast and effective project completion. Frameworks are also great for prototyping (prototype can be ably transformed into complete product).

It is however worth to remember that graphic designs should take into account grid and styles imposed by a framework. Otherwise it might turn out that instead of using framework with all its benefits, it will be first necessary to customize it heavily. In case decision about framework usage have already been taken, it is important to be aware, that using all its components will increase website’s weight and extend its loading time.

Before deciding on framework usage it is always worth to analyze its strong and weak sides. Finally it is important to verify knowledge and experience of developers, to be able to use all included possibilities to maximum and in the same time – minimize risk of potential issues occurrence.