Ember Octane ist die neue Version von Ember.js Framework und die beste Möglichkeit für Teams, ehrgeizige Webanwendungen zu erstellen.
Am 20. Dezember wurde eine neue Version von Ember 3.15 veröffentlicht. Und das ist Octane! Neugierig, was das für die Webentwicklung bedeutet? Dieser Beitrag wird Ihnen helfen, Ihren Weg zu finden.
Googlotranslite und ich haben hart an der Übersetzung gearbeitet (insbesondere Googlotranslate). Willkommen bei Katze!
Technische Details (Upgrade-Strategien, Legacy-Funktionen, neue Funktionen von Ember Data) finden Sie im Ember 3.15 Release- Blog.
Was ist Ember Octane?
Ember hat sich immer darauf konzentriert, eine bessere Umgebung zu schaffen, die Menschen mit unterschiedlichen Qualifikationen gemeinsam zur Erstellung von Webanwendungen verwenden können. Octane aktualisiert die Komponenten und das Reaktivitätssystem von Ember, um sie moderner und benutzerfreundlicher zu gestalten. Jetzt macht Ember noch mehr Spaß!
Ab Version 3.15 empfehlen Ember-Entwickler Octane für neue Anwendungen und Add-Ons. Wenn Sie eine neue Anwendung mit ember new Version 3.15 erstellen, erhalten Sie eine neue Octane-Anwendung.
Oktan macht Spaß
Im Mittelpunkt der Verbesserungen von Octane stehen zwei wichtige Änderungen am Ember-Kern: ein neues Komponentenmodell und ein neues Reaktivitätssystem.
Bei vorhandenen Anwendungen unter Ember sind beide Änderungen vollständig mit vorhandenem Code kompatibel. Das Aktualisieren der Ember 3.14-Anwendung auf Ember 3.15 ist eine kompatible Änderung, wie aus der Versionsnummer hervorgeht.
Glimmer-Komponenten
Die erste große Verbesserung bei Ember Octane sind die Glimmer-Komponenten. Seit Ember 1.0 verfügt Ember über ein Einkomponentensystem, das auf der damals verfügbaren JavaScript-Syntax basiert.
Vorher: klassische Ember-Komponenten
Wenn Sie sich klassische Komponenten ansehen, fällt Ihnen als Erstes auf, dass Sie das „Root-Element“ mithilfe der JavaScript-Syntax konfigurieren.
import Component from '@ember/component'; export default Component.extend({ tagName: 'p', classNames: ["tooltip"], classNameBindings: ["isEnabled:enabled", "isActive:active"], })
Nachher: Glimmerkomponenten
Glimmer-Komponenten hingegen ermöglichen es, das Wurzelelement wie jedes andere Element zu behandeln. Dies vereinfacht das Komponentenmodell erheblich und schließt Sonderfälle aus, die mit dem Vorhandensein der zweiten API nur für die Arbeit mit dem Stammelement der Komponente verbunden sind.
Dies bedeutet auch, dass Sie eine Komponente ohne Root-Element erstellen können, und das funktioniert.
Verwenden von Modifikatoren zur Wiederverwendung des DOM-Verhaltens
Die zweite wesentliche Verbesserung im Ember-Komponentenmodell sind Elementmodifikatoren. Mit dieser Funktion können Sie wiederverwendbares DOM-Verhalten erstellen, das keiner bestimmten Komponente zugeordnet ist.
An: Mixins
Wenn Sie in klassischem Ember einen Teil des DOM-Verhaltens definieren möchten, den Sie in Ihrer Anwendung wiederverwenden können, müssen Sie ein Komponenten-Mixin definieren, das die entsprechenden Lifecycle-Hooks implementiert.
Beispielsweise verfügen wir über eine Drittanbieter-Bibliothek, die Funktionen "activateTabs" und "disableTabs" bereitstellt, die jeweils ein Element enthalten. In klassischem Ember können Sie ein Mixin wie das folgende schreiben:
import Mixin from '@ember/object/mixin'; export default Mixin.create({ didInsertElement() { this._super(); activateTabs(this.element); } willDestroyElement() { this._super(); deactivateTabs(this.element); } })
Und dann werden Sie es in einer solchen Komponente verwenden:
import Component from '@ember/component'; export default Component.extend(Tabs, {
Die Nachteile der Verwendung von Mixins für die UI-Komposition sind im gesamten JavaScript-Ökosystem gut dokumentiert ( Mixins werden als schädlich eingestuft , Hooks kommen zu Version 3.0 von Vue.js , abgelehnter Mixin-Vorschlag für svelte , Ember RFC: Deprecate Mixins ). Das größte Problem sind Namenskonflikte. Jede Methode in einem Mixin kann zu Konflikten mit einer Methode in einem anderen Mixin führen, ohne dass eine gute Möglichkeit zum Lösen von Konflikten besteht.
Im Zusammenhang mit Ember gibt es ein weiteres Problem bei der Verwendung von Ember-Komponenten-Mixins zur Wiederverwendung des DOM-Verhaltens. Wenn Sie das Tabs für ein Element verwenden möchten, müssen Sie dieses Element in eine Komponente mit einer JavaScript-Klasse umwandeln, was ziemlich unpraktisch ist.
Obwohl wir empfehlen, Mixins zu vermeiden, können Sie sie in Ember 3.15 verwenden. Add-Ons können Sie auch weiterhin mit Mixins versorgen.
After: Element-Modifikatoren
Ember Octane bietet eine neue Möglichkeit, das DOM-Verhalten wiederzuverwenden: Elementmodifikatoren. Der einfachste Weg, einen Elementmodifikator zu schreiben, besteht darin, eine Funktion zu schreiben, die ein Element aufnimmt und etwas damit macht. Die Funktion kann optional eine Destruktorfunktion zurückgeben, die ausgeführt werden soll, wenn Ember das Element zerstört.
So sieht unser Tabs aus, wenn er als Modifikator überschrieben wird.
import { modifier } from 'ember-modifier'; export default modifier(element => { activateTabs(element); return () => deactivateTabs(element); });
Stimme zu, einfach!
Sie können für jedes Element einen Modifikator verwenden, indem Sie die Elementmodifikatorsyntax verwenden.
Elementmodifikatoren funktionieren mit jedem Element. Das bedeutet, dass Sie keine gesamte Komponente erstellen müssen, nur um ein wiederverwendbares DOM-Verhalten zu erstellen.
Bei dieser Art des Schreibens von Modifikatoren wird davon ausgegangen, dass Sie den Destruktor starten und den Modifikator von Grund auf neu starten können, wenn sich die Modifikatorargumente ändern. Wenn Sie eine genauere Steuerung benötigen, bietet das ember-modifier Paket auch eine erweiterte API.
Reaktivität von Glimmer ausgeliehen
Eine Besonderheit der modernen externen Schnittstelle ist das „Reaktivitätsmodell“. Das Reaktivitätsmodell zeigt Ihnen, wie Sie Daten in Ihrem Programm identifizieren und bearbeiten, damit das Ausgabe-DOM korrekt aktualisiert wird, wenn Änderungen vorgenommen werden.
Ember Octane enthüllt ein viel einfacheres Reaktivitätsmodell, das als verfolgte Eigenschaften bezeichnet wird.
Das Rückverfolgbarkeits-Reaktivitätsmodell ist mit dem klassischen Reaktivitätsmodell kompatibel. Dies liegt an der Tatsache, dass beide APIs als Teil des Ember-internen Reaktivitätsmodells implementiert sind, das auf Links und Validatoren basiert.
Vorher: berechnete Eigenschaften und ihre Einschränkungen
In klassischem Ember ändern Sie reaktive Eigenschaften mit set , und alle Berechnungen sollten als berechnete Felder beschrieben werden, in denen alle Abhängigkeiten vollständig aufgeführt sind.
Hier ist ein Beispiel für berechnete Felder aus Ember 3.14-Handbüchern:
import EmberObject, { computed } from '@ember/object'; const Person = EmberObject.extend({ firstName: null, lastName: null, age: null, country: null, fullName: computed('firstName', 'lastName', function() { return `${this.firstName} ${this.lastName}`; }), description: computed('fullName', 'age', 'country', function() { return `${this.fullName}; Age: ${this.age}; Country: ${this.country}`; }) }); let captainAmerica = Person.create({ firstName: 'Steve', lastName: 'Rogers', age: 80, country: 'USA' }); captainAmerica.description;
Dieser Entwurf erschwert die Aufteilung der berechneten Eigenschaft in kleinere Funktionen, da immer noch alle verwendeten Eigenschaften aufgelistet werden müssen, unabhängig davon, wo sie verwendet werden. In der Praxis bedeutet dies, dass Sie im klassischen Ember einige berechnete Eigenschaften auf andere stapeln, was funktioniert, aber ziemlich lästig ist.
Nachher: Verfolgte Eigenschaften
Im Octane-Reaktivitätsmodell sind die nachverfolgten Eigenschaften wesentlich präziser.
class Person { @tracked firstName; @tracked lastName; @tracked age; @tracked country; constructor({ firstName, lastName, age, country }) { this.firstName = firstName; this.lastName = lastName; this.age = age; this.country = country; } get fullName() { return `${this.firstName} ${this.lastName}`; }), get description() { return `${this.fullName}; Age: ${this.age}; Country: ${this.country}`; }) } let captainAmerica = new Person({ firstName: 'Steve', lastName: 'Rogers', age: 80, country: 'USA' }); captainAmerica.description;
Sie beginnen mit der regulären JavaScript-Klasse und kommentieren alle Felder, die sich auf das DOM auswirken könnten, mit @tracked . Sie müssen weder Getter noch Funktionen mit Anmerkungen versehen, sodass Sie Ihren Code nach Ihren Wünschen aufteilen können.
Das Reaktivitätsmodell der überwachten Eigenschaften zeichnet sich dadurch aus, dass der Code genau so funktioniert, wenn Sie die Annotation @tracked entfernen. Das einzige, was sich ändert, wenn Sie @tracked hinzufügen, ist, dass bei einer Änderung der Eigenschaft jeder Teil des DOM, der diese Eigenschaft als Teil seiner Berechnungen verwendet hat, korrekt aktualisiert wird.
Beachtung der Dokumentation
Octane ist mehr als nur neue Funktionen. Darüber hinaus haben wir der Aktualisierung der Dokumentation große Aufmerksamkeit gewidmet, um den Benutzern zu zeigen, wie Anwendungen im Octane-Stil erstellt werden.
Das Tutorial ist der erste Weg, wie Menschen lernen, Ember-Apps zu erstellen. Ember 3.15 hat das Super Rentals-Tutorial vollständig aktualisiert und im Octane-Stil neu geschrieben. Die Unterrichtsstruktur wurde ebenfalls aktualisiert und aktualisiert.
Die Anleitungen wurden ebenfalls erheblich aktualisiert. Jetzt sprechen wir zuerst über Komponenten, indem wir die verwirrende Organisation beseitigen (zum Beispiel die Trennung zwischen Vorlagen und Komponenten). Das neue Handbuch entfernt die Betonung von Controllern, die in Octane weniger wichtig sind. Das klassische Objektmodell ist jetzt im Abschnitt Octane-Migration enthalten.
Ember Inspector ist jetzt noch besser
Der Ember Inspector ist ein sehr wichtiger Bestandteil der Erstellung von Ember-Anwendungen durch Ember-Entwickler.
Wir sind sehr stolz darauf, dass wir im Chrome Web Store über die Jahre eine Fünf-Sterne-Bewertung erhalten haben.
Für Octane wurde der Ember Inspector aktualisiert, um die erstklassigen Funktionen von Octane zu unterstützen, einschließlich der nachverfolgten Eigenschaften und der Glimmer-Komponenten.
Der aktualisierte Inspektor beseitigt doppelte Konzepte und eine veraltete Sprache (z. B. "Baumansicht"). Es hat auch viele visuelle Verbesserungen, einschließlich eines neuen Komponenten-Tooltips, der die Redewendungen von Octane besser widerspiegelt. Der Tooltip für eine Komponente wird ebenfalls aktualisiert, wodurch ein altes Problem mit kleinen Komponenten behoben wird.
Die Arbeit beginnen
Unabhängig davon, ob Sie ein neuer Ember-Entwickler, der viele Jahre später zu Ember zurückgekehrt ist, oder bereits ein aktiver Ember-Entwickler sind, lesen Sie am schnellsten und einfachsten ein aktualisiertes Handbuch, um zu erfahren, wie Sie Anwendungen mit Octane erstellen. (Von einem Übersetzer: Für aktive Entwickler wäre es nützlich, den vergleichenden Spickzettel zu studieren.)
Das Ember-Add-On-Ökosystem ist ein großer Teil von Ember. Daher sollten Sie Add-Ons verwenden, um die Erstellung Ihres Projekts zu beschleunigen.
Ember Observer ist ein Katalog für das Ember Add-Ons-Ökosystem. Jedes Addon erhält eine Qualitätsbewertung, die auf einer Analyse formaler Kriterien basiert, z. B. dem Vorhandensein einer aussagekräftigen README, ob das Addon über eine automatische Assemblierung verfügt und ob das Addon von mehr als einer Person unterstützt wird. Ab dieser Woche wird auch angezeigt, ob das Addon Octane Ready ist.
Die meisten Add-Ons sollten ohne Änderungen Octane Ready sein. Ember Observer hilft der Community, Octane-Probleme in unterstützten Paketen im Voraus zu identifizieren und zu beheben.
Ein bisschen mehr über Seamless Interop
Das Glimmer-Reaktivitätsmodell schließt nicht nur berechnete Eigenschaften aus, sondern enthält auch keine Ember-Proxys oder Beobachter. Das Octane-Reaktivitätsmodell ist leistungsfähiger als das klassische, aber es ist viel einfacher zu verwenden.
Das Octane-Reaktivitätsmodell wäre für bestehende Ember-Benutzer nicht nützlich, wenn es schwierig wäre, Objekte zu verwenden, die mit dem klassischen Reaktivitätsmodell von Objekten implementiert wurden, die mit dem Octane-Modell implementiert wurden. Aus diesem Grund haben wir hart gearbeitet, um sicherzustellen, dass vorhandene Ember-Anwendungen klassische Objekte in Klassen, die mit nachverfolgten Eigenschaften erstellt wurden, frei verwenden können.
class Contact { @tracked person; constructor(person) { this.person = person; } get description() { return this.person.description; } } import EmberObject, { computed } from '@ember/object'; const Person = EmberObject.extend({ firstName: null, lastName: null, age: null, country: null, fullName: computed('firstName', 'lastName', function() { return `${this.firstName} ${this.lastName}`; }), description: computed('fullName', 'age', 'country', function() { return `${this.fullName}; Age: ${this.age}; Country: ${this.country}`; }) }); let captainAmerica = new Person({ firstName: 'Steve', lastName: 'Rogers', age: 80, country: 'USA' }); let contact = new Contact(captainAmerica); contact.description;
Da die beiden Systeme kompatibel sind, können Bibliotheken das Octane-Reaktivitätssystem ohne größere Änderungen an der API verwenden.
Auf diese Weise können Sie vorhandene Ember-Anwendungen mit Octane Modul für Modul neu schreiben.
Vielen Dank für Ihr Interesse an Ember Octane.
Octane ist ein Projekt, das die Ember-Community gerne mit neuen und erfahrenen Entwicklern teilt. Octane ist eine moderne, produktive Methode, um Webanwendungen zu erstellen, mit denen Sie unsere Arbeit genießen und stabilisieren können.
Eine vollständige Aktualisierung der Ember-APIs und der Dokumentation wäre ohne die Bemühungen der Community und jedes Mitglieds der Ember-Kernteams nicht möglich gewesen . Vielen Dank, dass Sie ein Teil davon sind, zu diesem Projekt beitragen und Ember weiterhin dabei helfen, eine großartige Wahl für die Webentwicklung zu sein.
vom übersetzer:
In russischer Sprache über Ember können Sie im Telegrammkanal ember_js fragen