Accentsconagua
Share
Wenn es um die Wahl des richtigen JavaScript-Frameworks geht, ist dies sicherlich eine wilde und verwirrende Landschaft. Dieser Leitfaden hilft Ihnen - ein aufstrebender Front-End-Entwickler - durch die trüben Gewässer zu navigieren, wenn es an der Zeit ist, einen für Sie geeigneten Rahmen zu wählen. In jedem Rahmen, den ich zur Schau gestellt habe, werden die kurzen Grundlagen, die Sprachsyntax und hilfreiche Lernressourcen beschrieben.
In unserer Entwicklungswelt kann ein "Framework" als JavaScript-Bibliothek definiert werden, die datengesteuerte, interaktive Schnittstellen anzeigt und wiedergibt. Sie dienen dazu, Daten an einen Benutzer zu übergeben, wenn eine Interaktion ausgelöst wird. Alle diese Bibliotheken unterscheiden sich geringfügig von einer zur anderen, ihr Zweck ist jedoch derselbe. Neue Daten anzeigen, wenn eine Interaktion stattgefunden hat.
Sehen wir uns diese mächtigen Rahmenbedingungen genauer an, um uns dabei zu helfen, die Landschaft besser zu durchschauen.
Bei der Auswahl eines Frameworks gibt es viele Optionen. Nachfolgend finden Sie eine Liste des aktuellen Terrains, einschließlich Vue, React, Angular und Ember. Jedes Projekt wurde aufgrund des Wachstums und der Nachhaltigkeit der Gemeinschaft, der Aktivität von GitHub, der Dauer der Verfügbarkeit des Projekts für Entwickler und der Frage, ob das Projekt noch von einer großen Gruppe von Entwicklern und Entwicklungsunternehmen genutzt wird, ausgewählt.
Erster Commit 27. Juli 2013
Dateigröße: 27,5 KB minifiziert
Vue behauptet, ein progressiver Rahmen zu sein, der zugänglich, vielseitig und performant ist. Wenn Sie ein grundlegendes Verständnis für den guten alten Web-Stack (HTML, CSS, JS) haben, sind Sie bereits in der Lage, Vue zu verwenden.
„Die Kernbibliothek konzentriert sich nur auf die Ansichtsebene und ist sehr leicht zu finden und in andere Bibliotheken oder bestehende Projekte zu integrieren. Auf der anderen Seite ist Vue auch in der Lage, anspruchsvolle Single-Page-Anwendungen in Kombination mit modernen Werkzeugen und unterstützenden Bibliotheken zu betreiben. ”- VueJS Introduction Docs
Wenn es um die Syntax geht, bietet die Bibliothek mit ihrer einfachen "Hello World" -Demo:
Botschaft
var app = new Vue (el: '#app', Daten: message: 'Hello Vue!')
Die Bibliothek wird durch die Verwendung von Attributwerten in Ihrem Markup aussagekräftiger. Hier ist eine komplexere Syntax, die diese Attribute verwendet:
Bewegen Sie den Mauszeiger einige Sekunden über mich, um meinen dynamisch gebundenen Titel zu sehen!
Abgesehen von der Syntax ermöglicht Vue.js die Handhabung von Benutzereingaben, das Erstellen von Komponentenvorlagen, das Binden von Daten an die Struktur des DOMs mit Bedingungen und Schleifen sowie ein "deklaratives Rendering", das durch eine unkomplizierte Syntax erreicht wird, die lose auf den Webkomponenten modelliert ist Spec.
Lernmittel:
Erster Commit 29. Mai 2013
Dateigröße: 7,3 KB minimiert mit Add-Ons: 11,3 KB minimiert
React definiert sich selbst als JavaScript-Bibliothek zum Erstellen von Schnittstellen, die von dynamischen Daten gesteuert werden. Es wurde von den Mitarbeitern von Facebook entwickelt und ist auch Open Source auf GitHub. Wenn Sie sagen, dass Sie HTML in JavaScript verfassen, ist das vielleicht etwas grob. Aber so funktioniert React.
Schauen wir uns ein Syntaxbeispiel direkt aus der Dokumentation zum React Intro-Tutorial an. Dieses Beispiel erstellt das, was React "Komponentenklassen" nennt, obwohl es auch einige verschiedene Arten von Komponenten gibt. Die Syntax für einen Komponentenaufruf ist XML-ähnlich, wie Sie in diesem HTML-Code feststellen werden:
Die Klasse ShoppingList erweitert React.Component render () return ();Einkaufsliste für this.props.name
- Oculus
React enthält zusätzliche Optionen wie Add-Ons, die als nützliche Gruppe von Hilfsmodulen betrachtet werden. Diese Add-Ons enthalten Hilfsprogramme, die beim Umgang mit Animationen und Übergängen helfen, Tools zur Leistungsprofilerstellung, Testfall-Helfer und vieles mehr. Die Dokumentation zu React empfiehlt auch die Verwendung von React with Babel, um die Verwendung von ES6 und JSX in Ihrem JavaScript-Code zu ermöglichen. Es gibt auch eine praktische Erweiterung für React Devtools für Chrome und Firefox, mit der Sie einen React-Komponentenbaum in den Dev Tools Ihres Browsers überprüfen können.
Lernmittel:
Erster Commit 18. September 2014 (GitHub berichtete)
Erstveröffentlichung (Laut Wikipedia) 20. Oktober 2010
Dateigröße: CLI-Tool. Nicht mehr eine eigenständige JS-Datei.
Angular wird vom Team bei Google entwickelt. Da HTML nie als dynamische Sprache gedacht war, erweitert Angular das HTML-Vokabular, indem Attribute in Ihrem Markup erweitert werden können. Dies ermöglicht letztlich "deklarative Bindungen" zu Ereignissen, um dynamische Daten und Zustände basierend auf Interaktionen anzuzeigen. Sie können große Datenanforderungen erfüllen, indem Sie Datenmodelle auf RxJS, Immutable.js oder einem anderen Push-Modell erstellen. Und Sie können die Vorlagensprache mit Ihren eigenen Komponenten erweitern und Verwenden Sie eine Vielzahl vorhandener Komponenten.
„Lernen Sie eine Möglichkeit kennen, um Anwendungen mit Angular zu erstellen, und verwenden Sie Ihren Code und Ihre Fähigkeiten erneut, um Apps für jedes Implementierungsziel zu erstellen. Für Web, mobiles Web, native mobile und native Desktop. “
Die Angular-Syntax ist nichts Neues in Bezug auf HTML-Attribute und Platzhalter für Mustache-Zeichen, mit Ausnahme des verwendeten Namespaces ng- Wie Sie im folgenden Beispiel sehen werden:
Hallo yourName!
Angular besteht auch hauptsächlich aus Komponenten, die eine Kombination aus HTML-Vorlagen und einer Komponentenklasse sind, die einen Teil des Bildschirms steuert.
// src / app / app.component.ts import Component aus '@ angle / core'; @Component (Selektor: 'Meine-App', Vorlage: 'Hallo Name
') Exportklasse AppComponent name =' Angular ';
Laden von AppComponent-Inhalten hier…
Die Datei mit der Erweiterung .ts aus dem obigen Beispiel ist in TypeScript geschrieben. Eine Sprache, die mit derselben Syntax und Semantik von JavaScript beginnt. Es ist eine Obermenge von JavaScript, die in JavaScript kompiliert wird, oder was Sie als Spracherweiterer meinen könnten, d. H. Syntaxzucker. Hier hilft das CLI-Tool, wenn es an der Zeit ist, Ihren Code zu kompilieren.
Lernmittel:
Erster Commit 30. April 2011
Dateigröße: ?
Ember ist eine Bibliothek, die den anderen, die wir besprochen haben, sehr ähnlich ist und die auch in Handlebars integriert werden kann. Für diejenigen, die mit Handlebars nicht vertraut sind, ist dies eine Vorlagensprache zum Erstellen statischer Seiten, ähnlich wie Sie es von Jekyll kennen. Entwickler können Handlebars verwenden, um das Markup zu beschreiben, und mithilfe von JavaScript können Sie benutzerdefiniertes Verhalten für Komponenten basierend auf der Interaktion implementieren.
"Ember ist ein JavaScript-Anwendungsframework für die Erstellung einseitiger clientseitiger Webanwendungen, das das Model-View-Controller-Muster (MVC) verwendet."
Ember wird mit Node erstellt und verwendet eine Vielzahl von Node.js-Modulen für den Betrieb. Ember verfügt auch über ein Befehlszeilenschnittstellentool (über npm installiert, falls Sie dies wünschen), das eine Standardprojektstruktur und eine Reihe von Entwicklungstools einschließlich eines Add-On-Systems enthält. Es wird auch mit einem Entwicklungsserver und Build-Umgebungsflags geliefert, die über die Befehlszeile übergeben werden können.
Die Syntax für Ember scheint nichts Ungewöhnliches zu sein. Sie basiert auf Objektliteralen und der Punktnotation, mit der wir in JavaSript sehr vertraut sind, plus Handlebars für die Vorlagenaufrufe.
Ember aus 'Ember' importieren; Exportieren Sie die Standardeinstellung Ember.Controller.extend (firstName: 'Trek', lastName: 'Glowacki');
Hallo, Vorname Nachname
Das obige Beispiel ist ein sehr grundlegender Vorgeschmack auf die Syntax und die Dateistruktur. Der Demo-Code exportiert und erweitert einen Ember-Controller und kompiliert die Namen aus dem Objektliteral in Ihr Markup.
Erwähnenswert ist auch, dass Sie mit den Router-Funktionen von Ember aufhören können, das Web zu beschädigen. Standardmäßig erhalten Sie bei jeder erstellten Route URLs und eine Schaltfläche zum Zurückarbeiten, und die API ist einfach zu verwenden (und mit Erfahrung mit serverseitigen Web-Frameworks vertraut). Ember.js ist kostenlos, Open Source und wird immer so sein, wie sie auf ihrer Website angegeben sind.
Lernmittel:
Die Wahl des Rahmens beruht immer auf persönlichen Präferenzen und dem langfristigen Vertrauen in das Projekt. Wenn Sie tiefer in ein X oder ein Y einsteigen möchten, um die Auswahl zu erleichtern, bietet Vue auf seiner Website eine anständige Erklärung und einen Vergleich, der auch Informationen zu anderen Bibliotheken wie Knockout, Polymer und Riot enthält. Vielleicht möchten Sie auch an unserem Quiz teilnehmen, das Ihnen helfen soll, Ihre Entscheidungen einzugrenzen!
