Eine Vorstellung von Ember.js (emberjs.com)

1. Ember.js
07.01.2014
Ein Framework zum Erstellen
von ambitionierten Webanwendungen
Von Samuel Mehrbrodt
Bei Prof. Dr. Kneisel
Technische Hochschule Mittelhessen

2. Warum ein Javascript-Framework?
●
Klassische Webseite:
–
–
●
Hauptsächlich statisches Anzeigen von Informationen
Evtl. einige Effekte mit Javascript
Webanwendung
–
Programm im Browser
–
Viel Nutzerinteraktion
–
Wie erstellt man eine Webanwendung?

3. Warum ein Javascript-Framework?
●
Lösungsvorschlag 1: Serverseitiges Framework
–
–
●
Lange Wartezeiten
Großer Overhead
Lösungsvorschlag 2: Serverseitiges Framework, einzelne Teile dynamisch
machen
–
●
Datenkonsistenz: DOM, Javascript-Variablen, Datenbank
Lösungsvorschlag 3: Single-Page-App
–
Logik im Browser (Javascript)
–
Entwicklung mit MVC
→ Ember

4. Gliederung
●
Vorstellung von Ember
●
Vergleich mit anderen MVC-Frameworks
●
Fazit

5. Ember – Kernkonzepte
●
Wird zum erstellen von
ambitionierten Webanwendungen
verwendet
●
Convention over Configuration
●
Alles dreht sich um die URL
●
Eine Ember-Anwendung besteht
aus
–
Templates
–
Router
–
Components
–
Models
–
Controllers
Bildquelle:
http://coding.smashingmagazine.com/2013/11/07/an-in-depth-introduction-to
-ember-js
, 04.01.2014

6. Kernkonzepte – Templates
●
HTML + Handlebars
●
Beinhaltet neben HTML
–
Ausdrücke wie {{firstName}}, um Informationen aus dem Model anzuzeigen
–
Schleifen {{each}}, Bedingte Ausdrücke {{#if}} {{#else}} {{#unless}}
–
Links {{#link-to}}
–
Outlets {{outlet}}, ein Platzhalter für weitere Templates
–
Components, selbsterstellte HTML-Elemente

7. Kernkonzepte – Router
●
●
Übersetzt die URL in eine Serie von verschachtelten Templates und weist
jedem ein Model zu.
Beim Navigieren hält der Router die URL im Browser aktuell
Bildquelle: http://emberjs.com/guides/routing/defining-your-routes/
07.01.2014

8. Kernkonzepte – Components
●
Bestehen aus einem Template und zugehöriger JS-Logik
●
Können in andere Templates eingebunden werden

9. Kernkonzepte – Models
●
●
●
●
●
●
Zu jeder Route gehört ein Model
Model speichert persistente
Daten
Store: Zentraler Datenspeicher
Model: Klasse zur Repräsentation
der Daten
Record: Datensatz, Instanz eines
Model
Adapter: Übersetzt
Datenanfragen in Serveranfragen
Bildquelle:
http://coding.smashingmagazine.com/2013/11/07/an-in-depth-intr
oduction-to-ember-js/
04.01.2014

10. Kernkonzepte – Controller
●
Dekorieren ein Model mit Logik
für die Anzeige
–
●
z.B. einen bestimmten Bereich
ein- oder ausblenden;
Suchbegriff speichern
ObjectController vs
ArrayController
Bildquelle: http://emberjs.com/guides/controllers/
04.01.2014

11. Vergleich
Backbone.js
AngularJS
Ember.js
Flexibilität
+
--
--
Erlernbarkeit
+
-
--
Routing Engine
-
+
++
Two Way Bindings
--
++
++
Abbildung von
Datenbank-Relationen im
Model
--
--
+
Programmierproduktivität
-
+
++
Größe der
Entwickler-Community
++
+
+
Geschwindigkeit
+
0
+
Sicherheit vor
Speicherlecks
-
++
++
Automatisch testbar
+
+
++
Quelle: IX Developer 1/2014, S. 76

12. Fazit
●
Ember ist ein opiononated MVC-Framework – muss man mögen
●
Ember 1.0 im August 2013 erschienen – Ember Data noch Beta
●
Gute Dokumentation – noch kleine Community
→ Ich würd's nehmen!
Quelle: http://www.ohloh.net/p/emberjs

13. Vielen Dank!
Quellen
●
http://emberjs.com/
●
IX Developer 1/2014: Javascript heute, S. 76-79
●
http://coding.smashingmagazine.com/2013/11/07/an-in-depth-introducti
on-to-ember-js/