Erste Schritte mit Ember
In unserem ersten Ember-Artikel werden wir uns ansehen, wie Ember funktioniert und wofür es nützlich ist, die Ember-Toolchain lokal installieren, eine Beispiel-App erstellen und dann einige erste Einrichtungsschritte durchführen, um sie für die Entwicklung bereit zu machen.
Voraussetzungen: |
Es wird mindestens empfohlen, dass Sie mit den Kernsprachen HTML, CSS und JavaScript vertraut sind und Kenntnisse über das Terminal/Kommandozeile haben. Ein tieferes Verständnis moderner JavaScript-Features (wie Klassen, Module usw.) wird äußerst nützlich sein, da Ember sie stark nutzt. |
---|---|
Ziel: | Erlernen, wie Ember installiert wird und eine Start-App erstellt wird. |
Einführung in Ember
Ember ist ein Komponenten-Dienst-Framework, das sich auf das gesamte Webanwendungsentwicklungserlebnis konzentriert und die trivialen Unterschiede zwischen Anwendungen minimiert — und das alles als moderne und leichte Schicht über nativen JavaScript. Ember bietet außerdem immense Abwärts- und Vorwärtskompatibilität, um Unternehmen dabei zu helfen, mit den neuesten Ember-Versionen und den neuesten communitygesteuerten Konventionen Schritt zu halten.
Was bedeutet es, ein Komponenten-Dienst-Framework zu sein? Komponenten sind einzelne Bündel von Verhalten, Stil und Markup, ähnlich wie sie andere Frontend-Frameworks wie React, Vue und Angular bereitstellen. Die Dienstseite bietet langanhaltenden gemeinsamen Status, 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 bilden den Großteil jeder EmberJS-Anwendung.
Anwendungsfälle
Im Allgemeinen eignet sich EmberJS gut für den Bau von Apps, die eine oder beide der folgenden Eigenschaften anstreben:
-
Single Page Applications, einschließlich nativer webähnlicher Apps und progressiver Web-Apps (PWAs)
- Ember funktioniert am besten, wenn es das gesamte Frontend Ihrer Anwendung ist.
-
Erhöhung der Kohärenz zwischen den Technologie-Stacks vieler Teams
- Community-basierte "Best Practices" ermöglichen eine schnellere langfristige Entwicklungsgeschwindigkeit.
- Ember hat klare Konventionen, die nützlich sind, um Konsistenz durchzusetzen und Teammitgliedern zu helfen, sich schnell einzuarbeiten.
Ember mit Add-Ons
EmberJS hat eine Plugin-Architektur, was bedeutet, dass Add-Ons installiert werden können, um zusätzliche Funktionen bereitzustellen, ohne dass viel Konfiguration erforderlich ist.
Beispiele sind:
- PREmber: Statisches Website-Rendering für Blogs oder Marketinginhalte.
- empress-blog: Verfassen von Blogbeiträgen in Markdown, während die SEO-Optimierung mit PREmber erfolgt.
- ember-service-worker: Konfiguration einer PWA, damit die App auf mobilen Geräten installiert werden kann, genau wie Apps aus dem jeweiligen App-Store des Geräts.
Native mobile Apps
Ember kann auch mit nativen mobilen Apps mit einer nativen mobilen Brücke zu JavaScript verwendet werden, wie etwa der von Corber bereitgestellten.
Meinungen
EmberJS ist eines der am meisten meinungsbetonten Frontend-Frameworks. Aber was bedeutet es, meinungsbetont zu sein? In Ember sind Meinungen eine Reihe von Konventionen, die dazu beitragen, die Effizienz von Entwicklern zu erhöhen, auf Kosten der Notwendigkeit, diese Konventionen zu erlernen. Da Konventionen definiert und geteilt werden, helfen die Meinungen, die diese Konventionen unterstützen, die einfachen Unterschiede zwischen Apps zu reduzieren — ein gemeinsames Ziel aller meinungsbetonten Frameworks, in jeder Sprache und jedem Ökosystem. Entwickler sind dann leichter in der Lage, zwischen Projekten und Anwendungen zu wechseln, ohne die Architektur, Muster, Konventionen usw. vollständig neu lernen zu müssen.
Im Verlauf dieser Reihe von Tutorials werden Sie auf Ember's Meinungen stoßen — wie z.B. strikte Benennungskonventionen von Komponenten-Dateien.
Wie steht Ember in Beziehung zu Vanilla JavaScript?
Ember ist auf JavaScript-Technologien aufgebaut und eine dünne Schicht über dem traditionellen objektorientierten Programmieren, während es Entwicklern dennoch ermöglicht, funktionale Programmiertechniken zu nutzen.
Ember verwendet zwei Hauptsyntaxeformen:
- JavaScript (oder optional TypeScript)
- Embers eigene Templating-Sprache, die lose auf Handlebars basiert.
Die Templating-Sprache wird verwendet, um Build- und Laufzeitoptimierungen zu ermöglichen, die andernfalls nicht möglich wären. Am wichtigsten ist, dass es sich um eine Obermenge von HTML handelt — was bedeutet, dass jeder, der HTML kennt, einen sinnvollen Beitrag zu jedem Ember-Projekt leisten kann, ohne große Angst vor Codefehlern. 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-Payloads durch Kompilieren der Templates in einen "Byte-Code", der schneller geparst werden kann als JavaScript. Die Glimmer VM ermöglicht extrem schnelles DOM-Änderungs-Tracking, ohne dass eine zwischengespeicherte virtuelle Darstellung verwaltet und diffed werden muss (was ein häufiger Ansatz zur Minderung des langsamen I/O von DOM-Änderungen ist).
Für weitere Informationen zu den technischen Aspekten der Glimmer VM gibt es im GitHub-Repository einige Dokumentationen — insbesondere Referenzen und Validatoren könnten von Interesse sein.
Alles andere in Ember ist nur JavaScript. Insbesondere JavaScript-Klassen. Hier kommen die meisten "Framework"-Teile ins Spiel, da es Superklassen gibt, wobei jede Art von Ding einen anderen Zweck und unterschiedliche erwartete Positionierung innerhalb Ihres Projekts hat.
Hier ist eine Demonstration des Einflusses, den Ember auf das JavaScript in typischen Projekten hat: Gavin Demonstriert, wie < 20% des geschriebenen JS spezifisch für Ember ist.
Erste Schritte
Der Rest des hier gefundenen Ember-Materials besteht aus einem mehrteiligen Tutorial, in dem wir eine Version der klassischen TodoMVC-Beispiel-App erstellen, und Ihnen dabei beibringen, wie Sie die wesentlichen Funktionen des Ember-Frameworks verwenden. TodoMVC ist eine grundlegende Aufgabenverfolgungs-App, die in vielen verschiedenen Technologien implementiert ist.
Hier ist die fertiggestellte Ember-Version zur Referenz.
Eine Anmerkung zu TodoMVC und Barrierefreiheit
Das TodoMVC-Projekt hat einige Probleme hinsichtlich der Einhaltung zugänglicher/Standard-Webpraktiken. Es gibt einige offene GitHub-Issues zu diesem Thema im TodoMVC-Projekten:
Ember hat ein starkes Engagement, standardmäßig zugänglich zu sein, und es gibt einen ganzen Abschnitt in den Ember-Leitfäden zur Barrierefreiheit, der erläutert, was dies für das Design von Websites / Apps bedeutet.
Da dieses Tutorial sich jedoch auf den JavaScript-Teil der Erstellung einer kleinen Webanwendung konzentriert, liegt der Wert von TodoMVC darin, vorgefertigtes CSS und eine empfohlene HTML-Struktur bereitzustellen, die kleine Unterschiede zwischen Implementierungen eliminiert und so einen leichteren Vergleich ermöglicht. Später im Tutorial werden wir uns darauf konzentrieren, unserer Anwendung Code hinzuzufügen, um einige der größten Mängel von TodoMVC zu beheben.
Installation der Ember-Tools
Ember verwendet ein Command-Line Interface (CLI)-Tool zum Erstellen und Scaffolding von Teilen Ihrer Anwendung.
-
Sie benötigen node und npm installiert, bevor Sie ember-cli installieren können. Gehen Sie hierhin, um herauszufinden, wie Sie node und npm installieren können, falls Sie sie noch nicht installiert 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 bereit, mit dem Sie Ihre Anwendung erstellen, entwickeln, testen und einrichten können (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 Folgendes in Ihr Terminal ein. Dadurch wird ein neues Verzeichnis im aktuellen Verzeichnis erstellt, in dem Sie sich befinden, mit dem Namen todomvc, das das Scaffolding für eine neue Ember-App enthält. Stellen Sie sicher, dass Sie in Ihrem Terminal zu einem geeigneten Ort navigieren, bevor Sie es ausführen. (Gute Vorschläge sind Ihre "Desktop"- oder "Dokumente"-Verzeichnisse, damit es leicht zu finden ist):
bashember new todomvc
Oder auf Windows:
bashnpx ember-cli new todomvc
Dies generiert eine produktionsbereite Entwicklungsumgebung, die standardmäßig die folgenden Funktionen enthält:
- Entwicklungsserver mit Live-Reload.
- Plugin-Architektur, die es Drittanbieterpaketen ermöglicht, Ihre Anwendung umfassend zu verbessern.
- Neuestes JavaScript ü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 Produktions-Builds.
- Konventionen zur Minimierung der Unterschiede zwischen Anwendungen (für einfacheren gedanklichen Kontextwechsel).
Vorbereitung auf den Bau unseres Ember-Projekts
Sie benötigen einen Code-Editor, bevor Sie mit Ihrem brandneuen Projekt interagieren können. Wenn Sie noch keinen konfiguriert haben, hat The Ember Atlas einige Leitfäden zur Einrichtung verschiedener Editoren.
Installation der gemeinsam genutzten Assets für TodoMVC-Projekte
Die Installation gemeinsam genutzter Assets, wie wir es gleich tun werden, ist normalerweise kein erforderlicher Schritt für neue Projekte, aber sie ermöglicht es uns, bestehendes gemeinsames CSS zu verwenden, sodass wir nicht raten müssen, welches CSS benötigt wird, um die TodoMVC-Stile zu erstellen.
-
Gehen Sie zunächst 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 Ihre App zu platzieren:
bashnpm install --save-dev todomvc-app-css todomvc-common
-
Suchen Sie dann die Datei ember-cli-build.js im todomvc-Verzeichnis (sie befindet sich direkt im Root) und öffnen Sie sie in Ihrem gewählten Code-Editor. ember-cli-build.js ist dafür verantwortlich, Details zur Erstellung Ihres Projekts zu konfigurieren — einschließlich des Bündelns aller Dateien, der Asset-Minifizierung und der Erstellung von Sourcemaps — mit angemessenen Standardeinstellungen, sodass Sie sich normalerweise keine Gedanken über diese Datei machen müssen.
Wir werden jedoch Zeilen zur ember-cli-build.js-Datei hinzufügen, um unsere gemeinsam genutzten CSS-Dateien zu importieren, sodass sie Teil unseres Builds werden, ohne sie explizit in die
app.css
-Datei importieren zu müssen (dies würde URL-Umschreibungen zur Build-Zeit erfordern und wäre daher weniger effizient und komplizierter einzurichten). -
Suchen Sie in
ember-cli-build.js
den folgenden Code:jslet app = new EmberApp(defaults, { // Add options here });
-
Fügen Sie die folgenden Zeilen darunter ein, 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 auf welche anderen Arten Sie Ihre Build-Pipeline anpassen können, haben die Ember-Leitfäden eine Seite über Addons und Abhängigkeiten. -
Suchen Sie schließlich
app.css
, das sich unterapp/styles/app.css
befindet, und fügen Sie das Folgende 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 die Tastaturfokussierung sichtbar ist. Dies trägt in gewissem Maße dazu bei, einen der großen Zugänglichkeitsnachteile der Standard-TodoMVC-App zu beheben.
Starten des Entwicklungsservers
Sie können die App im Entwicklungsmodus starten, indem Sie den folgenden Befehl in Ihrem Terminal eingeben, während Sie sich im todomvc
-Verzeichnis befinden:
ember server
Dies sollte Ihnen eine ähnliche Ausgabe geben wie die folgende:
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 korrekt funktioniert, sollten Sie eine Seite sehen, die so aussieht:
Hinweis: Auf Windows-Systemen ohne Windows-Subsystem für Linux (WSL) werden Sie insgesamt langsamere Build-Zeiten im Vergleich zu macOS, Linux und Windows mit WSL erleben.