Angular – bane of my SPA?

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.

Angular

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.

Angular version 2 (or newer) is a redevelopment using TypeScript, a superset of JavaScript. TypeScript brings type safety and lots of improvements for object-oriented programming to the table. Using these features, the new Angular encapsulates more functionality into classes instead of arbitrary JavaScript code. Due to the feature richness of AngularJS and Angular the frameworks are quite heavy. Very few projects will ever use Angular to its full potential.

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

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.

What makes Aurelia special is that you write very clean JavaScript code. The binding between template and controller class methods and fields works out of the box via naming convention. To make this magic happen, the only caveat is that your controller and template files must have the same filename and should be in the same directory. Aurelia is light and concentrates on ease of use. This is achieved by using easy-to-understand conventions. Everything that exceeds the functionality of aurelia can be added via the thousands of libraries from the NPM (Node Package Manager) repository. By using this approach, your SPA only contains the functionality you manually add which keeps your webapp nicely slim.

Vue

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

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.

React alone is not an SPA framework. React’s primary concern is to push JavaScript changes from the code behind to the Browser without reloading the page. To have state changes propagate from the browser to the code behind the Redux framework has proven to be the community’s choice. React uses JSX which allows putting HTML tags and dynamic content right inside your JavaScript code. React’s focus is building the view layer with its component system. For features that other frameworks offer out-of-the-box, e.g. data binding, you have to bundle other libraries. This gives you more flexibility, but decisions must be made, which is not easy when starting with a new technology.

Conclusion

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.

AngularJS is still a viable option for smaller apps, but for serious business apps you should go with Angular 5 and TypeScript. Just be aware of the steep learning curve that the two will impose on your team. Generally speaking, bigger applications can profit from the added complexity of TypeScript. It is, however, difficult to decide at what point JavaScript adds more maintenance cost than TypeScript would have added to the initial development.
Flow offers a lighter alternative to TypeScript if you don’t want to break a fly on a wheel. Flow will give you type safety within the “normal” JavaScript syntax..

Disclosure

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

https://github.com/AngularClass/awesome-angular
https://curated.vuejs.org/
https://github.com/vuejs/awesome-vue
https://github.com/behzad888/awesome-aurelia
https://github.com/chentsulin/awesome-react