Vorstellung von Ember.js

748 Aufrufe

Veröffentlicht am

Eine Vorstellung von Ember.js (emberjs.com)

Veröffentlicht in: Bildung
  • Als Erste(r) kommentieren

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/

×