Platform empowered Web-Stack

Der Wandel im Web-Bereich

Technologie-Wandel

Die Web-Technologie hat sich in den letzten 10 Jahren rasant weiterentwickelt und es gibt eine grosse Anzahl an Tools und Frameworks, welche insbesondere die Entwicklung von Web-Applikationen erleichtern. Diese benützen oft zusätzliche Abstraktions- und Sprach-Features, welche vom Browser selbst nicht unterstützt werden und darum Transpiler (Projekt) und Polyfills (Browser) benötigen, was wiederum einige Trade-Offs mit sich bringt:

• Verminderte Performance: höhere Ladezeit (Framework), langsamere Ausführung (Polyfills)

• Laufend kleine Verzögerungen beim Entwickeln (Prä- / Post-Prozessoren)

• Aufwändige Setups für Unit- und e2e-Tests

• Fehleranalyse nur mit entsprechenden Browser-Tools möglich

• Aufbau von proprietärem Know-how

Die Web-Standards werden von einem Konsortium (W3C) über ein mehrstufiges Verfahren laufend erweitert und von den Browser-Herstellern implementiert. Gerade Javascript (oder ECMA-Script, kurz ES) hat sich im letzten Jahrzehnt enorm verbessert weshalb es sinnvoll ist, seinen lieb gewordenen Tech-Stack auf mögliche Anpassungen zu überprüfen, ob sich oben genannte Trade-Offs eliminieren lassen.

Architektur-Wandel

Nicht nur auf rein technischer Ebene hat sich die letzten Jahre viel bewegt sondern auch in der Art und Weise, wie wir Web-Applikationen aufbauen. Das MVC-Muster (und seine Varianten) ist kontinuierlich durch die Component-Based-Architecture abgelöst worden, was in diesem “Dead of MVC” Artikel sehr schön beschrieben wird. Hier macht es Sinn, die Architektur auf seine Bedürfnisse zu prüfen, denn die Aufteilung in kleine Komponenten mit einer einzelnen, gezielten Verantwortlichkeit unterstützt z.B. auch das agile und iterative Vorgehen.

UI-Wandel

Mit dem Aufkommen von Touch-Devices (Phones / Tablets) sind auch die Anforderungen an die Bedienelemente gestiegen. Buttons, Checkboxen, Menüs etc. werden in einem ansprechenden Design (z.B. Googles “Material”) erwartet, ebenso wird Touch-Feedback (optischer Effekt bei Knopfdruck) oder Keyboard-Navigation als selbstverständlich angesehen.
Für sämtliche aktuellen Frontend-Frameworks sind solche Komponenten spezifisch verfügbar und erlauben eine nahtlose Integration, was aber auch hier Nachteile mit sich bringt - der an den Browser ausgelieferte HTML-Code ist wesentlich komplexer als derjenige im Quellcode, was die Analyse von Styling- und Layout-Fehlern erschwert. Ebenso komplex wird für e2e-Tests plötzlich der Zugriff auf die Elemente, was grossen Aufwand für Selektoren oder das Page-Object-Pattern erfordert.

Neue Standards für neue Möglichkeiten

Frameworks

Die Popularität von Frameworks wie React und Vue.js kommt nicht von ungefähr, denn sie adressieren genau den oben erwähnten Wandel - sie fördern grundlegend die Komponenten-Archtektur, wobei vor allem Vue.js sehr übersichtliche Single-File-Components (HTML, CSS und UI-Logik in einem File zusammengefasst) bietet. Beide Frameworks setzten auf Javascript-Standards wie Module, Objekte und Funktionen, was von allen Browser nativ unterstützt wird im Gegensatz zu Ansätzen wie Annotations, Dependency-Injection, Observables etc. Beide Frameworks erlauben zustandsbehaftete Funktionen (React-Hooks, Vue Composition-API), was die Wiederverwendbarkeit und Testbarkeit von Logik-Komponenten erleichtert. Auch hier setzt Vue.js in der neusten Version 3.0 auf Standards, wo für die Reaktivität (Detektieren von Datenänderungen zum Anpassen des Browserinhalts) ES2015-Proxies verwendet werden und einige Vorteile bringt (z.B. Array-Änderungen werden vollständig erkannt).
React, Vue.js und Co. unterstützen mittlerweile auch die Verwendung von Typescript (ein zentraler Grund für die Verbreitung von Angular im Enterprise-Bereich). Hier ist der Approach vor allem, den Code dort explizit zu typisieren, wo er Lesbarkeit und Verständnis fördert (“avoid Code-Noise”).

Vue.js: Reaktives Datenobjekt basierend auf ES2015-Proxies

Styling

CSS-Präprozessoren wie SASS / LESS etc. sind mächtige Tools mit vielen Features, welche einem bei der Strukturierung von grossen Stylesheets helfen. Unterteilen wir die Architektur aber nun in kleine Komponenten, welche nebst HTML und UI-Logik auch das Styling enthalten, dann sind Features wie Import, Mixins etc. nicht mehr notwendig. Einzig benötigt werden noch Variablen für Farb- und Layout-Konstanten einer UI-Spezifikation, diese können mit dem W3C-Standard CSS Custom Properties realisiert werden.

UI-Komponenten

Mit dem Standard für Web-Components wurde die Möglichkeit geschaffen, im Browser eigene Elemente (Custom-Elements) zu registrieren, welche sich dann wie herkömmlichen HTML-Elemente verwenden lassen. Auf Basis von Web-Components gibt es mittlerweile eine Reihe von UI-Bibliotheken wie Material-Design, SAP-UI5 und viele mehr (Lit-based, Open-WC), welche dadurch Framework-unabhängig sind und die HTML-Struktur im Browser (DOM) wieder “nachvollziehbar” machen. Ebenso werden die Hürden für e2e-Tests massiv abgebaut. Es gibt auch eine Reihe von Webcomponent-Frameworks welche einem dabei unterstützen, selbst solche UI-Komponenten zu schreiben (z.B. für Corporate-Elemente).

All together: Boost your Development

Durch die Verwendung von Web-Standards steigt nicht nur die Performance im Browser, sondern es bieten sich auch für die Entwicklung neue Möglichkeiten. So hat Evan You (Founder von Vue.js) nebenbei auch das Projekt Vite in’s Leben gerufen, welches auf dem nativen Import von Modulen im Browser aufbaut. Dadurch ist die Applikation blitzschnell gestartet und Änderungen am Code unverzüglich im Browser sichtbar. Zudem wird die Seite im Browser nur neu geladen, wenn es tatsächlich notwendig ist - dies ist besonders praktisch, wenn sich die Applikation in einem bestimmten Zustand befindet (spezifischer Dialog, Step innerhalb eines Ablaufs etc.) und man diesen z.B. nach einer Style-Änderung nicht jedesmal wiederherstellen möchte.
”Vite” selbst setzt auf Rollup.js als Bundler auf, was auch eine optimierte Auslieferung für die produktive Umgebung ermöglicht und sich so einfach in das bestehende CD / CI einbinden lässt.

Vite.js: Styling einer Webapplikation mit definiertem Zustand

Kompatibilität

Bei den hier erwähnten Standards handelt es sich nicht um “Fancy-Shit”, sondern um solche mit durchgängiger Unterstützung der Major-Browser. Ausnahmen bilden ältere Safari-Versionen (< 10.0) und der IE, welcher selbst von Microsoft365 nicht mehr unterstützt wird. Zur Not hat beispielsweise “Vite” ein Legacy-Plugin - die User-Experience wird aus Performance-Gründe aber oft fraglich sein.

Fazit

Um den heutigen Anforderungen von iterativem Vorgehen, schnellen Feedbacks mittels MVPs und Prototypen gerecht zu werden ist es empfehlenswert, einen schlanken und effizienten Technologie-Stack zu verwenden der sich an gängigen Web-Standards orientiert, möglichst transparent ist und wenig proprietäres Framework-Wissen erfordert. Diese Investition ist auch sehr nachhaltig - Frameworks kommen und gehen, der Standard bleibt.