Your SlideShare is downloading. ×
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 ...
Presented at QCon San Francisco
www.qconsf.com
Purpose of QCon
- to empower software development by facilitating the sprea...
Tom Dale

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

Wednesday, November 13, 13
QueueCon
Wednesday, November 13, 13
Wednesday, November 13, 13
Wednesday, November 13, 13
Wednesday, November 13, 13
Wednesday, November 13, 13
Building

URL-Driven
Web Apps
with Ember.js

Wednesday, November 13, 13
URL
Wednesday, November 13, 13
Wednesday, November 13, 13
Wednesday, November 13, 13
Wednesday, November 13, 13
Wednesday, November 13, 13
The

URL
Wednesday, November 13, 13
http://example.com

Browser

Wednesday, November 13, 13
Browser

HTML

Wednesday, November 13, 13

HTML

HTML
What is a

WEB APP?

Wednesday, November 13, 13
What is a

NATIVE APP?

Wednesday, November 13, 13
• Sockets
• Manual memory management
• 3D-accelerated drawing
• Access to the local filesystem
• Concurrency (via threads, ...
• Web Sockets
• Typed Arrays (manual memory
management / custom math
implementations)
• WebGL
• IndexedDB / FileReader
• W...
HTML
CSS
JavaScript
Does using
these make you
a web developer?
Wednesday, November 13, 13
No.
Wednesday, November 13, 13
You are a

WEB
DEVELOPER
if you build apps with

URLs

Wednesday, November 13, 13
MVC
Wednesday, November 13, 13
view

model

controller

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

Wednesday, November 13, 13
What is

MVC?
Wednesday, November 13, 13
draws

View

notifies

UI

Model
raw input

Wednesday, November 13, 13

Controller

updates
App.TodoView = Backbone.View.extend({
 template: _.template($('#todo').html()),
 initialize: function() {
   this.listenTo...
Data Binding
<p>{{input type="text" value=name}}</p>
<h1>{{name}}</h1>

Wednesday, November 13, 13
<p>{{input type="text" value=name}}</p>

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

Wednesday, November 13, 13
<p>{{input type="text" value=name}}</p>
ehuda
Y
me: "
{ na }
Katz"

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

Wednesday, November 13, 13
{{#if editing}}
<form {{action 'save' on='submit'}}>
{{textarea value=body}}
<button type="submit">Save</button>
</form>
{...
<div ng-if="editing">
<form ng-submit="save()">
<textarea ng-model="$parent.body"></textarea>
<button type="submit">Save</...
Data Source
<template>

Wednesday, November 13, 13

Model and/or
Controller
Ember
Advantages

Wednesday, November 13, 13
Looping: simple syntax that works
everywhere with {{#each}}
Obvious bound expressions
Not a restricted subset of JavaScrip...
But these are
minor details
(in the greater scheme of things)

Wednesday, November 13, 13
There’s a

bigger
issue

Wednesday, November 13, 13
Wednesday, November 13, 13
Model
View
Controller
Wednesday, November 13, 13
Which?
Which?
Which?

Wednesday, November 13, 13

Model
View
Controller
Nested UI

Which
<template>

Which
Model
Which
Controller

Which
<template>

Wednesday, November 13, 13

Which
Controller
...
Wednesday, November 13, 13
Wednesday, November 13, 13
Wednesday, November 13, 13
Wednesday, November 13, 13
URLs
We think the answer is

Wednesday, November 13, 13
UI
Model
+

Controller
+

<template>

Wednesday, November 13, 13
http://www.example.com/posts/1

UI
Model
++

Controller
++

<template>

Wednesday, November 13, 13
http://www.example.com/posts/1

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

UI
Model
++

Controller
++

<template>...
http://www.example.com/posts/1

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

UI
Model
++

params = { post_id: "1" }...
http://www.example.com/posts/1

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

UI
Model
++

params = { post_id: "1" }...
http://www.example.com/posts/1

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

UI
store.find('post', 1)
++

params = {...
individual
post

posts

Wednesday, November 13, 13
http://www.example.com/posts/1

App.Router.map(function() {
this.resource('posts', function() {
this.resource('post', { pa...
http://www.example.com/posts/1

App.Router.map(function() {
this.resource('posts', function() {
this.resource('post', { pa...
http://www.example.com/posts/1

App.Router.map(function() {
this.resource('posts', function() {
this.resource('post', { pa...
http://www.example.com/posts/1

App.Router.map(function() {
this.resource('posts', function() {
this.resource('post', { pa...
http://www.example.com/posts/1

App.Router.map(function() {
this.resource('posts', function() {
this.resource('post', { pa...
http://www.example.com/posts/1

App.Router.map(function() {
this.resource('posts', function() {
this.resource('post', { pa...
http://www.example.com/posts/1

App.Router.map(function() {
this.resource('posts', function() {
this.resource('post', { pa...
People think

MVC
is an

application
pattern
(but it’s not)

Wednesday, November 13, 13
MVC
is a

component
pattern
Wednesday, November 13, 13
Hardest part about building an application?

Knowing which
components to
show when

Wednesday, November 13, 13
You might call this

navigation
Wednesday, November 13, 13
Demo
Wednesday, November 13, 13
Why Ember.js?

Wednesday, November 13, 13
MVC + Data Binding
is not enough

Wednesday, November 13, 13
If you’re building larger apps, you need

app structure
& navigation
Wednesday, November 13, 13
Model
View
Controller
Wednesday, November 13, 13
Which?
Which?
Which?

Wednesday, November 13, 13

Model
View
Controller
Wednesday, November 13, 13
Flexible Data Model

Wednesday, November 13, 13
MIT-licensed
and

truly
community-driven
Wednesday, November 13, 13
Wednesday, November 13, 13
Wednesday, November 13, 13
1.0
Wednesday, November 13, 13
Wednesday, November 13, 13
emberjs.com

Wednesday, November 13, 13
Wednesday, November 13, 13
Wednesday, November 13, 13
Wednesday, November 13, 13
THANK YOU!
@tomdale
tomdale.net
plus.google.com/+TomDale

Wednesday, November 13, 13
Questions?

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

Wednesday, November 13, 13
Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/emberjsurl
Upcoming SlideShare
Loading in...5
×

Building URL-Driven Web Apps with Ember.js

918

Published on

Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/1fmWf1x.

Tom Dale examines the core architecture of a URL-driven web app built with JavaScript, then discusses a specific implementation of it with Ember.js. Filmed at qconsf.com.

Tom Dale helped create Ember.js, a JavaScript framework that brings sanity to the web. In October of 2011, he co-founded Tilde with Yehuda Katz, Leah Silber and Carl Lerche. In his spare time I run a cash-for-beer exchange program at many local San Francisco dive bars.

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
918
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Transcript of "Building URL-Driven Web Apps with Ember.js"

  1. 1. Building URL-Driven Web Apps with Ember.js Wednesday, November 13, 13
  2. 2. 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
  3. 3. 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
  4. 4. Tom Dale @tomdale tomdale.net plus.google.com/+TomDale Wednesday, November 13, 13
  5. 5. QueueCon Wednesday, November 13, 13
  6. 6. Wednesday, November 13, 13
  7. 7. Wednesday, November 13, 13
  8. 8. Wednesday, November 13, 13
  9. 9. Wednesday, November 13, 13
  10. 10. Building URL-Driven Web Apps with Ember.js Wednesday, November 13, 13
  11. 11. URL Wednesday, November 13, 13
  12. 12. Wednesday, November 13, 13
  13. 13. Wednesday, November 13, 13
  14. 14. Wednesday, November 13, 13
  15. 15. Wednesday, November 13, 13
  16. 16. The URL Wednesday, November 13, 13
  17. 17. http://example.com Browser Wednesday, November 13, 13
  18. 18. Browser HTML Wednesday, November 13, 13 HTML HTML
  19. 19. What is a WEB APP? Wednesday, November 13, 13
  20. 20. What is a NATIVE APP? Wednesday, November 13, 13
  21. 21. • Sockets • Manual memory management • 3D-accelerated drawing • Access to the local filesystem • Concurrency (via threads, green threads, etc.) • Number representations other than IEEE 754 floats Wednesday, November 13, 13
  22. 22. • Web Sockets • Typed Arrays (manual memory management / custom math implementations) • WebGL • IndexedDB / FileReader • Web Workers Wednesday, November 13, 13
  23. 23. HTML CSS JavaScript Does using these make you a web developer? Wednesday, November 13, 13
  24. 24. No. Wednesday, November 13, 13
  25. 25. You are a WEB DEVELOPER if you build apps with URLs Wednesday, November 13, 13
  26. 26. MVC Wednesday, November 13, 13
  27. 27. view model controller /photos/ /photos/3 /photos/?sort=rating /photos/3/comments/42 Wednesday, November 13, 13
  28. 28. What is MVC? Wednesday, November 13, 13
  29. 29. draws View notifies UI Model raw input Wednesday, November 13, 13 Controller updates
  30. 30. 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;  } }); Wednesday, November 13, 13
  31. 31. Data Binding <p>{{input type="text" value=name}}</p> <h1>{{name}}</h1> Wednesday, November 13, 13
  32. 32. <p>{{input type="text" value=name}}</p> <h1>{{name}}</h1> Wednesday, November 13, 13
  33. 33. <p>{{input type="text" value=name}}</p> ehuda Y me: " { na } Katz" <h1>{{name}}</h1> Wednesday, November 13, 13
  34. 34. {{#if editing}} <form {{action 'save' on='submit'}}> {{textarea value=body}} <button type="submit">Save</button> </form> {{else}} <button {{action 'edit'}}>Edit</button> {{/if}} Wednesday, November 13, 13
  35. 35. <div ng-if="editing"> <form ng-submit="save()"> <textarea ng-model="$parent.body"></textarea> <button type="submit">Save</button> </form> </div> <div ng-if="!editing"> <button ng-click="edit()">Edit</button> </div> Wednesday, November 13, 13
  36. 36. Data Source <template> Wednesday, November 13, 13 Model and/or Controller
  37. 37. Ember Advantages Wednesday, November 13, 13
  38. 38. 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 Wednesday, November 13, 13
  39. 39. But these are minor details (in the greater scheme of things) Wednesday, November 13, 13
  40. 40. There’s a bigger issue Wednesday, November 13, 13
  41. 41. Wednesday, November 13, 13
  42. 42. Model View Controller Wednesday, November 13, 13
  43. 43. Which? Which? Which? Wednesday, November 13, 13 Model View Controller
  44. 44. Nested UI Which <template> Which Model Which Controller Which <template> Wednesday, November 13, 13 Which Controller Which Model
  45. 45. Wednesday, November 13, 13
  46. 46. Wednesday, November 13, 13
  47. 47. Wednesday, November 13, 13
  48. 48. Wednesday, November 13, 13
  49. 49. URLs We think the answer is Wednesday, November 13, 13
  50. 50. UI Model + Controller + <template> Wednesday, November 13, 13
  51. 51. http://www.example.com/posts/1 UI Model ++ Controller ++ <template> Wednesday, November 13, 13
  52. 52. http://www.example.com/posts/1 this.resource('post', { path: '/posts/:post_id' }) UI Model ++ Controller ++ <template> Wednesday, November 13, 13
  53. 53. http://www.example.com/posts/1 this.resource('post', { path: '/posts/:post_id' }) UI Model ++ params = { post_id: "1" } Controller ++ <template> Wednesday, November 13, 13
  54. 54. http://www.example.com/posts/1 this.resource('post', { path: '/posts/:post_id' }) UI Model ++ params = { post_id: "1" } Controller ++ App.PostRoute = Ember.Route.extend({ model: function(params) { return this.store.find('post', params.post_id); } } Wednesday, November 13, 13 <template>
  55. 55. http://www.example.com/posts/1 this.resource('post', { path: '/posts/:post_id' }) UI store.find('post', 1) ++ params = { post_id: "1" } PostController ++ App.PostRoute = Ember.Route.extend({ model: function(params) { return this.store.find('post', params.post_id); } } Wednesday, November 13, 13 post.handlebars
  56. 56. individual post posts Wednesday, November 13, 13
  57. 57. http://www.example.com/posts/1 App.Router.map(function() { this.resource('posts', function() { this.resource('post', { path: ':post_id' }); }); }); Model Model + + + Controller Controller + + <template> <template> + Wednesday, November 13, 13
  58. 58. http://www.example.com/posts/1 App.Router.map(function() { this.resource('posts', function() { this.resource('post', { path: ':post_id' }); }); }); Model App.PostsRoute = Ember.Route.extend({ model: function() { return this.store.find('post'); } } Model + + + Controller Controller + + <template> <template> + Wednesday, November 13, 13
  59. 59. http://www.example.com/posts/1 App.Router.map(function() { this.resource('posts', function() { this.resource('post', { path: ':post_id' }); }); }); store.find('post') App.PostsRoute = Ember.Route.extend({ model: function() { return this.store.find('post'); } } Model + + + PostsController Controller + + posts.handlebars <template> + Wednesday, November 13, 13
  60. 60. http://www.example.com/posts/1 App.Router.map(function() { this.resource('posts', function() { this.resource('post', { path: ':post_id' }); }); }); store.find('post') Model + + + PostsController Controller + + posts.handlebars <template> + Wednesday, November 13, 13
  61. 61. http://www.example.com/posts/1 App.Router.map(function() { this.resource('posts', function() { this.resource('post', { path: ':post_id' }); }); }); store.find('post') params = { post_id: "1" } Model + + + PostsController Controller + + posts.handlebars <template> + Wednesday, November 13, 13
  62. 62. http://www.example.com/posts/1 App.Router.map(function() { this.resource('posts', function() { this.resource('post', { path: ':post_id' }); }); }); store.find('post') params = { post_id: "1" } Model + + + PostsController + App.PostRoute = Ember.Route.extend({ model: function(params) { return this.store.find('post', params.post_id); } } Wednesday, November 13, 13 Controller + posts.handlebars <template> +
  63. 63. http://www.example.com/posts/1 App.Router.map(function() { this.resource('posts', function() { this.resource('post', { path: ':post_id' }); }); }); store.find('post') params = { post_id: "1" } store.find('post', 1) + + + PostsController + App.PostRoute = Ember.Route.extend({ model: function(params) { return this.store.find('post', params.post_id); } } Wednesday, November 13, 13 PostController + posts.handlebars post.handlebars +
  64. 64. People think MVC is an application pattern (but it’s not) Wednesday, November 13, 13
  65. 65. MVC is a component pattern Wednesday, November 13, 13
  66. 66. Hardest part about building an application? Knowing which components to show when Wednesday, November 13, 13
  67. 67. You might call this navigation Wednesday, November 13, 13
  68. 68. Demo Wednesday, November 13, 13
  69. 69. Why Ember.js? Wednesday, November 13, 13
  70. 70. MVC + Data Binding is not enough Wednesday, November 13, 13
  71. 71. If you’re building larger apps, you need app structure & navigation Wednesday, November 13, 13
  72. 72. Model View Controller Wednesday, November 13, 13
  73. 73. Which? Which? Which? Wednesday, November 13, 13 Model View Controller
  74. 74. Wednesday, November 13, 13
  75. 75. Flexible Data Model Wednesday, November 13, 13
  76. 76. MIT-licensed and truly community-driven Wednesday, November 13, 13
  77. 77. Wednesday, November 13, 13
  78. 78. Wednesday, November 13, 13
  79. 79. 1.0 Wednesday, November 13, 13
  80. 80. Wednesday, November 13, 13
  81. 81. emberjs.com Wednesday, November 13, 13
  82. 82. Wednesday, November 13, 13
  83. 83. Wednesday, November 13, 13
  84. 84. Wednesday, November 13, 13
  85. 85. THANK YOU! @tomdale tomdale.net plus.google.com/+TomDale Wednesday, November 13, 13
  86. 86. Questions? @tomdale tomdale.net plus.google.com/+TomDale Wednesday, November 13, 13
  87. 87. Watch the video with slide synchronization on InfoQ.com! http://www.infoq.com/presentations/emberjsurl

×