The invention of the framework
Building web applications can be a complex process without some element of structure. A framework provides that structure, enabling developers to build programs for specific applications.
When creating digital experiences, frameworks are important because they can help streamline the application development process, making building functionality for digital experiences easier.
Frameworks are divided into two types: front-end frameworks and back-end frameworks.
Back-end frameworks
The first websites were static web pages built on flat HTML text files. These files were then sent via an FTP program to a web server directory. This was the early 90s, and it wasn’t until 1993 that the Mosaic web browser appeared to support images and provide Server Side Includes (SSI) to allow you to separate headers and footers from the main website content.
By the late 90s, mature full-stack frameworks began to appear, such as .NET and Java. Eventually, in the early 2000s, Symfony, Laravel and Ruby on Rails also joined the fray and helped developers to create more modern web pages and services.
Ruby on Rails, Symfony and Laravel
Ruby on Rails was launched in 2005, providing a default structure for databases, web pages and web services. As an open-source framework with a community of contributors, it continued to develop and eventually formed the foundation for websites we know today including Twitter and CrunchBase.
Symfony, which was also released in 2005 and followed the MVC pattern, speeds up development with the help of open-source PHP projects. Laravel is another PHP based framework that was released in 2011 and includes an elegant syntax which is meant for people who love beautiful code.
Each of these languages helped shape today’s modern web frameworks; however, they do have limitations. Many consider Ruby on Rails to be somewhat slow, Symfony has some security issues and isn’t fit for smaller-scale applications, and Laravel has a difficult learning curve.
Decoupled templating
Eventually, developers found it necessary to add a layer between what they were creating and what end-users saw; this was known as decoupled templating.
Decoupled templating allowed front-end developers to code user experiences and user interfaces for websites using templating languages that were either compiled at runtime or converted into a mix of back end code and front end code.
This divided the back-end frameworks into tools that allow for the development of back-end features and front-end experiences.
(Headless CMS: The Ultimate Guide)
Where we are today
These frameworks grew and matured, and we eventually saw the emergence of SaaS platforms that not only provided ready-made back-end functionality but also allowed the developer to configure and modify the front end using a templating language.
This innovation gave developers alternatives to the existing .NET and PHP-specific frameworks that initially provided a blank canvas where everything was developed from scratch.
Today, those .NET and PHP-based frameworks see decreased adoption as developers look to ready-made features and spend their time designing experiences for conversions. However, while back-end logic is still necessary, it has some limitations in creating end-to-end digital experiences.
For example, there are only a certain number of ways to build a blog. However, what differentiates one blog from another is its presentation layer and how you capture information, which can all be achieved using front-end frameworks.
Front-end frameworks
Eventually, the limitations mentioned above, further development of web browsers, and the need to simplify code gave rise to front-end frameworks.
Front-end frameworks provide a base to build while still enabling flexibility in front-end design. They are relatively recent developments, and the primary reason for their creation was the need to interact much more closely with the browser than was historically available.
jQuery was one of the original front-end frameworks. It was developed in 2006 so that developers could manipulate the Document Object Model (DOM), a tree structure that represents all the elements of a webpage.
What it was able to do was simplify the syntax required to manipulate the DOM elements. For example, finding and manipulating a tag (DIV, H1) and changing attributes like color and visibility.
It also provided a way for events to be handled and manipulated. Finally, it allowed the developer to separate JavaScript and HTML, making it simpler to manage the interactions between the framework and the website. jQuery had been a popular JavaScript library, but handling data consistently across shared views was difficult.
More recently, front-end frameworks have developed tremendously, thanks to the work of modern tech companies. Some of the more popular frameworks include Angular, Vue and React.
Angular, Vue and React
Angular was first developed by Google in 2009 and is still maintained by them. Despite a steep learning curve, it enables developers to create highly complex web applications.
Since code is well structured and easy to modify, Angular removes the tight coupling between application components.
An open-source project created by Facebook, React provides an ideal user experience. It can be rendered on the server or client-side. It features reusable components, which mean developers don’t have to rewrite code constantly.
Vue was created as a fork of Angular and is a framework used for building user interfaces. Vue took elements from both React and Angular and gained popularity due to excellent documentation and the fact that it is a small framework that is easy to learn.
Gatsby
Gatsby is an open-source static site generator (SSG) based on the React framework. It is used to build static sites, Progressive Web Apps (PWA) and plays a critical role in the popularity of Jamstack.
New age frameworks like React, Vue, Angular, Gatsby, and so on have been created to take advantage of the browser functionality because back-end frameworks cannot talk to the browser.
The next generation frameworks: Stencil.js, Svelte, Polymer.
We’re increasingly seeing the adoption of web component frameworks. These are frameworks that use a set of platform APIs to create new custom and reusable HTML tags that can be called within web pages and web applications. These frameworks adopt the web component standard which allows them to work on all modern browsers and can be used within any JavaScript library or frameworks that work with HTML.
These frameworks overcome a large issue with existing frameworks, being the size of the run time and the speed and the compute required. The new frameworks compile into highly efficient JavaScript that is small in size and quick to run. As an example, Stencil.js is a compiler that generates web components and custom elements that are interoperable that work across frameworks. In the same way, Svelte compiles your code into tiny, framework-less vanilla JavaScript that makes your application start quickly and run quickly.
Why use a front-end framework?
Front-end frameworks give you the ability to make the system much more maintainable. Without front-end frameworks, then web applications might fall victim to spaghetti code which can be challenging to maintain.
Back-end frameworks and languages are not designed to work across modules, and you want to keep them modular, so they encourage maintainability. Modular architecture allows front-end developers to focus on what they do best, taking the data and displaying it.