Introduction
In software production, a framework is any tool that provides structure or the basis on which you can build upon. In general terms, a framework is an option to developing your code from scratch. As a front-end web developer, it is common to hear about JS Frameworks, UI Frameworks, or CSS Frameworks. While JS Framework provides you with some essential JS blocks of code upon which you can build your JS code, CSS Framework provides some essential CSS and HTML blocks of code that can be used to style your front-end app easily. However, these tools underlie every aspect of the computing environment.
As such an integral part of the discipline, some conventions help to use a framework with more success:
- Documentation is important.
- A framework is biased by design.
- Do not overwrite the framework code.
Documentation
When searching for documentation, ensure that you have a note of the version of the framework that you are using. For example, if you are using Bootstrap 4.6, you will be searching for https://getbootstrap.com/docs/4.6/.
Documentation language can be difficult to understand or access at first, as it is often terse and may not always include code examples. Understanding these resources is an indispensable part of working with modern web applications.
Framework bias
A framework is built around a set of assumptions about the needs of its users. Not all of these assumptions will always apply to your project, and you may not agree with some. You do not have to agree with all of the biases of a framework, but it is important to be aware of them.
For example, in many CSS Frameworks, the element <i> is used to show an icon. Semantically, this element represents italic text in a similar way to <b> which represents bold text. This represents an assumption about the use of this element on behalf of the developer by the framework.
Understanding these biases is being aware of The X Way of achieving a particular result. For example, achieving a responsive layout can be done in many different ways using CSS & HTML. However, by using Bootstrap, you would be expected to achieve this in The Bootstrap Way.
Extending a framework
A framework is only a starting point to creating an application, providing a layer of assistance and structure to build on top of. As such, you will need to customise, configure and extend a framework to get the best out of it.
When these situations arise, changes should never be made to the framework code itself - unless you have forked the framework repository and intend to contribute changes to the framework project itself.
Editing framework source code creates a number of problems:
- The framework cannot be updated in future without destroying your changes.
- Documentation is no longer accurate to your version of the framework.
- The support community will be unable to help as they cannot see your changes.
Instead of editing the source code, we can either configure or extend the framework. Frameworks should expose important options or settings for configuration - and will have The X Way to extend them too.
Why do we use frameworks?
If you have a CSS file that you add to most projects to speed up development, you are already using a CSS Framework. At their most basic, they are there to save time and effort. At their most complex, they enforce or encourage best practices.
Without CSS Frameworks, for example, every project would require CSS to be written from scratch. However, many modern web applications share similarities - not only in their visual style but also in their functionality and user experience. These challenges have been tackled many times, with the most popular solutions represented within CSS Frameworks.
Providing useful styles in a predictable class name system allows important styling tasks to be performed quickly. This leaves more time to work on functionality or implement design changes.
The major frameworks can be described as ubiquitous - meaning that they are so common that most developers will be aware, or familiar with them. The ability to transfer skills from one project to a completely unrelated project is another key benefit of using a framework. If two employers use a single framework, mobility between these companies will be easier for a developer working at the other.