Stand der Webentwicklung 2014

Am 5. Juni haben wir (Lammert Westerhoff und Freek Wielstra) auf unserer jährlichen Konferenz, der XebiCon auf der SS Rotterdam, den State of Web Development 2014 vorgestellt. Es war ein großer Erfolg und wir haben ein tolles Feedback erhalten. Wir möchten die Präsentation, die wir dort gehalten haben, in diesem Blogbeitrag mit allen teilen, die nicht an der Konferenz teilnehmen konnten. Wir begannen die Präsentation mit einer überwältigenden Tag Cloud:

Wenn Sie neu in der Webentwicklung sind oder sich schon lange nicht mehr mit Webentwicklung beschäftigt haben, werden Sie sich in diesem Dschungel der Webtechnologien wahrscheinlich verirren. Machen Sie sich keine Sorgen, wenn Sie davon überwältigt sind, denn das ist beabsichtigt. Diese Tag Cloud enthält viele Sprachen und Web-Frameworks, aus denen moderne Webanwendungen bestehen. Sie enthält aber auch eine Reihe von Entwicklungstools, die bei der Entwicklung eingesetzt werden. Das Ziel dieses Beitrags ist es, Sie durch diesen Dschungel zu führen, indem wir Ihnen erklären, welche Technologien Sie für die Erstellung einer modernen Webanwendung verwenden können und welche Tools Sie während des gesamten Entwicklungszyklus benötigen.

Um besser zu verstehen, welche Technologien und Tools wir verwenden sollten, sollten wir zunächst einen Blick auf die Entwicklung einer Reihe wichtiger Technologien werfen. Dann werden wir verstehen, warum die Webentwicklung heutzutage ziemlich komplex ist und warum wir Tools brauchen. Sobald das klar ist, können wir einen Blick auf die verfügbaren Tools werfen.

Die Entwicklung von Webanwendungen

Eine herkömmliche Website besteht aus HTML, CSS und manchmal ein wenig Javascript. Das HTML teilt dem Browser den Inhalt mit, der angezeigt werden soll. Das CSS sagt ihm, wie dieser Inhalt angezeigt werden soll und wie er aussehen muss. Und JavaScript wird hauptsächlich dazu verwendet, kleine Funktionen hinzuzufügen, wie z.B. die Anzeige eines Popups oder eines Bilderkarussells.

Natürlich waren diese statischen Websites schwer zu pflegen. Eine Änderung des Inhalts erforderte eine Änderung in der HTML-Datei, die dann per FTP auf den Webserver hochgeladen werden musste.

Glücklicherweise gab es eine Reihe von Technologien, die dieses Problem für uns lösten. Mit einer Technologie wie PHP, JSP oder ASP konnten wir die Websites zur Laufzeit dynamisch erzeugen, die dann an den Browser gesendet wurden. Diese Websites waren in der Regel mit einer Datenbank verbunden. Die Datenbank speicherte dann den Inhalt, anstatt ihn direkt in den HTML-Dateien zu speichern. Auf diese Weise konnten wir Änderungen an der Website vornehmen, indem wir den in der Datenbank gespeicherten Inhalt änderten. Auf diese Weise konnten wir bereits komplexere Webanwendungen erstellen, die auch vom Benutzer erstellte Inhalte speicherten, wie z.B. Blogs oder sogar ganze Webshops.

Wir hatten zwar die serverseitigen Technologien, die wir für die Erstellung unserer Websites benötigten, aber wir brauchten auch neue Innovationen auf der Client-Seite. Vor allem, weil wir in die Ära der mobilen Geräte eingetreten sind, brauchten wir neue Browser-Funktionen wie Standortdienste, Browser-Speicher und Touch-Events. Daher wurden neue HTML- und CSS-Standards entwickelt, die viele Funktionen enthalten, die die Webbrowser viel leistungsfähiger und reichhaltiger machen, so dass wir Entwickler reichhaltigere Webanwendungen sowohl für Mobilgeräte als auch für den Desktop erstellen können.

Um dies für alle einfacher zu machen, hat Twitter Bootstrap veröffentlicht, das die gesamte Responsivität automatisch übernimmt. Es wird auch heute noch von vielen responsiven Websites verwendet.

Mit all den neuen leistungsstarken Funktionen von CSS3 wurden auch die Stylesheets komplexer und mühsamer. Um dieses Problem zu lösen, wurden Technologien wie Sass und Less entwickelt. Dabei handelt es sich um CSS-Präprozessoren, die neue Sprachfunktionen bieten, mit denen sich einige der mühsameren Stylingaufgaben leichter bewältigen lassen. Beide erzeugen CSS und beide lösen die gleichen Probleme. Welche Sie wählen sollten, hängt von Ihren Umständen und Ihrem persönlichen Geschmack ab.

Die Benutzer möchten nicht nur, dass ihre Websites auf jedem Gerät funktionieren und gut aussehen, sie möchten auch, dass ihre Websites interaktiver sind. Sie möchten, dass die Website auf ihre Aktionen reagiert. Sie möchten zum Beispiel in ein Bild hineinzoomen oder einen Artikel in einen Einkaufskorb ziehen. Obwohl all dies schon lange in JavaScript möglich war, hat jQuery diese Dinge sehr viel einfacher gemacht. jQuery ist eine JavaScript-Bibliothek, die die Dom-Manipulation einfacher macht, insbesondere für mehrere Browser. Mit der Popularität von jQuery wurde das Web mit jQuery-Plugins überschwemmt, die alle möglichen Dinge tun. Unten sehen wir einen Screenshot der Plugin-Registrierung. Und natürlich musste eine Bibliothek für mobile Geräte veröffentlicht werden.

Eine der wichtigsten Funktionen von jQuery ist, dass es die Erstellung von AJAX-Anfragen erleichtert. AJAX steht für Asynchronous Javascript And XML. Es ermöglicht dem Webbrowser, Daten aus dem Backend abzurufen, ohne die Seite zu verlassen oder die Seite zu aktualisieren. Dabei werden nur die Daten vom Backend an den Client übertragen, nicht aber ganze generierte Seiten. Sobald die Daten abgerufen sind, werden sie mithilfe der DOM-Manipulationsfunktionen von jQuery dynamisch angezeigt. Und obwohl XML im Namen vorkommt, wird heutzutage oft JSON anstelle von XML verwendet, das ein leichteres und flexibleres Datenformat ist.

AJAX-Anfragen sind auch das Herzstück von Single Web Page Applications (SPA).

Diese Webanwendungen laden alle HTML-, CSS- und Javascript-Ressourcen auf einmal. Sobald die Seite geladen ist, müssen Sie keine anderen Seiten mehr laden oder aktualisieren. Das gesamte Rendering und die Navigation erfolgen auf der Client-Seite, ohne die eigentliche Seite zu verlassen. Natürlich könnte der Benutzer den Eindruck haben, dass er zwischen verschiedenen Seiten navigiert, aber das wird alles auf dem Client von Javascript erledigt.

Die einseitigen Webanwendungen werden immer beliebter, da sie in der Regel ein besseres Benutzererlebnis bieten. Sie stützen sich stark auf die AJAX-Anfragen, die wir bereits gesehen haben, um Daten von einem Server abzurufen. Die Daten, die durch diese Anfragen abgerufen werden, sind eine der einzigen Arten der Kommunikation zwischen Client und Server, sobald die Seite geladen ist.

Da wir bei SPAs einen Großteil der Logik und Komplexität vom Server auf den Client verlagern, ist es wirklich praktisch, ein Framework zu verwenden, das den größten Teil der Komplexität übernimmt. Drei der beliebtesten Frameworks sind Backbone.js, Ember.js und AngularJS. Welches Sie wählen sollten, hängt stark von Ihren Anforderungen, Ihren Gewohnheiten und Ihren persönlichen Vorlieben ab. Es ist jedoch klar, dass AngularJS im Moment am beliebtesten ist, die meisten Aktivitäten aufweist und die größte Community hat. Die Leute scheinen von Backbone zu Angular und Ember zu wechseln. Wir verwenden Angular auch selbst und sind damit zufrieden. Das Google Angular-Team arbeitet an der nächsten großen Version, die noch eine große Verbesserung darstellen dürfte. Deshalb denken wir, dass Angular eine gute und sichere Wahl ist.

Wie wir in den vorangegangenen Abschnitten gesehen haben, ist es offensichtlich, dass immer mehr Funktionalität und Komplexität von der Serverseite auf die Clientseite verlagert wird. Und durch die Verwendung von Frameworks und Bibliotheken wie Bootstrap, jQuery und Angular erhöhen wir auch die Abhängigkeiten auf der Client-Seite. Das bedeutet auch, dass sich unser Entwicklungsschwerpunkt und unsere Bemühungen vom Server auf den Client verlagern. Es ist an der Zeit, die Frontend-Entwicklung ernst zu nehmen und sie richtig zu machen. Werfen wir also einen Blick darauf, was dies für unseren Entwicklungsprozess bedeutet.

Entwicklung von Webanwendungen

Wie wir bereits gesehen haben, fangen wir ganz einfach an, indem wir ein paar HTML-, CSS- und Javascript-Dateien erstellen. Dann möchten wir die Leistungsfähigkeit von Less oder Sass für unsere Stylesheets nutzen. Und da wir eine Rich- oder Single-Page-Webanwendung erstellen, werden wir eine Menge Javascript-Dateien erstellen. Und vielleicht etwas CoffeeScript oder Dart statt nur Javascript. Für diejenigen, die CoffeeScript oder Dart nicht kennen: Das sind alternative Sprachen, die beide zu Javascript kompiliert werden können. CoffeeScript ist fast die gleiche Sprache wie Javascript, nur mit einer etwas anderen Syntax. Dart hingegen ist ganz anders und es lohnt sich auf jeden Fall, es einmal auszuprobieren, wenn Sie ein wenig Zeit haben.

Natürlich wollen wir viele der großartigen Bibliotheken von Drittanbietern verwenden, die wir bereits besprochen haben. Und da diese Bibliotheken oft von anderen Bibliotheken abhängen, werden wir am Ende eine Menge externer Bibliotheken haben.

Mit diesem Bild bekommen wir eine Vorstellung davon, welche Ressourcen wir für unsere Webanwendung haben. Aber es reicht nicht aus, nur diese Dateien zu erstellen, die Bibliotheken herunterzuladen und sie auf unseren Webserver hochzuladen. Zunächst einmal verstehen Webbrowser Less, Sass, CoffeeScript oder Dart nicht. Wir müssen etwas produzieren, das der Browser versteht. Bei Less und Sass ist das CSS und CoffeeScript und Dart müssen zu normalem Javascript kompiliert werden.

Jetzt sind wir so weit, dass wir diese Dateien auf unserem Webserver bereitstellen könnten, aber das ist immer noch nicht die Art, wie wir unsere Anwendungen entwickeln möchten. Also werden wir ein paar zusätzliche Schritte unternehmen. Wir werden fast alle unsere Dateien verkleinern. Dadurch werden all diese Dateien gepackt, einige clevere Tricks angewandt und wir erhalten viel kleinere Dateien. Das spart dem Endbenutzer etwas Zeit beim Herunterladen, was sehr angenehm ist.

Wir wollen auch sicherstellen, dass alle Dateien, die wir erstellt haben, keine Syntaxfehler enthalten. Deshalb lassen wir einen Syntax-Validator auf all diese Dateien laufen.

Und natürlich müssen wir auch testen. Wir schreiben also eine Menge Unit-Tests, um alle unsere JavaScript-Funktionen abzudecken. Aber wir schreiben auch View-Tests, um sicherzustellen, dass unsere Views dem Benutzer die richtigen Informationen anzeigen. Mit einer guten Entkopplung können wir unsere Unit-Tests und View-Tests isoliert ausführen. Das ist gut, denn so können wir Probleme leicht erkennen, wenn einer unserer Tests fehlschlägt, und es erleichtert die Wartung und Refaktorierung unseres Codes. Aber wir wollen auch sicherstellen, dass alles gut zusammenarbeitet. Deshalb schreiben wir auch ein paar End-to-End-Tests.

Mit all diesen Schritten sind wir ziemlich zuversichtlich, dass wir alles haben, was wir brauchen, um sicherzustellen, dass wir hochwertigen Code schreiben. Aber es gibt noch eine Sache, um die wir uns während der Entwicklung kümmern müssen. Und das ist die Verwaltung von Abhängigkeiten. Wir möchten, dass die Bibliotheken von Drittanbietern, die wir verwenden, und ihre Abhängigkeiten automatisch heruntergeladen werden. Und wir möchten auch deren Version angeben oder einen Versionsbereich festlegen und automatische Aktualisierungen innerhalb unseres Bereichs erhalten.

Jetzt sind wir mit allen Schritten in unserem Entwicklungsprozess zufrieden. Aber wie machen wir das alles? Oder besser gesagt, wie automatisieren wir das alles? Wir brauchen ein Build-Tool.

Lassen Sie uns kurz rekapitulieren, was unser Build-Tool tun soll. Es muss unsere Stylesheets und Skripte kompilieren und minifizieren. Danach nimmt es diese Dateien und erstellt zusammen mit dem HTML-Code ein Verteilungspaket, das wir auf unserem Produktionsserver bereitstellen können.

Und bei jeder Änderung an einer unserer Dateien wollen wir sicherstellen, dass alles noch so funktioniert, wie wir es erwarten. Also validieren wir unsere Dateien und führen unsere Tests durch. Dies sind unsere Schritte zur Qualitätssicherung.

Wie wir gerade erwähnt haben, möchten wir auch, dass alle unsere Abhängigkeiten automatisch verwaltet werden.

Aber es gibt noch mehr Dinge, die wir mit modernen Build-Tools tun können, an die wir nicht einmal denken konnten, die aber für die Entwicklung großartig sind. Wie wäre es mit Live-Überwachung und Neuladen unseres Browsers während der Entwicklung. Wir starten unsere Anwendung in einem Browser, ändern etwas an der Logik oder dem Styling und der Webbrowser aktualisiert die Seite automatisch, um unsere Änderungen anzuzeigen.

Die Webentwickler-Community war sehr innovativ und hat sich viele weitere coole Dinge einfallen lassen, die wir mit diesen Tools machen können. Und Sie können sogar Ihre eigenen Build-Aktionen schreiben.

An diesem Punkt haben wir ein vollständiges Verständnis davon, wie der Webentwicklungsprozess aussieht. Und wenn wir das sehen, können wir sagen, dass die Frontend-Entwicklung ein erstklassiger Bürger der Softwareentwicklung geworden ist. Jetzt, da wir die Komplexität der Frontend-Entwicklung erkannt haben und wissen, dass wir Tools benötigen, um diese Komplexität zu bewältigen, ist es an der Zeit, einen genaueren Blick auf einige der derzeit beliebtesten Tools zu werfen.

Moderne Werkzeuge

Die meisten Webentwicklungs-Tools, die heutzutage entwickelt werden, sind Teil des Node.js Ökosystems.

Node.js ist eine JavaScript-Engine zur Ausführung von JS außerhalb einer Browserumgebung. Sie verfügt über leistungsstarke Systembibliotheken für grundlegende Funktionen wie Datei- und Netzwerkzugriff, und das alles bei minimalem Platzbedarf. Diese Eigenschaften machen NodeJS zu einer perfekten Plattform für die Entwicklung von serverseitigen Anwendungen und Terminalanwendungen.

Da es sich um JavaScript handelt, eine Sprache, die Webentwickler bereits kennen, ist es die perfekte Umgebung, um Webentwicklungswerkzeuge zu erstellen.

Der Node Package Manager macht es Ihnen leicht, jedes registrierte Node.js-Tool oder jede Anwendung mit einem einzigen Befehl zu installieren. Er führt eine Online-Registrierung aller verfügbaren Pakete, und jeder kann seine eigenen veröffentlichen. Das Ökosystem von Node.js und NPM hat sich zu einer aktiven und gesunden Entwicklergemeinschaft entwickelt.

Eines der beliebtesten in Node.js geschriebenen Tools ist Grunt. Es ist das Standard-Build-Tool für Front-End-Webprojekte. Es ist ein aufgabenbasiertes Build-Tool, d.h. Sie können eine Reihe von Aufgaben definieren, die für einen Produktions-Build, Entwicklungs-Build oder einen Testlauf ausgeführt werden müssen. Das klingt ziemlich genau nach dem, was wir für unseren Entwicklungsprozess brauchen.

Da es auf Plugins basiert, gibt es Plugins für so ziemlich jede Aufgabe, die Sie ausführen möchten. Dazu gehören Plugins für unsere Kompilierungs-, Minifizierungs-, Validierungs- und Testschritte sowie für die Verwaltung von Abhängigkeiten. Das macht es perfekt für uns.

Sobald Sie Grunt im Entwicklungsmodus starten, wird es seinen integrierten Webserver starten und Ihre Webanwendung hosten. Und mit den richtigen Plugins erhalten wir unseren Live-Reload. Das Grunt-Plugin überwacht alle Änderungen an unseren Ressourcen, führt die erforderlichen Aufgaben aus und aktualisiert die geöffnete Browserseite für uns, so dass wir die Ergebnisse unserer Arbeit sofort sehen können - eine drastische Verkürzung der Feedback-Schleife im Vergleich zur traditionellen Webentwicklung.

Da Grunt derzeit das Standard- und beliebteste Build-Tool für Webprojekte ist, ist es weit verbreitet und verfügt über ein großes und ausgereiftes Entwickler-Ökosystem.

Aber Grunt hat auch seine Nachteile. Werfen wir einen Blick auf die Konfigurationsdatei von Grunt, die Gruntfile.js. Diese Datei enthält die Konfiguration für unsere Aufgaben und die Plugins, die sie ausführen.

Bei einer Vielzahl von Aufgaben wird die Grunt-Datei wirklich zu einer Menge Konfiguration. Das Beispiel unten stammt aus unserem eigenen Projekt und ist nur etwa die Hälfte unserer Konfiguration. Sie müssen nicht genau lesen, was dort steht, es soll Ihnen nur eine Vorstellung von der Menge geben.

Aber der Umfang der Konfiguration ist nicht der einzige Nachteil von Grunt. Das andere Problem ist, dass es mit temporären Dateien und Verzeichnissen arbeitet. Für jede Aufgabe (natürlich abhängig von der Aufgabe) liest es ein paar Dateien, wandelt sie um oder konvertiert sie in etwas anderes und schreibt die Ausgabe zurück auf die Festplatte. Die nächste Aufgabe wird dann diese neuen Dateien als Eingabe verwenden. So entsteht eine Kette von temporären Dateien und Verzeichnissen. Das ist kein großes Problem, aber sicherlich nicht die schnellste Art, Dinge zu erledigen.

Aus diesem Grund wurde Gulp.js, das Streaming-Build-System, entwickelt. Es ist ein neueres, alternatives Build-Tool, das schnell an Popularität gewinnt. Gulp kann so ziemlich das Gleiche wie Grunt, so dass wir uns keine Sorgen machen müssen, dass wir wesentliche Funktionen unseres Entwicklungsprozesses verlieren. Da Gulp jedoch neuer ist als Grunt, verfügt es noch nicht über so viele Plugins wie Grunt. Aber da Gulp dasselbe kann wie Grunt, nur besser, scheinen viele Entwickler auf Gulp umzusteigen und es werden auch immer mehr Plugins für Gulp entwickelt.

Wo liegt also der Unterschied? Anstatt eine Vielzahl von Konfigurationen für seine Aufgaben zu verlangen, verwendet Gulp stattdessen "Code over configuration". Das bedeutet, dass Sie dem Tool einfach sagen, dass es etwas auf eine bestimmte Weise tun soll, anstatt zu konfigurieren, was es tun soll und wie es es tun soll. Viel einfacher und viel direkter. Und das Ergebnis ist viel weniger Code als bei der Konfiguration von Grunt für dasselbe.

Es löst auch das Grunt-Problem mit temporären Dateien und Verzeichnissen, da es streambasiert ist. Die Aufgaben leiten ihre Ausgabe direkt an die nächste Aufgabe weiter. Dies führt zu wesentlich schnelleren Build-Zeiten.

Es scheint also, dass Gulp genau die beiden Probleme löst, die wir mit Grunt hatten. Es ist also zu erwarten, dass es an Popularität gewinnen und schließlich Grunt überholen wird. Es ist nur eine Frage der Zeit, bis es den gleichen Reifegrad erreicht, den Grunt derzeit hat.

Wir haben bereits über die Verwaltung von Abhängigkeiten gesprochen, um unsere Bibliotheken von Drittanbietern zu verwalten. Während Grunt und Gulp den Node Package Manager direkt nutzen, um seine Plugins und deren Abhängigkeiten herunterzuladen, müssen wir die Abhängigkeiten für unsere App dennoch verwalten. Dazu verwenden wir Bower, einen Paketmanager für das Web, von Twitter. Bower funktioniert ähnlich wie NPM, indem Sie alle Ihre Abhängigkeiten in einer einzigen Konfigurationsdatei angeben. Bower lädt dann diese Bibliotheken aus dem Internet herunter. Da Grunt und Gulp über Plugins für Bower verfügen, brauchen Sie sich darüber keine Gedanken zu machen, denn Bower sorgt dafür, dass die Dateien heruntergeladen werden, wenn Sie Ihr Projekt bauen, oder dass bei Bedarf Updates heruntergeladen werden - wenn Ihr Build-System richtig konfiguriert ist.

So viele Tools und Frameworks! Ist es nicht zu viel Arbeit, sie einzurichten und zu konfigurieren? Ja, die Einrichtung eines kompletten Web-App-Entwicklungsstapels und die Konfiguration der einzelnen Plugins für Ihr Projekt ist eine Menge Entwicklungsarbeit, die Tage in Anspruch nehmen kann. Glücklicherweise gibt es ein Tool, das dieses Problem löst: Yeoman.

Yeoman ist ein Projektgerüst-Tool, das mithilfe von Vorlagen, den so genannten Generatoren, eine Basis für Ihr Projekt erstellt. Einige dieser Generatoren richten ein Webanwendungsprojekt mit einem vorkonfigurierten Build-Strait ein, der alles enthält, was wir für Kompilierung, Minifizierung, Validierung, Tests, Abhängigkeitsmanagement und vieles mehr benötigen. Er fragt uns auch, ob wir Frameworks wie Bootstrap und AngularJS verwenden möchten. Das macht es zu einer idealen Lösung für die Einrichtung eines neuen Projekts und eines automatisierten Entwicklungsprozesses.

Neuere Generatoren richten Gulp als Build-Tool ein und bieten damit eine Alternative zu Bower. Dies sollte Entwicklern, die noch nicht mit Gulp vertraut sind, helfen, sich schnell zurechtzufinden.

Lassen Sie uns noch einmal zusammenfassen, worüber wir in diesem Beitrag gesprochen haben.

Mehr

Die vollständigen Präsentationsfolien werden bald auf der XebiCon-Website verfügbar sein. Sie können uns gerne unten mit Ihrem Feedback kommentieren oder uns auf Twitter erreichen. Lammert Westerhoff @lwesterhoff Freek Wielstra @frwielstra