Slide 1

Slide 1 text

Ember.js Stefan Wintermeyer [email protected] @wintermeyer

Slide 2

Slide 2 text

[email protected] @wintermeyer

Slide 3

Slide 3 text

[email protected] @wintermeyer

Slide 4

Slide 4 text

Ember.js ist „snappy“. Warum ist das wichtig? [email protected] @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

[email protected] @wintermeyer Bonus: Weniger Server

Slide 13

Slide 13 text

[email protected] @wintermeyer Was ist eine Single Page Application?

Slide 14

Slide 14 text

[email protected] @wintermeyer

Slide 15

Slide 15 text

[email protected] @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

[email protected] @wintermeyer {{#each this itemController="user"}} {{#if syntacticallyPlausableEmail}} {{firstName}} {{lastName}} {{#unless isNew}} {{#linkTo 'user.edit' this activeClas {{/unless}} {{/each}} Auszug index.html

Slide 17

Slide 17 text

[email protected] @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

[email protected] @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: "[email protected]" }, { id: 2, firstName: "John", lastName: "Hall", email: "[email protected]" }, { Auszug app.js

Slide 19

Slide 19 text

[email protected] @wintermeyer Vergleich klassisch vs. single page

Slide 20

Slide 20 text

[email protected] @wintermeyer

Slide 21

Slide 21 text

[email protected] @wintermeyer http://www.spiegel.de Klassisch auf dem Server generierte Webseite.

Slide 22

Slide 22 text

[email protected] @wintermeyer http://discuss.emberjs.com Per JavaScript (Ember.js) im Browser generiert.

Slide 23

Slide 23 text

[email protected] @wintermeyer Aber dafür muss man bestimmt Tonnen von JavaScript laden!?

Slide 24

Slide 24 text

[email protected] @wintermeyer HTML 38,7 KB JavaScript 321,8 KB HTML 11,5 KB JavaScript 278,6 KB

Slide 25

Slide 25 text

[email protected] @wintermeyer Kleinvieh macht auch Mist!

Slide 26

Slide 26 text

[email protected] @wintermeyer Demo

Slide 27

Slide 27 text

[email protected] @wintermeyer User anlegen

Slide 28

Slide 28 text

[email protected] @wintermeyer

Slide 29

Slide 29 text

[email protected] @wintermeyer Edit und Undo

Slide 30

Slide 30 text

[email protected] @wintermeyer

Slide 31

Slide 31 text

[email protected] @wintermeyer Transaktionen

Slide 32

Slide 32 text

[email protected] @wintermeyer

Slide 33

Slide 33 text

[email protected] @wintermeyer Online und Offline

Slide 34

Slide 34 text

[email protected] @wintermeyer Danke!