Choosing a front-end framework is a big decision when you are starting to build a new application. You will need to keep supporting this decision for a while. Because rewriting a complete (web)app to a new framework later will take a lot of time. The last thing you want is a long migration because your framework choice did not turn out the way you wanted it to. 

So in this post I hope to give some insights on three popular front-end frameworks and why you should or shouldn’t decide to use it. I will take a closer look at Angular, Vue and React.

Angular

Angular was released in 2010 by Google. At the time it was called AngularJS. In 2016 Angular (or Angular 2+) was released and provided a slightly tweaked filosopht. At the moment Angular 11 is the latest release, and every six months a new version will be released. This rarely contains huge changes like it did in 2016, and focuses more on small feature improvements and optimal development experiences.

The big advantage in using Angular is that you have a lot of building blocks already built into Angular when installing the framework. Things like a HTTP client, Routing, Form validation and state management are all ready to be used. Because these features are already built into the framework, developers can assume that they are thoroughly tested and are compatible with any Angular project. No third party libraries that suddenly stop working when Angular is updated. Of course this means that the filesize of Angular is bigger than it’s competitors I will discuss in a moment.

Angular has a strong opinion about how applications should be structured, and Google wrote an entire styleguide with all kinds of do’s and don’ts when using Angular. This can come off a bit strong. After all, I’ll decide how to structure my applications. But if you read through the styleguide you will see it makes a lot of sense. You and your development team can use this guide to help structure your application. So I would definitely consider this a plus.

Another plus in Angular is the way it handles forms. I’ll admit that React and Vue offer (third party) solutions for this as well. However, they do not compete with Angulars reactive forms. It is a great way to write complex forms where fields and validation depend on values in another field.

Historically Angular has an advantage over the other two frameworks, since it was here first. So it has had the most time developing into a stable framework and this shows in the job market. The demand for Angular developer is still the greatest of the three. In the Netherlands that is.

Angulars job market is the most attractive compared to it’s two competitors.

Angulars learning curve is a bit higher when compared to Vue and React. It takes some time to get comfortable with all the different possibilities like modules, routing and forms. But if you spend some time with it, you will realize that every bit of functionality has it’s place in this framework.

Regarding the community, Angulars popularity is descending a bit. Simply taking a look at the github stars tells us that Vue and React are very much ahead. Attention seems to go more towards it’s two competitors. Time will tell how this will develop in the upcoming years.

Bottom line for Angular

We can definitely state that Angular as a framework is very complete. It has a clear filosophy on how apps should be structured, and this can definitely be an advantage for developers. A downside / risk of Angular is it’s filesize. Besides that it has the steepest learning curve the community is slowly moving towards Vue or React.

If you are prepared to face the learning curve, Angular is an excellent solution for creating complex applications that uses complex forms for example. 

Vue

Vue was released in 2015 by Evan You. This alone separated Vue from the other two frameworks, because it was released by an individual. Angular and React are created and maintained by big companies and this may result in a certain agenda. Google may introduce features or fixes for Angular that are suitable for Google itself, rather than the software development community as a whole. Because Vue has no agenda like that, you may argue that changes in Vue focus more on the general development experience. Vue is carried by an upcoming and enthusiastic community. When choosing new features the Vue community will have a stronger voice than with Angular for example. If you are interested in how Vue started, I really recommend this honeypot documentary.

Evan You explaining how he started with the Vue framework.
Credit: Honeypot.io

From a technical perspective Vue works with components. You have the freedom to decide wether you build your application in .vue files (where template, logic and styling are all in the same file), or splitting the three components into HTML, (S)CSS and Javascript or Typescript. Typescript is optional in Vue. Personally I prefer using Typescript. In Vue it’s not the default, like it is in Angular. But still fairly easy to implement.

Compared to Angular, Vue has a few less features built in. It has state management, but it lacks a built in HTTP Client. But you can use Axios for HTTP Calls, and this works just as well as Angulars built-in HTTP Client.

To enhance the power of Vue, Nuxt has been created. For my own projects I always use Nuxt. It offers clear and simple solutions for problems that would otherwise have been way more complicated. For example, you can automatically set up routing with the folder structure in your pages directory. You have the option of defining routes yourself, but unless you have really complex routes in your app, there’s no reason to resort to that. Nuxt also simplifies an event bus. With a few lines of code we transfer data from one component to the other. No need to emit events through components.
Nuxt is also very suited for websites. When building websites, SEO is very important. Unfortunately, the frameworks we are discussing are not very SEO friendly. Since Vue creates Single Page Applications, when a Google bot scans your website, the DOM is empty because javascript has not loaded any data yet. I.E. nothing will be indexed. Nuxt offers you the possibility to ‘pre-render’ your app. This turns your app into an indexable website.

The Vue learning curve is somewhat lower than Angular and React. This is because no new principles are introduced. If you have a basic knowledge of HTML, (S)CSS and Javascript you have everything you need to start building awesome applications in Vue. It’s up to the developer how complex the codebase will be.

Bottom line for Vue

Vue is suited for both simple and complex websites. And when using Nuxt, the possibilities are huge. The learning curve is pretty low so most developers should be able to pick it up quickly. The disadvantage I see is that Vue is not yet very dominant in the job market. Although the Vue community organizes a lot of events, Vue is not put on the map the way Angular and React are (at least not in the Netherlands). Time will tell if Vue will be as dominant as a framework as Angular and React are.

On the React Amsterdam conference we can see a very active React community.
Credit: Gitnation.org

React

React was released in 2013 by Facebook. Facebook does not limit itself to just the Facebook platform. Instagram and WhatsApp are also platforms maintained by Facebook. Therefor, the company decided to create a framework suited for all these applications. 

React components work with JSX. This is basically HTML inside Javascript. It’s the React way of passing data from Javascript to the DOM. And it can be a bit weird and uncomfortable to write HTML inside Javascript instead of a separate HTML file. But once you get the hang of it, JSX is just another way to write your template. 

Unlike Angular, React gives you a pretty blank canvas. You have to possibility to build components and let them interact with each other, but thats it. This makes React a lot smaller in filesize than Angular. From the starting point, you can decide to load all kinds of 3rd party libraries. That’s why React is more a library than a framework.  The difference is that a library is simply a tool that lets you do something. A framework is more opinionated about the things you need, and the way you structure your application. There really is no right or wrong here. It all depends on your preference.

I should mention state management in React. This difers from the default redux pattern that Angular and Vue use. The redux pattern is the filosophy of having a piece of data saved in a session, and being able to retrieve that piece of data from any component. This can be useful for a login session that always needs to be valid in order to continue. Or an object that needs to be loaded and interpreted in different ways by different components. 
React has its Context API. This is similair to the Redux pattern and one of the few built-in features of React. This Context API is mainly focused on non-frequent state changes. Because all components are reloaded whenever the state changes, it is not the most performant solution. In comparison, Redux in Vue or Angular provides a solution in which only the affected components are reloaded.

Bottom line for React

React has some aspects which makes it an interesting choice for a front-end framework. It is very simple and clean and just as with Vue, you have the liberty to make it as complicated as you want it to be. People with a firm knowledge of Javascript will find it easy to work with React. And also, the React community is very active. It needs to be. Where Facebook provides the core for React, all 3rd party libraries for React depend on the community. Also, the job market is very active, just like Angulars. A possible downside can be Reacts usage of JSX instead of regular HTML templates. And think twice before using the Context API, since it is not built for frequent state changes.

App development

All three frameworks have good solutions for building native apps. Angular and Vue can both use Ionic, while React has React Native for this. Also, all frameworks are compatible with NativeScript.