stehen nie isoliert - frontend-freunde · angular vs. react der shoot-out karsten sitterberg...
TRANSCRIPT
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
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
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