Spiel, Spaß, Spannung mit ember js

Größe: px

Ab Seite anzeigen:

Download "Spiel, Spaß, Spannung mit ember js"

Johann Grosser
vor 7 Jahren
Abrufe

1 Spiel, Spaß, Spannung mit ember js

2 Spiel, Spaß, Spannung mit ember js

3 ember js A framework for creating ambitious web applications 3 Spiel, Spaß, Spannung mit ember js

4 ember js l Convention over configuration l Kein lästiger Boilerplate-code l Templatebasiert(handlebar) l Basierend auf Sproutcore 4 Spiel, Spaß, Spannung mit ember js

5 Hello world Hello world! 5 Spiel, Spaß, Spannung mit ember js

6 Templating 6 Spiel, Spaß, Spannung mit ember js

7 ember M-V- C 7 Spiel, Spaß, Spannung mit ember js

8 ember 8 Spiel, Spaß, Spannung mit ember js

9 model view controller App.Person = DS.Model.extend({ firstname: DS.attr('string'), lastname: DS.attr('string'), birthday: DS.attr('date'), fullname: function() { return this.get('firstname') + ' ' + this.get('lastname'); }.property('firstname', 'lastname') 9 Spiel, Spaß, Spannung mit ember js

10 model view controller one-to-many: App.Post = DS.Model.extend({ comments: DS.hasMany('App.Comment') App.Comment = DS.Model.extend({ post: DS.belongsTo('App.Post') 10 Spiel, Spaß, Spannung mit ember js

11 model view controller var persons = App.Person.find(); var peter = App.Person.find({ name: "Peter" peter.set( lastname', Gabriel"); peter.incrementproperty('age'); 11 Spiel, Spaß, Spannung mit ember js

12 model view controller 12 Spiel, Spaß, Spannung mit ember js

13 model view controller <html> <head> <script type="text/x-handlebars" data-template-name="say-hello"> Hello, <b>{{view.name}}</b> </script> </head> </html> 13 Spiel, Spaß, Spannung mit ember js

14 model view controller <html> <head> <script type="text/x-handlebars" data-template-name="say-hello"> Hello, <b>{{view.name}}</b> </script> </head> </html> var view = Ember.View.create({ templatename: 'say-hello', name: "Bob" 14 Spiel, Spaß, Spannung mit ember js

15 model view controller {{#view App.ClickableView}} This is a clickable area! {{/view}} App.ClickableView = Ember.View.extend({ click: function(evt) { alert("clickableview was clicked!"); } 15 Spiel, Spaß, Spannung mit ember js

16 model view controller Properties dekoriert 16 Spiel, Spaß, Spannung mit ember js

17 model view controller Application Proper Properties - transiente Zustandsinformationen - applikationsbezogen dekoriert - z.b. expandstatus eines Bereiches 17 Spiel, Spaß, Spannung mit ember js

18 model view controller App.SongController = Ember.ObjectController.extend({ soundvolume: 1 18 Spiel, Spaß, Spannung mit ember js

19 model view controller App.SongController = Ember.ObjectController.extend({ soundvolume: 1 App.SongsController = Ember.ArrayController.extend({ longsongcount: function() { var longsongs = this.filter(function(song) { return song.get('duration') > 30; return longsongs.get('length'); }.property('@each.duration') 19 Spiel, Spaß, Spannung mit ember js

20 routing 20 Spiel, Spaß, Spannung mit ember js

21 routing App.Router.map(function() { this.route("about", { path: "/about" this.route("favorites", { path: "/favs" 21 Spiel, Spaß, Spannung mit ember js

22 routing App.Router.map(function() { this.route("about", { path: "/about" this.route("favorites", { path: "/favs" URL: /about Template: about Controller: aboutcontroller Route: aboutroute 22 Spiel, Spaß, Spannung mit ember js

23 object model 23 Spiel, Spaß, Spannung mit ember js

24 object model App.Person = Ember.Object.extend({ say: function(thing) { var name = this.get('name'); alert(name + " says: " + thing); } 24 Spiel, Spaß, Spannung mit ember js

25 object model App.Person = Ember.Object.extend({ say: function(thing) { var name = this.get('name'); alert(name + " says: " + thing); } Simon says: Hi! 25 Spiel, Spaß, Spannung mit ember js

26 object model App.Person = Ember.Object.extend({ say: function(thing) { var name = this.get('name'); alert(name + " says: " + thing); } App.NicePerson = App.Person.extend({ say: function(thing) { this._super(thing + ", nice to meet you"); } 26 Spiel, Spaß, Spannung mit ember js

27 object model App.Person = Ember.Object.extend({ say: function(thing) { var name = this.get('name'); alert(name + " says: " + thing); } App.NicePerson = App.Person.extend({ say: function(thing) { this._super(thing + ", nice to meet you"); } Simon says: Hi, nice tomeetyou! 27 Spiel, Spaß, Spannung mit ember js

28 object model Person = Ember.Object.extend({ firstname: null, lastname: null, fullname: function() { var firstname = this.get('firstname'); var lastname = this.get('lastname'); return firstname + ' ' + lastname; }.property('firstname', 'lastname') var tom = Person.create({ firstname: "Tom", lastname: "Dale" tom.get('fullname') // "Tom Dale" 28 Spiel, Spaß, Spannung mit ember js

29 object model Do you remember ArrayController? App.SongsController = Ember.ArrayController.extend({ longsongcount: function() { var longsongs = this.filter(function(song) { return song.get('duration') > 30; return longsongs.get('length'); }.property('@each.duration') 29 Spiel, Spaß, Spannung mit ember js

30 object model Observer person.addobserver('fullname', function() { // deal with the change person.set('firstname', "Peter"); App.DefWeek = Ember.Object.create({ when: ' Juni' App.WebDefConf = Ember.Object.create({ whenbinding: 'App.DefWeek.when' Binding 30 Spiel, Spaß, Spannung mit ember js

31 ember data Lädt Daten aus der Persistenz / JSON Zentraler DataStore für die Anwendung DS.Model.extend() save() Adapter zur Anbindung REST Basic 31 Spiel, Spaß, Spannung mit ember js

32 handlebars expressions {{name}} block expressions {{#list people}} {{name}}{{/list}} paths {{author.name}} helpers with: {{#with author}} each: {{#each people}} Spiel, Spaß, Spannung mit ember js

33 Pitfalls 33 Spiel, Spaß, Spannung mit ember js

34 Pitfalls l Fehler im handlebar-templating schwer nachvollziehbar l Dokumentation l noch keine Finale 1.0 l viel Doku und Beispiele zu Version 0.9.x -> API breaks l emberdatanoch in einem sehr frühen Stadium 34 Spiel, Spaß, Spannung mit ember js

35 but it s worth trying! 35 Spiel, Spaß, Spannung mit ember js

Vielen Dank Bildquellen: http://www.sxc.hu/ Ben Earwicker Garrison Photography, Boise, ID www.garrisonphoto.

36 Vielen Dank Bildquellen: Ben Earwicker Garrison Photography, Boise, ID exxcellent solutions GmbH Beim Alten Fritz Ulm Ralf.Enderle@exxcellent.de 36 Spiel, Spaß, Spannung mit ember js

Ähnliche Dokumente

Rails Ruby on Rails Ajax on Rails. Clemens H. Cap http://wwwiuk.informatik.uni-rostock.de http://www.internet-prof.de

Rails Ruby on Rails Ajax on Rails Who is who? Rails Ziel: Framework für Web (2.0) Anwungen Beschleunigung der Entwicklung Konzept des Agilen Programmierens Ruby Interpretierte Sprache Rails Integrationen