„The Sound of Music“ mag predigen: „Fangen wir ganz am Anfang an, ein sehr guter Ort, um zu beginnen.“ Aber fast jeder Entwickler weiß, dass dies ein törichter Plan ist. Der richtige Ort für den Anfang ist ein solides Fundament, das von einem großartigen Team von Open-Source-Entwicklern geschaffen wurde. Klonen Sie deren harte Arbeit und fügen Sie dann gerade genug Code hinzu, um es zu Ihrem eigenen zu machen. Es gibt keinen Grund, das zu wiederholen, was alle anderen schon getan haben.
Es ist ein einfacher Plan – wenn man sich nur dafür entscheidet. Leider kann die Wahl der Grundlage fast so schwierig sein, wie ganz am Anfang zu beginnen. Die Welt der Web-Frameworks ist ein sehr aktiver Entwicklungsbereich, und es gibt vielleicht Dutzende von guten Open-Source-Projekten, die einen guten Start für Ihr Projekt darstellen würden.
Zu allem Übel haben die verschiedenen Teams, die diese verschiedenen Projekte entwickelt haben, einen anderen Weg eingeschlagen, weil sie ernsthafte philosophische Differenzen mit den anderen Optionen hatten. Sie sahen sich die anderen Frameworks an und beschlossen, dass sie es besser können. Mit anderen Worten, sie haben es aus einem bestimmten Grund getan, und man kann mit ihrer Entscheidung einverstanden sein oder auch nicht.
Die unten stehende Liste guter Einstiegsmöglichkeiten lässt absichtlich die Marktführer React, Angular und Vue weg, um die Dinge etwas einfacher zu machen. Das heißt nicht, dass die großen Drei schlecht sind. Sie könnten immer noch das Richtige für Sie sein. Es ist nur so, dass ständig über sie geredet wird und diese Diskussionen einige ziemlich gute andere Optionen außer Acht lassen.
Es gibt viele gute Gründe, sich für die beliebtesten zu entscheiden. Viele Leute an deiner Stelle haben sich umgesehen und viele von ihnen haben sich aus gutem Grund für React, Angular oder Vue entschieden. Aber das war damals. In der Zwischenzeit haben einige kluge Köpfe neue Frameworks entwickelt, die schneller, einfacher, stärker oder mit anderen Superlativen ausgestattet sind.
In den meisten der unten aufgeführten Fälle haben die Teams etwas Faszinierendes und Leistungsstarkes geschaffen, indem sie das Wesen des Frameworks neu definiert haben. Das ist eine schicke Umschreibung dafür, dass sie eine Funktion gestrichen haben, um das Framework effizienter zu machen und so den Speicherbedarf zu verringern, die Startzeit zu verkürzen oder es generell flinker zu machen. In einigen Fällen wurden auch neue Ideen hinzugefügt, die in Zukunft zum Standard werden könnten.
Wenn Sie die Zeit haben, sich damit zu beschäftigen, finden Sie hier eine Liste weiterer interessanter Optionen. Sie sind nicht unbedingt das Richtige für manche Menschen und sicherlich nicht die beste Wahl für alle, aber sie könnten für Sie die bessere Wahl sein. Ihre Aufgabe, wenn Sie sie annehmen wollen, besteht darin, eine solide Beschreibung Ihrer Webanwendung zu erstellen, eine relativ genaue Beschreibung der verschiedenen Anwendungsfälle aufzuschreiben und dann diese Werkzeuge mit diesem Gedanken im Hinterkopf zu bewerten.
Vielleicht gefällt Ihnen ein bestimmter Ansatz für die Gestaltung von Code. Vielleicht braucht Ihre Anwendung einige der Funktionen in den umfangreicheren, populäreren Frameworks nicht. Es gibt Dutzende von Gründen, in einen dieser anderen Wege zu investieren. Vielleicht werden Sie feststellen, dass einer von ihnen für Ihre Anwendung Wunder wirkt.
Petit DOM
Wenn Sie die Idee eines virtuellen DOMs lieben, aber nicht all die Einschränkungen wollen, die mit der Übernahme der Denkweise der Leute von React, Vue oder einem anderen namhaften Framework einhergehen, dann ist das Petit DOM der richtige Weg für Sie. Sie erhalten eine winzige Menge an Code, mit dem Sie eine virtuelle Sammlung von Tags manipulieren und dann in das echte DOM migrieren können. Alles andere, was die Struktur der Komponenten und das Rendering betrifft, bleibt Ihnen überlassen. Wenn Ihre Komponenten einfach sind, oder wenn Sie eine super-komplexe Rendering-Hierarchie erstellen wollen, die nur Ihnen gehört, könnte dies Ihre Grundlage sein, denn alles, was es bietet, ist ein Werkzeug zur Virtualisierung des DOM.
Surplus
Das virtuelle DOM ist vielleicht nicht für jeden geeignet. Es braucht Platz, und wenn Ihre Manipulationen nicht zu komplex sind, können Sie Ihre Anweisungen auch direkt an das offizielle DOM weiterleiten. Die Surplus-Bibliothek macht genau das. Sie nimmt jedermanns Lieblingsmarkup JSX und kompiliert es in einen Code, der das echte DOM manipuliert. Wie man in der Werbebranche sagt, wird so der Mittelsmann ausgeschaltet. Kein Diffing. Keine geheime zusätzliche Schicht. Nur reine Manipulation des echten DOM. Wenn Ihr Code einfach und direkt genug ist, um nur ein paar Dinge mit dem DOM zu tun, warum sich mit der virtuellen Ablenkung herumschlagen?
RE:DOM
Eine weitere Option für diejenigen, die keinen Speicher in ein virtuelles DOM investieren wollen, ist eine winzige Bibliothek (2KB) namens RE:DOM. RE:DOM enthält einige grundlegende Routinen, mit denen Sie alle Ihre Tags und Komponenten mit ein paar einfachen JavaScript-Aufrufen erstellen können. Die Syntax ähnelt sehr stark der von CSS, so dass Sie mit wenigen Tastendrucken ziemlich komplexe Tags mit IDs und Klassen festlegen können. Ihre „kleiner als“- (<) und „größer als“-Tasten (>) werden es Ihnen danken.
Mithril
Nicht alle Alternativen sind winzig und minimalistisch. Mithril könnte man in diesem Zusammenhang als „mittelgroßes“ Framework bezeichnen, obwohl es nur etwa 8KB wiegt. Der gesamte Code baut ein virtuelles DOM mit einem effizienten Aktualisierungsmechanismus wie die anderen auf, enthält aber auch einen standardisierten Satz von Werkzeugen zur Bewältigung vieler Standardprobleme wie Routing und XMLHttpRequest-Aufrufe. Die Projektentwickler wollen, dass Mithril-Projekte relativ standardisiert sind, und sie sind der Meinung, dass das Hinzufügen dieses Codes zur Hauptbibliothek die Standardisierung erhöht. Wenn das nicht reicht, werden auch einige Standardformatierungen und idiomatische Strukturen gefördert.
Bobril
Wenn Sie das virtuelle DOM und die zustandsbehafteten Komponenten von React mögen und gerne in TypeScript programmieren, dann könnte Bobril oder sein Angular-freundlicher Cousin ngBobril genau das Richtige sein. Das Framework ist in einigen Benchmarks durchweg viel schneller als React oder Angular, was vielleicht an den schnelleren Diff-Algorithmen und der fehlenden Unterstützung für isomorphes JavaScript liegt. Es gibt auch Shorthand-Funktionen für CSS-Manipulationen und eine komplette Zustandsverwaltungsschicht, BobX, falls Sie diese benötigen.
Marko
Wenn Sie etwas Zeit damit verbracht haben, auf Pez-Spender oder andere Sammlerstücke zu bieten, haben Sie die Leistungsfähigkeit von Marko kennengelernt, einem schlanken, schnellen Framework, das eBay über eine Open-Source-Lizenz zur Verfügung stellt. Das Schönste daran ist vielleicht die sehr schlanke Syntax für die Erstellung von Vorlagen, die geschickt den größten Teil des überflüssigen Fettes aus HTML entfernt, so dass die Struktur durch Einrückung und nicht viel mehr definiert wird. Und die Rendering-Engine ist sehr schnell und in der Lage, ausgeklügelte Konstellationen von tanzenden DIVs anzusteuern, die sich schneller als mit 60 Bildern pro Sekunde aktualisieren.
Svelte
Ihr Standard-Web-Framework wird mit einem Compiler und einer heruntergeladenen Bibliothek geliefert, die zur Laufzeit das verarbeitet, was der Compiler erzeugt. Der zweistufige Prozess ermöglicht einen sehr komplexen Code, der jedoch den Preis hat, dass man bei jedem Öffnen der Seite darauf warten muss, dass die Laufzeitbibliothek heruntergeladen und geparst wird. Der Svelte-Compiler entledigt sich dieser Komplexität, indem er nahezu reines JavaScript ausspuckt, das fast allein lauffähig ist, wenn auch nur in einigen neueren Browsern (z. B. Chrome, Firefox, Opera und IE10). Es ist ein cleverer architektonischer Schachzug, der sehr leichtgewichtige Websites hervorbringt, die wenig Speicherplatz benötigen.
Inferno
Inferno ist ein weiteres Framework, das entwickelt wurde, um vieles von dem zu tun, was React tut, aber mit einem kleineren Download und einer schnelleren Laufzeit. Es erreicht vieles davon, indem es den aufwendigen synthetischen Event-Mechanismus wegwirft und sich nur auf das Wesentliche wie onClick konzentriert. Viele andere Teile der API sind ähnlich, wenn nicht sogar gleich, so dass es relativ einfach ist, seinen Code zu übertragen, wenn er die Ereignisoptimierungsschicht nicht benötigt.
Preact
Einer der kleinsten React-Abkömmlinge ist Preact, eine Hommage, die die meisten der wertvollsten Features wie ein virtuelles DOM und ausgefeilte Komponenten bietet, aber die synthetischen Event-Handler und einige der Requisitenvererbung weglässt. Während Inferno versucht, nur die wichtigsten Ereignisse wie onClick zu implementieren, macht sich Preact nicht die Mühe, irgendetwas mit den Ereignissen zu tun, sondern überlässt es Ihnen, sich auf das native addEventListener des Browsers zu verlassen. Durch das Weglassen von Funktionen, die (ihrer Meinung nach) nicht viel bringen, können sie ihren Download noch kleiner machen. Dies ist ein gewisser Kompromiss, denn die Benchmarks zeigen, dass Preact ein wenig langsamer ist als Inferno. Natürlich kann Ihre Anwendung anders sein und Ihre Erfahrungen können variieren. Wenn Sie wirklich reine Kompatibilität mit React benötigen, gibt es sogar eine Bibliothek (preact-compat), die die meisten Probleme während der Erstellung behebt.
Hapi
Viele Frameworks kommen in einem einzigen Paket. Hapi ist eher eine Sammlung von Plug-ins, eine Konstellation von Dutzenden von Code-Bits, die Sie in Ihren Stack mischen können, wie Sie es für richtig halten. Authentifizierung, Autorisierung und Protokollierung sind Aufgaben, die mit einer beliebigen Anzahl von Optionen gelöst werden können. Wenn Sie eine Microservices-Architektur voller APIs aufbauen, generiert das standardisierte Swagger-Plug-in automatisch die Swagger-Dokumentation aus Ihrem Basiscode.
Koa
Manchmal benötigen Sie eine ziemlich komplexe Sammlung von Routinen, die mit eingehenden Anfragen jonglieren und sie in mehrere, zum Teil aufwändige Änderungen umsetzen. Koa wurde entwickelt, um die Organisation all dieser Arbeit ein wenig zu vereinfachen. Sein Geheimnis ist, dass es die Callback-Funktionen, die normalerweise JavaScript dominieren, in eine Reihe asynchroner Funktionen umwandelt, die dann ausgelöst werden, wenn der richtige Zeitpunkt gekommen ist. Die verschachtelten Spaghetti-Callback-Stapel werden in etwas Sauberes verwandelt.
Nest
Eine weitere Möglichkeit, die Komplexität des Servers zu zähmen, kommt vom Nest-Team, das eine Architektur mit Controllern, Pipes und Providern mit einigen Wächtern, Abfängern und Ausnahmefiltern anbietet, um Ordnung zu halten. Das Framework ist modern und bereit, GraphQL- und Microservice-Anfragen von Anfang an zu verarbeiten.
Drupal, WordPress und Rails
Frameworks, die in JavaScript aufgebaut sind und auf Node.js laufen, bilden heutzutage das psychologische Zentrum der Webentwicklungswelt. Es wäre jedoch ein Fehler, die vorherige Generation zu ignorieren, die auf PHP aufbaut, einer Grundlage, die schneller denn je ist, da sie wie JavaScript über einen Just-in-Time-Compiler verfügt. Und Ruby und sein Rails-Framework dienen nach wie vor als Eckpfeiler felsenfester Websites.
Die letzte Generation ist kampferprobt und durch mehr als ein Jahrzehnt kontinuierlicher Entwicklung und Arbeit gut erprobt. Es gibt erfahrene Designer, die Themes und Skins für die Anwendungen entwerfen können. Die Wahrscheinlichkeit ist groß, dass jemand bereits die Module mit den von Ihnen benötigten Funktionen entwickelt hat. Bevor Sie sich also mit einem cleveren Node.js-Framework beschäftigen, sollten Sie überlegen, ob einer der Oldies nicht schon vieles, wenn nicht sogar alles kann, was Sie brauchen.
Vanilla JS
Man könnte es als gemeinen Seitenhieb oder vielleicht als Satire auf das Niveau von „Des Kaisers neue Kleider“ sehen, aber es ist schwer, seinen Erfolg zu bestreiten. Vanilla JS ist eine Website, die damit prahlt, dass ihr Framework auf mehr Websites eingesetzt wird als „jQuery, Prototype JS, MooTools, YUI und Google Web Toolkit zusammen“. Das mag angesichts der Verbreitung von jQuery wahr sein oder auch nicht, aber lachen wir mal über die Verbrennung. Die Website verfügt auch über einen netten kleinen Selektor, mit dem Sie ein benutzerdefiniertes Archiv aus verschiedenen Komponenten wie Math, DOM, Closures oder regulären Ausdrücken zusammenstellen können. Egal, was Sie wählen, das Ergebnis ist verblüffende null Bytes lang. Versuchen Sie, das zu übertreffen!
Die Pointe des Witzes ist, dass es manchmal sinnvoll ist, nur ein paar der Standardelemente in JavaScript zu verwenden und die Extras wegzulassen. Bibliotheken und Frameworks wie jQuery oder React wurden zum Teil wegen der unüberwindbaren Unterschiede zwischen den Browsern entwickelt. Viele dieser Unterschiede sind dank der Standardisierung verschwunden.
Natürlich sehen die Vanilla-JS-Befürworter nicht ein, dass Shorthand-Funktionen wie $() nicht nur bequem sind, sondern auch Platz in unserem eigenen Code sparen. Aber wenn Sie document.getElementById nur gelegentlich verwenden, spielt das vielleicht keine Rolle. Wenn Sie nur ein paar Funktionen zu Ihrer Webseite hinzufügen und diese Funktionen ein paar grundlegende Dinge tun, kann einfaches Vanilla JavaScript das schnellste Framework für Sie sein.