Einstieg 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.

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.

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.

Ember kann auch mit nativen mobilen Apps verwendet werden, mittels einer nativen mobilen Brücke zu JavaScript, wie sie von Corber bereitgestellt wird.

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.

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.

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.

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.

Ember verwendet ein Kommandozeilen-Interface (CLI) Tool zum Erstellen und Gerüstbau von Teilen Ihrer Anwendung.

1. 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.

2. Geben Sie nun Folgendes in Ihr Terminal ein, um ember-cli zu installieren:

   bash

   npm 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 Sie ember --help aus, um eine vollständige Liste der Befehle und ihrer Optionen zu erhalten).

3. 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):

   bash

   ember new todomvc
   

   Oder, unter Windows:

   bash

   npx 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).

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.

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.

1. Gehen Sie zuerst in Ihr todomvc-Verzeichnis im Terminal, zum Beispiel mit cd todomvc unter macOS/Linux.

2. Führen Sie nun den folgenden Befehl aus, um das gemeinsame todomvc-CSS in Ihrer App zu platzieren:

   bash

   npm install --save-dev todomvc-app-css todomvc-common
   

3. 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).

4. Suchen Sie in ember-cli-build.js nach dem folgenden Code:

   js

   let app = new EmberApp(defaults, {
     // Add options here
   });
   

5. Fügen Sie die folgenden Zeilen darunter hinzu, bevor Sie die Datei speichern:

   js

   app.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.

6. Finden Sie schließlich app.css, das sich unter app/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.

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:

Bisher läuft alles gut. Wir haben den Punkt erreicht, an dem wir beginnen können, unsere Beispiel-TodoMVC-App in Ember aufzubauen. Im nächsten Artikel werden wir uns den Aufbau der Markup-Struktur unserer App als eine Gruppe logischer Komponenten ansehen.

• Übersicht: JavaScript-Frameworks und -Bibliotheken
• Weiter