Ember.js at FrOSCon 2013

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

[email protected] @wintermeyer Was soll das ganze Bohei um dieses JavaScript Framework?

Slide 5

Slide 5 text

[email protected] @wintermeyer Ich erstelle seit 20 Jahren Webseiten.

Slide 6

Slide 6 text

[email protected] @wintermeyer 1996

Slide 7

Slide 7 text

[email protected] @wintermeyer Bis 2013 bin ich sehr gut ohne JavaScript Framework ausgekommen.

Slide 8

Slide 8 text

[email protected] @wintermeyer Ich bin sogar viel besser ohne JavaScript, als mit JavaScript gefahren.

Slide 9

Slide 9 text

[email protected] @wintermeyer Was hat sich also geändert?

Slide 10

Slide 10 text

[email protected] @wintermeyer Evergreen Webbrowser! Man muss sich nicht mehr mit Fehlern von vor 5 Jahren beschäftigen.

Slide 11

Slide 11 text

[email protected] @wintermeyer Zur klassischen Webseite hat sich die Webapplication gesellt.

Slide 12

Slide 12 text

[email protected] @wintermeyer Mit Ember.js kann man solche Single Page Webapplications erstellen ohne das Rad neu zu erﬁnden.

Slide 13

Slide 13 text

[email protected] @wintermeyer Vergleich Klassisch vs. Single Page

Slide 14

Slide 14 text

[email protected] @wintermeyer

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

[email protected] @wintermeyer Kleinvieh macht auch Mist!

Slide 20

Slide 20 text

[email protected] @wintermeyer Ember.js ist „snappy“. Warum ist das wichtig?

Slide 21

Slide 21 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 22

Slide 22 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 23

Slide 23 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 24

Slide 24 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 25

Slide 25 text

Yo ho ho and a few billion pages of RUM How speed affects bounce rate @igrigorik

Slide 26

Slide 26 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 27

Slide 27 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 28

Slide 28 text

[email protected] @wintermeyer Woraus besteht eine Ember.js Application?

Slide 29

Slide 29 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 30

Slide 30 text

Slide 31

Slide 31 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 32

Slide 32 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 33

Slide 33 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 34

Slide 34 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 35

Slide 35 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 36

Slide 36 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 37

Slide 37 text

Slide 38

Slide 38 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 39

Slide 39 text

Slide 40

Slide 40 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 41

Slide 41 text

[email protected] @wintermeyer Demo (ix 8/2013)

Slide 42

Slide 42 text

[email protected] @wintermeyer

Slide 43

Slide 43 text

[email protected] @wintermeyer User anlegen

Slide 44

Slide 44 text

[email protected] @wintermeyer

Slide 45

Slide 45 text

[email protected] @wintermeyer Edit und Undo

Slide 46

Slide 46 text

[email protected] @wintermeyer

Slide 47

Slide 47 text

[email protected] @wintermeyer Transaktionen

Slide 48

Slide 48 text

[email protected] @wintermeyer

Slide 49

Slide 49 text

[email protected] @wintermeyer Ende der Demo (ix 8/2013)

Slide 50

Slide 50 text

[email protected] @wintermeyer Heute ist jeder fast überall online.

Slide 51

Slide 51 text

[email protected] @wintermeyer Online- und Ofﬂine- Modus bei einer Webapplikation!