www.opitz-consulting.com
How do Angular and React compare? Can we compare them at all? Actually, it's like comparing apples to oranges, but even so, we have to compare them. As it turns out, both frameworks are a nice example of co-evolution. They aren't as different as they used to be a few years ago. After showing the key concepts of both frameworks, our experts Dr. Marius Hofmeister and Stephan Rauh presented a small list of criteria helping to decide when to use which at iJS Conference in Munich on 25/10/17.
Marius
Backbone.JS-Bibliothek mit REST-Schnittstelle, geringe Größe (MVC)
Knockout.JS-Bibliothek (MVVM)
Web Components waren neu -> Viele Browser unterstützen sie nicht -> Angular hat sie früh verwendet
Shadow DOM: Bei älteren Browsern emuliert
AngularJS: MVVM -> Einsparung von Code
Deklarativer Programmierstil: ng-model 2-way data binding
Keine DOM-Manipulation mittels JQuery notwendig
Vielleicht wichtigste Neuerung: Komponentenbasiertheit eingeführt!
Marius
Angular Team hat mit zahlreichen Ideen experimentiert
Angular 2 von Grund auf neu geschrieben
Innerhalb Alpha- und Beta-Phase von NG2: Viele Breaking Changes -> sogar mit Release Kandidaten!
Seitdem Angular2 final released wurde, gab es weniger Breaking Changes
Marius
Version 1 auf 2:
Kein Upgrade, eher Rewrite
Verbesserungen von Angular 2:
In TS geschrieben, und TS empfohlen
Vollständig komponentenbasiert (Keine Controller, Scopes)
Komponente = Direktive mit Template
Bessere Performance (Kernfunktionalität in Module gewandert)
Explizite DI (Konstruktor)
Mächtiges Tooling (Angular CLI-> Generierung von Komponenten, Tests, IDEs)
Optional Verwendung von Redux: Ngrx/store
Library für State Management
Unidirektionaler Datenfluss (von React)
Gut für Testbarkeit
Version 2 auf 3:Angular Router hatte bereits Version 3
Version 3 auf 4:
Router-Erweiterung
Ausgliederung Animationen in eigenes Projekt
NGIF wurde erweitert um ELSE
Deklarativ dynamisch Komponenten zur Laufzeit erzeugen
Upgrade auf neue Typescript-Version
Neue View-Engine für kürzere Ladezeiten
Version 4 auf 5:
März 2017 Angular 4
Angular 5 für Oktober 2017 angekündigt (23.10.)
Bugfixes, Performance-Verbesserungen mit Fokus auf Compiler
Nutzung des Semantic Versioning für verständliche, planbare Releases
Major: alle 6 Monate
Minor: jeden Monat
Patch: jede Woche
Marius
Virtueller DOM: Dom-Diffing: Nur benötigte Komponenten werden neu geladen
Kein 2-Way-Binding inkludiert: Flux Architektur empfohlenUnidirektionaler Datenfluss: Vereinfachung Aufbau und Wechselwirkungen zwischen Komponenten (Callback-Funktionen)Vielleicht wichtigste Neuerung!
JSX: JavaScript syntax extension: Integration von HTML in JS
Toolchain (npm, webpack -> Module bundler, babel -> ES-Transpiler)
Marius
Version 16
Zweck: Flüssiges Darstellen von Animationen, Layout
Fiber als neues “Fundament” -> Veränderungen betreffen nur Kernbereiche von React selbst (für Scheduling)
Public API unverändert
Inkrementelles (selteneres) Rendering -> weniger Ressourcen notwendig
Verständlichere Stacktraces
Vue.js
Weniger “rechthaberisch”
Einfacher zu lernen als Angular
MVVM
Marius
Vergleich zwischen Angular und React ist Äpfel mit Birnen zu vergleichen
Kaum zu vergleichen
Aber, jedes Projekt muss sich entscheiden, daher tun wir das trotzdem
Die Kiwis sind Vue.js
Marius
React
Wurde verkauft von Facebook als “V” von MVC
Tatsächlich wurde MVC abgelöst durch Unidirektionalen Datenfluss und Flux
Angular als Komponentenbasiertes MVC-Framework -> Jede Komponenten enthält individuelles MVC-Set
Offizielle Aussage von Google: Template = View, Component= Controller, ViewModel
--> Marius
> Shadow DOM bietet Kapselung von DOM-Teilen und CSS in einer Web Component
--> Marius
React UND Angular sind lebendig und machen Spaß
Werden von großen Unternehmen gehostet
Werden von großen Teams weiterentwickelt
Besitzen große, hilfsbereite Community
Bugs werden schnell gefixed
Große Toolprovider unterstützten React und Angular in IDE
--> Marius
jQuery hat wesentlich größeren Marktanteil -> wenig Aktualität und greift auf anderes Konzept zurück
Millionen anderer JS-Frameworks -> Vortrag ist keine Marktübersicht
--> Marius
BSD-Lizenz mit zusätzlicher Patentlizenz, welche den Widerruf der Lizenz bei Klagen oder bei Patentstreitigkeiten mit Facebook vorbehält
--> Stephan
--> Stephan
some bloggers claim "TypeScript code shows always errors because of incompatibilities with existing JavaScript code"
if that's true, it's normal to see red squiggly lines in your code
you stop noticing the errors
doesn't match my experience
Typings / Definitely Typed etc. do a good job
--> Stephan
Stephan
We show TSX code in a minute
--> Stephan
classes: use both prototypes and functions in JavaScript
private scope: IIFE pattern (immediately invoked function expression)
Marius
JSX (JavaScript), JavaScript Syntax eXtension für Kompilierung nach JS (type checking etc.)
TSX, Typescript Library für React-Code
LESS als Stylesheet-Sprache, um das Schreiben von CSS effizienter zu machen
--> Marius
Marius
OFFEN:
All about components
Each component has
mutable state
immutable properties
--> Stephan
--> Stephan
--> Stephan
--> Stephan
--> Stephan
--> Stephan
--> Stephan
--> Stephan
Marius
Virtueller DOM
Manipulation des realen DOM ist teuer, daher wird dieser simuliert -> Re-Rendering der Unterschiede
Marius
Shadow DOM als Teil der Web-Components (Nutzung von Google-Polyfills, wenn Browser nicht unterstützt)
Lösung, um CSS-Urwald zu umgehen
Marius
FakeHttpService: seit Angular 5 geht es einfacher ( Interceptor). Trotzdem ein schönes Beispiel für DI.
--> Marius
--> Marius
--> Stephan
--> Stephan
Stephan
Angular is good for teams with Enterprise background
it's hard for experience JavaScript teams