Architektur für Single-Page Applications

JUG Saxony Day 2019

Nils Hartmann / @nilshartmann / nils@nilshartmann.net
Oliver Zeigermann / @DJCordhose / embarc GmbH

Slides: https://nils.buzz/jug_saxony_spa.html

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?
### Fallbeispiel: XING Welche Anforderungen wird es hier geben? Fehlen welche?
### Fallbeispiel: XING Welche Äußere Architektur? Was passt? Wie schneiden?
### Fallbeispiel: XING Wo sehen wir Komponenten?
### Fallbeispiel: XING Wo sehen wir Komponenten? Wie würden wir die Anwendungsteile in Smart/Dumb zerteilen?

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}`;
  }
}

Vielen Dank!

Es gibt Architektur-Ansätze für große und wartbare SPA Anwendungen

Fragen? Kontakt:

Nils Hartmann / @nilshartmann / nils@nilshartmann.net

Oliver Zeigermann / @DJCordhose / embarc GmbH

Slides:

https://nils.buzz/jug_saxony_spa.html