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