Ember.js at FrOSCon 2013

Single Page Application mit Ember.js erstellen. #froscon #froscon8

Transcript

1. Ember.js Stefan Wintermeyer stefan.wintermeyer@amooma.de @wintermeyer
2. stefan.wintermeyer@amooma.de @wintermeyer
3. stefan.wintermeyer@amooma.de @wintermeyer
4. stefan.wintermeyer@amooma.de @wintermeyer Was soll das ganze Bohei um dieses JavaScript Framework?
5. stefan.wintermeyer@amooma.de @wintermeyer Ich erstelle seit 20 Jahren Webseiten.
6. stefan.wintermeyer@amooma.de @wintermeyer 1996
7. stefan.wintermeyer@amooma.de @wintermeyer Bis 2013 bin ich sehr gut ohne JavaScript Framework ausgekommen.
8. stefan.wintermeyer@amooma.de @wintermeyer Ich bin sogar viel besser ohne JavaScript, als mit JavaScript gefahren.
9. stefan.wintermeyer@amooma.de @wintermeyer Was hat sich also geändert?
10. stefan.wintermeyer@amooma.de @wintermeyer Evergreen Webbrowser! Man muss sich nicht mehr mit Fehlern von vor 5 Jahren beschäftigen.
11. stefan.wintermeyer@amooma.de @wintermeyer Zur klassischen Webseite hat sich die Webapplication gesellt.
12. stefan.wintermeyer@amooma.de @wintermeyer Mit Ember.js kann man solche Single Page Webapplications erstellen ohne das Rad neu zu erfinden.
13. stefan.wintermeyer@amooma.de @wintermeyer Vergleich Klassisch vs. Single Page
14. stefan.wintermeyer@amooma.de @wintermeyer
15. stefan.wintermeyer@amooma.de @wintermeyer http://www.spiegel.de Klassisch auf dem Server generierte Webseite.
16. stefan.wintermeyer@amooma.de @wintermeyer http://discuss.emberjs.com Per JavaScript (Ember.js) im Browser generiert.
17. stefan.wintermeyer@amooma.de @wintermeyer Aber dafür muss man bestimmt Schiffsladungen an JavaScript laden!?
18. stefan.wintermeyer@amooma.de @wintermeyer HTML 38,7 KB JavaScript 321,8 KB HTML 11,5 KB JavaScript 278,6 KB
19. stefan.wintermeyer@amooma.de @wintermeyer Kleinvieh macht auch Mist!
20. stefan.wintermeyer@amooma.de @wintermeyer Ember.js ist „snappy“. Warum ist das wichtig?
21. What's the impact of slow sites? Lower conversions and engagement, higher bounce rates... Ilya Grigorik @igrigorik Make The Web Faster, Google Have a look at Ilya‘s book!
22. Usability Engineering 101 Delay User reaction 0 - 100 ms Instant 100 - 300 ms Feels sluggish 300 - 1000 ms Machine is working... 1 s+ Mental context switch 10 s+ I'll come back later... Stay under 250 ms to feel "fast". Stay under 1000 ms to keep users attention. @igrigorik
23. Performance Related Changes and their User Impact Web Search Delay Experiment @igrigorik • The cost of delay increases over time and persists • Delays under half a second impact business metrics • "Speed matters" is not just lip service Type of Delay Delay (ms) Duration (weeks) Impact on Avg. Daily Searches Pre-header 50 4 Not measurable Pre-header 100 4 -0.20% Post-header 200 6 -0.59% Post-header 400 6 -0.59% Post-ads 200 4 -0.30%
24. Performance Related Changes and their User Impact Server Delays Experiment • Strong negative impacts • Roughly linear changes with increasing delay • Time to Click changed by roughly double the delay @igrigorik
25. Yo ho ho and a few billion pages of RUM How speed affects bounce rate @igrigorik
26. For many, mobile is the one and only internet device! Country Mobile-only users Egypt 70% India 59% South Africa 57% Indonesia 44% United States 25% onDevice Research @igrigorik
27. The (short) life of our 1000 ms budget 3G (200 ms RTT) 4G(80 ms RTT) Control plane (200-2500 ms) (50-100 ms) DNS lookup 200 ms 80 ms TCP Connection 200 ms 80 ms TLS handshake (200-400 ms) (80-160 ms) HTTP request 200 ms 80 ms Leftover budget 0-400 ms 500-760 ms Network overhead of one HTTP request! @igrigorik The browser needs 100 - 150ms to render the page.
28. stefan.wintermeyer@amooma.de @wintermeyer Woraus besteht eine Ember.js Application?
29. stefan.wintermeyer@amooma.de @wintermeyer userlist !"" css # !"" bootstrap-responsive.css # $"" bootstrap.css !"" img !"" index.html $"" js !"" app.js $"" libs !"" ember.js !"" ember-data.js !"" handlebars.js !"" jquery-1.9.1.js $"" md5.js
30. stefan.wintermeyer@amooma.de @wintermeyer userlist !"" css # !"" bootstrap-responsive.css # $"" bootstrap.css !"" img !"" index.html $"" js !"" app.js $"" libs !"" ember.js !"" ember-data.js !"" handlebars.js !"" jquery-1.9.1.js $"" md5.js
31. stefan.wintermeyer@amooma.de @wintermeyer <tbody> {{#each this itemController="user"}} <tr {{bindAttr class="isDirty:warning"}}> <td> {{#if syntacticallyPlausableEmail}} <img {{bindAttr src="gravatarUrl"}} w {{/if}} </td> <td>{{firstName}}</td> <td>{{lastName}}</td> <td> {{#unless isNew}} {{#linkTo 'user.edit' this activeClas {{/unless}} </td> </tr> {{/each}} </tbody> Auszug index.html
32. stefan.wintermeyer@amooma.de @wintermeyer <tbody> {{#each this itemController="user"}} <tr {{bindAttr class="isDirty:warning"}}> <td> {{#if syntacticallyPlausableEmail}} <img {{bindAttr src="gravatarUrl"}} w {{/if}} </td> <td>{{firstName}}</td> <td>{{lastName}}</td> <td> {{#unless isNew}} {{#linkTo 'user.edit' this activeClas {{/unless}} </td> </tr> {{/each}} </tbody> Auszug index.html
33. stefan.wintermeyer@amooma.de @wintermeyer <tbody> {{#each this itemController="user"}} <tr {{bindAttr class="isDirty:warning"}}> <td> {{#if syntacticallyPlausableEmail}} <img {{bindAttr src="gravatarUrl"}} w {{/if}} </td> <td>{{firstName}}</td> <td>{{lastName}}</td> <td> {{#unless isNew}} {{#linkTo 'user.edit' this activeClas {{/unless}} </td> </tr> {{/each}} </tbody> Auszug index.html
34. stefan.wintermeyer@amooma.de @wintermeyer <tbody> {{#each this itemController="user"}} <tr {{bindAttr class="isDirty:warning"}}> <td> {{#if syntacticallyPlausableEmail}} <img {{bindAttr src="gravatarUrl"}} w {{/if}} </td> <td>{{firstName}}</td> <td>{{lastName}}</td> <td> {{#unless isNew}} {{#linkTo 'user.edit' this activeClas {{/unless}} </td> </tr> {{/each}} </tbody> Auszug index.html
35. stefan.wintermeyer@amooma.de @wintermeyer <tbody> {{#each this itemController="user"}} <tr {{bindAttr class="isDirty:warning"}}> <td> {{#if syntacticallyPlausableEmail}} <img {{bindAttr src="gravatarUrl"}} w {{/if}} </td> <td>{{firstName}}</td> <td>{{lastName}}</td> <td> {{#unless isNew}} {{#linkTo 'user.edit' this activeClas {{/unless}} </td> </tr> {{/each}} </tbody> Auszug index.html
36. stefan.wintermeyer@amooma.de @wintermeyer <tbody> {{#each this itemController="user"}} <tr {{bindAttr class="isDirty:warning"}}> <td> {{#if syntacticallyPlausableEmail}} <img {{bindAttr src="gravatarUrl"}} w {{/if}} </td> <td>{{firstName}}</td> <td>{{lastName}}</td> <td> {{#unless isNew}} {{#linkTo 'user.edit' this activeClas {{/unless}} </td> </tr> {{/each}} </tbody> Auszug index.html
37. stefan.wintermeyer@amooma.de @wintermeyer userlist !"" css # !"" bootstrap-responsive.css # $"" bootstrap.css !"" img !"" index.html $"" js !"" app.js $"" libs !"" ember.js !"" ember-data.js !"" handlebars.js !"" jquery-1.9.1.js $"" md5.js
38. stefan.wintermeyer@amooma.de @wintermeyer App = Ember.Application.create(); App.Router.map(function() { this.resource('about'); this.resource('users', function() { this.route('new'); this.resource('user', { path: ':user_id' }, this.route('edit'); }); }) }); App.UsersRoute = Ember.Route.extend({ model: function() { return App.User.find(); } }); Auszug app.js
39. stefan.wintermeyer@amooma.de @wintermeyer userlist !"" css # !"" bootstrap-responsive.css # $"" bootstrap.css !"" img !"" index.html $"" js !"" app.js $"" libs !"" ember.js !"" ember-data.js !"" handlebars.js !"" jquery-1.9.1.js $"" md5.js
40. stefan.wintermeyer@amooma.de @wintermeyer App.User = DS.Model.extend({ firstName: DS.attr('string'), lastName: DS.attr('string'), email: DS.attr('sting') }); App.User.FIXTURES = [{ id: 1, firstName: "Linus", lastName: "Torvalds", email: "torvalds@linux-foundation.org" }, { id: 2, firstName: "John", lastName: "Hall", email: "maddog@li.org" }, { Auszug app.js
41. stefan.wintermeyer@amooma.de @wintermeyer Demo (ix 8/2013)
42. stefan.wintermeyer@amooma.de @wintermeyer
43. stefan.wintermeyer@amooma.de @wintermeyer User anlegen
44. stefan.wintermeyer@amooma.de @wintermeyer
45. stefan.wintermeyer@amooma.de @wintermeyer Edit und Undo
46. stefan.wintermeyer@amooma.de @wintermeyer
47. stefan.wintermeyer@amooma.de @wintermeyer Transaktionen
48. stefan.wintermeyer@amooma.de @wintermeyer
49. stefan.wintermeyer@amooma.de @wintermeyer Ende der Demo (ix 8/2013)
50. stefan.wintermeyer@amooma.de @wintermeyer Heute ist jeder fast überall online.
51. stefan.wintermeyer@amooma.de @wintermeyer Online- und Offline- Modus bei einer Webapplikation!
52. stefan.wintermeyer@amooma.de @wintermeyer Mobile First
53. stefan.wintermeyer@amooma.de @wintermeyer Danke!