2021
Angular | React | Vue

Angular | React | Vue

Translated from German using DeepL.

Date: September 2021
Reading time: 5 minutes

In this post I summarize what I learned about Angular, React and Vue in 2 days.

Basic principle

Angular, React and Vue are basically there to promote the reusability of code and to fill the UI with logic. This is made possible by the components. In addition, these individual parts facilitate testing and make the code of the front-end application more readable.

Comparison

ThemeAngularReactVue
Logoangularreactvue
Release201020132014
FounderGoogleFacebookEvan You
Webseitehttps://angular.io/ (opens in a new tab)https://reactjs.org/ (opens in a new tab)https://vuejs.org/ (opens in a new tab)
Current version12.1.417.03.2.1
Example projectsGmail, Wix, ...Facebook, Instagram, WhatsApp, Uber, ...Alibaba, Grammarly, GitLab, ...
BeschreibungAngular is an open-source frontend framework that is primarily used for single-page applications. The logic is written with TS or JS.React describes itself as a JS frontend library. React is mostly used to develop web and mobile applications.Vue is an open-source JS framework for creating UIs and single-page applications. Vue is not a company but a former Google employee.
StrukturIn Angular, projects are divided into modules, components and services. Each application has at least one root component and one root module. The components consist of HTML with an Angular "template syntax". This allows data to be received and elements to be rendered. The unique thing about Angular is the separation of the UI components and the JS logic.React is a UI library that does not prescribe a specific structure. An application consists of elements and components. Elements are more powerful than DOM elements because they are updated efficiently when changes are made. A component is a larger block that can accept inputs and produce elements.The framework is structured in such a way that the framework is written with HTML and the logic with JS. Components can be created in JS, which can then be used in HTML.
PropertiesMany features; everything is built-in; TS; HTML and TS is separatedMinimalistic; Features may need to be searched for in community packages; It is a library and not a framework; The JS/JSX code describes what is changed in the DOM; the common code is responsible for the behavior and UIVue can be easily integrated via a CDN or npm and used directly; applications consist of reusable components with their own logic, template and styling; changes in the data model are automatically reflected in the DOM; the logic is written in simple, pure JavaScript.
TestingJasmine allows various functionalities when writing tests.Jets is embedded in every React library and does not require any configuration.Jets/Mocha can be selected.
Learning curveThe Angular syntax and the complex setup make it difficult to get started with Angular. However, you can make it easier to get started by writing default HTML and JS.With React, the complex setup and JSX is an obstacle. Since everything is in one file, it can quickly become confusing. If you want to implement more advanced things, third party libraries are quickly required. However, there are also advantages. You don't have to learn TS and the library is very present on Stackoverflow.You only need to add a script tag to use Vue. After that, it is relatively easy to learn the simple and flexible framework. No TS is necessary, HTML and JS are separated and you have a lot of freedom. However, this also makes it possible to write bad code.

Size

Angular is clearly the largest framework. However, all three frameworks are relatively small compared to an average website.

Performance

Bundle Size

Angular is also at a slight disadvantage here. Although only what the application needs is changed, an Angular project is slightly larger.

Runtime Performance

The speed of interaction with the page is great with all frameworks.

Popularity

npm Trends

downloads

Jobangebote

  1. React
  2. Angular
  3. Vue

Beispiel

Angular

index.html
<body>
    <app-root></app-root>
</body>
app.component.html
<app-top-bar></app-top-bar>
 
<div class="container">
    <router-outlet></router-outlet>
</div>
app.component.ts
import { Component } from '@angular/core';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';
 
import { AppComponent } from './app.component';
import { TopBarComponent } from './top-bar/top-bar.component';
import { ProductListComponent } from './product-list/product-list.component';
 
@NgModule({
    imports: [
        BrowserModule,
        ReactiveFormsModule,
        RouterModule.forRoot([{ path: '', component: ProductListComponent }]),
    ],
    declarations: [AppComponent, TopBarComponent, ProductListComponent],
    bootstrap: [AppComponent],
})
export class AppModule {}
product.ts
export interface Product {
    id: number;
    name: string;
    price: number;
    description: string;
}
 
export const products = [
    {
        id: 1,
        name: 'Phone XL',
        price: 799,
        description: 'A large phone with one of the best screens',
    },
    {
        id: 2,
        name: 'Phone Mini',
        price: 699,
        description: 'A great phone with one of the best cameras',
    },
    {
        id: 3,
        name: 'Phone Standard',
        price: 299,
        description: '',
    },
];

Online example: https://stackblitz.com/angular/xamroalrvyvx (opens in a new tab)

React

App.tsx
function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}
 
const element = <Welcome name="Sara" />;
ReactDOM.render(element, document.getElementById('root'));

Online example: https://codepen.io/gaearon/pen/gWWZgR?editors=1010 (opens in a new tab)

Vue

index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Markdown Editor</title>
        <script src="https://unpkg.com/vue"></script>
        <script src="https://unpkg.com/marked@0.3.6"></script>
        <script src="https://unpkg.com/lodash@4.16.0"></script>
        <link rel="stylesheet" type="text/css" href="/style.css" />
    </head>
    <body>
        <div id="editor">
            <textarea :value="input" @input="update"></textarea>
            <div v-html="compiledMarkdown"></div>
        </div>
 
        <script>
            new Vue({
                el: '#editor',
                data: {
                    input: '# hello',
                },
                computed: {
                    compiledMarkdown: function () {
                        return marked(this.input, { sanitize: true });
                    },
                },
                methods: {
                    update: _.debounce(function (e) {
                        this.input = e.target.value;
                    }, 300),
                },
            });
        </script>
    </body>
</html>

Online example: https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-markdown-editor?from-embed=&file=/index.html:0-878 (opens in a new tab)

Conclusion

With almost 150,000 websites, Angular is far behind its competitors. What's more, no major growth is discernible. Even Google, for example, did not always rely on its own framework when developing new projects.
React is clearly the most popular. In addition to the many Facebook projects, the framework is used on over 10 million websites. It is also the most popular on the job market, as many companies rely on React.
Although Vue is the youngest, it has seen significant growth in recent years. Currently, 1.8 million pages have already been created with Vue. On GitHub, Vue is even more popular with 188,000 stars than React (with 175,000 stars).

Conclusion

Angular is a little more difficult to learn, but very mature. Since you get the complete package when you install it, the application is somewhat larger and slower later on. However, you have everything you need and don't have to look for features yourself.

React has a large community. The future of the flexible library looks good.

Vue is the latest. There is also no company behind it. Nevertheless, it can score points with its simple and flexible structure.