Front-end framework elections 2021
We often get the question: "What front-end framework do you advice?". There is obviously not an easy answer to this question. It all comes down to what fits your team best, but there are some criteria that are generally applicable and can help you decide.
Criteria we use are:
- Community
- Features
- Available experience in your team
- App possibilities
- Static site generation possibilities
The front-end frameworks that we evaluate in this assessment are Angular, React, Svelte and Vue.
Community
Community support and the tool eco-system around it are extremely important.
We express community support in the number of developers, available libraries, (official) documentation and blog posts. With respect to the number of developers, the State of JS 2020 survey results gives a good overview: React, Svelte and Vue are the leaders. Angular is only about half as popular as these three. Angular's shrinking popularity (and React and Vue growing popularity) is confirmed by the Github stars trend.
Looking at Stackoverflow activity these are results:
- Angular: 235,430 results
- React: 465,982 results
- Svelte: 2,869 results
- Vue: 87,342 results
React is by far the most actively discussed topic, followed by Angular and Vue, and Svelte is really a niche.
Features
There are no real differences in what you can functionally achieve with Angular, React, Svelte or Vue. They all enable you to create HTML presentation components and handle state in your application.
The difference lays in the way you implement a certain feature. Main differences between between the frameworks are:
| Angular | React | Svelte | Vue | |
|---|---|---|---|---|
| Conceptual approach | Framework | Library | Library | Library |
| Data binding | 2-way binding | 1-way binding | 2-way binding | 2-way binding |
| Presentation model | Template based | JSX based | Javascript based | Template based |
| Programming language | Typescript | Javascript / Typescript | Javascript / Typescript | Javascript / Typescript |
Besides this description, there are other good references that discuss the differences, for example here.
Conceptual approach
Angular uses a framework and therefore offers a lot of functionality out-of-the-box, it strictly prescribes the way-of-working and tooling to use.
React, Svelte and Vue apply a library based approach, where they focus on core functionality: presentation, state handling and routing. Functionality outside of the core needs to be added using external libraries and with respect to way-of-working and tooling there is more freedom.
Data binding
Data-binding comes in 2 flavors: one-way and two-way binding. With one-way binding data only flows (automatically) down in the component hierarchy. Two-way data binding enables an automatic up- and down- data flow.
React support one-way data binding, while the others support two-way data binding. In case of React you will need to explicitly write the second binding. The advantage of two-way binding is less boilerplate, the disadvantage is that code is potentially more difficult to understand.
Examples of data-binding per framework can be found here:
Presentation model
Angular, Svelte and Vue are template based, meaning that they use HTML + some extensions to build up your views. React uses a Javascript based syntax extension, called JSX, to generate a view model.
In general a template based approach will be easier to start with for someone who is used to writing static HTML. The JSX based approach will be easier to understand for a developer who is used to write Javascript code.
Programming language
Angular requires you to use Typescript, this gives the advantage that Typescript is well supported out-of-the-box. The other frameworks apply an opt-in strategy: Typescript can be added when desired.
React, Svelte and Vue use ES6 based Javascript which often takes away the need for Typescript.
Available experience
It is important to recognize the value of readily available experience within your team. When you have a team where all members have been working with e.g. Angular for the last few years, it most likely not worth migrating to another framework. The decision gets more interesting when part of your team has limited Angular experience and the other part has limited Vue experience. For a team without prior experience you can simply skip this consideration!
App possibilities
We often hear the wish to create a Progressive Web Application (PWA), and at the same time the wish to having to possibility of creating a native (iOS, Android) app from the same code-base in the future. The first part is simple: all frameworks discussed here provide decent PWA support. Creating a native app from the same code-base is more challenging.
With respect to native app development there a few Javascript based options: State-of-JS 2020 - Mobile Desktop. From these options, two are viable:
- React native
- Capacitor
We do not consider Electron as viable option for creating an app from your website as it requires you to create a completely new codebase.
React native offers the possibility to, by adding a few React native components, build a native React based app.
Capacitor offers the possibility to translate Angular, React or Vue based application code into a native app. Vue has one more option: Vue Native, but this is currently in its early days.
State-of-JS 2020: Electron and React Native are the two best-known names in this category
Static site generation possibilities
We want to build the best performing websites. For public facing websites that means generating a static website and deploying it on a CDN. This is not a deep dive into Static Site Generation (SSG) options, but not having the possibility to do SSG is blocker for us.
A short overview of the possibilities per framework:
You can find a complete SSG overview here.
React and Vue offer the best (and most) SSG options, while Angular and Svelte have a very limited set of possibilities that tend to be less popular.
Choose
Looking at community, React and Vue are the clear winners, Svelte is still a (upcoming) niche player, and Angular is loosing in terms of popularity.
With respect to features there is no big differences between the frameworks: your developer's experience and preference might lead to a preference here.
When you want to develop a native app from the same code-base React is your safest choice.
Static site generation is a requirement for modern public facing websites, we believe that currently only React and Vue have good SSG libraries available.
What did we choose at Unplatform?
For us it was actually quite easy, we have team of experience React developers and the community and app possibilities are best with React. So our choice is React, but we evaluate our choice every year. See you next year!
Need some more help or advice? Contact us here or drop a mail: info@unplatform.io
