Building URL-Driven Web Apps with Ember.js

Building

URL-Driven
Web Apps
with Ember.js

Wednesday, November 13, 13

Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/emberjs-url

InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• News 15-20 / week
• Articles 3-4 / week
• Presentations (videos) 12-15 / week
• Interviews 2-3 / week
• Books 1 / month

Presented at QCon San Francisco
www.qconsf.com
Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide

Tom Dale

@tomdale
tomdale.net
plus.google.com/+TomDale


QueueCon

URL

The

URL

http://example.com

Browser


Browser

HTML


HTML

HTML

What is a

WEB APP?


What is a

NATIVE APP?


• Sockets
• Manual memory management
• 3D-accelerated drawing
• Access to the local ﬁlesystem
• Concurrency (via threads, green

threads, etc.)
• Number representations other than
IEEE 754 ﬂoats


• Web Sockets
• Typed Arrays (manual memory
management / custom math
implementations)
• WebGL
• IndexedDB / FileReader
• Web Workers


HTML
CSS
JavaScript
Does using
these make you
a web developer?

No.

You are a

WEB
DEVELOPER
if you build apps with

URLs


MVC

view

model

controller

/photos/
/photos/3
/photos/?sort=rating
/photos/3/comments/42


What is

MVC?

draws

View

notiﬁes

UI

Model
raw input


Controller

updates

App.TodoView = Backbone.View.extend({
template: _.template($('#todo').html()),
initialize: function() {
   this.listenTo(this.model, 'change', this.render);
   this.listenTo(this.model, 'destroy', this.remove);
},
render: function() {
   this.$el.html(this.template(this.model.toJSON()));
   return this;
}
});


Data Binding
<p>{{input type="text" value=name}}</p>
<h1>{{name}}</h1>


ehuda
Y
me: "
{ na }
Katz"

<h1>{{name}}</h1>


{{#if editing}}
<form {{action 'save' on='submit'}}>
{{textarea value=body}}
<button type="submit">Save</button>
</form>
{{else}}
<button {{action 'edit'}}>Edit</button>
{{/if}}


Data Source
<template>


Model and/or
Controller

Ember
Advantages


Looping: simple syntax that works
everywhere with {{#each}}
Obvious bound expressions
Not a restricted subset of JavaScript
No Flash of Unbound Content
Precompiled templates are fast, easy
and idiomatic


But these are
minor details
(in the greater scheme of things)


There’s a

bigger
issue


Model
View
Controller

Which?
Which?
Which?


Model
View
Controller

Nested UI

Which
<template>

Which
Model
Which
Controller

Which
<template>


Which
Controller

Which
Model

URLs
We think the answer is


UI
Model
+

Controller
+

<template>


http://www.example.com/posts/1

UI
Model
++

Controller
++

<template>



this.resource('post', { path: '/posts/:post_id' })

UI
Model
++

Controller
++

<template>




UI
Model
++

params = { post_id: "1" }

Controller
++

<template>




UI
Model
++


Controller
++

App.PostRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('post', params.post_id);
}
}


<template>



UI
store.ﬁnd('post', 1)
++


PostController
++

}
}


post.handlebars

individual
post

posts



App.Router.map(function() {
this.resource('posts', function() {
this.resource('post', { path: ':post_id' });
});
});

Model

Model

+

+

+
Controller

Controller

+

+

<template>

<template>

+



});
});

Model
App.PostsRoute = Ember.Route.extend({
model: function() {
return this.store.find('post');
}
}

Model

+

+

+
Controller

Controller

+

+

<template>

<template>

+



});
});

store.ﬁnd('post')
App.PostsRoute = Ember.Route.extend({
model: function() {
return this.store.find('post');
}
}

Model

+

+

+
PostsController

Controller

+

+

posts.handlebars

<template>

+



});
});

store.ﬁnd('post')

Model

+

+

+
PostsController

Controller

+

+

posts.handlebars

<template>

+



});
});

store.ﬁnd('post')

Model

+

+

+
PostsController
+
}
}


Controller

+

posts.handlebars

<template>

+


});
});

store.ﬁnd('post')

store.ﬁnd('post', 1)

+

+

+

PostsController

+
}
}


PostController

+

posts.handlebars

post.handlebars

+

People think

MVC
is an

application
pattern
(but it’s not)


MVC
is a

component
pattern

Hardest part about building an application?

Knowing which
components to
show when


You might call this

navigation

Demo

Why Ember.js?


MVC + Data Binding
is not enough


If you’re building larger apps, you need

app structure
& navigation

Flexible Data Model


MIT-licensed
and

truly
community-driven

1.0

emberjs.com


THANK YOU!
@tomdale
tomdale.net


Questions?

@tomdale
tomdale.net


Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/emberjsurl

Building URL-Driven Web Apps with Ember.js

Recomendados

Recomendados

Más contenido relacionado

Más de C4Media

Más de C4Media (20)

Último

Último (20)

Building URL-Driven Web Apps with Ember.js