Einstieg in Ember
In unserem ersten Ember-Artikel werden wir untersuchen, wie Ember funktioniert und wofür es nützlich ist. Wir installieren die Ember-Toolchain lokal, erstellen eine Beispielanwendung und führen dann einige erste Einrichtungsschritte durch, um die Anwendung für die Entwicklung vorzubereiten.
Voraussetzungen: |
Mindestens sollten Sie mit den Kernsprachen HTML, CSS und JavaScript vertraut sein und Kenntnisse im Umgang mit dem Terminal/der Kommandozeile haben. Ein tieferes Verständnis von modernen JavaScript-Funktionen (wie Klassen, Module usw.) ist äußerst vorteilhaft, da Ember sie intensiv nutzt. |
---|---|
Ziel: | Erlernen, wie man Ember installiert und eine Starter-App erstellt. |
Einführung in Ember
Ember ist ein Komponenten-Service-Framework, das sich auf die gesamte Webanwendungsentwicklungs-Erfahrung konzentriert und die trivialen Unterschiede zwischen Anwendungen minimiert — und das alles, während es eine moderne und schlanke Schicht auf nativen JavaScript bleibt. Ember hat zudem eine immense Rückwärts- und Vorwärtskompatibilität, um Unternehmen dabei zu helfen, mit den neuesten Versionen von Ember und den neuesten Community-getriebenen Konventionen auf dem Laufenden zu bleiben.
Was bedeutet es, ein Komponenten-Service-Framework zu sein? Komponenten sind einzelne Pakete aus Verhalten, Stil und Markup — ähnlich wie andere Frontend-Frameworks sie bereitstellen, wie React, Vue und Angular. Die Dienstseite bietet einen langlebigen, gemeinsamen Zustand, Verhalten und eine Schnittstelle zur Integration mit anderen Bibliotheken oder Systemen. Zum Beispiel ist der Router (der später in diesem Tutorial erwähnt wird) ein Dienst. Komponenten und Dienste machen den Großteil jeder EmberJS-Anwendung aus.
Anwendungsfälle
Im Allgemeinen eignet sich EmberJS gut für den Bau von Anwendungen, die entweder oder beide der folgenden Merkmale wünschen:
-
Single-Page-Anwendungen, einschließlich webnativer Anwendungen und Progressive Web Apps (PWAs)
- Ember funktioniert am besten, wenn es das gesamte Frontend Ihrer Anwendung ist.
-
Erhöhung der Kohäsion zwischen den Technologiestacks vieler Teams
- Community-gestützte "Best Practices" ermöglichen eine schnellere langfristige Entwicklung.
- Ember hat klare Konventionen, die nützlich sind, um Konsistenz durchzusetzen und den Teammitgliedern zu helfen, sich schnell einzuarbeiten.
Ember mit Add-ons
EmberJS hat eine Plugin-Architektur, was bedeutet, dass Add-ons installiert werden können und zusätzliche Funktionen ohne viel oder gar keine Konfiguration bieten.
Beispiele sind:
- PREmber: Statische Webseiten-Renderung für Blogs oder Marketinginhalte.
- empress-blog: Schreiben von Blogbeiträgen in Markdown, während gleichzeitig für SEO mit PREmber optimiert wird.
- ember-service-worker: Konfiguration einer PWA, damit die App auf mobilen Geräten wie Apps aus dem jeweiligen App-Store des Geräts installiert werden kann.
Native mobile Apps
Ember kann auch mit nativen mobilen Apps verwendet werden, mittels einer nativen mobilen Brücke zu JavaScript, wie sie von Corber bereitgestellt wird.
Meinungen
EmberJS ist eines der am stärksten meinungsbetonten Frontend-Frameworks. Aber was bedeutet es, meinungsbetont zu sein? In Ember sind Meinungen eine Reihe von Konventionen, die dazu beitragen, die Effizienz der Entwickler zu steigern, auf Kosten der Notwendigkeit, diese Konventionen zu erlernen. Da diese Konventionen definiert und geteilt werden, helfen die Meinungen, die diesen Konventionen zugrunde liegen, dabei, die trivialen Unterschiede zwischen Apps zu reduzieren — ein gemeinsames Ziel aller meinungsbetonten Frameworks in jeder Sprache und jedem Ökosystem. Entwickler können dann leichter zwischen Projekten und Anwendungen wechseln, ohne die Architektur, Muster, Konventionen usw. vollständig neu lernen zu müssen.
Während Sie diese Serie von Tutorials durchlaufen, werden Sie die Meinungen von Ember bemerken — wie strikte Namenskonventionen von Komponenten-Dateien.
Wie steht Ember zu Vanilla JavaScript?
Ember basiert auf JavaScript-Technologien und ist eine dünne Schicht über traditionellem objektorientierten Programmieren, während es den Entwicklern dennoch erlaubt, funktionale Programmiertechniken zu nutzen.
Ember verwendet zwei Haupt-Syntaxen:
- JavaScript (oder optional TypeScript)
- Embers eigene Vorlagensprache, die lose auf Handlebars basiert.
Die Vorlagensprache wird verwendet, um Build- und Laufzeitoptimierungen vorzunehmen, die sonst nicht möglich wären. Am wichtigsten ist, dass sie ein Superset von HTML ist — das bedeutet, dass jede Person, die HTML kennt, sinnvolle Beiträge zu jedem Ember-Projekt leisten kann, ohne Angst haben zu müssen, Code zu brechen. Designer und andere Nicht-Entwickler können zu Seitentemplates beitragen, ohne JavaScript-Kenntnisse, und Interaktivität kann später hinzugefügt werden.
Diese Sprache ermöglicht auch leichtere Asset-Nutzlasten durch Kompilierung der Templates in einen "Bytecode", der schneller geparst werden kann als JavaScript. Die Glimmer VM ermöglicht extrem schnelles DOM-Change-Tracking, ohne dass ein gecachtes virtuelles Abbild verwaltet und differenziert werden muss (was ein häufig verwendeter Ansatz zur Minderung der langsamen I/O von DOM-Änderungen ist).
Für weitere Informationen zu den technischen Aspekten der Glimmer VM hat das GitHub-Repository einige Dokumentationen — speziell References und Validators könnten von Interesse sein.
Alles andere in Ember ist einfach nur JavaScript. Besonders JavaScript-Klassen. Hier kommen die meisten "Framework"-Teile ins Spiel, da es Superklassen gibt, bei denen jeder Typ von Ding einen anderen Zweck und einen anderen erwarteten Ort innerhalb Ihres Projekts hat.
Hier ist eine Demonstration des Einflusses, den Ember auf das JavaScript hat, das in typischen Projekten ist: Gavin demonstriert, wie weniger als 20 % des geschriebenen JS Ember-spezifisch sind.
Einstieg
Das restliche Ember-Material hier besteht aus einem mehrteiligen Tutorial, in dem wir eine Version der klassischen TodoMVC-Beispiel-App erstellen und Ihnen unterwegs zeigen, wie Sie die wesentlichen Elemente des Ember-Frameworks verwenden. TodoMVC ist eine grundlegende To-do-Tracking-App, die in vielen verschiedenen Technologien implementiert ist.
Hier ist die abgeschlossene Ember-Version als Referenz.
Eine Anmerkung zu TodoMVC und Barrierefreiheit
Das TodoMVC-Projekt hat ein paar Probleme, was die Einhaltung von barrierefreien/Standard-Webpraktiken betrifft. Es gibt einige GitHub-Issues dazu in der TodoMVC-Projektfamilie:
- Hinzufügen des Tastaturzugriffs zu Demos
- Reaktivierung der Umrissanzeige auf fokussierbaren Elementen
Ember hat ein starkes Engagement für die Standardmäßige Barrierefreiheit und es gibt einen ganzen Abschnitt der Ember-Leitfäden zur Barrierefreiheit darüber, was es für das Design von Websites/Apps bedeutet.
Da dieses Tutorial jedoch den JavaScript-Teil der Erstellung einer kleinen Webanwendung in den Vordergrund stellt, besteht der Wert von TodoMVC darin, vorgemachtes CSS und empfohlene HTML-Struktur bereitzustellen, was kleine Unterschiede zwischen Implementierungen eliminiert und so den Vergleich erleichtert. Später im Tutorial werden wir uns darauf konzentrieren, Code zu unserer Anwendung hinzuzufügen, um einige der größten Mängel des TodoMVC zu beheben.
Installation der Ember-Tools
Ember verwendet ein Kommandozeilen-Interface (CLI) Tool zum Erstellen und Gerüstbau von Teilen Ihrer Anwendung.
-
Sie benötigen node und npm, bevor Sie ember-cli installieren können. Gehen Sie hierhin, um zu erfahren, wie Sie node und npm installieren, falls Sie sie noch nicht haben.
-
Geben Sie nun Folgendes in Ihr Terminal ein, um ember-cli zu installieren:
bashnpm install -g ember-cli
Dieses Tool stellt das
ember
Programm in Ihrem Terminal zur Verfügung, das zum Erstellen, Entwickeln, Testen und Gerüstbau Ihrer Anwendung verwendet wird (führen Sieember --help
aus, um eine vollständige Liste der Befehle und ihrer Optionen zu erhalten). -
Um eine brandneue Anwendung zu erstellen, geben Sie die folgende Anweisung in Ihr Terminal ein. Dies erstellt ein neues Verzeichnis innerhalb des aktuellen Verzeichnisses, in dem Sie sich befinden, namens todomvc, das das Gerüst für eine neue Ember-App enthält. Stellen Sie sicher, dass Sie sich an einem geeigneten Ort im Terminal befinden, bevor Sie sie ausführen. (Gute Vorschläge sind Ihr "Desktop"- oder "Dokumente"-Verzeichnis, damit es leicht zu finden ist):
bashember new todomvc
Oder, unter Windows:
bashnpx ember-cli new todomvc
Dies generiert eine produktionsbereite Anwendungsentwicklungsumgebung, die standardmäßig folgende Funktionen umfasst:
- Entwicklungsserver mit Live-Reload.
- Plugin-Architektur, die es Drittherstellerpaketen ermöglicht, Ihre Anwendung reichhaltig zu erweitern.
- Der neueste JavaScript-Standard über Babel- und webpack-Integration.
- Automatisierte Testumgebung, die Ihre Tests im Browser ausführt und es Ihnen ermöglicht, wie ein Benutzer zu testen.
- Transpilation und Minifizierung von sowohl CSS als auch JavaScript für Produktionsbuilds.
- Konventionen zur Minimierung der Unterschiede zwischen Anwendungen (ermöglicht einfacheren geistigen Kontextwechsel).
Vorbereitung für den Bau unseres Ember-Projekts
Sie benötigen einen Code-Editor, bevor Sie mit Ihrem brandneuen Projekt fortfahren können. Wenn Sie noch keinen konfiguriert haben, bietet The Ember Atlas einige Leitfäden zur Einrichtung verschiedener Editoren.
Installation der gemeinsamen Assets für TodoMVC-Projekte
Das Installieren gemeinsamer Assets, wie wir es gleich tun werden, ist normalerweise kein erforderlicher Schritt für neue Projekte, ermöglicht es uns jedoch, vorhandene gemeinsame CSS zu verwenden, sodass wir nicht raten müssen, welches CSS benötigt wird, um die TodoMVC-Stile zu erstellen.
-
Gehen Sie zuerst in Ihr
todomvc
-Verzeichnis im Terminal, zum Beispiel mitcd todomvc
unter macOS/Linux. -
Führen Sie nun den folgenden Befehl aus, um das gemeinsame todomvc-CSS in Ihrer App zu platzieren:
bashnpm install --save-dev todomvc-app-css todomvc-common
-
Suchen Sie als nächstes die Datei ember-cli-build.js im todomvc-Verzeichnis (es befindet sich direkt im Root-Verzeichnis) und öffnen Sie es in Ihrem gewählten Code-Editor. ember-cli-build.js ist verantwortlich für die Konfiguration von Details, wie Ihr Projekt gebaut wird — einschließlich der Bündelung aller Ihrer Dateien, der Asset-Minifizierung und der Erstellung von Sourcemaps — mit vernünftigen Standards, sodass Sie sich normalerweise nicht um diese Datei kümmern müssen.
Wir werden jedoch Zeilen zur ember-cli-build.js Datei hinzufügen, um unsere gemeinsamen CSS-Dateien zu importieren, sodass sie Teil unseres Builds werden, ohne dass wir sie ausdrücklich in die
@import
app.css
Datei einfügen müssen (dies würde URL-Umleitungen zur Build-Zeit erfordern und daher weniger effizient und komplizierter zu setzen sein). -
Suchen Sie in
ember-cli-build.js
nach dem folgenden Code:jslet app = new EmberApp(defaults, { // Add options here });
-
Fügen Sie die folgenden Zeilen darunter hinzu, bevor Sie die Datei speichern:
jsapp.import("node_modules/todomvc-common/base.css"); app.import("node_modules/todomvc-app-css/index.css");
Für weitere Informationen darüber, was
ember-cli-build.js
tut, und für andere Möglichkeiten, wie Sie Ihr Build/Pipeline anpassen können, haben die Ember-Leitfäden eine Seite über Add-ons und Abhängigkeiten. -
Finden Sie schließlich
app.css
, das sich unterapp/styles/app.css
befindet, und fügen Sie folgendes ein:css:focus, .view label:focus, .todo-list li .toggle:focus + label, .toggle-all:focus + label { /* !important needed because todomvc styles deliberately disable the outline */ outline: #d86f95 solid !important; }
Dieses CSS überschreibt einige der vom todomvc-app-css
npm-Paket bereitgestellten Stile, sodass der Tastaturfokus sichtbar bleibt. Dies geht einen Schritt zur Behebung eines der größten Barrierefreiheitsprobleme der Standard-TodoMVC-App.
Starten des Entwicklungsservers
Sie können die App im Entwicklungsmodus starten, indem Sie den folgenden Befehl in Ihr Terminal eingeben, während Sie sich im todomvc
-Verzeichnis befinden:
ember server
Dies sollte Ihnen eine Ausgabe ähnlich dem Folgenden geben:
Build successful (190ms) – Serving on http://localhost:4200/ Slowest Nodes (totalTime >= 5%) | Total (avg) -----------------------------------------+----------- BroccoliMergeTrees (17) | 35ms (2 ms) Package /assets/vendor.js (1) | 13ms Concat: Vendor Styles/assets/vend... (1) | 12ms
Der Entwicklungsserver wird unter http://localhost:4200
gestartet, den Sie in Ihrem Browser besuchen können, um zu sehen, wie Ihre Arbeit bisher aussieht.
Wenn alles richtig funktioniert, sollten Sie eine Seite wie diese sehen:
Hinweis: Auf Windows-Systemen ohne Windows Subsystem for Linux (WSL) werden Sie generell langsamere Build-Zeiten erleben im Vergleich zu macOS, Linux und Windows mit WSL.