Ember.js
07.01.2014

Ein Framework zum Erstellen
von ambitionierten Webanwendungen

Von Samuel Mehrbrodt
Bei Prof. Dr. Kne...
Warum ein Javascript-Framework?
●

Klassische Webseite:
–
–

●

Hauptsächlich statisches Anzeigen von Informationen
Evtl. ...
Warum ein Javascript-Framework?
●

Lösungsvorschlag 1: Serverseitiges Framework
–
–

●

Lange Wartezeiten
Großer Overhead
...
Gliederung
●

Vorstellung von Ember

●

Vergleich mit anderen MVC-Frameworks

●

Fazit
Ember – Kernkonzepte
●

Wird zum erstellen von
ambitionierten Webanwendungen
verwendet

●

Convention over Configuration

...
Kernkonzepte – Templates
●

HTML + Handlebars

●

Beinhaltet neben HTML
–

Ausdrücke wie {{firstName}}, um Informationen a...
Kernkonzepte – Router
●

●

Übersetzt die URL in eine Serie von verschachtelten Templates und weist
jedem ein Model zu.
Be...
Kernkonzepte – Components
●

Bestehen aus einem Template und zugehöriger JS-Logik

●

Können in andere Templates eingebund...
Kernkonzepte – Models
●

●

●

●

●

●

Zu jeder Route gehört ein Model
Model speichert persistente
Daten
Store: Zentraler...
Kernkonzepte – Controller
●

Dekorieren ein Model mit Logik
für die Anzeige
–

●

z.B. einen bestimmten Bereich
ein- oder ...
Vergleich
Backbone.js

AngularJS

Ember.js

Flexibilität

+

--

--

Erlernbarkeit

+

-

--

Routing Engine

-

+

++

Tw...
Fazit
●

Ember ist ein opiononated MVC-Framework – muss man mögen

●

Ember 1.0 im August 2013 erschienen – Ember Data noc...
Vielen Dank!
Quellen
●

http://emberjs.com/

●

IX Developer 1/2014: Javascript heute, S. 76-79

●

http://coding.smashing...
Nächste SlideShare
Wird geladen in …5
×

Vorstellung von Ember.js

654 Aufrufe

Veröffentlicht am

Eine Vorstellung von Ember.js (emberjs.com)

Veröffentlicht in: Bildung
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
654
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
5
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • 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
  • Vorstellung von Ember.js

    1. 1. Ember.js 07.01.2014 Ein Framework zum Erstellen von ambitionierten Webanwendungen Von Samuel Mehrbrodt Bei Prof. Dr. Kneisel Technische Hochschule Mittelhessen
    2. 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. 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. 4. Gliederung ● Vorstellung von Ember ● Vergleich mit anderen MVC-Frameworks ● Fazit
    5. 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. 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. 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. 8. Kernkonzepte – Components ● Bestehen aus einem Template und zugehöriger JS-Logik ● Können in andere Templates eingebunden werden
    9. 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. 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. 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. 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. 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/

    ×