Entwicklung ambitionierter Webanwendungen mit Ember.js
Ambitioniert
Ember.js ist ein „full-featured“ JavaScript-Framework, das Entwicklern alles Notwendige zum Erstellen von Single-Page-Anwendungen liefert. Ein Beispiel zeigt, wie man damit arbeitet.
Ember.js bezeichnet sich selbst als „Framework für ambitionierte Web Entwickler“ („framework for ambitious web developers“). In Abgrenzung zu Komponentenbibliotheken wie React und Vue.js positioniert sich Ember als umfassendes Framework. Router, State Management und selbst eine Testing Suite sind standardmäßig enthalten und vorkonfiguriert. 2011 gestartet, ist es deutlich älter als die großen Konkurrenten Angular, React und Vue.js. Dank einer kontinuierlichen Weiterentwicklung ohne harte Brüche, einem hohen Funktionsumfang und einem großen Ökosystem ist Ember eine sinnvolle Option für die Entwicklung geschäftskritischer Webanwendungen.
Am Beispiel einer Anwendung zur Anzeige und Verwaltung von Konferenzen gibt dieser Artikel einen Einstieg in die Entwicklung mit Ember. Dabei kommt die aktuelle LTS-Version 3.4 zum Einsatz. Der Code lässt sich über ix.de/ix1901124 herunterladen. Die einzelnen Schritte lassen sich anhand der Commit-History nachvollziehen.
Schneller Start mit Ember CLI
Wie mittlerweile üblich, erleichtert auch bei Ember ein Kommandozeilenwerkzeug den Start. Nach der obligatorischen Installation von Node.js und dem Node.js-Paketmanager npm oder dessen Alternative Yarn wird Ember CLI mittels
npm install -g ember-cli
oder
yarn global add ember-cli
installiert. Der Befehl
ember new ix-demo
generiert eine neue Anwendung in einem gleichnamigen Unterverzeichnis. Mit dem Flag --yarn nutzt die Ember CLI Yarn statt npm zum Download der benötigten Node.js-Module. Das so erstellte Projekt ist direkt lauffähig: Das Kommando
ember serve
stößt den Bau der Anwendung an und stellt diese per eingebautem Webserver unter http://localhost:4200 bereit.
Komponenten, Services und Routen
Eine Ember-Anwendung lässt sich am besten als Kombination von Komponenten verstehen, die durch Services mit Daten versorgt werden. Services sind Singletons, existieren also nur als ein einziges Objekt und können so den Anwendungszustand verwalten. Der zentrale Service ist der Router, der die Navigation durch die Single-Page Application übernimmt.
Für das Laden des Zustands der Anwendung – in der Regel das Abholen der Daten über eine API – sind die Routen verantwortlich. Die zugehörigen Controller und ihre Templates definieren das User Interface. Dabei enthalten die Controller meist nicht selbst die Präsentationslogik, sondern binden lediglich Komponenten mit der Anzeigelogik der Anwendung ein.
Die generierte Verzeichnisstruktur spiegelt die verschiedenen Bestandteile wider. Leider organisiert Ember den Code einer Anwendung derzeit noch entlang der technischen Bestandteile. So liegen eine Route (app/routes/my-route.js) und das zugehörige Template (app/templates/my-route.hbs) in verschiedenen Ordnern. Eine Strukturierung der Verzeichnisse entlang der geschäftlichen Bestandteile ist aber in aktiver Entwicklung.