When it comes to SPAs (Single Page Applications), very often you hear “Angular” in the same or the following sentence. Due to my projects, I worked with a couple of other frameworks for SPAs this year. Here’s what I learned about those frameworks and how they differ.
The Angular family is mainly developed and maintained by Google. They are very popular, if not the most popular, frameworks for Single Page Applications. Angular has been on the market for quite a few years. It has undergone several minor and major changes in its history. Angular versions up to, but not including, 2.0 are referred to as AngularJS, while newer versions are plainly called Angular.
One of the more interesting changes in AngularJS came in version 1.5 with the introduction of the component model. Components are custom HTML tags with arbitrary content. Before version 1.5 you would’ve used AngularJS directives to achieve the same functionality. The component model unified the way components are built and how the interact with other components. Last but not least, the introduction of the component model was a step into the direction of the mindset of Angular 2, where components behave similarly. Therefore using components held the promise to make the migration to Angular 2 easier.
The module system of Angular is interesting for enterprise size applications. With it you can define reusable bundles of multiple components, directives and/or services.
Aurelia is a lighter alternative to Angular. The main contributor and maintainer is Rob Eisenberg, who is a senior employee at Microsoft. Being a Microsoft employee shouldn’t have much of an impact on the development of the framework. However Microsoft’s endorsement of the framework lets one hope that the framework will have an extended support lifespan. Aurelia uses convention over configuration, which allows a very quick start with your development.
Vue is another candidate for lightweight Single Page Application frameworks. Binding between template and controller is reminiscent of Angular semantically, which helps get used to Vue when you come from an Angular background. A speciality of Vue is that you can put template, controller and styles into the same, so-called ‘.vue’ file. This helps reduce the mess that comes with having styles, controllers and templates in different files and directories. To enable this in a meaningful way, vue-files contain up to three default sections. When you write an extension for the pre-processor, you can even add more sections, e.g. for translations in the same file.
Vue, like Aurelia, is easy to set up and allows you to be productive very fast. Like Aurelia, it doesn’t come with a lot of extra features that are not UI related. Add those from the NPM repository as you need them.
React is developed by Facebook and has a history of license disputes. The main issue with the license was that Facebook reserved a right over its intellectual property, which could in a conflict situation allow Facebook to revoke/suspend the open source nature of React. Facebook has since resolved the license issues by re-licensing several libraries, including react, under a standard MIT license in September 2017.
All of the frameworks discussed above have their purposes. There is no such thing as THE best Single Page Application framework because your choice should consider the strengths and weaknesses of each of these frameworks.
If you want to squeeze the last bit of performance out of your app and you want control over what is happening and when, you should go for React. For a quick and uncomplicated start, you can rely on Aurelia and Vue. Both don’t add as much boilerplate as Angular while still taking care of everything that makes web front end development difficult. When you know that your application is going to be big and you’ll need lots of functionality, Angular could be the right choice for you.
With the exception of AngularJS and Vue, I have no more than a few weeks of experience with the frameworks introduced above. I still wanted to share my insights into them. When it comes to Vue or Aurelia, my personal preference is Vue. I tried both with a very simple test component. My project had unit and end-to-end tests to allow for test-driven development. To allow my tests to run with Aurelia I first had to modify the Aurelia test classes. I’ve been happy with Vue ever since I started using it at the beginning of this year.
Still undecided? There’s an in-depth article series on sitepen.com that concludes with a summary here.
What are your experiences with the frameworks mentioned above? Are there any other frameworks you recommend to take a look at? Please let me know.
More resources / ecosystem compilations for the frameworks