Suche
Sechs Experten kommentieren aktuelle Entwicklungen im Web - Teil 3

JavaScript Expertencheck: Das sind die Trend-Themen 2018

Hartmut Schlosser

© Shutterstock / TierneyMJ

Im ersten Teil unseres Expertenchecks ging es um Trends und Herausforderungen in der Webentwicklung. In Teil 2 haben wir uns die aktuellen Entwicklungen bei den Frameworks React, Angular und Vue.js vorgenommen. Teil 3 widmet sich nun den Themen, denen unsere Experten momentan besondere Aufmerksamkeit schenken.

JavaScript 2018: Trend-Themen

Unsere Experten sind zu verschiedenen Themen auf Konferenzen und Trainings unterwegs. In einer Schlussrunde wollen wir wissen, womit sie sich aktuell beschäftigen und welche Erkenntnisse man aus ihren Vorträgen und Workshops mit nach Hause nehmen kann.

JavaScript Micro Frontends

JAXenter: Nils, deine Session auf der W-JAX heißt „Micro Frontends: JavaScript Integration Patterns.“ Was sind Micro Frontends – und für welche Einsatzzwecke sind sie sinnvoll?

Nils Hartmann: Die Idee hinter Micro Frontends ist, dass man eine große Web-Anwendung zur Entwicklung in mehrere kleine Teile zerlegt, die unabhängig voneinander entwickelt werden können.

Auch Web-Anwendungen können – wie im Backend mit Microservices – in mehrere kleine Stücke aufgeteilt werden.

Heutzutage sind „moderne“ Web-Anwendungen, die in JavaScript implementiert und auf dem Client ausgeführt werden, sehr mächtig und leistungsfähig, müssen hohen Anforderungen hinsichtlich User Experience, also z.B. Performance, Stabilität, Interaktivität, gerecht werden. Wir sehen außerdem in immer mehr Fällen, dass auch Anwendungen, die in der Vergangenheit als Desktop-Anwendungen implementiert worden sind, in das Web wandern, etwa Outlook, Google Docs oder das Design-Tool Figma. Wir haben es also mit “echten” Anwendungen zu tun und damit einhergehend auch mit den gewohnten Problemen bei der Entwicklung von Anwendungen, z.B. eine große und komplexe Code-Basis, die von mehreren Entwicklerteams bearbeitet werden soll, die in unterschiedlichen Geschwindigkeiten released werden soll und so weiter.

Die JavaScript-Experten

 JavaScript Experte Nils Hartmann

Nils Hartmann – Softwarearchitekt bei EOS Technology Solutions

JavaScript-Experte - Jens Grochtdreis

Jens Grochtdreis – Gründer der webkrauts

JavaScript-Experte Karsten Sitterberg

Karsten Sitterberg – Freiberuflicher Angular-Experte, Kolumnist bei JAXenter
Tobias Struckmeier – Software Entwickler bei der Adesso AG

JavaScript-Experte Michael Sand

Michael Sand – Consultant bei CA Technologies

JavaScript-Experte Golo Roden

Golo Roden – Gründer und CTO der the native web GmbH

Um darauf zu reagieren, können auch Web-Anwendungen (wie im Backend mit Microservices) in mehrere kleine Stücke aufgeteilt werden, so dass beispielsweise eine Fachlichkeit immer nur von einem Team entwickelt wird und jeweils eigenständig released werden kann.

Wenn man die Anwendung allerdings auseinandernimmt, um sie in getrennten Einheiten zu entwickeln, muss man sie – und hier passt die Analogie mit den Microservices im Backend nicht mehr richtig – spätestens zur Laufzeit wieder zusammensetzen. Und das soll natürlich möglichst nahtlos passieren, denn Anwenderinnen und Anwender sollen schließlich eine Anwendung “aus einem Guss” erleben und nicht mehrere Einzelteile, die sich im schlimmsten Fall noch unterschiedlich darstellen und verhalten. Über diesen Widerspruch – auseinandernehmen einerseits, zusammensetzen andererseits -, und ob der überhaupt auflösbar ist, wird es in unserem Talk auf der W-JAX gehen.

JAXenter: Welche Rolle spielen die JavaScript Integration Patterns bei der Implementierung von Micro Frontends?

Nils Hartmann: Web-Anwendungen lassen sich auf mehrere Arten entwickeln. Eine wichtige Unterscheidung ist, ob eine Anwendung mehr oder minder vollständig auf dem Server gerendert wird (und der Browser die fertige Anwendung nur noch darstellen muss), oder ob die Anwendung in JavaScript implementiert und im Client ausgeführt wird. Dementsprechend gibt es auch für diese unterschiedlichen Szenarien jeweils unterschiedliche Wege und Möglichkeiten, Micro Frontends zu bauen.

In unserem Talk konzentrieren wir uns auf die letztgenannte Variante, die JavaScript-basierten Clients, und schauen uns an, welche Möglichkeiten – oder Patterns – es gibt, Single-Page-Anwendungen in kleinere Teile aufzuteilen, so dass sie sich von mehreren Teams getrennt entwickeln lassen. Leider – soviel sei an dieser Stelle schon verraten – gibt es dafür keinen Königsweg, sondern man muss immer gucken, an welcher Stelle man bereit ist, Kompromisse einzugehen: entweder in der Entwicklung oder für Anwenderinnen und Anwender.

Modulares CSS

JAXenter: Jens, im Abstract deines Workshops auf den JavaScript Days schreibst du, Webseiten seien modulare Systeme, und du zeigst, wie man eine Seite modular durchdenkt. Worauf kommt es dabei an?

Jens Grochtdreis: Bei der Erstellung von Modulen sollte man sich nicht an der Optik derselben orientieren, sondern an den Inhalten derselben. Denn die Arbeit beginnt im Frontend mit HTML. Mittels CSS kann ich viele unterschiedliche Optiken daraus erstellen. So kann ich aus einer Liste mal eine horizontale, mal eine vertikale Navigation in sehr unterschiedlichen Darstellungsformen machen. Das HTML bleibt dabei immer gleich. Deshalb sollte die Benennung des Moduls so generisch wie möglich sein. Also eher „Navigation“ oder „Teaser“, anstatt „horizontale, grüne Navigation“ oder „Hundefutter-Teaser“. Die Inhalte und Optiken kommen erst in einem zweiten und dritten Schritt.

Angular in der Praxis

JAXenter: Karsten, deine Session auf der W-JAX heißt „Angular im Projektalltag: Dos and Don’ts.“ Dabei gehst du auf typische Fallstricke ein, die man bei der Verwendung von Angular vermeiden sollte. Kannst du einmal ein Beispiel nennen?

Karsten Sitterberg: Ein typischer Fallstrick bei der Verwendung von Angular tritt zum Beispiel auf, wenn von standardisierten Vorgehensweisen bei der Entwicklung (teils bis zur Unkenntlichkeit der Standards) abgewichen wird. Dies geschieht häufig, wenn Entwickler unerfahren mit einer neuen Technologie – etwa ngrx – sind oder bestimmte sprachliche Mittel von TypeScript/HTML/CSS, die zur optimalen Umsetzung der Standards sinnvoll sind, nicht beherrschen.

Hier hilft es vor allem, sich durch Lesen von Blogs oder auch durch Konferenzbesuche und Meetups auf dem Laufenden zu halten. Hierbei kann zum Beispiel auch der Austausch mit anderen Entwicklern hilfreich sein, oder die Unterstützung durch erfahrene Entwickler in konkreten Projekten. Um Austausch von unterschiedlichsten Entwicklern im Bereich Frontend zu unterstützen, habe ich etwa die FrontendFreunde (mit) gegründet.

For free: The iJS React Cheat Sheet

For free: The iJS React Cheat Sheet

You want to get started with React? Our Cheat Sheet includes all the most important snippets. Get the sheet for free!

 

API Summit 2018
Christian Schwendtner

GraphQL – A query language for your API

mit Christian Schwendtner (PROGRAMMIERFABRIK)

DDD & Continuous Deployment

JAXenter: Michael, deine Session auf der W-JAX heißt “Domain Driven Design Full-Stack-App-Development mit Spring & React.” Dabei zeigst du die Entwicklung einer Crossplattform App mit React-Native. Welche Rolle spielt Domain Driven Design dabei?

Michael Sand: Domain-driven Design spielt dabei eine sehr zentrale Rolle, da dadurch die Komplexität der Gegebenheiten und Sachverhalte in logische und abgegrenzte Untermengen geschnitten wird und diese kleinen Arbeitspakete organisatorischer einfacher zu verteilen sind. Nach der Anwendung von DDD hat man eine gute Basis für die Einführung von Microservice-Architekturen.

Das eigentliche Ziel ist es, einen verlässlichen Weg für Continuous Deployment aufzuzeigen. Durch die kleinen autarken Systeme ist es einfacher, die Deployments zu koordinieren, als bei einem „BigBang Deployment“ von beispielsweise monolithischen Anwendungen.

Vor- und Nachteile von Redux

JAXenter: Tobias, du bist Redux-Experte und hältst auch auf den JavaScript Days einen Workshop zum Thema. Was ist die Idee hinter dem Redux-Konzept?

Der Vorteil von Redux ist, dass ich in diesem Konzept wenig Überraschung beim Halten des Anwendungszustands zu fürchten habe.

Tobias Struckmeier: Der Vorteil von Redux ist, dass ich in diesem Konzept wenig Überraschung beim Halten des Anwendungszustands zu fürchten habe. Ich kann den State sehr gut über meine Frontend-Applikation verteilen und erhalte durch das Konzept der Reducer zudem gut testbaren Code. Dieser kommt mir gerade in großen Projekten mit vielen Teammitgliedern zugute. Dafür habe ich zwar ein wenig Boilerplate-Code zu schreiben, der Gewinn sind jedoch weniger Überraschungen und gute Debugging Features.

JAXenter: Weshalb ist State in Webanwendung eigentlich problematisch?

Tobias Struckmeier: Vielfach war der State ein Problem, weil verschiedene Teile meiner Frontend-Applikation diesen modifiziert haben. Dann kam React mit dem Flux-Pattern, das für einen unidirektionalen Datenfluss gesorgt ist – was schon einmal einiges verbessert hat. Redux sorgt darüber hinaus dafür, dass States einzeln gemanagt werden können. Ich habe viele kleine Reducer, die sich nur um einen kleinen Aspekt meines Applikationszustands kümmern. Und ich habe keine Seiteneffekte durch andere Teile meiner Applikation. Nachdem ich mit dem Reducer Änderungen auf den State ausgeführt habe, wird das mit Redux automatisch auf meine React-Anwendung angewandt.

JAXenter: Welche Alternativen siehst du zu Redux?

Tobias Struckmeier: In der React-Welt gibt es prinzipiell immer sehr viele Alternativen – das ist eine der Stärken in diesem Ökosystem. Es gibt beispielsweise MobX, mit dem man seinen State wesentlich einfacher verwalten kann, was aber ab einer bestimmten Team- oder Projektgröße ein bisschen schwieriger ist. Sehr stark im Kommen ist auch RxJS, wo eher mit Streams gearbeitet wird und die Prinzipien von Redux nachempfunden werden können. Das sind sozusagen die „hippen“ Alternativen, die man noch hat.

Angular-Anwendungen mit Redux from JAX TV on Vimeo.

Funktional mit React

JAXenter: Golo! Auf den React Days 2018 hältst du einen Deep Dive Workshop zu React, bei dem du Konzepte aus der funktionalen Programmierung vorstellst: Immutability, Value Objects, Unidirectional Dataflows, Identität, Gleichheit, Pure Functions, etc. Weshalb kommt die funktionale Programmierung gerade wieder so mächtig zurück, nachdem lange Jahre doch alle Zeichen auf Objektorientierung standen?

Golo Roden: Nimmt man die klassische objektorientierte Programmierung ernst, dienen Objekte dem Abbilden von Fachlichkeit. Sie repräsentieren fachliche Vorgänge. Das bedeutet, dass sie zum einen alle für einen Vorgang relevanten Daten kapseln und zum anderen über die Logik verfügen, um mit diesen Daten zu arbeiten. Nimmt man das objektorientierte Paradigma ernst, bedeutet das, sich primär mit dem Analysieren und Modellieren von Fachlichkeit zu befassen.

In der Realität wird in der Regel jedoch über technische Aspekte diskutiert. Im schlimmsten Fall werden diese Diskussionen von objektorientierten, technischen Eigenheiten der jeweiligen Programmiersprache bestimmt. Dabei ist Entwicklung von Software doch kein Selbstzweck, sondern dient dazu, die fachlichen Probleme der realen Welt zu lösen! Diese Denkweise findet man heutzutage allenfalls im Bereich des Domain-driven Design.

Die Objektorientierung wird also missverstanden und daher in der Regel falsch angewendet. Selbstverständlich kann die objektorientierte Programmierung ihre Versprechen wie Abstraktion und Wiederverwendbarkeit dann nicht mehr erfüllen, was zu Geringschätzung führt. Das ist das eine Problem.

Die Objektorientierung wird missverstanden und daher in der Regel falsch angewendet.

Das andere Problem ist tatsächlich technischer Natur. In den 90er Jahren nahm die Geschwindigkeit von Prozessoren stetig zu. Lief eine Software zu langsam, konnte man im Zweifelsfall einfach auf die nächste Hardwaregeneration warten, die das Problem dann lösen würde. Doch diese Zeiten sind vorbei: Prozessoren werden nicht mehr schneller, stattdessen steigt ihre Anzahl.

Software profitiert von mehr Prozessoren jedoch nicht automatisch. Damit sie die gestiegene Leistung nutzen kann, muss sie Aufgaben parallelisieren können. Während das zeitgleiche Lesen von Daten unproblematisch ist, gilt das für das Schreiben nicht. Es kommt zu Race-Conditions und anderen Timing-Problemen, die nur schwer in den Griff zu bekommen sind.

Nicht umsonst bietet nahezu jede objektorientierte Programmiersprache spezielle Schlüsselwörter, um den zeitgleichen Zugriff auf Daten zu synchronisieren oder zu sperren. Das macht den Entwurf und die Entwicklung von Objekten aufwändig und fehleranfällig.

Das steht im Widerspruch zu dem Wunsch, einfachen und fehlerfreien Code zu erhalten, dessen Auswirkungen sich vorhersagen lassen, ohne vom Zufall oder anderen zeitlichen Effekten zur Laufzeit abzuhängen. Und genau das klappt mit der funktionalen Programmierung viel besser.

JAXenter: Kannst du das vielleicht einmal anhand eines der oben genannten funktionalen Konzepte etwas genauer erläutern?

Golo Roden: Ein wunderbares Beispiel ist die Unveränderlichkeit von Objekten, die sogenannte Immutability. Die grundlegende Idee ist, dass ein Objekt nicht verändert werden kann. Stattdessen erzeugt jede Veränderung eine neue Instanz. Damit gibt es per se keine konkurrierenden Schreibzugriffe, also kann es folglich auch keine Probleme wie Data-Races geben. Jede Instanz repräsentiert dann einen einzelnen unveränderlichen Zustand.

Hinzu kommt, dass jede Änderung deutlich wird, da ein Funktionsaufruf eine neue Instanz zurückgibt. Man weiß genau, dass das Objekt nach einem Funktionsaufruf noch den gleichen Zustand besitzt wie zuvor, und dass der neue Zustand im Rückgabewert enthalten ist. Das macht das Nachdenken über den Code und dessen Effekte viel einfacher.

Außerdem wird in der zeitlichen Abfolge ersichtlich, welche Funktionsaufrufe voneinander abhängen und welche nicht. Diese Information kann nicht nur der Mensch, sondern auch der Compiler ermitteln – und entsprechend parallelisierten Code für all jene Funktionsaufrufe erstellen, die unabhängig voneinander sind.

Ironischerweise ist das alles nichts Neues. Solche Überlegungen gab es schon in den 1950er-Jahren im Rahmen der Programmiersprache Lisp, aus der man übrigens enorm viel lernen kann, gerade in Hinblick auf diese grundlegenden Konzepte von Datenstrukturen und Abläufen.

Vieles davon wird beziehungsweise wurde in React aufgegriffen. React ist also, konzeptionell gesehen, gar nicht so neu, wie viele zunächst glauben. Die große Leistung von React ist aber, die Konzepte und Methoden aus der funktionalen Programmierung leicht verständlich zugänglich zu machen und deren Verbreitung zu fördern. Wer die funktionale Programmierung und ihre Konzepte kennt, wird in React dementsprechend viel Bekanntes wiederfinden.

JAXenter: Vielen Dank für Eure spannenden Antworten!

Geschrieben von
Hartmut Schlosser
Hartmut Schlosser
Content-Stratege, IT-Redakteur, Storyteller – als Online-Teamlead bei S&S Media ist Hartmut Schlosser immer auf der Suche nach der Geschichte hinter der News. SEO und KPIs isst er zum Frühstück. Satt machen ihn kreative Aktionen, die den Leser bewegen. @hschlosser
Kommentare

Hinterlasse einen Kommentar

1 Kommentar auf "JavaScript Expertencheck: Das sind die Trend-Themen 2018"

avatar
400
  Subscribe  
Benachrichtige mich zu: