Moderne Frontend-Architektur (SPAs) mit JavaScript
JAX 2019
Slides: http://bit.ly/jax-spa
Wir nehmen Frontend-Architektur nicht für voll
Zitate
- Frontend-Architektur? Ich dachte sowas gibt es gar nicht
- Das Frontend kloppen wir am Ende einfach irgendwie drauf
- Architektur für ein bisschen CSS-Pixel-Geschubse?
Smart und Dumb Components
Grenzen
Problem 1: Über Komponenten verteilter Zustand
Wo muss ich nach Fehlern suchen? Wo ist die Logik?
In welchem Zustand ist meine Anwendung?
Problem 2: Getrennte Komponentenhierarchien
Geht entweder nicht oder "Gott-Komponente" entsteht
Problem 3: Gemeinsamer ("globaler") Zustand
Wie kommt Zustand von ganz oben nach ganz unten?
Problem 4: UI und Logik vermischt
Wiederverwendung? Framework-unabhängigkeit? Testbarkeit?
Wie, wo und wann wird die Anwendung initialisiert?
Basics
// variables can have type information
let foo: string;
foo = 'yo';
// Error: Type 'number' is not assignable to type 'string'.
foo = 10;
// types can be inferred (return type)
function sayIt(what: string) {
return `Saying: ${what}`;
}
const said: string = sayIt(obj);
class Sayer {
what: string; // mandatory
constructor(what: string) {
this.what = what;
}
// return type if you want to
sayIt(): string {
return `Saying: ${this.what}`;
}
}