Ember.js: MVC-Framework für Web-Apps mit JavaScript

Kein Beitragsbild

Sven Schannak

ist ein leidenschaftlicher Web-Entrepreneur, freiberuflicher Web-Entwickler und stolzer Coding-Monkey.

In dem stetig an Beliebtheit gewinnenden MVC-Framework Ember.js sind Best Practices aus verschiedenen Frameworks und Programmiersprachen vereint. Daraus entstanden ist ein mächtiges Werkzeug mit einer relativ steilen Lernkurve. Wir wollen heute einen genaueren Blick darauf zu werfen, wie Ember.js begonnen hat, wo es heute steht und wo es sich hin entwickelt.

Ember.js - laut Entwickler ein Framework für ambitionierte Projekte
Ember.js – laut Entwickler ein Framework für ambitionierte Projekte

Als im November 2011 das Unternehmen Strobe von Facebook gekauft wurde, wurde aus Sproutcore 2.0 ein eigenständiges Projekt unter der Leitung von Yehuda Katz, Tom Dale und Peter Wagenet. Um den Neustart offensichtlich zu machen, sollte das Projekt fortan den Namen „Amber.js“ tragen, nur war der Name „Amber“ bereits vergeben. So einigte man sich kreativerweise auf „Ember.js“. Es entstand ein komplexes MVC-Framework in JavaScript, das als eines der ambitioniertesten Projekte im Web-Bereich gilt.

Zitiert man die Entwickler aus der Anfangszeit von Ember.js, dann ging es ihnen darum, Ansätze aus der Entwicklung von Desktopanwendungen in die Webentwicklung mit Javascript zu bringen. Darum finden heute in Ember.js verschiedene Konzepte Platz, die man aus diesem Bereich kennt. Die Architektur basiert auf dem MVC-Prinzip und ermöglicht es, Single-Page-Applikationen zu entwickeln. Besonders komfortabel lassen sich mit Ember klassische Master-Detail-Anwendungen umsetzen, da im Kern der Entwicklung ein gut durchdachtes Routing-Konzept und der Ansatz „convention over configuration“ steht.

Nebenbei erfüllt es prinzipiell alle Anforderungen an ein modernes JS-Framework, wie beispielsweise ein Two-Way Data-Binding. Dadurch werden Änderungen an einem Objekt sofort der gesamten Anwendung bekannt und in Echtzeit auf der Seite neu gerendert. Als Template-Engine wird standardmäßig Handlebars.js eingesetzt, welches von der Syntax her Ansätzen in anderen Frameworks ähnelt und damit keine allzu große Einarbeitungszeit benötigt.

Ember.js besitzt selber aber eine relativ steile Lernkurve. Um Ember richtig anwenden zu können, muss man die teils bereits erwähnten Konzepte gedanklich komplett durchdrungen haben, was gerade für Einsteiger zur Herausforderung werden kann. Versteht man aber die Konzepte, dann ist es auch kein Problem, mit Ember.js schnell neue Anwendungen zu entwickeln.

Convention over configuration

Eine besondere Eigenschaft von Ember.js sind die Naming Conventions. Da durch das MVC-Prinzip Logik, Daten und Darstellung voneinander getrennt wird, müssen diese späterhin wieder miteinander verknüpft werden. Die logische Verknüpfung dieser Dinge geschieht bei Ember dank der Naming Conventions relativ einfach. Wenn man zum Beispiel eine Route mit dem Namen „favorites“ einbindet, dann sucht Ember automatisch nach dem passenden Routing-Objekt „App.FavoritesRoute“ und dem richtigen Controller „App.FavoritesController“. Und ruft dann ebenfalls automatisch das passende Template mit dem Namen „favorites“ auf. Allerdings muss man auch hier aufpassen; etwa beim Routing zwischen „Ressourcen“ und „Routen“ unterscheiden.

Das kann jetzt durchaus verwirrend klingen, geht aber später wie von selbst von der Hand. Zum Einstieg empfiehlt sich aber in jedem Fall das Kapitel „Understanding Ember.js“ durchzuarbeiten.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Eine Ember-Anwendung besteht grundlegend aus folgenden Konzepten:

  • Router – kümmert sich darum, dass für eine eingegebene URL das passende Template aufgerufen wird. Dadurch können auch in einer Single-Page-Applikation URLs geteilt werden.
  • Templates – hier ist das HTML-Gerüst der Anwendung enthalten. Zu praktisch allen Templates gibt es auch ein Data-Model. Ändert sich dieses Data-Model, ändern sich auch die Daten im Template.
  • Components – mit Controls lassen sich wiederverwendbare HTML-Tags entwickeln, um Templates zu entzerren.
  • Controllers – neben dem Model kann ein Template auch einen Controller haben, welcher Daten manipuliert oder erweiterte Funktionen bereitstellt.
  • Models – enthalten die Daten und die Datenmodelle, um diese in den Templates darstellen zu können.

Ember Data

Wirklich mächtig wird Ember.js aber erst, wenn man es in Verbindung mit Ember-Data verwendet. Ember-Data kümmert sich – unabhängig von der Datenbank – darum, Daten zu erstellen, zu ändern, zu löschen oder auch lediglich darzustellen. Der Kern von Ember-Data besteht aus den Models, welche die Datensätze modellieren. Am wichtigsten ist aber, dass Ember-Data praktisch von alleine mit RESTful APIs kommunizieren kann. Im besten Fall muss nur der passende Adapter für eine API ausgewählt und die URL angegeben werden. Danach sollten die Datenmodelle selbständig mit der API arbeiten können. Man muss also keine eigenen AJAX-Calls entwickeln, um mit einer API kommunizieren zu können. Wer das Prinzip besser verstehen und ausprobieren möchte, sollte das ZUsammenspiel Firebase mit Ember.js ausprobieren.

Um bei den ganzen Konventionen und verschiedenen Konzepten den Überblick zu behalten, sollte man in der Entwicklung das Kommandozeilen-Tool Ember CLI in Betracht ziehen, welches auf Broccoli basiert. Es kümmert sich neben dem Dependency-Management auch um Vorlagen für wiederkehrende Aufgaben und führt eine übersichtliche Struktur ein. Außerdem unterstützt Ember CLI bei der testgetriebenen Entwicklung.

Ein weiteres nützliches Tool für Ember ist der Ember Inspector für Firefox und Google Chrome. Der Inspector funktioniert ähnlich wie die Entwickler-Konsolen in den Browsern. Dort kann man sich die aktuellen Daten anzeigen lassen und untersuchen, welche Templates, Models und Controller gerade aktiv sind.

Aktuell ist Ember momentan in der Version 1.8. Die Version 2.0 wurde aber bereits angekündigt. Diese enthält einige Verbesserungen und logische Änderungen, wie intuitivere Attribute Bindings. Wer sich über alle geplanten Änderungen informieren möchte, findet in den Links zum Beitrag eine ausführliche Beschreibung.

Mittlerweile gibt es auch viele Ressourcen für Autodidakten, die es vorziehen, sich Ember.js vom eigenen Schreibtisch aus beizubringen. Alleine die Dokumentation eignet sich dazu sehr gut und ist auch einer der Stärken von Ember. Wenn man erfolgreich die ersten Schritte hinter sich gebracht hat, empfiehlt es sich, das Video „Awesome Ember Tricks“ anzuschauen, um schnell ein noch besseres Verständnis für das Thema zu bekommen.

Ember.js in Zusammenarbeit mit anderen Frameworks

Für die meisten sinnvoll dafür geeigneten Frameworks und Werkzeuge gibt es bereits Erweiterungen, um besser mit Ember.js arbeiten zu können. So lässt sich mit Ember.js, jQuery Mobile und Phonegap relativ einfach eine App für mobile Geräte entwickeln. Dafür müssen nur ein paar Einstellungen für jQuery Mobile geändert werden.

Weiterhin gibt es REST-Adapter für die meisten großen Backend-Frameworks, so dass man mit Ember.js arbeiten und gleichzeitig seine vorhanden Infrastruktur nutzen kann.

Fazit

Ember lässt eigentlich keine Wünsche offen bei der Entwicklung moderner Single-Page-Applikationen, hat aber eben die erwähnte steile Lernkurve. Das ist durchaus ein spürbarer Nachteil gegenüber Alternativen wie Angular.js, welches mittlerweile, vor allem durch den einfacheren Einstieg, die Position des Platzhirsches bei den JS-Frameworks neben jQuery eingenommen hat. Ember punktet dagegen durch die starke Einbindung der Community bei der Entwicklung.

Wer mit Backend-Frameworks wie Ruby on Rails oder auch Django arbeitet und versteht, was RESTful bedeutet, sollte sich Ember.js unbedingt ansehen, da sich viele Konzepte stark ähneln und so in diesem Kontext die Lernkurve verflachen helfen.

Links zum Beitrag:

(dpe)

Sven Schannak

ist ein leidenschaftlicher Web-Entrepreneur, freiberuflicher Web-Entwickler und stolzer Coding-Monkey.