Is Angular a framework or a platform

Vue vs. Angular: The all-in-one platform and the open source construction kit

Anyone who wants to develop a modern web app with the help of a JavaScript framework in 2019 is basically spoiled for choice between the top dogs React, Angular and Vue. In the comparison below, I will introduce the Vue vs. Angular frameworks from a bird's eye view.

Why do you need JavaScript frameworks?

In the early days of JavaScript, it was out of the question to develop complete applications with it. It was primarily a gimmick to check form entries in the browser, for example. But with the language's increasing popularity and the rise of open source, JavaScript has become the tool of choice for web application development.

Although applications can also be developed without a framework, the feature throughput of a development team would then be correspondingly meager. Because JavaScript frameworks allow the developer to concentrate on the actual use cases instead of solving problems that have already been solved again. At the same time, current frameworks are so strongly optimized that their own implementation as part of a regular customer project would exceed any budget and time frame.

Origin and history

From AngularJS to Angular

Angular was first published in September 2016 with version 2 as the successor to AngularJS. The current release 8.0 was made available in May 2019.

The jump from AngularJS to Angular was a completely new development to get rid of the conceptual ballast from six years of AngularJS.

However, the supporters of AngularJS were not left out in the rain by the new development. This was ensured by an orderly migration path to Angular 2. In addition, the LTS (Long Term Support) phase of AngularJS was ushered in on July 1st, 2018. Since then, no more features or fixes have been implemented that would mean a breaking change. Instead, only security-critical bugs are fixed or changes are made that would endanger the operability of productive applications due to browser or jQuery releases.

Fun fact: The wording is often misleading, especially with Angular. A colleague of mine was once booked for an Angular training course, but AngularJS was requested. Angular basically means all versions from and including version 2, and Angular 1 is AngularJS.

Vue

The inventor of Vue.js, Evan You, worked at Google Creative Labs in 2013. His job at the time revolved around prototyping in the browser. The means of choice was AngularJS, among others. Evan You liked the concepts of AngularJS for data binding and the resulting update of the DOM. At the same time, the framework imposed other concepts on him that were irrelevant to his use cases at the time.

Thereupon Evan You decided to extract the parts relevant to him and to implement them in his own framework without any overload: Vue.js was born.

In his free time, Evan was now busy working on Vue.js in secret. In February 2014 he published a first version. After the project became more and more popular and widespread, You decided in February 2016 to work fully on Vue.js. The last major release with version 2 took place in September 2016. The latest minor release (version 2.6.0) was published in February 2019.

Image: Evan You (Source: https://github.com/yyx990803)

team

From my own experience, I can report that when choosing the framework for a new project, there can be heated discussions between developers and management. On the one hand, it is usually about high budgets and, on the other hand, the future of a product or an entire company. For these reasons, the team or the company as well as the hopefully long-term maintenance of a framework also play an important role in the choice of the tech stack.

Angular

The company behind Angular is none other than Google. This means there is a lot of financial leeway and a correspondingly large team.

In addition to a huge developer base from Google itself, Angular is maintained and expanded by a large open source community. According to the angular.io About page, the Google team comprises around 40 members as well as selected open source collaborators and Google development experts.

In the past, important developers such as Victor Savkin or Jeff Cross have left the Angular team time and again to take on new tasks. The remarkable thing about it is that even the departure of central developers has no negative effects due to the high bus factor (key figure for assessing project risks).

Part of the team behind Angular (source: https://angular.io/about?group=Angular

Vue

Vue.js was started by an individual (Evan You), and for a long time he was primarily responsible for large parts of the framework. Because of this, there were always articles or opinions that this would be a pure one man show and that the framework would have no future when Evan You withdrew.

The Contributor Graph from Vue.js on GitHub (Source: https://github.com/vuejs/vue/graphs/contributors)

In an interview You says that he is currently working on decoupling the dependence on himself in order to enable a future of the framework without him.

"I personally don’t want to be responsible for everything. I want the project to be able to evolve, even if some day I stop working on it. So part of my work right now is to make that happen ” - Evan You

The team around Evan You has grown enormously and has found some prominent supporters from well-known companies: Sarah Drasner (Netlify), Natalia Tepluhina (GitLab) or Pine Wu (Microsoft). In addition to the actual core team, there is a huge developer community that supports the framework. The Vue team receives financial support through funding platforms such as Open Collective or Patreon.

Release cycles

Angular

Angular reliably delivers a new major release every six months and approximately one to three minor versions within this period. Since the developers at Angular do not have a crystal ball either, features or APIs may be removed or changed. A very switch-friendly deprecation strategy is used.

APIs are initially marked as deprecated and a corresponding migration path is offered at the same time. The feature marked as deprecated will remain in the framework for at least two more major releases in order to enable the smoothest possible transition. For example, the new HTTP API @ angular / common / http was introduced in version 4.3 and the existing package @ angular / http was marked as deprecated in version 5.0, but was only removed in version 8.0.

This constancy and procedure allow a very comfortable planning of version jumps and corresponding maintenance.

Vue

The releases of Vue.js cannot really be planned, true to the motto "It's done when it's done". For example, version 2.6.0 was released in February 2019 and version 2.5.0 in October 2017 and 2.4.0 in July 2017. There can be months or even years between minor versions - although these statements only refer to the Vue Core. What this means and how the package structure of the framework is structured, you can read below.

Fun fact: Since Evan You is a big anime fan, all major and minor releases have been named after anime titles since version 2.0.0. Version 2.0.0 was codenamed Ghost in the Shell, and the last minor release 2.6.0 was called Macross.

Project setup

Setup and maintenance of a project infrastructure such as build system, unit tests, static code analysis and, if necessary, deployment should ideally generate minimal effort. Reality and past projects (at least from my experience) show that the project infrastructure is becoming somewhat complex and is increasingly neglected as the project progresses. In addition, developers often don't feel like spending hours or even days worrying about these topics. For this reason I would like to explicitly shed light on the setup of projects with Vue or Angular.

Angular - From boiler plates to the Angular CLI

When Angular 2 was released in 2016, developers were spoiled for choice from a hodgepodge of boilerplate projects for project setup. The disadvantage of this approach, which was usually based on a fork of the corresponding GitHub project, was the long-term maintainability.

As of December 2015, the development of the Angular CLI began behind the scenes. This was initially based on a fork of the Ember CLI and, according to their own statement, saved the developers of the Angular team an entire year of work.

Fun fact: The early releases of the Angular CLI were named after historical figures in computer science. For example, version 1.1.0 was named after Ada Lovelace, 1.3.0 after Grace Hopper and 1.5.0 after Alan Turing.

The Angular CLI website (source: https://cli.angular.io/)

Scope of the Angular CLI

The Angular CLI offers a wide range of functions, starting with the project setup including a preconfigured build (currently based on Webpack), test and linting infrastructure.

The greatest and long-term benefit of the CLI, however, is the Angular Schematics. A Schematic is a template-based generator that supports complex logic. The supplied generation schematics are used, for example, to generate new code parts such as components or services. The convenience of this solution is, among other things, that dependencies on existing code are recognized and taken into account. In addition, new source code is generated based on the Angular Style Guide.

The Angular CLI also offers the option of creating your own schemes or using existing schemes from the open source community. These are then possibly associated with their own CLI commands and executed directly by the Angular CLI.

The enterprise approach with NX

Nrwl, headed by ex-Angular team members Victor Savkin and Jeff Cross, has released a toolkit called NX that allows a so-called mono repo to be operated on the basis of the Angular CLI.

The real charm of this solution is to split application (s) into apps and libs. Dependencies can then be defined for these apps and libs, e.g. Lib A is not allowed to talk to Lib B.

This approach is particularly interesting for large, interwoven project landscapes, as it avoids many round trips with NPM Link or Git Submodules in otherwise distributed repositories. There is a video on YouTube that illustrates NX and its mono repo approach.

Vue

Vue CLI

The project setup for Vue.js is done conveniently with the Vue CLI. You can choose between different configurations for transpiler (Babel or Typescript), linting, code formatting or framework for unit tests (Jest or Mocha). The CLI from Vue is in no way inferior to that of Angular. If you don't want to create a new project via the command line but rather with the help of an elegant GUI, you can also do this with the Vue CLI.

The Vue CLI UI (source: https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui)

A Vue CLI project can be expanded as required using plugins. Thanks to a long list of plugins, such an application can be upgraded to a Progressive Web App or Electron App in just a few steps. It should be noted that the corresponding setup (for example for Electron) always has only a minimal scope and is to be understood as a starting point for individual adjustments.

Only the ability to quickly generate new application parts is not integrated in the Vue CLI. Existing tools such as Hygen can be used for this, but in my experience they do not come close to the comfort of the Angular CLI.

Boiler plates

Since Vue is relatively permissive with regard to the style guide and file structure, there are a large number of boilerplate projects for managing Vue projects.

It is worth taking a look at the Vue Enterprise Boilerplate from Vue Core member Chris Fritz, as well as vuesion (formerly vue-starter). The latter is interesting in that it is initially delivered with an almost 100% Lighthouse Score. Lighthouse is an audit tool from Google that evaluates websites / apps in the categories of performance, accessibility and best practices, among other things.

Lighthouse Score from vuesion (Source: https://github.com/vuesion/vuesion#lighthouse-score)

I was able to gain good experience with transferring certain solution approaches from boiler plates to a Vue CLI project if necessary.

Building the framework and ecosystem

If you look at any enterprise application or commercial website, the requirements for features are quite homogeneous.

Basically, it is about updating the application state via the DOM. In addition, an app usually has several sub-pages that are managed via routing. The data is usually transported to the front end via HTTP or web sockets, and of course forms should not be missing, as well as a few animations to skilfully guide the user through the app.

Angular as an all in one framework

Anyone who decides to develop an application with Angular will in most cases rely on the supplied packages and not miss anything. Angular runs on the NPM side in Scope @angular and encapsulates the various features in dedicated packages.

The core

In the @ angular / core package, all essential components are delivered that are needed to construct a minimal application. For example, it contains the complete functionality for creating directives and components, rendering and event handling. In addition, change detection and the clever dependency injection from Angular can be found in this package.

Routing

Routing is covered by the @ angular / router package. There are a number of configuration and optimization options such as lazy loading (reloading of application parts at runtime) or route guards (restriction of access to certain URLs). The routing is so powerful that there is even a dedicated book for it by the (former) main responsible developer Victor Savkin.

Forms

The classic of every business application are certainly forms. With the @ angular / forms package, Angular offers two options for form processing: With “Template-driven forms”, Angular forms can be quickly defined and controlled using the HTML template.

A second and much more powerful type are the “Reactive Forms”, which are initially defined using TypeScript and then linked to the HTML template.

A variety of predefined validators can be used in both cases.

HTTP handling

Server side rendering is back in vogue, but the vast majority of apps in the wild will diligently transport data via HTTP. The supplied package @ angular / common / http provides the HttpClient, which brings data from A to B based on RxJS observables (explained in the learning curve section). HTTP requests can be automatically repeated in the event of an error, for example, or requests that have not yet been completed can be canceled when they are requested again.

State-based control of animations

If you want to create animations that go beyond hover effects, the animation package @ angular / animations will delight you. Complex animations can also be implemented state-based and reusable (as they are defined in TypeScript). Under the hood, Angular relies on the Web Animations API (WAAPI), with which animations can be controlled in detail. With older or unsupported browsers, the WAAPI is emulated by a polyfill.

The modular principle of Vue

Vue calls itself “The Progressive JavaScript Framework” and this is definitely true when looking at the package structure and the ecosystem. Because Vue is basically the epicenter of an immeasurable open source construction kit and itself “only” covers the central core areas of a modern WebApp.

Evan You’s sweetheart

Evan You's original vision was to create a framework that was reduced to the bare minimum. The “vue” package therefore only contains the underwear that is absolutely necessary for developing a web application.

Among other things, there is the option of defining components, rendering and event handling. In addition, the so-called reactivity is included, which uses a virtual DOM to ensure that the current state is always displayed in the browser.

Fun fact: Evan You is responsible for more than 2,000 out of 3,000 Vue (core) commits.

Routing

Although there are a handful of packets to choose from when it comes to routing, the choice will usually fall on the official router for Vue, the “vue router”. This package was originally created by Evan You, but is now managed by various members of the Vue team. When it comes to functionality, the vue router is in no way inferior to the Angular Router and offers, among other things, lazy loading and navigation guards (called Rout Guards at Angular).

HTTP

While the choice of package for routing was still fairly clear, there are already over a dozen packages to choose from when it comes to HTTP queries. For example, various wrapper packages are available for the well-known HTTP client Axios to simplify integration into Vue projects.

Animations

Out of the box, Vue offers various options for creating animations.

The simplest variant are CSS classes that Vue attaches to the DOM nodes of elements at certain times of the lifecycle. These classes can then be used to define CSS transitions, e.g. to provide components with a run-in effect.

A more complex variant is the use of JavaScript hooks. Here, animations can be controlled via JavaScript. This can be done either using your own code or by integrating third-party libraries such as GSAP or Velocity.js.

Style guide

If you don't just eke out your life as a software developer as a lonely wolf, sooner or later you will think about a code or project style guide. Therefore, the included style guides of the two frameworks should not be missing from my rough overview.

Loving severity

If you don't feel like having lengthy discussions about even the smallest detail of the codebase, you will love the Angular Style Guide. This sets pretty much all the guard rails and leaves little scope for your own decisions. Among other things, this allows new developments that already have Angular experience to be quickly onboarded.

The advantage of this restrictive approach is a coordinated interlocking tooling (Angular CLI with the schematics) and the supplied Codelyzer. The latter is a package for static code analysis based on TSLint for Angular-based projects.

The codelyzer website (source: http://codelyzer.com/)

Laissez faire

In contrast to Angular, the Vue Style Guide usually gives recommendations for managing Vue.js projects. The Style Guide differentiates between the priorities A (Essential), B (Strongly Recommended), C (Recommended) and D (Use with Caution). A look at the style guide is helpful in all cases, as every recommendation is reasonably argued and illustrated.

A good introduction to static code analysis for Vue projects is the ESLint plugin vuejs / eslint-plugin-vue, which basically maps the recommendations of the Vue style guide.

Learning curve

The two books on my shelf are indicative of the Vue vs. Angular learning curve. The 1000-page Angular Tome could well be used for self-defense and the sleek Vue reference also works as a wind fan with closed eyes.

Angular

As a coach, I have already enabled many developers to get started with Angular and I can say that even seasoned software developers get smoky heads. With Angular, it is usually not enough to just survey and internalize the features of the framework - which takes a lot of time due to the huge framework and many details.

In addition, an Angular app can only be developed on the basis of TypeScript. TypeScript was just a kind of sidekick for AngularJS, and when Angular was rewritten, TypeScript was used entirely.

Another aspect is the integral dovetailing of Angular with RxJS - i.e. Reactive Extensions for JavaScript. Porting reactive programming for JavaScript is an elegant means of controlling the flow of data in Angular applications. Due to the many hundreds of operators of RxJS, it is often difficult even for experienced developers to keep track of things. RxMarbles as an interactive guide for the most common operators can help here. Another helpful resource is the Operator Decision Tree, which, with the help of a wizard, shows the way through the jungle of operators.

An interactive RxJS Marbles diagram (source: https://rxmarbles.com/#withLatestFrom)

Vue

To get started with Vue, you need a solid knowledge of HTML / CSS and JavaScript. Developing an application with Vue is refreshingly easy and intuitive at first. However, the devil can be in the details, especially when wiring the various libraries and toolings (I'm speaking from my own project experience).

Basically, it is sufficient to work through the official Vue Docs in order to learn the ABC of the framework. If you still want a new addition to the bookshelf, I can recommend “Vue.js Up & Running”.

Vanessa Böhner has published an article that is well worth reading as an introduction to Vue.js.

Vue vs. Angular - conclusion

The good news first: complex applications can be developed with both frameworks. I have had positive experiences with Angular and Vue.js, so that I would use both again at any time. Basically, you should get a taste of both frameworks and then decide. In the case of Angular, this is unfortunately associated with a certain amount of additional work.

In my experience, developers with a Java or .NET background have faster access to Angular and TypeScript. The all-in-one package from Angular reduces the setup to a minimum, and the tight style guide corset stifles unnecessary discussions at an early stage.

On the other hand, I have found that beginners appreciate the simplicity and associated steep learning curve of Vue.js. The style guide's rather open specifications leave a lot of leeway for your own project structures.

More articles on the topic:

Nico king
is a trainer and consultant for web technologies in Nuremberg. As the founder and managing director of fullstax, he supports companies with individual training and software engineering. In his free time, Nico organizes the FrankenJS and New Devs On The Block, among others.