LinuxTag 2013 - "Ember.js"

Transcript

1. Ember.js Stefan Wintermeyer stefan.wintermeyer@amooma.de @wintermeyer
2. stefan.wintermeyer@amooma.de @wintermeyer
3. stefan.wintermeyer@amooma.de @wintermeyer
4. Ember.js ist „snappy“. Warum ist das wichtig? stefan.wintermeyer@amooma.de @wintermeyer
5. 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!
6. 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
7. 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%
8. 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
9. Yo ho ho and a few billion pages of RUM How speed affects bounce rate @igrigorik
10. 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
11. 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.
12. stefan.wintermeyer@amooma.de @wintermeyer Bonus: Weniger Server
13. stefan.wintermeyer@amooma.de @wintermeyer Was ist eine Single Page Application?
14. stefan.wintermeyer@amooma.de @wintermeyer
15. 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
16. 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
17. 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
18. 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
19. stefan.wintermeyer@amooma.de @wintermeyer Vergleich klassisch vs. single page
20. stefan.wintermeyer@amooma.de @wintermeyer
21. stefan.wintermeyer@amooma.de @wintermeyer http://www.spiegel.de Klassisch auf dem Server generierte Webseite.
22. stefan.wintermeyer@amooma.de @wintermeyer http://discuss.emberjs.com Per JavaScript (Ember.js) im Browser generiert.
23. stefan.wintermeyer@amooma.de @wintermeyer Aber dafür muss man bestimmt Tonnen von JavaScript laden!?
24. stefan.wintermeyer@amooma.de @wintermeyer HTML 38,7 KB JavaScript 321,8 KB HTML 11,5 KB JavaScript 278,6 KB
25. stefan.wintermeyer@amooma.de @wintermeyer Kleinvieh macht auch Mist!
26. stefan.wintermeyer@amooma.de @wintermeyer Demo
27. stefan.wintermeyer@amooma.de @wintermeyer User anlegen
28. stefan.wintermeyer@amooma.de @wintermeyer
29. stefan.wintermeyer@amooma.de @wintermeyer Edit und Undo
30. stefan.wintermeyer@amooma.de @wintermeyer
31. stefan.wintermeyer@amooma.de @wintermeyer Transaktionen
32. stefan.wintermeyer@amooma.de @wintermeyer
33. stefan.wintermeyer@amooma.de @wintermeyer Online und Offline
34. stefan.wintermeyer@amooma.de @wintermeyer Danke!