×
Copy
Open
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Ember ♥ Rails DeRailed, December 2014
Slide 2
Slide 2 text
Hi. I'm Steve. @stevekinney
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Hire our students, please: http://people.turing.io/
Slide 5
Slide 5 text
Ember Basics
Slide 6
Slide 6 text
Ember draws influence from Cocoa and Rails. It began it's life as SproutCore 2.0.
Slide 7
Slide 7 text
Notable Features Two-way data binding Computed properties An emphasis on URLs Convention over configuration
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Let's look at some code.
Slide 10
Slide 10 text
Public Service Announcement: TurboLinks Considered Harmful
Slide 11
Slide 11 text
A Tale of Two MVCs
Slide 12
Slide 12 text
Ember and Rails both take MVC pretty seriously. (That said, they both have a very different take on it.)
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
The route fetches the model and sets up the controller.
Slide 16
Slide 16 text
Controllers decorate the model and handle actions.
Slide 17
Slide 17 text
Controllers are singletons.
Slide 18
Slide 18 text
Let's say you visit /notes/1 and then you visit /notes/2. It's the same controller, but the route has switched out the model.
Slide 19
Slide 19 text
Controllers maintain state.
Slide 20
Slide 20 text
Controllers can talk to each other.
Slide 21
Slide 21 text
What is Ember Data?
Slide 22
Slide 22 text
It's kind of like ActiveRecord, but for Ember—and different.
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
// models/post.js export default DS.Model.extend({ title: DS.attr('string'), body: DS.attr('text'), comments: DS.hasMany('comments') }); // models/comment.js export default DS.Model.extend({ comment: DS.attr('string'), post: DS.belongsTo('post') });
Slide 25
Slide 25 text
And Now: An Example of the AJAX Requests Generated By Ember Data
Slide 26
Slide 26 text
post.find('12').get('comments');
Slide 27
Slide 27 text
post.get('comments'); GET /posts { "posts": [ { "id": "12", "content": "Super!", "comments": ["56", "58"] } ] }
Slide 28
Slide 28 text
GET /comments?ids[]=56&ids[]=58 { "comments": [ { "id": "56", "message": "Whatever", "post": "12" }, { "id": "58", "message": "Something", "post": "12" } ] }
Slide 29
Slide 29 text
What just happened? Ember Data sent off two AJAX requests to Rails in order to build the relation in the browser.
Slide 30
Slide 30 text
And then it cached the result in the Store.
Slide 31
Slide 31 text
Let's look at some code together.
Slide 32
Slide 32 text
Ember Tooling
Slide 33
Slide 33 text
The Ember Inspector
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
It's like the Rails command line tools, but for Ember— and not that different.
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
Ember CLI allows you to proxy to a Rails server.
Slide 39
Slide 39 text
Request If Ember can't respond to a URL, it proxies it on to Rails.
Slide 40
Slide 40 text
Thank you. Questions?