Your SlideShare is downloading. ×
Building URL-Driven Web Apps with Ember.js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Building URL-Driven Web Apps with Ember.js

833
views

Published on

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

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
833
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Building URL-Driven Web Apps with Ember.js Wednesday, November 13, 13
  • 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. 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. Tom Dale @tomdale tomdale.net plus.google.com/+TomDale Wednesday, November 13, 13
  • 5. QueueCon Wednesday, November 13, 13
  • 6. Wednesday, November 13, 13
  • 7. Wednesday, November 13, 13
  • 8. Wednesday, November 13, 13
  • 9. Wednesday, November 13, 13
  • 10. Building URL-Driven Web Apps with Ember.js Wednesday, November 13, 13
  • 11. URL Wednesday, November 13, 13
  • 12. Wednesday, November 13, 13
  • 13. Wednesday, November 13, 13
  • 14. Wednesday, November 13, 13
  • 15. Wednesday, November 13, 13
  • 16. The URL Wednesday, November 13, 13
  • 17. http://example.com Browser Wednesday, November 13, 13
  • 18. Browser HTML Wednesday, November 13, 13 HTML HTML
  • 19. What is a WEB APP? Wednesday, November 13, 13
  • 20. What is a NATIVE APP? Wednesday, November 13, 13
  • 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. • Web Sockets • Typed Arrays (manual memory management / custom math implementations) • WebGL • IndexedDB / FileReader • Web Workers Wednesday, November 13, 13
  • 23. HTML CSS JavaScript Does using these make you a web developer? Wednesday, November 13, 13
  • 24. No. Wednesday, November 13, 13
  • 25. You are a WEB DEVELOPER if you build apps with URLs Wednesday, November 13, 13
  • 26. MVC Wednesday, November 13, 13
  • 27. view model controller /photos/ /photos/3 /photos/?sort=rating /photos/3/comments/42 Wednesday, November 13, 13
  • 28. What is MVC? Wednesday, November 13, 13
  • 29. draws View notifies UI Model raw input Wednesday, November 13, 13 Controller updates
  • 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. Data Binding <p>{{input type="text" value=name}}</p> <h1>{{name}}</h1> Wednesday, November 13, 13
  • 32. <p>{{input type="text" value=name}}</p> <h1>{{name}}</h1> Wednesday, November 13, 13
  • 33. <p>{{input type="text" value=name}}</p> ehuda Y me: " { na } Katz" <h1>{{name}}</h1> Wednesday, November 13, 13
  • 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. <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. Data Source <template> Wednesday, November 13, 13 Model and/or Controller
  • 37. Ember Advantages Wednesday, November 13, 13
  • 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. But these are minor details (in the greater scheme of things) Wednesday, November 13, 13
  • 40. There’s a bigger issue Wednesday, November 13, 13
  • 41. Wednesday, November 13, 13
  • 42. Model View Controller Wednesday, November 13, 13
  • 43. Which? Which? Which? Wednesday, November 13, 13 Model View Controller
  • 44. Nested UI Which <template> Which Model Which Controller Which <template> Wednesday, November 13, 13 Which Controller Which Model
  • 45. Wednesday, November 13, 13
  • 46. Wednesday, November 13, 13
  • 47. Wednesday, November 13, 13
  • 48. Wednesday, November 13, 13
  • 49. URLs We think the answer is Wednesday, November 13, 13
  • 50. UI Model + Controller + <template> Wednesday, November 13, 13
  • 51. http://www.example.com/posts/1 UI Model ++ Controller ++ <template> Wednesday, November 13, 13
  • 52. http://www.example.com/posts/1 this.resource('post', { path: '/posts/:post_id' }) UI Model ++ Controller ++ <template> Wednesday, November 13, 13
  • 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. 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. 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. individual post posts Wednesday, November 13, 13
  • 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. 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. 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. 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. 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. 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. 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. People think MVC is an application pattern (but it’s not) Wednesday, November 13, 13
  • 65. MVC is a component pattern Wednesday, November 13, 13
  • 66. Hardest part about building an application? Knowing which components to show when Wednesday, November 13, 13
  • 67. You might call this navigation Wednesday, November 13, 13
  • 68. Demo Wednesday, November 13, 13
  • 69. Why Ember.js? Wednesday, November 13, 13
  • 70. MVC + Data Binding is not enough Wednesday, November 13, 13
  • 71. If you’re building larger apps, you need app structure & navigation Wednesday, November 13, 13
  • 72. Model View Controller Wednesday, November 13, 13
  • 73. Which? Which? Which? Wednesday, November 13, 13 Model View Controller
  • 74. Wednesday, November 13, 13
  • 75. Flexible Data Model Wednesday, November 13, 13
  • 76. MIT-licensed and truly community-driven Wednesday, November 13, 13
  • 77. Wednesday, November 13, 13
  • 78. Wednesday, November 13, 13
  • 79. 1.0 Wednesday, November 13, 13
  • 80. Wednesday, November 13, 13
  • 81. emberjs.com Wednesday, November 13, 13
  • 82. Wednesday, November 13, 13
  • 83. Wednesday, November 13, 13
  • 84. Wednesday, November 13, 13
  • 85. THANK YOU! @tomdale tomdale.net plus.google.com/+TomDale Wednesday, November 13, 13
  • 86. Questions? @tomdale tomdale.net plus.google.com/+TomDale Wednesday, November 13, 13
  • 87. Watch the video with slide synchronization on InfoQ.com! http://www.infoq.com/presentations/emberjsurl

×