Vorstellung von Ember.js
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Vorstellung von Ember.js

on

  • 299 views

Eine Vorstellung von Ember.js (emberjs.com)

Eine Vorstellung von Ember.js (emberjs.com)

Statistics

Views

Total Views
299
Views on SlideShare
299
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

Vorstellung von Ember.js Presentation Transcript

  • 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/