201330Dez

Web 3.0: JavaScript-Frameworks und die Zukunft

Die Überschrift wurde absichtlich mit dem Buzzword "Web 3.0" versehen, da die "Versionsnummer des Webs" häufig als Synonym für die Zukunft des Internets gebraucht wird und die Bezeichnung den Kern dieses Artikels trifft: Es geht nicht um das Web 3.0 in seiner Gesamtheit, also um künstliche Intelligenz und Ubiquitous Computing, sondern um den Beginn einer neuen JavaScript-Ära. Während die Bezeichnung "Web 2.0" im Bezug auf JavaScript die bisherigen JavaScript-Frameworks und damit vor allem jQuery kennzeichnet, lässt sich in 2013 ein Umschwung im Bereich der Webentwicklung erkennen, der durch neue Ansätze wie MVC-Frameworks oder Node.js geprägt ist. Die jQuery-Epoche ist zwar noch allgegenwärtig, doch mit der stärkeren Verbreitung moderner Webbrowser und HTML5/CSS3 sowie ECMAScript 5 bzw. 6 wird sich das in Zukunft ändern.

JavaScript und Webstandards seit 2009

Die Grafik soll in etwa veranschaulichen, wie die Entwicklung von Webstandards und JavaScript-Frameworks seit 2009 vorangeschritten ist. ECMAScript 6 alias "Harmony" soll Ende 2013 seinen finalen Status erreichen. Bibliotheken wie MooTools, Prototype oder Dojo wurden einst entwickelt, um das Schreiben von JavaScript-Anwendungen einfacher zu machen und eine Website leichter mit Besonderheiten ausstatten zu können. Dazu zählten hauptsächlich Animationen und der Umgang mit Ajax, was JavaScript schließlich zum Durchbruch verhalf. Auch heute sind die Features aktueller Frameworks noch immer essenziell, wenngleich sich die Verteilung und Popularität der verschiedenen Bibliotheken etwas geändert hat. Die obige Grafik zeigt die Beliebtheit der JavaScript-Frameworks und jQuery dürfte heute, also Ende 2013, der klare Liebling im Bereich der Ajax- und DOM-Frameworks sein.

Google Trends - jquery, mootools, prototype.js, scriptaculous, dojo toolkit

Ein Blick auf diese Google Trends-Auswertung zeigt den Suchverlauf der beliebtesten JavaScript-Frameworks von 2006 bis 2008. Nach 2008 geht die Kurve von jQuery-Suchanfragen weiterhin steil nach oben.

Ähnlich sieht es bei den Suchanfragen nach "Next-Gen-Frameworks" wie AngularJS, Knockout.js oder Backbone.js aus: Auch hier scheint sich AngularJS langsam, aber sicher von den anderen Bibliotheken abzuheben, wie diese Auswertung zeigt.

Google Trends - angularjs, knockoutjs, ember js, backbone.js

Echte Sieger oder Verlierer gibt es weder bei den Ajax-/DOM-Frameworks noch bei den MVC-Frameworks: Es hängt vom jeweiligen Projekt und von den Vorlieben des Entwicklers ab, welche Frameworks schließlich zur Umsetzung herangezogen werden:

  • Was sind die Mindestanforderungen an den Webbrowser der Zielgruppe?
  • Was sind die Anforderungen an das User Interface der Anwendung?
  • Wird eine Datenbank-Anbindung benötigt und damit eine entsprechende API bzw. JSON-Endpoints?
  • Soll eine Single-Page-Application umgesetzt werden, bei der das Routing durch JavaScript übernommen wird?

Gerade bei der Frage, ob die Navigation durch eine Web-Applikation per Ajax oder durch Roundtrips erfolgt, spielt die Wahl des richtigen Frameworks eine wichtige Rolle. Es lässt sich aber festhalten, dass durch HTML5 und CSS3 eine Veränderung in der Welt der JavaScript-Frameworks stattfinden wird. Animationen und Effekte lassen sich mit CSS3 umsetzen, HTML5 bietet etliche Schnittstellen für Multimedia-Inhalte sowie Interaktionen und native JavaScript-Funktionen machen Teile von bestehenden Frameworks überflüssig. Lösungen wie Knockout.js oder AngularJS werden also in den nächsten Jahren noch stärker an Bedeutung gewinnen, wohingegen der Einsatz von Ajax-/DOM-Frameworks zweitrangig werden wird. In 2012 hatte Steven Sanderson, der Entwickler von Knockout.js, bereits eine Zusammenfassung der 7 Next-Gen-Frameworks veröffentlicht, die das Web zukünftig gestalten sollten.

Weiter geht es im Server-Bereich: Durch Node.js kann die Skriptsprache nun auch in einer Server-Umgebung genutzt werden und die Browserhersteller haben Entwicklern mit ECMAScript 5 ein umfangreiches Repertoire an die Hand gegeben, in dem mehr als genug interessante Funktionen für eine moderne Web-Applikation enthalten sind. Mittlerweile gibt es bereits etliche größere Projekte, die von Node.js Gebrauch machen oder Internet Explorer 9 (und damit ES5) als Minimum voraussetzen.
Durch Node.js kann JavaScript-Code also auf dem Client und auf dem Server verwendet werden. Derartige Apps beschreibt man bei Airbnb als "Isomorphic JavaScript". In einem Blog-Eintrag haben die Airbnb-Entwickler einen Blick in die Zukunft von JavaScript-Apps geworfen und mögliche Vor- und Nachteile aufgezeigt, wenn JavaScript auch auf dem Server eingesetzt wird. Es gibt bereits interessante Lösungen wie das Meteor-Framework, die genau darauf ausgelegt sind. Doch es bleibt die Frage, ob klassische Ansätze wie Apache/PHP/MySQL, Apache/Ruby on Rails/MySQL oder IIS/ASP.NET/MSSQL durch JavaScript und einer NoSQL-Lösung ersetzt werden können und sollten. Neben der Tatsache, dass client- und serverseitig nur eine Sprache verwendet werden muss, sollten diese Punkte zu einer Entscheidung beitragen:

  • Entwicklungsumgebungen (IDE)
  • Standard-Bibliotheken (ORM, Security, Cryptography, Globalization, etc.)
  • Typsicherheit, Sprach-Features (z.B. Reflection) und Compilerfehler
  • Skalierbarkeit, Load Balancing

Auf der Clientseite hingegen haben sich die oben genannten MVC-Frameworks bereits bewiesen und die Reise geht stetig weiter: Web Components und beispielsweise das Polymer Project stellen ebenfalls eine interessante Methode dar, um moderne Web-Anwendungen zu realiseren. Somit können HTML/JavaScript-Komponenten erzeugt werden, bei denen die Konfiguration über HTML-Attribute erfolgt. Ein Beispiel:

  • <polymer-ajax auto url="http://domain.com/api/"
  • params='{"alt":"json", "q":"chrome"}'
  • handleAs="json"
  • on-polymer-response="{{handleResponse}}">
  • </polymer-ajax>

Es handelt sich also um das Pendant zu Directives, wie sie in AngularJS verwendet werden können. Durch diese Technik können Web-Applikationen modular aufgebaut werden und im HTML-Quelltext ist leicht ersichtlich, wie eine Komponente eingestellt ist.

Neben HTML-Komponenten stellen auch JavaScript-Templates einen wichtigen Aspekt von zukünftigen Web-Anwendungen dar. Die Entwickler von Facebook haben diesbezüglich bereits einen interessanten Ansatz namens React veröffentlicht, mit dem JavaScript-XML-Notationen (JSX) möglich werden:

  • var app = <Nav color="blue"><Profile>click</Profile></Nav>;

Genau wie bei Knockout.js oder AngularJS stehen bei dem React-Framework deklarative Bindings im Vordergrund, die eine Verbindung von DOM-Elementen und JavaScript-Variablen ermöglichen. Das Entwickeln von Web-Anwendungen wird zukünftig also einfacher werden, da derartige Bibliotheken Entwicklern bereits viel Arbeit abnehmen und wiederverwendbare Bausteine ermöglichen. Zusammenfassend lassen sich die Hauptkriterien moderner JavaScript-Anwendungen wie folgt aufschlüsseln:

  • Konfigurierbare HTML-Komponenten
  • Zweiwege-Data-Bindings
  • Erweitertes JavaScript-Templating
  • JavaScript-Module (AMD, ES6)
  • Test Driven Design, Unit Testing

Die verschiedenen MVC/MVVM-Frameworks haben unterschiedliche Funktionalitäten und die meisten Bibliotheken dürften die ersten 3 Punkte abdecken. Wenn es um den letzten Punkt geht, sollte AngularJS die erste Wahl sein: Dank Karma, einem sehr schnellen Test-Runner auf Node.js-Basis, kann die Entwicklung einer JavaScript-App komplett testgetrieben erfolgen. Automatisierte Unit-Tests lassen sich einfach in Jasmine schreiben und können sogar direkt in WebStorm ausgeführt werden.

Insgesamt dürften die nächsten Jahre für Webentwickler also spannend bleiben, da nicht nur Browserhersteller und Konsortien, sondern auch die Entwickler-Gemeinde selbst zur Modernisierung von Webanwendungen beitragen.