Spiel, Spaß, Spannung mit ember js

Transkript

1 Spiel, Spaß, Spannung mit ember js

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

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

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

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

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

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

8 Hello world Hello world! <script> App = Ember.Application.create(); App.Router.map(function() { this.route('hi'); }); </script> <script type="text/x-handlebars" data-template-name='index'> <p>{{#linkto hi}}welcome to web developer conference{{/linkto}}</p> </script> <script type="text/x-handlebars" data-template-name='hi'> Hello world! </script> 8 Spiel, Spaß, Spannung mit ember js

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

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

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

12 Templating - handlebar <html> <body> <script type="text/x-handlebars"> Hello, <strong>{{firstname}} {{lastname}}</strong>! </script> </body> </html> 12 Spiel, Spaß, Spannung mit ember js

13 Templating - handlebar <html> <body> <script type="text/x-handlebars"> Hello, <strong>{{firstname}} {{lastname}}</strong>! </script> </body> </html> <ul> {{#each people}} <li>hello, {{name}}!</li> {{/each}} </ul> 13 Spiel, Spaß, Spannung mit ember js

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

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

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

17 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') }); 17 Spiel, Spaß, Spannung mit ember js

19 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') }); 19 Spiel, Spaß, Spannung mit ember js

20 model view controller var persons = App.Person.find(); var peter = App.Person.find({ name: "Peter" }); 20 Spiel, Spaß, Spannung mit ember js

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

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

24 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" }); 24 Spiel, Spaß, Spannung mit ember js

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

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

27 Quiztime Quiztime! 27 Spiel, Spaß, Spannung mit ember js

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

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

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

31 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') }); 31 Spiel, Spaß, Spannung mit ember js

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

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

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

35 routing Browser-Back oder Bookmark 35 Spiel, Spaß, Spannung mit ember js

36 routing Browser-Back oder Bookmark Interaktive Seitennavigation <nav> {{#linkto "about"}}about{{/linkto}} {{#linkto "favorites"}}favorites{{/linkto}} </nav> 36 Spiel, Spaß, Spannung mit ember js

37 routing Browser-Back oder Bookmark Interaktive Seitennavigation <nav> {{#linkto "about"}}about{{/linkto}} {{#linkto "favorites"}}favorites{{/linkto}} </nav> 37 Spiel, Spaß, Spannung mit ember js

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

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

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

41 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"); } }); 41 Spiel, Spaß, Spannung mit ember js

42 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 to meet you! 42 Spiel, Spaß, Spannung mit ember js

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

44 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" 44 Spiel, Spaß, Spannung mit ember js

45 object model Do you remember ArrayController? 45 Spiel, Spaß, Spannung mit ember js

46 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') }); 46 Spiel, Spaß, Spannung mit ember js

47 object model Observer person.addobserver('fullname', function() { // deal with the change }); person.set('firstname', "Peter"); 47 Spiel, Spaß, Spannung mit ember js

48 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 48 Spiel, Spaß, Spannung mit ember js

49 ember data 49 Spiel, Spaß, Spannung mit ember js

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

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

54 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

55 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

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

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

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

59 Vergleich l l l l backbone sehr flexibel, jedoch kaum conventions kann zu unwartbarem Spaghetti-code führen viel boilerplate-code notwendig gute Dokumentation und Community knockout einfach zu erlernen kompatibel mit vielen anderen Frameworks data-access und URL-routing nicht direkt enthalten angular viele Features, aber steile Lernkurve wenig boilerplate gute Testintegration ember integriertes templating (handlebar) kaum boilerplate keine integrierte Testingsuite wie z.b. angular anfangs steile Lernkurve 59 Spiel, Spaß, Spannung mit ember js

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