Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Ember and Rails
Search
Steve Kinney
December 17, 2014
0
74
Ember and Rails
Steve Kinney
December 17, 2014
Tweet
Share
More Decks by Steve Kinney
See All by Steve Kinney
Web Security, Frontend Masters
stevekinney
0
190
Making Music with the Web Audio API, JSConf Colombia 2023
stevekinney
0
37
React and TypeScript, Turing School
stevekinney
0
180
Redux Workshop, 2021-05-05
stevekinney
2
1.9k
TypeScript and React Utility Types
stevekinney
1
170
A Gentle Introduction to GraphQL Resolvers
stevekinney
1
140
React State
stevekinney
11
10k
React State: useEffect and Custom Hooks
stevekinney
0
210
Building Modular Frontend Architectures
stevekinney
1
420
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
A better future with KSS
kneath
231
17k
4 Signs Your Business is Dying
shpigford
178
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Bash Introduction
62gerente
607
210k
RailsConf 2023
tenderlove
16
720
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Leading Effective Engineering Teams 2024
addyosmani
3
300
The Invisible Side of Design
smashingmag
294
50k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
Transcript
Ember ♥ Rails DeRailed, December 2014
Hi. I'm Steve. @stevekinney
None
Hire our students, please: http://people.turing.io/
Ember Basics
Ember draws influence from Cocoa and Rails. It began it's
life as SproutCore 2.0.
Notable Features Two-way data binding Computed properties An emphasis on
URLs Convention over configuration
None
Let's look at some code.
Public Service Announcement: TurboLinks Considered Harmful
A Tale of Two MVCs
Ember and Rails both take MVC pretty seriously. (That said,
they both have a very different take on it.)
None
None
The route fetches the model and sets up the controller.
Controllers decorate the model and handle actions.
Controllers are singletons.
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.
Controllers maintain state.
Controllers can talk to each other.
What is Ember Data?
It's kind of like ActiveRecord, but for Ember—and different.
None
// 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') });
And Now: An Example of the AJAX Requests Generated By
Ember Data
post.find('12').get('comments');
post.get('comments'); GET /posts { "posts": [ { "id": "12", "content":
"Super!", "comments": ["56", "58"] } ] }
GET /comments?ids[]=56&ids[]=58 { "comments": [ { "id": "56", "message": "Whatever",
"post": "12" }, { "id": "58", "message": "Something", "post": "12" } ] }
What just happened? Ember Data sent off two AJAX requests
to Rails in order to build the relation in the browser.
And then it cached the result in the Store.
Let's look at some code together.
Ember Tooling
The Ember Inspector
None
None
It's like the Rails command line tools, but for Ember—
and not that different.
None
Ember CLI allows you to proxy to a Rails server.
Request If Ember can't respond to a URL, it proxies
it on to Rails.
Thank you. Questions?