Angular vs. ReactDer Shoot-Out

Karsten Sitterberg● Entwickler, Trainer, Berater

○ sitterberg.com

○ @kakulty

● Java User Group Münster

● Frontend Freunde Münster

Thomas Kruse● Entwickler, Trainer, Berater

○ www.trion.de

○ @everflux

● Java User Group Münster

● Frontend Freunde Münster

80%… sagen, so ein Vergleich macht keinen Sinn

Technologienstehen nie isoliert

KontextArchitektur, Skills, Team

Peace!● Ziel ist eine neutrale Betrachtung

○ … und Inspiration

● Unsere Projekterfahrungen○ Sowohl React als auch Angular in mittleren bis großen Projekten

● Alle Projekte waren (klaro) super erfolgreich

● Bewertungen sind stets subjektiv

Allgemein● Viele Gemeinsamkeiten zwischen React und Angular

● create-react-app, AngularCLI

● redux, @ngrx-store

● Komponenten-Konzept

● Ausgereifte, produktiv nutzbare Technologien

● Support durch Giganten (Facebook, Google, … )

● Große Communities

Community● Stackoverflow: 61.198

● Github

○ 9.242 Commits

○ 71 Releases

○ 1.108 contributors

○ 78.998 Stars

○ 14.966 Forks

● Stackoverflow: 77.424

● Github

○ 8.774 Commits

○ 169 Releases

○ 514 Contributors

○ 28.998 Stars

○ 7.233 Forks

Angular auf Stackoverflow

React● “A JavaScript library for building user interfaces“, Facebook

● Veröffentlicht 2013

● Zentrales Konzept: Komponente

● Keine Trennung von View-Logik und UI (Template)

● Templates in JSX (oder JavaScript)

● Virtual DOM, deklarativer Komponentenzustand

● Library: Wenig/keine Vorgaben für Verwendung, hohe Flexibilität

● Lizenz: MIT

Angular● Namentlicher Nachfolger von AngularJS, Google

● Veröffentlicht 2016 (Angular 2)

● Full-Frontend-Stack-Framework

● Entwickelt in TypeScript

● Fokus auf umfangreich(er)en Anwendungen

● Opinionated

● Lizenz: MIT

Angular Framework

Angular / ReactEinordnung

Eckpfeiler● (View) Components

● JSX

● One-way data binding

● Virtual DOM

● TypeScript

● Directives

● Components

● Services

● Pipes

● One-/Two-way data binding

● Modulsystem

● Dependency Injection

● RxJS

Angular Architektur

import { Component, OnInit } from '@angular/core';

@Component({ selector: 'app-demo', template: `<h1 class="head"> Hello {{title}}! </h1>`, styleUrls: ['./demo.component.css']})export class DemoComponent implements OnInit { title: string;

ngOnInit() {this.title = 'World';}}

React Architektur● Prop(ertie)s

○ Immutable

○ Parent -> Child

● State

import React, { Component } from 'react';import './Demo.css';

class Demo extends Component { constructor(props) { super(props); this.state = { title: 'World' }; }

render() { return (<h1 className="head"> Hello {this.state.title}! </h1>); }}export default Demo;

JSX● React wird normalerweise mit JSX entwickelt

○ Mischung aus View-Template und Logik

● XML-Erweiterung für ECMAScript als HTML-DSL

○ Syntaktischer Zucker für React.createElement()

○ const element = <div> Hi! </div>

● HTML-Markup als Teil von JavaScript

● Benefit: Statisch analysierbare Templates (u.a.)

CSS Isolation● Motivation

○ Kapselung von Komponenten-Style gemeinsam mit der Komponente

○ Wiederverwendbarkeit der Komponente verbessern

○ Seiteneffekte vermeiden

● React: Nicht vorhanden (Element-Inline-Style)

● Angular: Emulated (Attribut-Selektoren), Native (ShadowDOM), None

TypeScript● ES/JavaScript Erweiterung u.a. um statisches Typsystem

● Compile-Time Checks (statische Analyse)

● Language Service

○ IDE Support, Code Completion, Syntax Highlighting

● Dokumentation

● Refactoring

● Normalerweise bei Angular verwendet

● Verwendung mit React möglich

○ Statt JSX dann TSX

RxJS● Reactive Extensions

○ Asynchrone Ereignisströme

○ Perfekt für UI / Webanwendungen

● Direkt in Angular integriert

● Verwendung mit React möglich

○ Spezielle React-Bindings verfügbar

● Integration mit Redux/@ngrx-Store

Anwendungsstruktur● Eine Anwendung besteht nicht (nur) aus UI Controls/Komponenten

● Zustand (Model)

○ Lokal in Komponenten oder über State-Manager

● Services

○ Datenbeschaffung, Verarbeitung, Modifikation

● Herausforderungen

○ Typen (Klassen) wählen, Hierarchien, Konventionen

○ Konfiguration/Management der Abhängigkeiten

Dependency Injection● Flexible Anwendungsstruktur

○ Testbarkeit

○ Erweiterbarkeit

○ Wiederverwendbarkeit / Konfigurierbarkeit

● Angular verfügt über DI Konzept

● In React

○ Props-Functions

○ Durch React-Context (experimental API)

○ JavaScript Modulsystem (Singleton-Hack)

○ Library, z.B. InversifyJS (IoC Container)

Services● Beinhalten: Anwendungslogik

○ Kommunikation mit Remote-Diensten

○ Implementierung von Regeln

● Motivation: Trennung Logik von View

○ Separat testbar

○ Wiederverwendbarkeit

● React Umsetzung: Plain-Old-JavaScript-Function

○ Oder TypeScript Klassen

● Angular: Decorator für Dependency Injection

Directives● Komponenten ohne direkte View-Repräsentation

○ In der Regel um Verhalten zu beeinflussen

○ ~ Mixin

● Angular: Als Konzept vorhanden

● In React durch Container-Component (Higher-Order-Component) emulierbar

○ Oder DOM Hooks

Router● Größere Anwendungen bestehen aus vielen Views

○ Aufteilung zur besseren Handhabbarkeit

○ Sprungziele für Bookmarks, History oder Navigationslinks

● React: Diverse Libraries, react-router

● Angular: Integriert, Zusammenarbeit mit Modulsystem (lazy loading)

Weitere Bestandteile● In Angular vorgegeben

○ Formularsystem(-Validatoren)

○ Pipes

○ I18N

○ Animationen

○ HTTP

● In React als Eigenentwicklung oder Libraries

Modulsystem● Motivation:

○ Separation der Anwendung in logische Teile

○ “Features” (Separation of Concern)

● React: JavaScript Module

● Angular:

○ @NgModule - Untergliederung der Anwendung in Features

○ TypeScript Module: “Pro Datei eine (Komponenten/Service/…) Klasse”

JavaScript/TypeScript:Ein Modulentsprichteiner Datei

UI Updates● Explizite Zustandsänderungen durch

Component

○ this.setState()

● VirtualDOM

○ Replikat des DOM-Tree (Optimiert)

○ State-Changes werden zunächst hier

verarbeitet

○ Nur Tree-Änderungen werden in

echten DOM gespiegelt

● Change Detection

● zone.js

○ Reagiert auf asynchrone Events

○ Kompletter Durchlauf des

Komponenten-Baums

● Sehr performant (~ 100k Checks in ms)

● Bei Bedarf können Sub-Bäume

abgekoppelt werden (OnPush)

Ökosystem● Umfangreich

● Viele Libraries

○ Manchmal zu viele ;)

● Highlights

○ Material UI

○ React Native

○ Redux, Mobx

● Wachsend

● Auswahl überschaubar

● Highlights

○ Material Design

Components

○ NativeScript

○ ngrx-store

○ Ionic 2

Potentielles Fazit● Library

● Einzelne Widgets/UI-Controls

● Lediglich View-Components

● Extrem lose Kopplung

● Flexibel, sehr individueller Stack

möglich

● Funktioniert gut auch im sehr Kleinen

● Build-Up

○ Widgets

○ Anwendung mit Redux

○ System of Systems

● Framework, opinionated

● Starke Integration (SPA)

○ Von Desktop zu Webapp

● Ausdrucksstarke Konzepte

● Modularisierung innerhalb der

Anwendung

● Labs: Angular Elements

● Build-Up

○ Anwendung mit ngrx-Store

○ Multi-Module Anwendung

○ System of Systems

Demo :)+ Diskussion

Danke.Fragen?

@kakulty@everflux