Jenseits von jQuery: Ein Expertenhandbuch für JavaScript-Frameworks

Das bestimmende Merkmal eines wirklich guten Programmierers ist Faulheit. Das heißt aber nicht dumm oder unwissend. Der wirklich gute faule Programmierer schreibt nicht 100 Codezeilen (muss dann debuggen und testen), wenn 10 ausreichen. In der JavaScript-Welt wird sich der wirklich faule Entwickler auf ein effizientes, gut getestetes und gut unterstütztes Framework verlassen, um zu vermeiden, dass Lösungen für häufig auftretende Probleme ständig neu erfunden werden.

Frameworks „zerlegen“ einen Großteil der fein abgestimmten Funktionalität der JavaScript-Sprache in Methodenaufrufe und reduzieren so die Menge an Code, die der faule Programmierer zum Schreiben, Testen und Debuggen benötigt. Bevor Sie diesen Vorteil nutzen können, müssen Sie zwei Hürden überwinden: Wählen Sie einen Rahmen für Ihren Zweck und lernen Sie ihn.

Sobald Sie ein Framework gelernt haben, ist es naheliegend, bei allem, was Sie entwickeln, daran festzuhalten, damit Sie nichts anderes lernen müssen, aber das ist nicht immer nützlich. Einer der Anhaltspunkte dafür, dass Sie für Ihre aktuelle Aufgabe das falsche Framework verwenden, ist, dass Sie viel Arbeit erledigen. Sei also sehr faul und lerne immer weiter.

Ein bisschen JavaScript-Geschichte

Die Geschichte von JavaScript geht zurück auf die Entwicklungsarbeit, die Brendan Eich 1995 an der Mocha-Sprache für das Webbrowser-Unternehmen Netscape durchgeführt hat. Mocha wurde später in diesem Jahr als LiveScript veröffentlicht und in JavaScript umbenannt, als Sun Netscape eine Markenlizenz erteilte. Der Versuch, den leichtgewichtigen C-ähnlichen JavaScript-Interpreter über einen ähnlichen Namen mit dem nicht verwandten schwergewichtigen Java - einer objektorientierten, tokenkompilierten Sprache - zu verknüpfen, schien 1995 eine gute Idee für Marketingzwecke zu sein, aber im Laufe der Jahre hat sich diese Wahl bewährt verursachte kein Ende der Verwirrung.

Die Entwicklung von JavaScript im nächsten Jahrzehnt war geprägt von Meinungsverschiedenheiten zwischen den Browser-Implementierern und einem relativ schwachen Aufwand an ECMA-Standards. Was dieses Unwohlsein veränderte und die Sprache wieder aktivierte, war der Aufstieg von Dynamic HTML und Ajax Mitte der 2000er Jahre, gefolgt von der Einführung von Open-Source-JavaScript-Bibliotheken wie Prototype, jQuery, Dojo und MooTools, die Dynamic HTML erstellen sollten und Ajax einfacher zu verwenden und "Widgets" für JavaScript bereitzustellen, die die Funktionalität von HTML-Formularsteuerelementen verbessern würden.

Obwohl Netscape kurz nach JavaScript einen JavaScript-Server für den Browser herausbrachte, wurde die Sprache erst mit dem Aufstieg von Node.js ab 2009 für den Back-End-Gebrauch richtig gestartet. Ein Teil dessen, was Node.js attraktiv machte, war die Verwendung von Google Hoch optimierte V8-JavaScript-Engine für Bibliotheksmodule mit Kerncode in ziemlich portablem C ++.

Diese Tour durch JavaScript-Frameworks ist ein Versuch, die wichtigsten JavaScript-Bibliotheken von heute in drei Kategorien zu verstehen: solche, die auf Node.js-Servern ausgeführt werden, solche, die in Browsern funktionieren, und solche, die native oder hybride mobile Apps unterstützen.

Node.js Frameworks

Node.js ist eine JavaScript- und C ++ - basierte Servertechnologie, die seit ihrer Einführung (zu Standing Ovations) durch den Autor Ryan Dahl auf der europäischen JSConf im November 2009 viel Aufmerksamkeit und Unterstützung auf sich gezogen hat. Node.js zeichnet sich durch eine Ereignisgesteuerte Architektur mit asynchroner E / A, geringem Speicherbedarf sowie hohem Durchsatz und hoher Skalierbarkeit für Webanwendungen.

Während Node.js alle für die Implementierung eines Webservers erforderlichen Elemente enthält, erfordert das Schreiben dieser Ebene einige Arbeit. TJ Holowaychuk veröffentlichte Express 1.0 Beta im Juli 2010 und wurde bald zum „Standard“ -Back-End-Server für Node.js und Teil des MEAN-Stacks mit der MongoDB-Datenbank und dem Angular.JS-Front-End-Framework.

Dennoch haben unterschiedliche Entwickler und Organisationen unterschiedliche Anforderungen. Express hat direkt oder indirekt Locomotive, Hapi, Koa, Kraken und Sails.js hervorgebracht. Meteor ist ganz anders, obwohl es auch auf Node.js läuft.

Ausdrücken. Express ist ein minimales und flexibles Node.js-Webanwendungsframework, das eine Reihe robuster Funktionen zum Erstellen von einseitigen, mehrseitigen und hybriden Webanwendungen bietet. Die Express-API behandelt die Webanwendung, HTTP-Anforderungen und -Antworten, das Routing und die Middleware. Ab Express 4.x befindet sich die unterstützte Middleware für Express in mehreren separaten Repositorys.

Mehrere Expressgabeln und Add-Ons für Express sind aufgetaucht, darunter Locomotive, Hapi und Koa. Koa wurde von einem der Hauptverantwortlichen für Express erstellt.

Express ist älter als seine Sprösslinge und hat eine größere Stellfläche. Trotzdem hat es auch eine größere Gemeinschaft und mehr Stabilität. Ich sehe Express ständig kommentarlos in andere Frameworks und Tools integriert, als wäre es die einzig mögliche Wahl, um einen Webserver auf Node.js aufzubauen. Auf GitHub hat das Framework mehr als 23.000 Sterne und 4.000 Gabeln.

Hapi. Hapi ist ein einfach zu verwendendes, konfigurationsorientiertes Framework mit integrierter Unterstützung für die Eingabevalidierung, das Caching, die Authentifizierung und andere wichtige Funktionen zum Erstellen von Web- und Diensteanwendungen. Mit Hapi können sich Entwickler darauf konzentrieren, wiederverwendbare Anwendungslogik hochmodular und vorschreibend zu schreiben. Es wurde von Walmart Labs entwickelt und ist eine gute Wahl für große Teams und große Projekte.

Hapi wurde ursprünglich auf Express gebaut, später jedoch eigenständig umgestaltet. Es basiert auf den Ideen, dass „Konfiguration besser ist als Code“ und „Geschäftslogik von der Transportschicht isoliert sein muss“. Beachten Sie im obigen Beispiel, wie klar und sauber die Konfiguration der Serverrouten im Code angezeigt wird.

Koa. Koa ist ein neues Webframework, das vom Team hinter Express entwickelt wurde, jedoch unabhängig vom Express-Code ist. Koa soll eine kleinere, ausdrucksstärkere und robustere Grundlage für Webanwendungen und APIs sein. Koa verwendet ES6-Generatoren für Middleware, anstatt Node.js Rückrufe zu verwenden. Das Folgende ist eine "Hallo Welt" -Koa-Anwendung, die einen Generator verwendet, der die yield nextSteuerung an den nächsten Generator weitergibt:

Der Unterschied zwischen Middleware-Generatoren, wie sie von Koa verwendet werden, und Rückrufen, wie sie von Express und Connect verwendet werden, besteht darin, dass Sie mit Generatoren mehr Flexibilität erhalten. Zum Beispiel durchläuft Connect einfach die Steuerung durch eine Reihe von Funktionen, bis man zurückkehrt, während Koa die Steuerung "stromabwärts" liefert und die Steuerung dann "stromaufwärts" zurückfließt. Im obigen Beispiel "umschließt" die x-Antwortzeit den Antwortgenerator, wobei die yield nextAnweisung den Aufruf markiert. Das Nachgeben ist flexibler als explizite Funktionsaufrufe, da es einfach ist, einen anderen Generator in die Sequenz einzufügen - beispielsweise einen Weblogger zwischen dem Timer und der Antwort.

Krake. Kraken ist ein Open-Source-Projekt von PayPal und eine sichere und skalierbare Schicht, die Express durch Bereitstellung von Struktur und Konvention erweitert, ähnlich wie Locomotive. Obwohl Kraken die Hauptsäule seines Frameworks ist, können die folgenden Module auch unabhängig voneinander verwendet werden: Lusca (Sicherheit), Kappa (NPM-Proxy), Makara (LinkedIn Dust.js I18N) und Adaro (LinkedIn Dust.js Templating).

Kraken ist darauf angewiesen yo, Projekte zu generieren, wie im Screenshot links gezeigt. Wie Locomotive organisiert es seine Projekte in konventionellen Rails-ähnlichen Verzeichnissen, einschließlich Modellen, Controllern und Konfigurationen. Nach der Generierung knüpft Kraken an Express als Standard-Middleware an, die als definiert appist app.use()und deren app.listen()Methoden und Methoden aufgerufen werden. Jede Route in einem Kraken-Server befindet sich in einer eigenen Datei im Controller-Ordner.

Lokomotive. Als Webframework für Node.js unterstützt Locomotive MVC-Muster, RESTful-Routen und Konventionen über die Konfiguration (wie Rails) und lässt sich nahtlos in jede Datenbank- und Vorlagen-Engine integrieren. Locomotive baut auf Express und Connect auf, einem einfachen Kleberahmen für Middleware, der von einer Reihe von Node.js-Frameworks verwendet wird.

Locomotive fügt Express eine Ruby on Rails-ähnliche Struktur hinzu, die Sie im obigen Bild sehen können und die Express sonst fehlt. Lokomotivenansichten sind häufig eingebettete JavaScript-Dateien (html.ejs), wie hier gezeigt. Locomotive unterstützt jedoch auch Jade und andere kompatible Template-Engines für Express. Die REST-Funktionalität wird über Routen gesteuert, wie dies normalerweise bei Express-basierten Servern der Fall ist. Sie können mit Locomotive eine beliebige Datenbank- und ORM-Schicht (Object Relational Mapping) verwenden. Das Handbuch zeigt die Verwendung von MongoDB mit Mongoose sowie die Arbeit mit Passport zur Benutzerauthentifizierung.

Meteor. Meteor bietet Ihnen eine radikal einfachere Möglichkeit, mobile und Web-Apps in Echtzeit vollständig in JavaScript aus einer Codebasis zu erstellen. Anstatt HTML über das Kabel zu senden, sendet Meteor Daten vom Server, damit der Client sie rendern kann. Meteor kann nicht nur eigenständig ausgeführt werden, sondern auch in AngularJS und React integriert werden. Meteor ist nichts anderes als Express, obwohl es auch auf Node.js basiert und Vorlagen für Lenker, Blaze und Jade unterstützt.

Meteor ermöglicht Rapid Prototyping und produziert plattformübergreifenden Code (Web, Android, iOS). Es lässt sich in MongoDB integrieren und verwendet das Distributed Data Protocol und ein Publish-Subscribe-Muster, um Datenänderungen automatisch an Clients weiterzugeben, ohne dass der Entwickler Synchronisationscode schreiben muss. Auf dem Client hängt Meteor von jQuery ab und kann mit jeder JavaScript-UI-Widgetbibliothek verwendet werden.

Meteor wird von der Meteor Development Group entwickelt, einem Startup, das von Y Combinator inkubiert wurde. Meteor ist jetzt ausgereift genug, um ein halbes Dutzend Lehrbücher zu unterstützen. Das Projekt hat mehr als 32.000 Sterne auf GitHub gezeichnet.

Meteor selbst ist kostenlose Open-Source-Software, aber die Meteor-Gruppe monetarisiert sie, indem sie Meteor Galaxy DevOps-Abonnements verkauft, die AWS-Serverplatz und grundlegende Meteor-Unterstützung sowie ein separates Premium-Support-Abonnement enthalten.

Sails.js. Mit Sails können Sie benutzerdefinierte Node.js-Apps für Unternehmen erstellen. Es wurde entwickelt, um das bekannte MVC-Muster (Model View Controller) von Frameworks wie Ruby on Rails zu emulieren, unterstützt jedoch die Anforderungen moderner Apps: datengesteuerte APIs mit einer skalierbaren, serviceorientierten Architektur. Es eignet sich besonders zum Erstellen von Chat-Apps, Echtzeit-Dashboards oder Multiplayer-Spielen. Sie können es jedoch für jedes Webanwendungsprojekt verwenden. Sails unterstützt WebSockets und sendet automatisch Socket-Nachrichten an die Routen Ihrer App.

Wie Rails bietet Sails Wertekonvention über Konfiguration, bietet Generatoren und Gerüste zum schnellen Erstellen von REST-APIs aus Blaupausen und verwendet ein MVC / Active-Record-Entwurfsmuster. Sails basiert auf Express und verwendet Waterline für sein ORM mit Unterstützung für ORM-Joins. Waterline unterstützt sowohl SQL- als auch NoSQL-Datenbanken.

Sails ist ein Back-End-Framework, das mit jedem Front-End-Webframework wie Angular oder Backbone oder mobilen Geräten wie iOS oder Android kompatibel ist, das Sie zufällig mögen oder unterstützen müssen. Auf Sails.js ist ein Buch in Arbeit, das nur teilweise vollständig ist.

HTML5 / JavaScript-Frameworks

Wir denken traditionell, dass JavaScript-Bibliotheken und -Frameworks in Browsern ausgeführt werden. Wie bereits erwähnt, entstanden einige davon - jQuery, Dojo und MooTools - Mitte der 2000er Jahre hauptsächlich, um das Schreiben von Dynamic HTML und Ajax zu vereinfachen. Einige davon wurden inzwischen um weitere Funktionsbereiche erweitert, z. B. Widgets für Benutzeroberflächen und Benutzeroberflächen für mobile Geräte.

Andere sind in jüngerer Zeit entstanden. AngularJS ist ein Front-End-Framework, das HTML mit Markup für dynamische Ansichten und Datenbindung erweitert. Backbone.js und Ember wurden für die Entwicklung von einseitigen Webanwendungen entwickelt. React dient zum Erstellen einer Benutzeroberfläche oder Ansicht, normalerweise für Anwendungen mit nur einer Seite.

Wieder andere Rahmenbedingungen verfolgen engere Spezialisierungsbereiche. D3 macht Datenvisualisierung und Animationen. Socket.IO implementiert Echtzeit-Web-Apps. Knockout ist eine allgemeine Möglichkeit, ein Datenmodell mit einer Web-Benutzeroberfläche zu verknüpfen. Polymer bietet eine leichte „Zuckerschicht“ über den Webkomponenten-APIs, um beim Erstellen eigener Webkomponenten zu helfen. Unterstrich ist eine allgemeine Dienstprogrammbibliothek.

Wie zu erwarten ist, stehen Ihnen für die clientseitige Webentwicklung peinliche Reichtümer zur Auswahl.

AngularJS.  AngularJS (oder einfach Angular unter Freunden) ist ein JavaScript-Ajax-Framework für Modellansichten (MVW), das HTML mit Markup für dynamische Ansichten und Datenbindung erweitert. Angular eignet sich besonders zum Entwickeln von einseitigen Webanwendungen und zum Verknüpfen von HTML-Formularen mit Modellen und JavaScript-Controllern.

Das seltsam klingende Muster für die Modellansicht ist ein Versuch, die Muster Modellansicht-Controller, Modellansicht-Ansichtsmodell (MVVM) und Modellansicht-Präsentator (MVP) unter einem Namen zusammenzufassen. Während Programmierer gerne die Unterschiede zwischen diesen drei eng verwandten Mustern diskutieren, haben sich die Angular-Entwickler entschieden, die Diskussion zu beenden.

Grundsätzlich synchronisiert Angular Daten von Ihrer Benutzeroberfläche (Ansicht) automatisch mit Ihren JavaScript-Objekten (Modell) durch bidirektionale Datenbindung. Um Ihre Anwendung besser zu strukturieren und das Testen zu vereinfachen, bringt Angular dem Browser das Einfügen von Abhängigkeiten und das Umkehren der Steuerung bei.

Angular wurde von Google erstellt und unter der MIT-Lizenz als Open-Source-Lösung angeboten. Das Repository auf GitHub hat mehr als 47.000 Sterne und 22.000 Gabeln. Made with Angular zeigt Hunderte von Websites, die mit Angular erstellt wurden, darunter viele hochkarätige Web-Eigenschaften.