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
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
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
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
Webanwendungen, die mit nativen Anwendungen konkurrieren
Jede Ansicht kann durch eine URL erreicht werden – hierin unterscheidet Ember sich von anderen Frameworks
Outlets: Der Router entscheidet, welche Templates in den {{outlet}}s geladen werden
Components: später mehr dazu
Beispiel kommt später
Eine Route lädt das Template und stellt das Model zur Verfügung
Model: Überbegriff für den Speicher für persistente Daten
Store: Enthält alle Datensätze, die in der App verfügbar sind
Model: Datentyp, definiert, wie die einzelnen Datensätze aussehen, z.B. Person mit Name + Geburtsdatum
Record: Eindeutig identifiziert durch Model-Typ + ID
Adapter: Wenn Datensatz nicht im Store. Fixture, LocalStorage, RestAdapter
Template greift auf die Eigenschaften vom Controller zu, Controller hat alle Eigenschaften des Models
ArrayController – bei einer Sammlung von Datensätzen
ObjectController – bei einzelnen Datensätzen