Share
Es gibt viele JavaScript-Bibliotheken, und die meisten sind wirklich gut darin, die traditionellen DOM-zentrierten Interaktionen bereitzustellen, die Ihre typischen Websites benötigen. Wenn es jedoch an der Zeit ist, eine verwaltbare Codebasis für eine einseitige Anwendung zu erstellen, kommt eine ganze Reihe neuer Frameworks dazu, die Dinge zu glätten.
Der alte Spruch ist wahr: "Verwenden Sie das beste Werkzeug für die Aufgabe."
Es ist nicht so, dass traditionelle Bibliotheken wie jQuery Ihnen beim Erstellen von Desktop-ähnlichen Erlebnissen nicht helfen können, es ist einfach nicht der Anwendungsfall und es fehlen Dinge wie Datenbindung, Ereignisrouting und Statusverwaltung. Sicher, Sie können wahrscheinlich eine Reihe von Plugins zusammenstellen, um einige dieser Funktionen zu erreichen, aber mit einem Framework zu beginnen, das von Grund auf neu entwickelt wurde, um diese spezifischen Probleme anzugehen, ist meiner Meinung nach sinnvoller. Der alte Spruch ist wahr: "Verwenden Sie das beste Werkzeug für die Aufgabe."
Ich habe kürzlich ein Interview mit dem Ember.js-Team geführt. Es war motiviert von meinem Wunsch zu erfahren, was ich "die neue Schärfe" nenne: Ember.js.
Ember passt für das, was ich oben beschrieben habe, auf eine Art und Weise, die an eine Menge erinnert, wie jQuery es Entwicklern ermöglicht, schnell einsatzbereit zu sein. Das Team hat absichtlich Schritte unternommen, um die Komplexität des Entwurfs und des Bauens von auf Model / View / Controllern basierenden Anwendungen anhand jahrelanger Erfahrung und des durch das Erstellen umfangreicher Apps erworbenen Wissens zu abstrahieren.
Ich würde gerne helfen, Sie mit Ember.js über eine mehrteilige Artikelserie auf den neuesten Stand zu bringen, die Sie schrittweise in die Konzepte des Frameworks einführt. Wir beginnen mit dem üblichen Intro (was zufällig dieser Beitrag ist) und stufen uns dann schrittweise zum Erstellen einer vollständigen Anwendung auf. Das Tolle daran ist, dass dies mir auch dabei helfen wird, die Konzepte, die ich bereits gelernt habe, zu verstärken und vielleicht auf dem Weg einige neue Techniken zu ergreifen! Ich werde mein Bestes geben, damit das Ember.js-Team dieses Material auf Richtigkeit überprüft und vielleicht sogar einige Nuggets dazu beisteuert.
Bevor wir fortfahren, geht es auf den Kopf: Ember.js zaubert viel für Sie. Es gibt Zeiten, in denen Sie sich den Code ansehen und sagen "Huh? Wie hat es das getan?" Ich war dort und werde mein Bestes geben, um Dinge zu destillieren, aber ich werde mich nicht mit Ember's Rahmencode beschäftigen. Stattdessen werde ich besprechen, wie Sie die Tools und die API nutzen können, um Ihre App zu erstellen.
Also lass uns loslegen.
Ember.js ist kein Rahmen für die Erstellung traditioneller Websites.
Das erste, was zu beachten ist, ist, dass Ember.js kein Rahmen für die Erstellung traditioneller Websites ist. Bibliotheken wie jQuery und MooTools passen hervorragend dazu. Wenn Sie Ember.js in Betracht ziehen, wird davon ausgegangen, dass Sie Desktop-ähnliche Erfahrungen - insbesondere skalierbare - erstellen möchten. In der Tat lautet der Slogan für das Framework "ein Framework für die Entwicklung ehrgeiziger Webanwendungen", aus dem hervorgeht, dass es eindeutig nicht die JavaScript-Bibliothek Ihres Vaters ist.
Ich habe bereits erwähnt, dass Ember das MVC-Muster nutzt, um eine korrekte Verwaltung und Organisation des Codes zu fördern. Wenn Sie noch nie MVC-basierte Entwicklung durchgeführt haben, sollten Sie sich unbedingt darüber informieren. Nettuts + hat hier einen großartigen Artikel zum Thema. Wer sich mit den Konzepten auskennt, sollte sich zu Hause fühlen. Ich habe ständig gehört, dass die Umstellung von Backbone auf Ember.js einfach ist, da Ember viel von Ihnen übernimmt, während Sie die Code-Organisationsmuster beibehalten, die diese Entwickler gewohnt sind.
Ember verlässt sich auch auf clientseitige Vorlagen… a MENGE. Es verwendet die Handlebars-Vorlagenbibliothek, die Ausdrücke bereitstellt, mit denen Sie dynamische HTML-basierte Vorlagen erstellen können. Ein Ember-Entwickler kann Daten an diese einbettbaren Ausdrücke binden und die Anzeige seiner 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 Ausdruck "#each", der als Schleifenanweisung fungiert, die jedes Element des Arrays "people" auflistet und den Ausdruck "name" durch einen tatsächlichen Wert ersetzt. Es ist wichtig zu beachten, dass die doppelten Klammern Token sind, die von Handlebars zum Identifizieren von Ausdrücken verwendet werden. Dies ist ein kleines Beispiel, auf das wir später noch näher eingehen werden.
Handlebars ist eine unglaublich leistungsfähige clientseitige Template-Engine, und ich würde empfehlen, nicht nur die Ember-Handbücher, sondern auch die Handlebars-Website selbst zu überprüfen, um einen umfassenden Überblick über die verfügbaren Optionen zu erhalten. Du wirst es ziemlich oft benutzen.
Ember.js basiert auf zusätzlichen Bibliotheken. Sie müssen sich also eine Kopie von jQuery und Handlebars holen. Aber warten Sie, habe ich nicht gesagt, dass jQuery und Ember in verschiedenen Räumen spielen? Ja, das habe ich getan, aber hier ist das Ding: Das Ember-Team dreht sich alles darum, das Rad nicht neu zu erfinden. Sie wählten jQuery, um das zu tun, was es am besten kann: mit dem DOM arbeiten. Und das ist auch gut so, denn jQuery ist wirklich gut darin. Aus diesem Grund haben sie sich auch für Handlebars entschieden, eine exzellente Vorlagenbibliothek, die zufällig von Yehuda Katz, einem Mitglied des Ember-Kernteams, geschrieben wurde.
Am einfachsten erhalten Sie die Dateien, die Sie benötigen, indem Sie zum Github-Repo von Ember.js gehen und das Starter-Kit herunterziehen. Es ist eine Kesselplatte, mit der Sie beginnen können. Zum Zeitpunkt dieses Schreibens enthält es:
Es gibt auch eine grundlegende HTML-Vorlage, die so codiert ist, dass sie alle zugehörigen Bibliotheken (jQuery, Ember usw.) sowie ein Beispiel für eine Handlebars-Vorlage und "app.js" enthält, die Code zum Starten einer grundlegenden Ember-App enthalten.
Beachten Sie, dass app.js nicht Teil des Frameworks ist. Es ist eine einfache alte JavaScript-Datei. Sie können es nennen, was Sie wollen. Während wir es für die Zwecke dieser Tutorial-Reihe verwenden, werden Sie das JavaScript wahrscheinlich in mehrere Dateien aufteilen, genau wie für jede andere Website oder App. Außerdem erwartet Ember keine spezifische Verzeichnisstruktur für Ihre Framework-Dateien.
Wenn Sie sich den Starter Kit-Code ansehen, kann er wie Ihr typischer Website-Code aussehen. In gewisser Hinsicht hast du recht! Sobald wir mit dem Organisieren beginnen, werden Sie feststellen, wie sich das Erstellen einer Ember-App unterscheidet.
Bevor Sie mit dem Hacken von Code beginnen, ist es wichtig zu verstehen, wie Ember.js funktioniert und dass Sie sich mit den beweglichen Teilen der Ember-App befassen. Werfen wir einen Blick auf diese Teile und wie sie miteinander zusammenhängen.
Vorlagen sind ein wesentlicher Bestandteil der Definition Ihrer Benutzeroberfläche. Wie bereits erwähnt, handelt es sich bei Handlebars um die clientseitige Bibliothek, die in Ember verwendet wird. Die von der Bibliothek bereitgestellten Ausdrücke werden beim Erstellen der Benutzeroberfläche für Ihre Anwendung umfangreich verwendet. Hier ist ein einfaches Beispiel:
Beachten Sie, dass die Ausdrücke in Ihr HTML-Markup gemischt werden und den Inhalt der Seite mit Ember dynamisch ändern. In diesem Fall werden die Platzhalter firstName und lastName durch Daten ersetzt, die von der App abgerufen werden.
Der Lenker bietet über eine flexible API viel Leistung. Es ist wichtig, dass Sie verstehen, was es bietet.
Der Router einer Anwendung hilft bei der Verwaltung des Status der Anwendung.
Der Router einer Anwendung hilft bei der Verwaltung des Status der Anwendung und der erforderlichen Ressourcen, wenn ein Benutzer in der App navigiert. Dies kann Aufgaben wie das Anfordern von Daten von einem Modell, das Anschließen von Steuerungen an Ansichten oder das Anzeigen von Vorlagen umfassen.
Dazu erstellen Sie eine Route für bestimmte Standorte in Ihrer Anwendung. Routen geben Teile der Anwendung und die ihnen zugeordneten URLs an. Die URL ist die Schlüsselkennung, mit der Ember erkennt, welcher Anwendungsstatus dem Benutzer angezeigt werden muss.
Accentsconagua
App.Router.map (function () this.route ('about'); // bringt uns zu "/ about"); Das Verhalten einer Route (z. B. Anfordern von Daten von einem Modell) wird über Instanzen des Ember-Routenobjekts verwaltet und ausgelöst, wenn ein Benutzer zu einer bestimmten URL navigiert. Ein Beispiel wäre das Anfordern von Daten aus einem Modell wie folgt:
App.EmployeesRoute = Ember.Route.extend (model: function () return App.Employee.find (););
Wenn ein Benutzer in diesem Fall zum Abschnitt "/ Mitarbeiter" der Anwendung navigiert, fordert die Route eine Liste aller Mitarbeiter an das Modell an.
Eine Objektdarstellung der Daten.
Modelle sind eine Objektdarstellung der Daten, die Ihre Anwendung verwenden wird. Es kann sich dabei um ein einfaches Array oder um Daten handeln, die über eine Ajax-Anforderung dynamisch von einer RESTful-JSON-API abgerufen werden. Die Ember Data-Bibliothek bietet die API zum Laden, Zuordnen und Aktualisieren von Daten für Modelle in Ihrer Anwendung.
Controller werden normalerweise zum Speichern und Repräsentieren von Modelldaten und Attributen verwendet. Sie wirken wie ein Proxy, geben Ihnen Zugriff auf die Attribute des Modells und ermöglichen den Zugriff auf Vorlagen, um die Anzeige dynamisch zu rendern. Deshalb wird eine Vorlage immer mit einem Controller verbunden.
Dabei ist zu beachten, dass ein Modell zwar Daten abruft, ein Controller jedoch dazu dient, diese Daten programmatisch für verschiedene Teile Ihrer Anwendung bereitzustellen. Modelle und Controller scheinen zwar eng miteinander verbunden zu sein, Modelle haben jedoch selbst keine Kenntnis von den Controllern, die sie später verwenden werden.
Sie können auch andere Anwendungseigenschaften speichern, die beibehalten werden müssen, aber nicht auf einem Server gespeichert werden müssen.
Ansichten in Ember.js dienen dazu, Ereignisse rund um die Benutzerinteraktion zu verwalten und in Ereignisse zu übersetzen, die in Ihrer Anwendung eine Bedeutung haben. Wenn ein Benutzer beispielsweise auf eine Schaltfläche klickt, um einen Mitarbeiter zu löschen, ist die Ansicht dafür verantwortlich, dieses native Browser-Klickereignis zu interpretieren und entsprechend im aktuellen Status Ihrer Anwendung zu verarbeiten.
Ember.js trägt dazu bei, die Menge an benötigtem Code zu minimieren und Dinge hinter den Kulissen für Sie zu erledigen, indem Sie Namenskonventionen verwenden. 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 Sie beispielsweise eine Route erstellen, die als "Mitarbeiter" bezeichnet wird:
App.Router.map (function () this.resource ('employee');); Ich würde dann meine Komponenten so benennen:
Die Verwendung dieser Namenskonvention dient einem doppelten Zweck. Erstens erhalten Sie eine semantische Beziehung zwischen gleichen Komponenten. Zweitens kann Ember automatisch die erforderlichen Objekte erstellen, die möglicherweise nicht vorhanden sind (z. B. ein Routenobjekt oder ein Controller), und diese zur Verwendung in Ihrer Anwendung verdrahten. Dies ist die "Magie", die ich zuvor erwähnt habe. Tatsächlich macht Ember dies auf der globalen Anwendungsebene, wenn Sie das Anwendungsobjekt instanziieren:
var App = Ember.Application.create ();
In dieser einzelnen Zeile werden die Standardreferenzen für Router, Controller, Ansicht und Vorlage der Anwendung erstellt.
Zurück zur oben beschriebenen "Employee" -Route: Wenn ein Benutzer in Ihrer Anwendung zu "/ Employees" navigiert, sucht Ember nach folgenden Objekten:
Wenn sie nicht gefunden wird, wird eine Instanz von jedem erstellt, aber es wird einfach nichts gerendert, da Sie kein Modell angegeben haben, aus dem Daten abgeleitet werden sollen, oder eine Vorlage, um die Daten anzuzeigen. Deshalb ist die Namenskonvention so wichtig. Auf diese Weise kann Ember wissen, wie mit den Aufgaben einer bestimmten Route umgegangen werden muss, ohne dass Sie die Dinge manuell verbinden müssen.
Beachten Sie, dass ich im ersten Beispiel den singulären Namen "Employee" verwendet habe, um das Modell zu definieren. Das ist absichtlich. Der Name "Employees" schreibt vor, dass ich mit vielen Mitarbeitern zusammen arbeite. Daher ist es wichtig, ein Modell zu entwickeln, das die Flexibilität bietet, einen oder alle Mitarbeiter zurückzuholen. Die einzigartige Namenskonvention dieses Modells ist keine Anforderung von Ember, da Modelle selbst keine Kenntnis von den Controllern haben, die sie später verwenden werden. Sie können also flexibel benannt werden. Die Einhaltung dieser Konvention macht die Verwaltung Ihres Codes jedoch wesentlich einfacher.
Ich entschied mich auch für die Ressource() Eine Methode zum Definieren meiner Route. In diesem Szenario hätte ich höchstwahrscheinlich verschachtelte Routen zum Verwalten von Detailseiten für bestimmte Mitarbeiterinformationen. Wir werden später in der Serie über das Schachteln sprechen.
Der Schlüssel ist, dass Ember durch Verwendung eines konsistenten Namensschemas die Hooks, die diese Komponenten miteinander verbinden, problemlos verwalten kann, ohne dass Sie die Beziehungen explizit über eine Menge Code definieren müssen.
Ausführliche Informationen zu den Namenskonventionen von Ember finden Sie auf der Website des Projekts muss lesen.
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 durchgegangen und die wichtigsten Aspekte des Frameworks auf hoher Ebene 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 Ihnen erneut empfehlen, sich die Dokumentation für Handlebars anzusehen, um ein Gefühl für die Ausdrückensyntax zu erhalten. Wenn Sie wirklich auf der Suche nach Ember sind, bleiben Sie bei Tuts + Premium, das bald einen vollständigen Kurs bietet, der Sie durch die Erstellung einer auf Ember basierenden Anwendung führt!
Wie ich zu Beginn dieses Artikels feststellte, haben die Leiter des Ember.js-Kernteams Yehuda Katz und Tom Dale dies auf Richtigkeit überprüft und die Daumen hoch gelegt. Ember-Team genehmigt! Bis bald!
