Ich habe diesen Artikel basierend auf der Präsentation geschrieben, die ich auf dem Berlin.js- Treffen gehalten habe. In letzter Zeit gibt es nur wenige russischsprachige Materialien zu diesem recht beliebten und stabilen Rahmen, und ich habe beschlossen, diese Situation ein wenig zu beheben.

Sie lernen Ember.js einmal und wenden dieses Wissen dann auf alle Ember.js-Projekte an. Ich werde versuchen, diese These unter dem Schnitt zu enthüllen.

Ich und Ember.js

Kurz über meine Erfahrung. Ich habe Ember.js 2014 zum ersten Mal bei meinem ersten Job als Front-End-Entwickler ausprobiert. Das Framework wurde dann noch im MVC-Paradigma erstellt und verwendete nicht die CLI. Aufgrund des Mangels an viel Erfahrung war es schwierig, Stärken und Schwächen zu beurteilen. Im Allgemeinen werden meine Eindrücke durch diesen Live-Kampf 2013 zwischen Ember.js und Angular.js gut vermittelt. Ja, das Google-Framework war sehr schnell verfügbar, aber es ist einfach, Bibliotheken von Drittanbietern wie moment.js oder jQuery-Plugins wie datatables.net in Ember zu integrieren, wodurch es viel flexibler wurde.

Dann wechselte ich zu einer anderen Firma und arbeitete ein Jahr lang mit Can.js und React.js zusammen, aber 2016 hatte ich die Möglichkeit zu wählen und gab meinem alten Freund eine Chance. Zu diesem Zeitpunkt hatte sich das Paradigma in Data Down Actions Up geändert, Dienste und Komponenten wurden angezeigt. Im Allgemeinen blieb jedoch alles vertraut und verständlich, so dass es keine besonderen Probleme bei der Anpassung gab.

Ember.js ist seitdem mein Hauptwerkzeug. Meiner Meinung nach ist dieses Framework als Hauptwahl bei der Entwicklung eines SPA in Betracht zu ziehen.

Warum Ember?

Die Npm 2018- Umfrage verzeichnete eine gewisse Müdigkeit der js-Community aufgrund der vielen Tools, die für die Entwicklung benötigt werden:

Alle unsere Umfrageteilnehmer wünschen sich weniger Tools, weniger Konfiguration für den Einstieg und eine bessere Dokumentation der vorhandenen Tools

Dies ist verständlich, da React.js der Mainstream ist. Wenn es um Marketing geht, ist die Bibliothek als sehr „einfaches“ Werkzeug positioniert, was bedeutet, dass sie leicht zu erlernen und sehr flexibel ist. Dies ist jedoch die trügerische Flexibilität der Trivialität. Stellen Sie sich vor, Sie kommen, um ein Auto zu kaufen, und stattdessen wird Ihnen nur angeboten, einen Motor mit den Worten zu kaufen: „Mit diesem Motor können Sie ein ausgezeichnetes Auto bauen. Groß, klein, grün, blau, Schrägheck oder Kombi. Für ein Taxi, zum Fahren in der Stadt oder in der Umgebung Landschaft. Geeignet für jedes Auto! " Das ist großartig, das wird reichen. Aber ich würde mich gerne hinsetzen und gehen. Nur dafür müssen Sie das Getriebe aufnehmen, die Karosserie finden und auch (!) Eine Farbe auswählen. Und das Marketing schweigt darüber.

Diese Reihenfolge hat zu einem bunten Ökosystem mit einer Vielzahl unterstützender Bibliotheken geführt. Bibliotheken, die häufig nicht miteinander kompatibel sind, müssen daher sorgfältig ausgewählt werden. Die Auswahl ist natürlich gut, aber die Auswahl aus 24 Marmeladenarten ist anstrengend. Und die Npm-Umfrage bestätigt dies.

Also, liebe Leser, ich habe gute Nachrichten für Sie. Die Ember-Community ist aufgrund der "Designmerkmale" des Frameworks viel weniger von den Schmerzen der Wahl betroffen. Wie einer der Befragten in der jüngsten Umfrage der Ember-Community schrieb:

Sie können Ember einmal lernen und Ihr Wissen in jedem anderen Ember-Projekt anwenden ... Ember ist immer eine zusammenhängende Erfahrung, da alle Addons mit denselben Tools erstellt und verwendet werden können. Es ist sehr gut, weniger Brainpower für Werkzeuge, das Einrichten einer Testumgebung oder das Schreiben von testbarem Code aufzuwenden.

was übersetzt als

Sie lernen Ember.js einmal und wenden dieses Wissen dann auf alle Ember.js-Projekte an. ... Mit Ember erhalten Sie umfassende Erfahrung, da alle Add-Ons mit denselben Tools erstellt und integriert werden können. Es ist eine gute Sache, mentale Energie für die Entwicklung von Tools, die Bereitstellung einer Testumgebung oder das Schreiben von überprüfbarem Code zu sparen.

Als nächstes werde ich erklären, warum Sie mit Ember diese ganze Erfahrung machen, aber zuerst werden wir eine Frage beantworten.

Lebt er überhaupt noch?

Heutzutage sieht man selten ein Live-JS-Framework, dessen Entwicklung in den letzten 5 Jahren nicht aufgehört hat. Aber Ember ist einer von ihnen.

Die aktive Entwicklung hörte nie auf, aber die Anpassung stagnierte 2016. Wenn wir uns derselben Umfrage von Npm 2018 zuwenden, wird dort die folgende Tabelle erwähnt:

Wie wir sehen, gab es 2017 eine Umkehrung, und Ember begann wieder zu wachsen, über dem Durchschnittstempo. Es gibt eine einfache Erklärung für dieses Phänomen. Im Jahr 2017 entschied sich LinkedIn für eine Neugestaltung und entschied sich für Ember.js, um sowohl (Desktop- als auch mobile) Versionen seiner Hauptwebsite zu implementieren. Diese Veranstaltung lieferte Energie für die Entwicklung und schuf den aktuellen Trend.

Es sollte beachtet werden, dass das Framework zusätzlich zu LinkedIn von so bekannten Unternehmen wie Microsoft, Netflix, Travis CI (deren gesamte Front in Open Source angelegt ist ), Intercom, Heroku und anderen verwendet wird.

Im Allgemeinen ist das Framework lebendig und gut).

Glut in die Landschaft anderer JS-Frameworks

Unten sehen Sie eine nicht beanspruchende, unvollständige und subjektive Liste verschiedener Aspekte der Front-End-Entwicklung, deren Zweck lediglich darin besteht, die ungefähre Position von Ember.js unter anderen Bibliotheken anzuzeigen. Die blauen und grünen Linien beziehen sich auf React.js und Vue.js, die grauen und orangefarbenen Linien auf Angular und Ember.js:

Ember.js befindet sich näher an Angular und versucht, Standardimplementierungen und Tools für alle Aufgaben bereitzustellen, die beim Erstellen eines neuen SPA auftreten. Wenn etwas nicht zu Ihnen passt oder etwas fehlt, suchen Sie nach dem passenden Addon dafür (naja, oder schreiben Sie es selbst). Über Addons etwas niedriger.

Was wird bekannt sein?

React.js

Wenn Sie aus der Welt von React.js kommen, sind Sie mit der Aufteilung der Seite in eine Hierarchie von Komponenten vertraut. In Ember werden Sie auch darüber nachdenken, wie Sie Ihre Seite am besten in Komponenten aufteilen und lokale Zustände darin kapseln können.
Wenn Sie mit React-Router vertraut sind, wird Ihnen der Router in Ember ebenfalls bekannt vorkommen. Ursprünglich wurde der React-Router von der Embers kopiert, obwohl das Projekt nun schon lange ein eigenes Leben führt.
Wenn Sie mit Redux und / oder GraphQL arbeiten möchten, können Sie sie auch mit Ember.js verwenden (siehe hier und hier ).

Spätestens zu EmberConf gab es eine Präsentation zum Pattern Matching für React und Ember.

Vue.js

Natürlich sind Sie und die Mitarbeiter von React mit dem Paradigma der Aufteilung einer Schnittstelle in Komponenten vertraut. Darüber hinaus sind Sie mit den Konzepten von Vorlagen und berechneten Eigenschaften vertraut.

Angular.js

Diejenigen, die dieses Framework gut kennen, werden die Dienste und den Abhängigkeitsinjektionsmechanismus kennen. Sie werden sicherlich auch die Dekorateure mögen, die in Release 3.10 offiziell veröffentlicht werden und deren Verwendung jetzt mit Hilfe von Polyfil möglich ist. Möglicherweise möchten Sie auch Typescript verwenden (siehe hier ), das in der Ember-Community immer beliebter wird.

Was wird unbekannt sein?

Kommen wir nun zu Teilen, die wahrscheinlich ungewohnt erscheinen und Fragen aufwerfen.

Ember-Cli, nicht Webpack

Das Standardwerkzeug zum Generieren einer Anwendung ist Ember-cli . Fast jeder benutzt es immer. Mit Ember-cli generieren Sie neue Anwendungen und Dateien in einer vorhandenen Anwendung. Das Tool ist für das Kompilieren von Ressourcen und das Bereitstellen einer Entwicklungsumgebung mit Live-Reload und Tests verantwortlich. Zu diesem Zweck wurden viele Erweiterungen erstellt, die alle grundlegenden Lebenssituationen abdecken (bis hin zu Fingerabdrücken, CSP oder SRI). Es kann auch zur Berechnung in Kampfumgebungen verwendet werden.

Für viele mag es ungewöhnlich erscheinen, dass das Tool kein Webpack verwendet. Stattdessen wird broccoli.js verwendet. Im Allgemeinen sind Sie während der Entwicklung der Anwendung weder heiß noch kalt.

Ember-cli ist ein stabiles und praktisches Werkzeug. Und vor allem deshalb leidet die Gemeinde nicht unter Qualen mit Wahlmöglichkeiten.

Harte Dateistruktur

Dieser Moment versetzt Menschen, die mit dem Rahmen nicht vertraut sind, oft in einen Schockzustand. Sehen Sie sich die Dateistruktur einer Standard-Ember-Anwendung an:

Was sagen Sie, wenn Sie wissen, dass es nicht geändert werden kann? Sie können keine Dateien in andere Ordner übertragen und diese auf Ihre eigene Weise benennen. Aus diesem Grund habe ich einmal sogar den Beinamen "faschistisch" in Bezug auf den Rahmen gehört.

Eine solche Einschränkung wurde jedoch speziell eingeführt. Hier ist der Beweis:

Wenn Sie ein freier Künstler und eine verletzliche kreative Person sind, wird es für Sie natürlich schwierig sein, diese Bestellung anzunehmen. Aber für den Rest, "durchschnittliche" Programmierer, Anfänger in der Entwicklung und diejenigen, die nicht daran denken möchten, Ordner zu organisieren und Dateien für jedes neue Projekt zu benennen, ist dies sehr praktisch.

Meiner Meinung nach ist dies eine elegante und effektive architektonische Lösung, die einen enormen Einfluss hat. Und jedes Mal, wenn ich eine Ember-Anwendung von beliebiger Komplexität öffne, sehe ich sie nicht wie einen RAM an einem neuen Gate aus, aber ich weiß, wo sich die Komponenten befinden, wo sich die Vorlagen, Dienste, Tests usw. befinden. Das spart viel Zeit und geistige Energie.

Addons

Die Zeit hat gezeigt, dass die Entscheidung für eine starre Ordnerstruktur einen weiteren Vorteil hat. Ich werde versuchen, es an einem vereinfachten Beispiel zu zeigen.

Angenommen, Sie müssen dieselbe Komponente in mehreren Anwendungen verwenden (auf einmal). Wenn Sie dann wissen, dass Komponenten immer im Ordner app/components/ , können Sie diese Komponente in einem separaten npm-Paket auswählen, abhängig davon hinzufügen, und smart Ember-cli zieht diese Komponente in der Kompilierungsphase in die Anwendung. Und Sie können es in Ihren Anwendungen wiederverwenden.

Dies ist jedoch nicht das überraschendste. Das Erstaunliche dabei ist, dass ALLE anderen Ember-Anwendungen es auch verwenden können, wenn Sie dieses Paket in Open Source veröffentlichen. Und Sie können alle diese npm-Pakete, die von anderen Entwicklern veröffentlicht wurden, in all Ihren Anwendungen verwenden, ohne zusätzlichen Aufwand für die Integration zu verursachen.

Die Community hat diese Idee schon lange verstanden, sodass Sie diese Pakete für fast alles finden können. UI-Bibliotheken (wo ohne sie), Kompilierungswerkzeuge, Erweiterungen für die Veröffentlichung, Bibliotheken für die Authentifizierung, Adapter für die Arbeit mit dem Back-End und vieles mehr. Für solche Pakete wurde die EmberObserver- Website erstellt , auf der Sie das gewünschte Paket finden.

Mit Add-Ons teilen Ember-Entwickler Funktionen mit anderen. Und da Add-Ons in allen Anwendungen funktionieren, verwendet jeder mehr oder weniger das gleiche Set. Wenn Sie zu einem bereits eingerichteten Projekt kommen, kennen Sie höchstwahrscheinlich 90% der verwendeten Add-Ons. Die Anwendung ist Ihnen vertraut, auch wenn Sie den Code zum ersten Mal in Ihrem Leben sehen.

Kommunikation mit BE

Der letzte Aspekt, den ich vielleicht nur am Rande durchgehen werde, ist die Arbeit mit dem Backend.

Wenn Sie im Ressourcenparadigma arbeiten, verwenden Sie in Ember normalerweise die Ember- Datenbibliothek, um mit Daten zu arbeiten. Es ist optional, wird jedoch standardmäßig allen neuen Anwendungen hinzugefügt. Es beschreibt DSL für die Arbeit mit Modellen, das ungefähr so ​​aussieht:

Außerdem bestimmt die Bibliothek selbst, wie die URL lauten soll, welche Parameter, welche Methode und wie die Antwort vom Server analysiert werden soll. Wenn Sie Glück haben und Ihre Back-End-Entwickler einen Standard für die Beschreibung von REST-Schnittstellen einhalten, besteht die Möglichkeit, dass Sie das Addon auf Ihrer Seite verwenden und nicht die Kommunikation mit Stiften beschreiben.

Wenn Sie kein Glück haben, erhalten Sie von Ember-data die erforderlichen Abstraktionen, z. B. Adapter und Serializer. Mithilfe dieser Abstraktionen können Sie sauberen Code schreiben, damit er nicht wie auf dem Bild angezeigt wird:

Standardmäßig entsprechen Ember-Daten der JSON: API-Spezifikation ( hier zum Vergleich mit GraphQL und REST). Aus eigener Erfahrung kann ich sagen, dass die Verwendung von JSON: API Ihnen und Ihren Backend-Entwicklern viel Zeit und moralische Stärke spart. Sie diskutieren NICHT, welche URLs sein sollten, im Camelcase oder im Kebab-Fall sollten Attribute und Parameter vorhanden sein. PATCH oder PUT sollten verwendet werden, um die JSON-Struktur in der Anforderung und Antwort für die eingebetteten Ressourcen zu ändern. Sie diskutieren nur Modelle, ihre Beziehungen und Geschäftsregeln für Attribute. Dies ist ein weiterer Fall, in dem sich eine eingeschränkte Auswahl positiv auf die Produktivität auswirkt.

Wo soll ich anfangen?

Unabhängig davon, ob Sie ein erfahrener Entwickler sind oder nicht, empfehle ich Ihnen, Ember durch Öffnen des offiziellen Tutorials kennenzulernen.

Er wird Ihnen nach und nach alle wichtigen Punkte vorstellen:

• So erstellen Sie eine Anwendung mit ember-cli
• So erstellen Sie Komponenten, Pfade, Modelle usw.
• Verwendung von Ember-Daten
• So schreiben Sie eine komplexe Komponente
• So binden Sie eine Drittanbieter-Bibliothek ein
• Bereitstellen

Wo kann man fragen?

Der Hauptkommunikationskanal für Ember-Entwickler ist Twitter Discord Server . Es gibt immer erfahrene Programmierer, die Ihnen in unverständlichen Momenten helfen. Es gibt auch einen russischsprachigen Kanal. Und vergessen Sie nicht, dass die Architektur aller Ember-Anwendungen gleich ist und alle dieselben Tools verwenden. Dies erhöht die Wahrscheinlichkeit einer schnellen Antwort auf Ihre Frage erheblich.

Weitere Kommunikationskanäle finden Sie auf der Website .

UPDATE: Auf Russisch können Sie im Telegrammkanal ember_js nach Ember fragen

Nachwort

Im Finale möchte ich noch einmal die Hauptthese hervorheben. Sie lernen Ember.js einmal und wenden dieses Wissen dann auf alle Projekte an .

Vielen Dank für Ihre Aufmerksamkeit!