Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

In Ember.js einsteigen

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Es gibt viele JavaScript-Bibliotheken, und die meisten sind wirklich gut darin, die traditionellen DOM-zentrischen Interaktionen bereitzustellen, die Ihre typischen Websites benötigen. Wenn es jedoch Zeit ist, eine verwaltbare Codebasis für eine Einzelseiten-App zu erstellen, kommt hier eine ganze Reihe neuer Frameworks zum Einsatz, um die Dinge zu glätten.

Das alte Sprichwort ist wahr: "Verwenden Sie das beste Werkzeug für die Aufgabe."

Es ist nicht so, dass herkömmliche Bibliotheken wie jQuery nicht helfen können, Desktop-ähnliche Erfahrungen zu erstellen, es ist einfach nicht der Anwendungsfall dafür und es fehlen Dinge wie Datenbindung, Ereignis-Routing und Zustandsverwaltung. Sicher, Sie können wahrscheinlich eine Reihe von Plugins zusammenfügen, um einige dieser Funktionen zu erreichen, aber mit einem Framework zu beginnen, das von Grund auf speziell für diese spezifischen Probleme entwickelt wurde, ist meiner Meinung nach sinnvoller. Das alte Sprichwort ist wahr: "Verwenden Sie das beste Werkzeug für die Aufgabe."

Ich habe kürzlich ein Interview mit dem Team von Ember.js gemacht. es war motiviert von meinem Wunsch, zu erfahren, was ich "die neue Schärfe" genannt habe: Ember.js.

Ember passt zu dem, was ich oben beschrieben habe, und das auf eine Art und Weise, die an eine Menge erinnert, wie jQuery es Entwicklern ermöglicht, schnell zum Laufen zu kommen. Das Team hat bewusst Schritte unternommen, um viele der komplexen Probleme, die mit der Entwicklung und dem Aufbau von Model / View / Controller-basierten Anwendungen verbunden sind, durch jahrelange Erfahrung und Kenntnisse aus dem Aufbau von großen Apps zu abstrahieren.

Ich möchte Sie mit Ember.js über eine mehrteilige Artikelserie auf dem Laufenden halten, die Sie Schritt für Schritt in die Konzepte des Frameworks einführt. Wir fangen mit dem üblichen Intro an (was zufällig dieser Post ist), und steigen dann allmählich auf, um eine vollständige Anwendung zu erstellen. Der große Teil ist, dass dies mir auch helfen wird, die Konzepte, die ich bereits gelernt habe, zu verstärken und vielleicht einige neue Techniken auf dem Weg zu erlernen! Ich werde mein Bestes tun, damit das Ember.js-Team dieses Material auf Genauigkeit prüft und vielleicht sogar ein paar Nuggets dazu beiträgt.

Bevor wir fortfahren, ein Heads-up: Ember.js macht eine Menge Magie für Sie. Manchmal guckst du dir den Code an und sagst "Huh? Wie hat es das gemacht? " Ich war dort und ich werde mein Bestes geben, um Dinge zu destillieren, aber ich werde nicht in die Eingeweide von Embers Framework-Code eintauchen. Stattdessen werde ich besprechen, wie Sie seine Tools und API zum Erstellen Ihrer App nutzen können.

Also lass uns das loslegen.


Kernkonzepte

Ember.js ist kein Framework für den Aufbau traditioneller Websites.

Als erstes ist zu beachten, dass Ember.js kein Framework für den Aufbau traditioneller Websites ist. Bibliotheken wie jQuery und MooTools sind dafür bestens geeignet. Bibliotheken wie jQuery und MooTools sind dafür bestens geeignet. Der Slogan für das Framework lautet "ein Framework für die Entwicklung ambitionierter Webanwendungen", das deutlich macht, dass es sich nicht um die JavaScript-Bibliothek Ihres Daddys handelt.

Ich habe bereits erwähnt, dass Ember das MVC-Muster nutzt, um eine ordnungsgemäße Verwaltung und Organisation des Codes zu fördern. Wenn Sie noch nie eine MVC-basierte Entwicklung gemacht haben, sollten Sie sich unbedingt darüber informieren. Nettuts + hat hier einen tollen Artikel zum Thema. Diejenigen, die mit den Konzepten vertraut sind, sollten sich zu Hause fühlen. Die einzige Sache, die ich immer wieder gehört habe, ist, dass der Wechsel von Backbone zu Ember.js eigentlich einfach ist, weil Ember eine Menge schweres Heben für dich erledigt, während er die Code-Organisationsmuster beibehält, die diese Entwickler gewohnt sind.

Ember verlässt sich auch auf Client-seitige Vorlagen ... eine Menge. Es verwendet die Vorlagenbibliothek Lenker, die Ausdrücke bereitstellt, mit denen Sie dynamische HTML-basierte Vorlagen erstellen können. Ein Ember-Entwickler kann Daten an diese eingebetteten Ausdrücke binden und die Anzeige ihrer App dynamisch ändern. Zum Beispiel kann ich eine Vorlage erstellen, die ein Array von Personen empfangen und in einer ungeordneten Liste anzeigen kann:

Beachten Sie den "#each" -Ausdruck, der als eine loop-Anweisung funktioniert, die jedes Element des "people" -Arrays aufzählt und den Ausdruck "{{name}}" durch einen tatsächlichen Wert ersetzt. Es ist wichtig zu beachten, dass die doppelten Klammern Token sind, die von Handlebars verwendet werden, um Ausdrücke zu identifizieren. Dies ist ein kleines Beispiel, auf das wir später näher eingehen werden.

Lenker ist ein unglaublich leistungsfähiges Client-seitiges Templating-Modul und ich würde empfehlen, nicht nur die Ember-Guides, sondern auch die Lenker-Website selbst zu überprüfen, um die verfügbaren Optionen vollständig zu verstehen. Du wirst es ziemlich oft benutzen.


Ember einrichten

Ember.js benötigt zusätzliche Bibliotheken, also müssen Sie sich eine Kopie von jQuery und Handlebars besorgen. Aber warte, habe ich nicht gesagt, dass jQuery und Ember in verschiedenen Räumen spielen? Nun, ja, das habe ich, aber hier ist die Sache: Das Ember-Team dreht sich alles darum, das Rad nicht neu zu erfinden. Sie haben jQuery gewählt, um das zu tun, was es am besten kann: Arbeiten Sie mit dem DOM. Und das ist eine gute Sache, da jQuery wirklich gut darin ist. Das ist auch der Grund, warum sie mit Lenker gegangen sind, einer exzellenten Vorlagenbibliothek, die zufällig von Yehuda Katz geschrieben wurde, einem Mitglied des Ember-Kernteams.

Der einfachste Weg, um die benötigten Dateien zu erhalten, ist es, zum Ember.js Github Repo zu gehen und das Starter Kit herunter zu ziehen. Es ist ein Standard für Sie mit zu beginnen. Zum Zeitpunkt dieses Schreibens enthält es:

  • Ember 1.0 RC1
  • Handlerbars 1.0 RC3
  • jQuery 1.9.1

Es gibt auch eine grundlegende HTML-Vorlage, die so codiert ist, dass sie alle zugehörigen Bibliotheken (jQuery, Ember usw.) enthält. Zusammen mit einem Beispiel einer Handlebars-Vorlage und "app.js", Dies beinhaltet Code zum Starten einer grundlegenden Ember App.

Beachten Sie, dass app.js nicht Teil des Frameworks ist. Es ist eine einfache JavaScript-Datei; Sie können es nennen, was Sie wollen. Und während wir es für die Zwecke dieser Tutorial-Serie verwenden, werden Sie wahrscheinlich Ihr JavaScript in mehrere Dateien aufteilen, genau wie Sie es für jede andere Website oder App tun würden. Außerdem erwartet Ember keine spezifische Verzeichnisstruktur für Ihre Framework-Dateien.

Wenn Sie sich den Code des Starter-Kits ansehen, sieht dieser wie Ihr typischer Website-Code aus. In gewisser Hinsicht hast du recht! Sobald wir anfangen, Dinge zu organisieren, werden Sie sehen, wie das Bauen einer Ember-App anders ist.


Das Lay of Ember Land

Bevor Sie anfangen, Code zu hacken, ist es wichtig zu verstehen, wie Ember.js funktioniert und dass Sie die beweglichen Teile, aus denen eine Ember-App besteht, gruppieren. Sehen wir uns diese Teile und ihre Beziehung zueinander an.


Vorlagen

Vorlagen sind ein wichtiger Bestandteil bei der Definition Ihrer Benutzeroberfläche. Wie bereits erwähnt, ist Lenker die clientseitige Bibliothek, die in Ember verwendet wird, und die von der Bibliothek bereitgestellten Ausdrücke werden bei der Erstellung der Benutzeroberfläche für Ihre Anwendung häufig verwendet. Hier ist ein einfaches Beispiel:

Beachten Sie, dass die Ausdrücke in Ihr HTML-Markup eingefügt werden und über Ember den auf der Seite angezeigten Inhalt dynamisch ändern. In diesem Fall werden die Platzhalter {{firstName}} und {{lastName}} durch Daten ersetzt, die von der App abgerufen werden.

Lenker bietet viel Kraft, über eine flexible API. Es wird wichtig sein, dass Sie verstehen, was es bietet.


Routing

Der Router einer Anwendung hilft, den Status der Anwendung zu verwalten.

Der Router einer Anwendung hilft dabei, den Status der Anwendung und die Ressourcen zu verwalten, die benötigt werden, wenn ein Benutzer die App navigiert. Dazu können Aufgaben wie das Anfordern von Daten von einem Modell, das Anschließen von Controllern an Ansichten oder das Anzeigen von Vorlagen gehören.

Dazu erstellen Sie eine Route für bestimmte Standorte in Ihrer Anwendung. Dazu erstellen Sie eine Route für bestimmte Standorte in Ihrer Anwendung. Die URL ist die Schlüssel-ID, die Ember verwendet, um zu verstehen, welcher Anwendungsstatus dem Benutzer präsentiert werden muss.

Das Verhalten einer Route (z. B. Anforderung von Daten aus einem Modell) wird über Instanzen des Ember-Routenobjekts verwaltet und ausgelöst, wenn ein Benutzer zu einer bestimmten URL navigiert. Ein Beispiel würde Daten von einem Modell wie folgt anfordern:

Wenn ein Benutzer in diesem Fall zum Abschnitt "/ employees" der Anwendung navigiert, fordert die Route eine Liste mit allen Mitarbeitern an.


Modelle

Eine Objektdarstellung der Daten.

Modelle sind eine Objektdarstellung der Daten, die von Ihrer Anwendung verwendet werden. Es könnte sich um ein einfaches Array oder um Daten handeln, die dynamisch über eine REST-konforme JSON-API über eine Ajax-Anforderung abgerufen werden. Die Ember-Datenbibliothek bietet die API zum Laden, Zuordnen und Aktualisieren von Daten für Modelle in Ihrer Anwendung.


Controllers

Controller werden typischerweise zum Speichern und Darstellen von Modelldaten und -attributen verwendet. Sie verhalten sich wie ein Proxy, geben Ihnen Zugriff auf die Attribute des Modells und ermöglichen den Zugriff auf Vorlagen, um die Anzeige dynamisch zu rendern. Aus diesem Grund wird eine Vorlage immer mit einem Controller verbunden sein.

Die Hauptsache ist, dass während ein Modell Daten abruft, ein Controller das ist, mit dem Sie diese Daten programmatisch für verschiedene Teile Ihrer Anwendung bereitstellen. Während es scheint, dass Modelle und Controller eng miteinander verbunden sind, haben Modelle selbst keine Kenntnis von den Controllern, die sie später verwenden werden.

Sie können auch andere Anwendungseigenschaften speichern, die persistent sein müssen, aber nicht auf einem Server gespeichert werden müssen.


Ansichten

Ansichten in Ember.js dienen dazu, Ereignisse im Zusammenhang mit Benutzerinteraktionen zu verwalten und diese in Ereignisse umzuwandeln, die für Ihre Anwendung von Bedeutung sind. Wenn also ein Benutzer auf eine Schaltfläche klickt, um einen Mitarbeiter zu löschen, ist die Ansicht dafür verantwortlich, das Klickereignis des nativen Browsers zu interpretieren und im Kontext des aktuellen Status Ihrer Anwendung entsprechend zu verarbeiten.


Regeln der Namensgebung

Eine der Möglichkeiten, mit denen Ember.js dazu beiträgt, den benötigten Code zu minimieren und die Dinge hinter den Kulissen zu erledigen, sind Namenskonventionen. Die Art und Weise, wie Sie Ihre Routen (und Ressourcen) definieren und benennen, wirkt sich auf die Benennung Ihrer Controller, Modelle, Ansichten und Vorlagen aus. Wenn ich beispielsweise eine Route mit dem Namen "Mitarbeiter" erstelle:

Ich würde dann meine Komponenten wie folgt benennen:

  • Routenobjekt: App.EmployeesRoute
  • Controller: App.EmployeesController
  • Modell: App.Mitarbeiter
  • Ansicht: App.EmployeesView
  • Vorlage: Mitarbeiter

Die Verwendung dieser Namenskonvention dient einem doppelten Zweck. Erstens gibt es eine semantische Beziehung zwischen ähnlichen Komponenten. Zweitens kann Ember automatisch die notwendigen Objekte erstellen, die möglicherweise nicht existieren (z. B. ein Routenobjekt oder einen Controller), und sie für die Verwendung in Ihrer Anwendung verkabeln. Dies ist die "Magie", die ich zuvor erwähnt habe. Genau das macht Ember auf der globalen Anwendungsebene, wenn Sie das Application-Objekt instanziieren:

var App = Ember.Application.create();

Diese einzelne Zeile erstellt die Standardverweise auf den Router, den Controller, die Ansicht und die Vorlage der Anwendung.

  • Routenobjekt: App.ApplicationRoute
  • Controller: App.ApplicationController
  • Ansicht: App.ApplicationView
  • Vorlage: Anwendung

Zurück zur "Mitarbeiter" -Route, die ich oben erstellt habe, passiert Folgendes: Wenn ein Benutzer zu "/ employees" in Ihrer Anwendung navigiert, sucht Ember nach folgenden Objekten:

  • App.EmployeesRoute
  • App.EmployeesController
  • die employees vorlage

Wenn es sie nicht findet, erstellt es eine Instanz von jedem, aber wird einfach nichts rendern, da Sie kein Modell angegeben haben, aus dem Daten abgeleitet werden können, oder ein Template, mit dem die Daten angezeigt werden sollen. Aus diesem Grund ist die Namenskonvention so wichtig. Es ermöglicht Ember zu wissen, wie die mit einer bestimmten Route verbundenen Aufgaben zu bewältigen sind, ohne dass Sie die Dinge manuell verkabeln müssen.

Beachten Sie, dass ich im ersten Beispiel den Namen "Employee" verwendet habe, um das Modell zu definieren. Das ist absichtlich. Die Natur des Namens "Mitarbeiter" schreibt vor, dass ich mit vielen Mitarbeitern arbeite. Daher ist es wichtig, ein Modell zu entwickeln, das die Flexibilität bietet, einen Mitarbeiter oder alle Mitarbeiter zurückzugeben. Die singuläre Namenskonvention dieses Modells ist keine Voraussetzung von Ember, da Modelle selbst keine Kenntnis von den Controllern haben, die sie später verwenden werden. Sie können also flexibel benennen, aber aus Gründen der Konsistenz erleichtert die Einhaltung dieser Konvention die Verwaltung Ihres Codes erheblich.

Außerdem habe ich die Methode resource() verwendet, um meine Route zu definieren, da ich in diesem Szenario höchstwahrscheinlich verschachtelte Routen zur Verwaltung von Detailseiten für bestimmte Mitarbeiterinformationen hätte. Wir werden später in der Serie über die Verschachtelung sprechen.

Der Schlüssel dazu ist, dass Ember durch die Verwendung eines konsistenten Benennungsschemas die Hooks, die diese Komponenten verbinden, leicht verwalten kann, ohne dass Sie die Beziehungen explizit über eine Tonne Code definieren müssen.

Alle Einzelheiten zu den Namenskonventionen von Ember sind auf der Website des Projekts aufgeführt und müssen unbedingt gelesen werden.


Next Up: Erstellen einer App

Im nächsten Teil der Serie werden wir in den Code eintauchen, um die Grundlage für unsere Anwendung zu schaffen.

Wir haben die Kernkonzepte von Ember besprochen und die wichtigsten Aspekte des Frameworks diskutiert. Im nächsten Teil der Serie werden wir in den Code eintauchen, um die Grundlage für unsere Anwendung zu schaffen. In der Zwischenzeit möchte ich erneut empfehlen, dass Sie sich die Dokumentation für Lenker ansehen, um ein Gefühl für die Ausdruckssyntax zu bekommen. Und wenn Sie wirklich Lust haben, in Ember einzusteigen, bleiben Sie auf Tuts+ Premium dran, das bald einen vollständigen Kurs anbieten wird, der Sie durch den Aufbau einer Ember-basierten Anwendung führt!

Wie ich zu Beginn dieses Artikels angemerkt habe, führt das Kernteam von Ember.js Yehuda Katz an und Tom Dale überprüfte dies auf Genauigkeit und gab ihm den Daumen hoch. Ember Team genehmigt! Bis bald!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.