EnterJS – Blick ins JavaScript-Universum

Die EnterJS vorgestellt

Vom 20.06. – 21.06.2018 fand die JavaScript-Fachkonferenz EnterJS zum fünften Mal statt. Die Konferenz wird organisiert und durchgeführt von heise Developer, dem Magazin iX und dem dpunkt.verlag. Der Schwerpunkt der Konferenz ist das JavaScript-Ökosystem mit all seinen Facetten. In über 45 Vorträgen standen neben der Entwicklung mit SPA-(Single-Page-Application-)Frameworks wie Vue.js, Angular oder React auch Progressive Web Apps, Dev-Ops-Themen, UI/UX-Design und Web Security im Fokus. Das Unit-Testing in JavaScript war ebenfalls ein Thema. Dieses stellte unser Kollege Holger Grosse-Plankermann mithilfe von Jest vor. In diesem Blogbeitrag wollen wir die zentralen Themen der Konferenz vorstellen, die die aktuellen Entwicklungen des JavaScript-Universums widerspiegeln.

Seven Things to do …

Den ersten Talk der Konferenz hielt Chris Heilmann von Microsoft. Er sprach über verschiedene Aspekte der Entwicklung mit JavaScript, die sowohl Entwickler als auch Nutzer zufriedener machen. Chris nannte sieben Punkte, die – sollten wir sie befolgen – unser Leben als Entwickler erleichtern:

1. Understanding that JavaScript is not a language
2. Concentrating on the now
3. Limiting our development environment
4. Making it harder to write bad code
5. Getting to know our tooling
6. Giving back to others
7. Muffling the noise

Die ausführlichen Erläuterungen zu den Punkten findet ihr hier . Einen Punkt möchten wir jedoch herausgreifen, der nicht nur die Entwicklung mit JavaScript betrifft, sondern allgemein auf die Entwicklung übertragen werden kann:

In der Welt der unzähligen Möglichkeiten kann niemand ein Experte für alles sein.

Schwerpunkte der Konferenz

Modularisierung von Webanwendungen

Aufgrund der Tatsache, dass heutige SPAs in vielen Belangen immer komplexer werden, wächst auch hier der Wunsch, SPAs zu modularisieren. Durch die Modularisierung erhofft man sich vergleichbare Vorteile, wie wir sie bereits aus Microservices-Architekturen aus dem Backend kennen. Allerdings ist zu beachten, dass die Kombination der unabhängigen Module für den Anwender wie eine einheitliche Anwendung aussehen soll. Für die Umsetzung solcher Modularisierung gibt es bereits unterschiedliche Möglichkeiten:

• Hyperlinks
• iFrames
• Majestic Modular Monoliths
• Web Components

Die wohl einfachsten Möglichkeiten sind beispielsweise die Verwendung von Hyperlinks zwischen verschiedenen Komponenten oder von iFrames in bestehenden Komponenten. Der Nachteil bei Hyperlinks ist, dass der vorherige Zustand beim Seitenwechsel verloren geht. Gegen iFrames spricht die erschwerte Kommunikation zwischen Komponenten sowie die dynamische Anpassung an Inhalte und die eingeschränkte Suchmaschinenoptimierung.
Eine Alternative sind Majestic Modular Monoliths. Dabei werden einzelne Module erstellt und im Deployment zu einem Monolithen zusammengeführt. Innerhalb der Anwendung können die Module durch Lazy Loading nachgeladen werden (Beispiel: dynamic import in React ).
Im Gegensatz zu modularen Monolithen können Web Components durch unterschiedliche Frameworks in verschiedenen Versionen realisiert werden. Web Components ermöglichen es unter anderem, eigene HTML-Elemente zu realisieren, die durch eine JavaScript-Instanz kontrolliert werden. Erste Realisierungsmöglichkeiten von Web Components bieten Angular Elements , Wrapper Components von Vue.js , Polymer oder auch ReactJs .
Insgesamt bieten diese Möglichkeiten unterschiedliche Vor- und Nachteile und müssen je nach Anwendungsfall abgewägt werden.

“Battle of the Frameworks”

Battle (Bashing) of the Frameworks – in den letzten Jahren ein beliebtes Thema innerhalb der Community – fand auf der Konferenz beinahe nicht statt. Man hat gesehen, dass sich mittlerweile drei Frameworks (Angular, React & Vue.js) als enterprisefähig etabliert haben. Sie verfügen über ein ausgereiftes Ökosystem und werden von einer aktiven Community vorangetrieben. Die Wahl hängt somit eher von den persönlichen Vorlieben des Teams und nicht von dem mangelhaften Ökosystem des Frameworks ab. Allgemein war deutlich zu erkennen, dass sich alle Frameworks schnell weiterentwickeln und verschiedene Lösungsansätze zu unterschiedlichen Problemen bieten.

Reaktive Anwendungen (RX)

“Reactive is everywhere” und durfte auch nicht auf der EnterJS fehlen. ReactiveX ist eine API für asynchrone Programmierung mittels Observables. RxJs ist die JavaScript-Implementierung der API. Das Angular-Framework baut z. B. grundlegend auf RxJS auf. Außerhalb des Frameworks wurde das Thema von Michael Hladky abgedeckt. Zum einen sprach er über das Scheduling mit RxJS, zum anderen zeigte er in einer unterhaltsamen Demo das Echtzeit-Stream-Processing von Morsecode mit RxJS.

Progressive Web Apps & Webassembly

Progressive Web Apps (PWA) bieten dem JavaScript-Universum neue Möglichkeiten. Einmal geladen, bieten PWAs auch Offline-Funktionalität. Dabei lädt der Service Worker die benötigten Inhalte entweder aus dem Web oder aus dem Cache. Dies ermöglicht es der Businesslogik, vollständig im Client zu laufen. Hier kann in Zukunft auch WebAssembly (Wasm) ins Spiel kommen. Dies ist ein Standard für Bytecode, der unter anderem C- oder C#-Code mit nahezu nativer Performance dem Web zugänglich macht. So kann bestehende Businesslogik oder komplexe Logik, wie etwa bei Spielen und 3D-Anwendungen, auch ins Web portiert werden. Dabei darf Wasm nicht als Alternative zu JavaScript gesehen werden, sondern lediglich als Erweiterung des bestehenden Toolkits. Insgesamt stellen PWAs somit eine Konkurrenz zu nativen, mobilen Apps dar. Aber nicht nur das mobile Development ist für PWAs ein Anwendungsgebiet, sondern auch Anwendungen mit sensiblen Daten – gerade in Zeiten der DSGVO – bieten sich für diese Art der Web App an.

Datenvisualisierung mit D3.js

Im Laufe der letzten Jahrzehnte gewann das Sammeln von Daten enorm an Wichtigkeit. Der Bereich der Datenvisualisierung wird somit immer bedeutsamer. Wir versuchen Daten aufzubereiten, indem wir sie visualisieren. Somit können Daten einfacher interpretiert und ausgewertet werden. Der Browser bietet dabei eine ideale Plattform für die Datenvisualisierung. D3.js scheint nach wie vor das Werkzeug der Wahl zu sein, um im Browser Daten zu visualisieren. In der Keynote sprach Shirley Wu über den Einsatz von D3.js zusammen mit SVGs und zeigte ein paar sehr kreative Visualisierungen. In einem weiteren Talk stellte Mirco Zeiß die Grundlagen der Bibliothek vor. Der Sprecher betonte wiederholt, dass man auf den Einsatz der D3.js-Wrapper verzichten und sich stattdessen mit der eigentlichen API auseinandersetzen sollte.

Fazit

Die EnterJS 2018 war eine überaus gelungene Konferenz. Sie bot ein breites Spektrum an Themen, die von kompetenten Referenten vorgestellt wurden. Auch die Organisation und Durchführung war sehr professionell und ließ keine Wünsche offen. Für uns bleibt nur noch zu sagen: Wir kommen wieder.