The web is filled with different types of content for all audiences. People use it to watch videos, file taxes, interact with communities, or even share cat pictures. Web frameworks are one of the main technologies that make the web what it is today. But what exactly are web frameworks? Why do Developers like them so much? And are they really necessary? To give you a good idea of what they are, we will have a look at the three famous web frameworks: Angular, React, and Vue.js. But before that, let’s go back in time just a little bit!

History of the web

1989
  • The creation of the World Wide Web – The first version of the internet
  • Static, non-interactive pages
  • The core language was HTML
1990 - 1994
  • Still static webpages
  • It was possible to define color, sizing, and spacing
  • Languages used were CSS and HTML
  • Back-end programs were used to make pages interactive (but it was far from perfect)
1995
  • The creation of the first JavaScript (originally known as Mocha and LiveScript)
  • Dynamic webpages

After the development of the first JavaScript, we finally had the three cornerstone languages of the web: HTML, CSS, and JavaScript. Because of inconsistencies between browsers, these languages were standardized, but the adoption was slow and inconsistent. Web Developers had to find out which features were safe to use, which had a workaround for unsupported browsers, and which should be avoided. This has led to the creation of frameworks and libraries. The purpose was so that Web Developers could focus on the functionality of their website, without worrying whether it is compatible with all browsers. As pages became even more interactive, larger parts of the page needed to be managed by JavaScript code. Developers also wanted to reuse parts of their webpage, like for example an interactive search bar. This soon became very complicated, so front-end frameworks were created to manage the webpage. There have been a couple of prominent frameworks in the past, but the current big three are React, Angular, and Vue.js.

Why use a framework in 2021

These days, the support of web standard is a lot better in all modern browsers. So, if the differences between browsers are minimal, what are the reasons Developers still like to use frameworks?

  • Reusable components

  • Organizing codebase

  • State management

  • Templates

  • SPA (Single Page Application)

Single Page Applications (SPA) are, as the name implies, web applications that only have a single page. A quite misleading name, as these websites can still look like they have multiple pages. Traditional websites load HTML from the back-end for every page, but SPAs switch the page in the front-end itself. This results in a more responsive website with more flexibility.

The comparison

Please keep in mind that Developers have their own specific features that they look for in frameworks, and every project demands a careful look at what it requires. This blog highlights specifically the big three frameworks: Angular (by Google), React (by Facebook), and Vue.js (by Developers in the open-source community). As they are all open-source software, Developers worldwide are able to submit suggestions and changes, which the core team validates, tests, and merges into the codebase if it follows the principles the projects were built on.

Angular

  • Angular is the oldest and the youngest of the three frameworks.

  • It was introduced as AngularJS (not Angular in 2010) and soon became the most popular framework.

  • Because AngularJS became too limited for the features, it has been redesigned and was again released as Angular 2 in 2016.

  • Unfortunately, Angular 2 is not compatible with its predecessor.

  • Angular releases two major versions in a year.

  • It aims to be a complete solution for a whole web application.

While it’s not for everyone, the new Angular isn’t going away soon. But watch out for web applications that are still using the old AngularJS, as the official support for that will very soon be stopped on the 31st of December 2021.

React

  • React was released in 2013.

  • It only has features for the presentation layer of the website. Meaning that React applications need additional libraries for advanced state management, routing, API requests, and many other features.

  • React used JSX files that combine JavaScript and HTML. Instead of relying on made-up keywords of a templating language, JSX uses plain JavaScript.

  • It is suitable for new Developers who only know how to work with JavaScript.

  • The team behind React also introduced the Flux architecture, which is a concept of how to implement state management, that very neatly fits into the principles behind React. Redux is a very popular implementation of the Flux architecture, often used with React.

With its flexibility, it comes as no surprise that React attracted all Developers that did not like the strict rules imposed by Angular. In 2021, React is the most commonly used web framework, and while newer frameworks are rising, we can expect React to stay near the top in the following years.

Vue.js

  • Vue.js was developed by Evan You, an ex-Google Developer, in 2014.

  • It was created with React and Angular in mind, offering flexibility and simplicity of React, while providing the guidance and tooling of Angular.

  • Vue.js is very approachable – by adding one line to your HTML, you can start using Vue, allowing the developer to very quickly create a small Vue application. This application could also easily be added to an existing, traditional website.

  • It has a limited scope out-of-the-box but has official libraries for more advanced concepts like state management and routing.

Vue.js is very quickly rising in the ranks. Moreover, with the Composition API introduced in Vue 3, Developers have only more reasons to like it. It might never overtake React, but for developers looking for a bit more structure and a complete ecosystem, while maintaining flexibility, Vue.js is a very good choice.

What to choose in 2022?

While the above-mentioned frameworks are still very good choices for the near future, there are a couple of new trends that you should keep an eye on:

Svelte

The new kid on the block! Svelte is a more recent web framework that tries to solve an issue that all three of the big frameworks have: Your web app only works if you also ship the Angular/React/Vue library itself together with your webpage. Fun fact is that Svelte solves problems by not being a framework at all. Instead, it’s a compiler that generates traditional, standalone JavaScript. This year, Svelte has been voted as the most loved web framework on StackOverflow. And it is already mature enough to be used in production applications by companies like Spotify and IBM.

SSG & SSR

Static Site Generation (SSG) and Server-Side Rendering (SSR) have already existed before Single Page Applications (SPA), but they are currently rising again. With these methods, the HTML is already pre-generated and because of that the browser can immediately show the webpage to the user, without first needing to read all JavaScript, get data from the back-end, and generate the page. This also helps with Search Engine Optimisation (SEO) – the search engine doesn’t need to execute any JavaScript to scan the page. Unfortunately, while initial website loads can be quicker, switching between pages is often slower due to the extra back-and-forth between the browser and the server. Content-based sites can benefit greatly from SSG or SSR, while service or application-based sites might be better off with normal SPAs.

Conclusions

It’s certainly still possible to create interactive websites without web frameworks, but it’s unnecessarily complex without those features the current frameworks provide. Asking which of the three is “the best” is not a fair question. A better question would be: “Which framework is the best for my website?” Every project has its own requirements. Every team has its own skills. Only by keeping these conditions in mind, you can decide which framework to choose.

This blog is written by Joris Molnár – Software Engineer at Mediaan Conclusion.