So wählen Sie das beste Front-End-Framework aus

Die JavaScript-Welt ist eine reichhaltige Umgebung mit Dutzenden von Tools, Bibliotheken und Frameworks. Aber mit vielen Optionen kommt viel Verwirrung. Es ist wirklich ein zweischneidiges Schwert.

Obwohl Sie viel Raum für Kreativität und Experimente haben, sind Sie sich manchmal nicht sicher, welche Bibliothek oder welches Framework Sie wählen sollen.

Das von Ihnen gewählte Front-End-Framework kann Ihr Projekt auf lange Sicht über Erfolg oder Misserfolg entscheiden.

In diesem Artikel werden wir uns einige der beliebtesten JavaScript-Frameworks ansehen und wie sie sich gegeneinander behaupten. Wir werden fünf verschiedene Perspektiven dieser Frameworks untersuchen, was im Allgemeinen den Prozess der Entscheidung über Ihr nächstes JavaScript-Framework erleichtert.

Unabhängig davon, ob Sie sich für eines dieser beliebten JavaScript-Frameworks oder etwas Esoterischeres entscheiden, sollten Sie jeden dieser Aspekte berücksichtigen.

Verfügbarkeit von Lernressourcen

Dieser ist offensichtlich, wird aber oft übersehen. Während Ihnen die schicke Homepage einiger Frameworks auffallen mag, benötigen Sie neben langweiliger und trockener Dokumentation noch einige zusätzliche Kurse, Bücher, Tutorials und Artikel, um Ihnen den Einstieg zu erleichtern.

Ein großartiges Framework zu erstellen ist eine Sache und die Kernideen dahinter zu kommunizieren eine andere. Tatsächlich gibt es viele professionelle Entwickler, die sich auf Coaching spezialisiert haben. Eine gut gestaltete Lernressource wird Ihre Lernkurve drastisch verkürzen.

Suchen Sie nach Ressourcen von vertrauenswürdigen Autoren, mit denen Sie bereits Erfahrungen gesammelt haben – am Ende wird es Ihre Zeit wert sein. Wenn Sie Schwierigkeiten haben, etwas Nützliches zu finden, seien Sie vorsichtig: Das Framework, das Sie lernen möchten, ist möglicherweise neu oder von der Community noch nicht gut angenommen.

Obwohl ich erwähnt habe, dass die Dokumentation allein nicht ausreicht, gibt es Ausnahmen davon. EmberJS hat zum Beispiel eine großartige Dokumentation. Kernfunktionen und Anwendungsfälle werden hier und da mit allgemeinen Beispielen gut beschrieben. Leider bleiben uns neben der Dokumentation nur wenige Ressourcen, Bücher, Videokurse oder andere Materialien.

Andererseits gibt es eine Fülle von Ressourcen für Angular und React. Fast jede Front-End-orientierte Bildungswebsite enthält einen oder zwei Artikel darüber, vielleicht sogar einen vollständigen Videokurs oder ein Buch.

Vue trifft den Mittelweg: Es hat eine gute Dokumentation und es gibt ein paar nette Kurse, aus denen Sie wählen können.

Aurelia zum Beispiel hat fast keine Ressourcen; Die einzige Hoffnung für Sie ist Dokumentation und Glück.

Ich habe lieber die Wahl.

Selbst wenn Sie ein großartiges Buch oder einen großartigen Kurs lesen, besteht die Möglichkeit, dass Sie etwas Neues lernen, indem Sie sich verschiedenen Ressourcen aussetzen. Wenn Sie sich mit dem Thema auskennen, können Sie oft überfliegen und nach möglichen Bereichen suchen, die noch nicht ganz klar sind.

Leider funktioniert diese Strategie nicht, wenn Sie mit Ihren Möglichkeiten eingeschränkt sind, was uns zum nächsten Punkt führt.

Popularität

Sie sind vielleicht stolz darauf, etwas Exotisches zu lernen, aber wenn Sie dies aus geschäftlicher Sicht betrachten, ist es nicht dasselbe. Ihr Unternehmen oder Kunde bevorzugt wahrscheinlich die Verwendung eines kampferprobten Toolsets.

Dafür gibt es mehrere Gründe. Wenn ein Framework nicht so beliebt ist, bedeutet das, dass es einige Entwickler gibt, die sich darauf spezialisiert haben. Was passiert, wenn Sie das Projekt abbrechen oder einen neuen Job finden? Ihr Arbeitgeber bleibt bei der Suche nach einem Entwickler hängen, der das von Ihnen verwendete Framework kennt.

Dieser Prozess kann für ein Unternehmen zu einer echten Belastung werden. Das Gleiche gilt auch, wenn Sie an dem Projekt festhalten und es wächst. Jetzt braucht der Arbeitgeber mehr Entwickler, um die Entwicklung zu beschleunigen.

Es gibt einige andere persönliche Gründe, warum Sie sich für ein beliebtes, weit verbreitetes Framework entscheiden könnten. Was passiert, wenn Sie mit einem Problem stecken bleiben und es nicht wirklich eine Community gibt, die Sie um Hilfe bitten können? Da Sie mit der Dokumentation allein sind, werden Sie wahrscheinlich viel Zeit verschwenden.

Außerdem möchten Sie über zukünftige, attraktivere Möglichkeiten in Ihrer Karriere nachdenken. Wenn Sie sich auf etwas Beliebtes spezialisieren und wirklich gut darin werden, gibt es viele Projekte für Sie.

Offensichtliche Marktführer sind hier Angular und React.

Die meisten Front-End-bezogenen Stellenangebote da draußen erfordern das eine oder andere. Sie werden von Google bzw. Facebook unterstützt, und daher fühlen sich Arbeitgeber bei ihrer Wahl „sicher“.

Manchmal liegt die Wahl des Frameworks für Ihr Unternehmen oder Ihren Kunden nicht bei Ihnen; vielleicht wurde es von einem früheren Mitarbeiter oder einer anderen Person im Team erstellt. Die Chancen stehen gut, dass es Angular oder React sein wird. Jetzt gibt es andere Optionen wie Ember und Vue. Aber Sie müssen bewusst nach Unternehmen suchen, die sie verwenden.

Sie können die Popularität eines Frameworks feststellen, indem Sie sich schnell ansehen, wie gut das Projekt auf GitHub und anderen Orten abschneidet. Hier sind einige Statistiken, die zum Zeitpunkt des Schreibens dieses Artikels gesammelt wurden:

Obwohl diese Bibliotheken schon lange genug existieren, um sich als beliebte Optionen zu erweisen, können ähnliche Statistiken für sie Ihnen bei der Auswahl helfen, wenn Sie etwas wirklich Neues ausprobieren.

Wenn Sie nur Angular oder React lernen, werden Sie in Ihrer Karriere nur so weit kommen. Natürlich haben Sie viele Möglichkeiten, aber es gibt einen Grund, warum es andere Frameworks gibt. Versuchen Sie, in Ihrer Freizeit etwas über sie zu lernen, und führen Sie gelegentlich einige Experimente durch. Auch wenn Sie sie nie in echten Projekten einsetzen, gewinnen Sie wertvolle Erkenntnisse, die Ihnen bei Ihrer täglichen Entwicklungsarbeit helfen.

Kernfunktionen

Lassen Sie uns jetzt ein wenig technisch werden.

Am Anfang möchten Sie kurz die Kernfunktionen des Frameworks überblicken, um eine angemessene Erwartung zu haben, wenn Sie mit dem Codieren beginnen. Scannen Sie dazu die Dokumentation. Sie müssen ein Gefühl dafür bekommen, worum es bei diesem Framework im Allgemeinen geht. Ist es nur eine Ansichtsebene, vollwertig oder etwas dazwischen?

Wenn Sie bereits über umfangreiche Erfahrung mit anderen Frameworks verfügen, ist dieser Prozess einfach und schnell. Suchen Sie in der Dokumentation nach folgenden Themen: Templating, Zustandsverwaltung, HTTP-Kommunikation, Formularverarbeitung und -validierung sowie Routing. Das sind alltägliche Dinge, die man als Entwickler tut. Möglicherweise sind nicht alle im Kernrahmen dargestellt, oder es gibt möglicherweise einen anderen Ansatz für ein bestimmtes Problem.

Lassen Sie uns kurz auf beliebte Optionen eingehen.

Wir beginnen mit React und Vue. Sie sind nicht wirklich Frameworks; Sie stellen nur die Ansichtsebene Ihrer Anwendung dar. Das bedeutet, dass alle anderen Teile – HTTP-Kommunikation, Formularvalidierung usw. – Ihnen überlassen sind.

Wie ich bereits erwähnt habe, könnte es ein zweischneidiges Schwert sein. Schließlich werden Sie am Ende Ihr eigenes benutzerdefiniertes Framework erstellen. Beide haben ihr Ökosystem von Bibliotheken, um Lösungen für die häufigsten Probleme bereitzustellen, aber die Gesamtstruktur wird von Projekt zu Projekt variieren.

Reacts JSX hat mich immer zusammenzucken lassen. Ich musste mich daran gewöhnen. Das Templating von Vue ist jedoch wirklich nett, besonders wenn Sie von Angular kommen.

Auf der anderen Seite hat Ember fast alles. Überraschenderweise bietet der Kern von Ember keine erweiterte Formularverarbeitung. Es hat nur ein paar Eingabehilfen und das war's. Es ist sehr eigensinnig und hat sogar eine eigene Datenschicht. Alles muss „auf Ember-Weise“ gemacht werden.

Wenn Sie einen Hintergrund in anderen Frameworks oder JavaScript im Allgemeinen haben, werden Sie möglicherweise frustriert, weil Ember ein eigenes Objektmodell verwendet. Standard-ES2015-Klassen werden nicht häufig verwendet, wie in der Dokumentation angegeben. Möglicherweise weisen Sie den Wert einer Immobilie direkt zu und Ember beschwert sich darüber.

Ein weiterer wesentlicher Unterschied zu anderen Frameworks ist Ember Data. Es ist eine Datenschicht für Ember-Anwendungen. Sie können es sich wie eine Art ORM für das Front-End vorstellen. Sie erstellen Modelle und bilden die Beziehungen zwischen ihnen ab.

Wenn Ihr Server nun die JSON-API verwendet (es ist eine Spezifikation zur Implementierung von JSON-APIs), sind Sie mit Ember an einem guten Ort, aber leider tun dies die meisten Server nicht. Sie müssen also benutzerdefinierte Adapter und Serialisierer schreiben. Wenn Sie die Dinge jedoch auf die Ember-Art tun, kann dies sehr produktiv sein. Es hat einfach eine steile Lernkurve.

Angular 2 ist ein funktionsreiches Framework. Es wird mit vielen Modulen wie Ember geliefert, sodass Sie sofort eine Menge Werkzeuge zur Verfügung haben. Da Angular jedoch für große Anwendungen gedacht ist, fördert es TypeScript, was möglicherweise einigen Widerstand hervorruft, bevor Sie es ausprobieren.

Eine weitere bemerkenswerte Sache ist die starke Nutzung von Observables aus der Rx-Bibliothek, was wirklich nett ist. Sie können fast alles als Observable darstellen und High-Level-Operationen wie Map, Filter usw. anwenden. Wenn Sie Lodash oder Underscore verwendet haben, ist Rx ähnlich, aber auf Steroiden.

Hier ist eine Zusammenfassung der Kernfunktionen der vier Frameworks, die wir in diesem Artikel besprechen:

Alle diese Funktionen, die wir kurz überblickt haben, sind wertlos, wenn Sie die Kerze an beiden Enden abbrennen müssen, um sie effektiv zu nutzen – was der nächste Punkt ist.

Benutzerfreundlichkeit

Wenn Sie an dieser Stelle immer noch Begeisterung für Ihr gewähltes Framework haben, ist der nächste Schritt, sich die Hände schmutzig zu machen.

Vielleicht passt das Framework aufgrund Ihres Hintergrunds gut zu Ihnen. Vielleicht ist es ein bisschen anders und fordert Sie in gewisser Weise heraus. Sie wissen es noch nicht, und keine Menge Lesen oder Anschauen von Tutorials hilft, bis Sie es selbst ausprobieren.

Der beste Weg, um ein Gefühl für ein Framework zu bekommen, besteht darin, es in einem Miniprojekt zu verwenden. Dies gibt Ihnen die Möglichkeit, die oben genannten alltäglichen Probleme mit einem vorgegebenen Rahmen zu lösen.

Nehmen Sie sich bei der Arbeit an einem Projekt Zeit und überlegen Sie, ob Sie produktiv sind oder nicht. Wie einfach ist es, das gewünschte Ergebnis zu erzielen? Müssen Sie nach externen Bibliotheken suchen? Vielleicht brauchen Sie einige Plugins aus der Community. Gibt es im Kontext des Frameworks eine konventionelle Struktur oder Richtlinien? Vielleicht gibt es eine CLI, um den Entwicklungsprozess zu beschleunigen. In diesem Schritt sammeln Sie grundlegende Erfahrungen, damit Sie sich überlegen können, wie es wäre, wenn Sie dieses Framework für anstehende Projekte verwenden oder sogar bestehende umstellen würden.

Ember gilt als sehr produktives Framework, zumindest für seine Core-User. Es kommt mit einer CLI, die wirklich hilft. Sie können Routen, Controller, Komponenten und Modelle mit eigenen Testsuiten generieren. All dies manuell zu tun, ist eine mühsame Aufgabe. Auch das Erstellen eines neuen Projekts ist möglich. Es erstellt die grundlegende Ordnerstruktur, installiert die erforderlichen Pakete, erstellt Tools, testet die Umgebung usw. Wenn Sie noch nie eine CLI in einem solchen Umfang verwendet haben, werden Sie sehr zufrieden sein. Aber wie ich bereits erwähnt habe, ist Ember sehr eigensinnig; Trotz all dieser Güte könnten Sie frustriert sein, wenn Sie versuchen, allgemeine Aufgaben zu erledigen.

Jetzt haben React und Vue eine Art CLI, create-react-app und vue-cli. Aber abgesehen davon, dass sie ein anfängliches Projekt mit einigen Optionen erstellen, bieten sie im Vergleich zu Ember oder Angular nicht so viel. Es ist verständlich, da beide eine Ansichtsebene darstellen. Wenn Sie individuelle Arbeitsabläufe, Experimente oder unterschiedliche Strukturen von Projekt zu Projekt mögen, dann sind Sie bei uns genau richtig. Für einige Entwickler ist Flexibilität der Schlüssel, der mit der Verwendung von React oder Vue einhergeht.

Angular 4 kommt mit einer CLI wie Ember. Sie können Komponenten, Richtlinien, Dienste usw. generieren. Es generiert auch die anfängliche Struktur für eine Anwendung, sodass Sie sich nur um das Produkt kümmern müssen. Die Testumgebung ist wirklich schön, da die Testsuite mit jeder generierten App (buchstäblich) in der Nähe davon lebt. Abgesehen davon könnte TypeScript für einen echten Produktivitätsschub sorgen. Hier ist der Grund:

Wie oft sind Sie auf Code mit Zeilen wie dieser gestoßen …

 function doSomething(someData) { // do something }

…und sich gefragt, was in aller Welt someData sind, welche Eigenschaften sie haben sollten, welche Funktionen sie bieten sollten und wie sie sich verhalten? Mit TypeScript definieren Sie den Typ und erwarten die entsprechenden Daten. Es kann noch weiter gehen, wenn Sie eine IDE mit TypeScript-Unterstützung verwenden. Sie können verschiedene Teile der App im Handumdrehen erkunden.

Wir haben IDEs nicht angesprochen, aber für die meisten gängigen Frameworks gibt es einige Plugins, die die Entwicklung wirklich einfach machen. WebStorm wird beispielsweise mit integrierter Unterstützung für Angular, React und Vue ausgeliefert.

Einfache Integration (mit anderen Bibliotheken)

Dies könnte nicht zuletzt als Teil der Benutzerfreundlichkeit betrachtet werden, ist aber so wichtig, dass es einen eigenen Abschnitt verdient.

Unabhängig davon, wie funktionsreich Ihr ausgewähltes Framework ist, werden Sie wahrscheinlich Probleme haben, wenn zusätzliche Tools erforderlich sind. Es gibt großartige Bibliotheken, die sich auf ein Problem konzentrieren, sei es DOM-Manipulation, Datenverarbeitung, Zeitformatierung, Rich-Text-Bearbeitung usw. Wenn Sie versuchen, eine davon zu integrieren und jedes Mal Stunden damit verbringen, ist das vielleicht nicht die optimale Wahl .

Das zu testen ist ganz einfach. Sie können sich schnell ein imaginäres Szenario ausdenken, in dem Sie eine bestimmte Bibliothek benötigen. Schauen Sie sich Ihre vergangenen Projekte an; Welche Tools haben Sie verwendet und in welchen Szenarien? Die Chancen stehen gut, dass Sie wieder in die gleichen Situationen geraten und Sie darauf vorbereitet sein möchten oder zumindest eine Erwartung haben.

Nicht alle Bibliotheken da draußen unterstützen TypeScript. Da Angular es stark verwendet, könnten einige der TypeScript-Vorzüge bei der Verwendung einer solchen Bibliothek verschwinden. Natürlich können Sie eine Problemumgehung finden, aber es ist ein bisschen mühsamer. Aufgrund der Popularität von Angular können Sie Anweisungen auf der Seite der Bibliothek selbst integrieren.

Für Vue und React sind Sie für fast alles verantwortlich, und die Verwendung anderer Bibliotheken ist keine Ausnahme. Wenn Sie Webpack oder ein ähnliches Build-Tool verwenden, können Sie direkt auf Bibliotheken verweisen, die mit NPM installiert wurden. Ich habe festgestellt, dass es für Vue ein wenig umständlich ist, Community-Plugins zu verwenden, insbesondere wenn sie auch Benutzeroberflächenlogik enthalten.

Ember hat EmberObserver, eine Website mit Community-Plugins. Jeder von ihnen hat eine Punktzahl auf einer Skala von null bis zehn. Es ist ein wirklich großartiger Ort, um nach etwas zu suchen, das Sie brauchen. Wenn Sie den Namen Ihrer bevorzugten Bibliotheken wie Lodash, Rx oder Ramda eingeben, finden Sie die zugehörigen Plugins von einfachen Wrappern bis hin zu vollständigen Umschreibungen. Natürlich gibt es Awesome React- und Awesome Vue-Repositories, die verwandte Ressourcen sammeln, einschließlich Bibliotheken, aber ich fand EmberObserver besonders nützlich.

Bekenntnis zu einem JavaScript-Framework

Die Wahl des richtigen JavaScript-Frameworks ist einer der wichtigsten Schritte, um Ihr Webprojekt zum Erfolg zu führen. Egal, ob Sie an einem kleinen oder einem großen Projekt arbeiten, ob Sie alleine oder im Team arbeiten, jedes dieser Details spielt eine entscheidende Rolle bei der Bestimmung, welches Framework das beste für Ihr Projekt ist (und weniger, welches Framework Sie vielleicht bevorzugen ).

In Bezug auf Kernfunktionen und Benutzerfreundlichkeit habe ich die Punkte aufgelistet, die die Produktivität der Entwickler in unterschiedlichem Maße beeinflussen werden. Die Benutzerfreundlichkeit ist besonders schwierig, da sie stark von Ihrer Erfahrung und Ihrem Hintergrund sowie von der Firma oder Organisation abhängt, in der Sie arbeiten.

Im Laufe der Zeit können sich die Frameworks, die wir in diesem Artikel besprochen haben, weiterentwickeln, ihre Beliebtheit kann sich ändern und die Projekte, für die sie geeignet sind, können sich ändern, aber dieser Artikel soll Ihnen einen allgemeinen Eindruck davon vermitteln, wo jedes dieser Frameworks am besten funktioniert.