JavaScript Frameworks 2017

Die JavaScript-Welt entwickelt sich mit rasantem Tempo weiter. Regelmäßig erscheinen neue Tools, Frameworks und Bibliotheken.

Hinzu kommt noch eine immense Bandbreite, in welcher JavaScript angewendet werden kann: Von Mikrocontrollern mit Erspruino über mobile Apps mit React Native bis hin zu Server-Anwendungen mit Node.js.

Selbst Spezialisten fällt es schwer bei dieser Bandbreite den Überblick zu behalten. Aus dieser Ohnmacht hat sich im letzten Jahr der Begriff JavaScript Fatigue 1 2 entwickelt.

Im ursprünglichen Einsatzgebiet von JavaScript, der «Dynamisierung» von Inhalten auf Webseiten, wie bspw. Slider,- Tab- und Akkordeon-Elemente oder der Formvalidierung zur Verbesserung der Usability, ist die Entwicklung noch überschaubar. Hier ist die Bibliothek jQuery mit seiner Vielfalt an Plugins Platzhirsch 3.

Mittlerweile hat sich die native JavaScript API soweit weiterentwickelt, sodass anstelle von jQuery häufig VanillaJS eingesetzt werden kann 4 5.
Je nach Anwendungsfall kann hierbei zwischen einer der beiden Varianten entschieden werden.

Anders sieht es jedoch bei der Entwicklung von Web-Applikationen, »Single Page Application's« (SPAs) genannt, mit JavaScript aus. Hier stehen eine Vielzahl von Optionen zur Auswahl.

In diesem Post möchte ich einen Überblick über JavaScript-Frameworks und ihre Ökosysteme geben, die meiner Meinung nach vor der Neuentwicklung einer Webapplikation betrachtet werden sollten. Konkret sind dies Angular, Ext JS, React und Vue.js.

Angular

Angular Logo

Angular ist ein im September 2016 unter MIT-Lizenz erschienenes Open-Source-JavaScript-Framework von Google zur Entwicklung von Desktop und mobile Anwendungen. Es ist der Nachfolger des MV[C/VM]-JavaScript-Frameworks AngularJS und wurde von Grund auf neu entwickelt, um Schwächen des Vorgängers, bspw. bei der Performance zu beheben. Es ist eine Antwort von Google auf den Erfolg von Facebooks React-Bibliothek.

Das Framework setzt auf eine komponentenbasierte MVC-Architektur. Anwendungen werden durch die Komposition einzelner Komponenten, welche in sich abgeschlossen das MVC-Pattern implementieren, erstellt.

Angular ist in Module unterteilt, die alle Bereiche der Entwicklung einer SPA abdecken: Router, asynchrone Kommunikation, Formulare usw. Der Aufbau von Komponenten, die Integration der verschiedenen Module und damit die Architektur wird vom Framework stringent vorgegeben.
Für das Rendering der Komponenten werden HTML-Templates verwendet, die mit einer Angular- spezifischen Syntax angereichert werden.

Das Framework ist in TypeScript von Microsoft geschrieben – einem typisiertem Superset für JavaScript, das mittels Compiler wieder zu JavaScript umgewandelt wird. Die Typisierung erlaubt eine bessere statische Analyse des Quellcodes. Dadurch wird die IDE-Unterstützung bei der Entwicklung verbessert und die Wartbarkeit des Quellcodes erhöht.

Anwendungen mit Angular können sowohl in TypeScript als auch in JavaScript geschrieben werden.

Zum Framework gehört zudem eine CLI-Tool, welches den Entwickler bei der Entwicklung neuer Komponenten und dem Build der Anwendung unterstützt.

Mit Ionic gibt es für Angular ein Framework zur Entwicklung von mobilen Anwendungen. Es baut auf Cordova auf.

Die Einstiegshürde von Angular ist anfangs hoch, da viele neue Konzepte erarbeitet werden müssen, um die Funktion des Frameworks zu verstehen. Zudem sollte TypeScript erlernt werden, da Angular nur damit sein volles Potential entfalten kann.

Angular sollte genauer betrachtet werden, wenn eine komplexe Anwendung entwickelt werden soll. Denn dafür stellt es hinsichtlich Architektur, Ökosystem und Performance alles Notwendige bereit.

Hat man bereits Erfahrung mit strikt typisierten Programmiersprachen wie .Net oder Java ist Angular ebenfalls einen Blick wert, da es Konzepte und Paradigmen dieser Sprachen aufgreift.

Sencha Ext JS

Sencha Logo

Sencha Ext JS ist primär ein proprietäres MV[C/VM]-Framework für die Entwicklung von Cross-Platform-Applikationen. Es wird aber auch eine Open-Source-Variante unter der GPLv3-Lizenz angeboten. Ext JS zeichnet sich besonders durch eine große Bibliothek konfigurierbarer UI-Elemente, wie bspw. Grids, Charts, Layouts und Formulare aus.

Es ist mit Abstand das älteste Framework der hier aufgeführten – die Entwicklung begann im Jahr 2007 – und im medialen Buzz der neuen Frameworks hört man nicht mehr viel darüber. Zur Zeit ist Version 6.2 aktuell.

Anwendungen werden aus den verschiedenen UI-Komponenten zusammengesetzt. Somit lassen sich komplexe Applikationen sehr schnell aufbauen. Architektur und Struktur werden stringent vom Framework vorgegeben.

Mit Sencha CMD bietet das Framework ebenfalls ein CLI-Tool, welches eine zentrale Rolle bei der Entwicklung spielt. Es unterstütz den Entwickler beim Setup einer neuen Applikation und wird zum Kompilieren und Bündeln der JavaScript-Anwendung eingesetzt. Ab der Version 6.5 kann CMD auch ES2015 transpilieren.

Des Weiteren ist es mit CMD möglich, aus seiner Applikation heraus ein Paket für verschiedene Mobile Plattformen mittels Cordova zu erzeugen, um diese in den jeweiligen Appstores bereitstellen zu können.

Im Vergleich zu den anderen Frameworks steckt in Ext JS «alte Technik», doch Sencha arbeitet daran mit Ext JS 7 aufzuholen. Es soll auf ES2015+ umgestellt werden und ein modernes Toolkit basierend auf dem JavaScript-Werkzeugen wie npm, Babel und webpack eingeführt werden, welches Sencha CMD langfristig ablösen soll.

Wer an der Verwendung der UI-Elemente mit anderen Frameworks interessiert ist, findet mit dem Paket Ext JS Reactor für React und einem geplanten für Angular eine Möglichkeit.

Neben dem Framework und dem CLI-Tool bietet Sencha weitere Werkzeuge, die das Ökosystem abrunden. Darunter befinden sich beispielsweise Themer für die Gestaltung von Applikationen, Inspector für das Debugging und Test für umfangreiche Applikationstest.

Sencha Ext JS eignet sich besonders für datengetriebene Cross-Plattform-Applikationen, die mit den umfangreichen UI-Komponenten partizipieren.

Die Lernkurve ist zu Anfang steil, wie bei allen Frameworks mit eigenen Architektur-Paradigmen. Hat man den Einstieg gemeistert, dann steht einem ein mächtiges Framework mit durchdachten Werkzeugen zur Seite.

React

React Logo

React ist eine Open-Source-Bibliothek unter BSD-Lizenz, die von Facebook im Jahr 2013 veröffentlicht wurde. Es ist auf die Erstellung komponentenbasierter Benutzeroberflächen spezialisiert. Im Unterschied zu einem Framework gibt es dem Entwickler keinen Rahmen vor, wie dieser seine Applikation zu erstellen hat.

React besticht durch seine Performanz beim Rendering des Interfaces. Es verwendet ein Abbild des DOM im Speicher (Virtual DOM) und berechnet mit diesem die Veränderung, die sich bspw. durch Benutzerinteraktionen ergeben. Im Anschluss wird lediglich nur der Teil des DOM aktualisiert und neu gerendert, welcher von Änderungen betroffen ist. Welche Vorteile dieses Vorgehen mit sich bringt zeigt Samer Buna anschaulich in seinem Blogpost »Yes, React is taking over front-end development. The question is why.«.

Die Frontend-Komponenten werden nicht in HTML definiert, sondern JavaScript. Facebook hat hierfür JSX entwickelt. JSX ist eine Syntax-Erweiterung für JavaScript, die syntaktisch HTML ähnelt und zu JavaScript kompiliert wird.

const example = <h1>Hello, JSX!</h1>

// Wird kompiliert zu
var example = React.createElement(  
  "h1",
  null,
  "Hello, JSX!"
);

Da React nur ein Teilbereich bei der Applikationsentwicklung abdeckt, hat Facebook gleichzeitig ein neues Architektur-Muster entworfen: Flux – Ein Konzept eines unidirektionalen Datenfluss innerhalb einer Applikation.

Es gibt einige Implementierungen von Flux von denen sich Redux im Moment durchgesetzt hat.

Im React-Ökosystem muss man sich sein eigenes Framework aus vielen einzelnen Komponenten zusammensetzen. Für jede zusätzliche Aufgabe, bspw. eine asynchrone Kommunikation mit einer REST-API, die man bewältigen möchte, lädt man eine neue Bibliothek/Komponente in seine Applikation oder entwickelt selbst etwas. Eine ausführliche Liste von Komponenten ist bspw. im Github-Projekt Awesome React Components zu finden.

Ähnlich der CLI-Tools bei den anderen Frameworks gibt es im React Umfeld Starter-Projekte, wie Create-React-App, die die wichtigsten Bibliotheken enthalten und bereits vorkonfiguriert sind. So wird Entwicklern der Start erleichtert.

Mit React-Native gibt es eine Möglichkeit, mit seinen React-Kenntnissen native Mobile-Applikationen für iOS und Android zu entwickeln.

Das React-Ökosystem ist also ein flexibler Baukasten, welcher individuell an die Anforderungen einer Applikation jeder Größe angepasst werden kann. Zudem biete es eine geringere Einstiegshürde als umfangreiche Frameworks, da man sich Baustein für Baustein vorarbeiten kann und die grundlegende API von React einfach gehalten ist.

Für umfangreiche Anwendungen benötigt man jedoch Mechanismen, um Abhängigkeiten zwischen den verwendeten Bibliotheken zu verwalten und auf Inkompatibilitäten reagieren zu können. Denn Bibliotheken werden in der Regel nicht vom selben Personenkreis gepflegt und unterliegen unterschiedlichen Entwicklungszyklen oder die Weiterentwicklung wird komplett eingestellt.

Zudem hat man fast immer die Qual der Wahl zwischen einer Vielzahl an Möglichkeiten, wenn man eine neue Bibliothek benötigt.

Hier haben «monolithische» Frameworks einen Vorteil, wenn alles aus einer Hand kommt und «Vorgegeben» ist.

Für komplexe Anwendungen muss man sich zudem selbst um eine solide Architektur kümmern, denn diese gibt React selbst nicht vor.

Vue.js

Vue.js Logo

Vue ist ein Open Source Framework unter MIT-Lizenz das 2013 von Evan You mit dem Ziel veröffentlicht wurde, das Beste aus AngularJS und React zu vereinen. Es bezeichnet sich selbst als progressives Framework. Das bedeutet der Kern des Frameworks ist, wie React, nur für die View-Ebene einer Applikation, also der Erstellung von Benutzeroberflächen, vorgesehen. Durch das Hinzuziehen weiterer offizieller Pakete lässt es sich für die Entwicklung von SPAs verwenden.

Vue ähnelt in vieler Hinsicht React 6:

  • Es setzt ebenfalls einen virtuellen DOM ein. Durch eine andere Implementierung kann es in der Rendering Performance gegenüber React noch zulegen.
  • Unterstützt und fördert eine komponentenbasierte Frontend-Architektur
  • Zur Entwicklung mit modernem JavaScript wird ebenfalls noch ein Build-Werkzeug und ein Transpiler benötigt

Für die Implementierung von Komponenten setzt Vue jedoch auf HTML-Templates, wie Angular. Die Templates können zusätzlich mit speziellen Attributen, auch Direktiven genannt, angereichert werden. Über Direktiven können erweiterte Funktionen wie bspw. Data-Binding, Schleifen und Bedingungen im den HTML-Templates umgesetzt werden.
Details zeigt die ausführliche Dokumentation des Frameworks.

Vue verfügt über ein CLI-Tool mit welchen man anhand offizieller Vorlagen Anwendungen aufsetzen kann. Des Weiteren gibt es einen offiziellen TypeScript-Support.

Das Entwicklungsteam von Vue pflegt offizielle Pakete mit denen der Framework-Kern erweitert werden kann: Dies sind unter anderem Vue-Router und Vuex, eine für Vue spezialisierte Flux-Implementierung.
Eine lange Liste von zusätzlichen Paketen und Komponenten ist unter Awesome Vue aufzufinden.

Für Vue steht mit Weex von Alibaba ein Framework zur Entwicklung nativer mobiler Applikationen, ähnlich React Native, in den Startlöchern. Zudem gibt es mit Onsen UI ein Framework für HTML5 mobiler Applikationen, welches sich mit Vue kombinieren lässt.

Vue und sein Ökosystem sind, wie auch das React-Ökosystem, ein Baukasten, der Entwicklern viele Freiheiten lässt und einen möglichst einfachen Einstieg bietet. Hier gilt auch, dass man sich bei komplexen Anwendungen Gedanken machen muss, wie Abhängigkeiten verwaltet werden.

Zusammenfassung

Der Artikel gibt einen Überblick über vier große Frameworks und ihre Ökosysteme für die Entwicklung von Single-Page-Applications mit JavaScript.

Welches Framework man wann einsetzen soll, lässt sich nicht festlegen.
Die Wahl eines Frameworks ist immer von vielen Faktoren abhängig und die eigene Meinung und Vorlieben spielen ebenfalls eine große Rolle.

Bei der Auswahl eines Frameworks sollte man sich eine Liste mit den für die Anwendung relevanten Kriterien erstellen und verschiedene Frameworks nach diesen evaluieren. Pavels Jelisejevs zeigt in seinem Artikel »Choosing between React and Angular: An in-Depth Comparison« einen Ansatz, wie man an die Auswahl eines Frameworks herangehen kann.

Grundsätzlich sind die aufgeführten Frameworks für eine erste Annäherung eine gute Wahl. Sie haben alle ihre Daseinsberechtigung und werden die JavaScript-Welt noch einige Zeit begleiten.

Und nicht vergessen: Gute Applikationen gehören in gute Hände ;-)


Fußnoten:

von Dean Ranft

Dean is Frontend Developer at dkd Internet Service GmbH. He's developing and architecturing websites and web applications for almost 10 years.