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 2.0 in Practice
Search
tomdale
December 02, 2014
Programming
28
7.3k
Ember 2.0 in Practice
A brief tour of some of the new ideas in Ember 2.0, and how you can start adopting them today.
tomdale
December 02, 2014
Tweet
Share
More Decks by tomdale
See All by tomdale
EmberConf 2019 Keynote
tomdale
1
760
EmberConf 2018 Keynote
tomdale
4
1.8k
Secrets of the DOM Virtual Machine
tomdale
1
1k
EmberCamp London Keynote 2016
tomdale
11
4.9k
Hella Good Ember
tomdale
7
1.2k
EmberConf 2016 Keynote
tomdale
12
2.4k
Introduction to FastBoot - Global Ember Meetup
tomdale
1
170
An Update on FastBoot
tomdale
2
980
Progressive Enhancement is Dead, Long Live Progressive Enhancement
tomdale
1
890
Other Decks in Programming
See All in Programming
Design Foundational Data Engineering Observability
sucitw
2
150
Claude Codeで挑むOSSコントリビュート
eycjur
0
190
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
230
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
240
RDoc meets YARD
okuramasafumi
4
160
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
25
9.7k
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
160
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
More Approvers for Greater OSS and Japan Community
tkikuc
1
110
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
360
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
300
Featured
See All Featured
Producing Creativity
orderedlist
PRO
347
40k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
A designer walks into a library…
pauljervisheath
207
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Transcript
I N P R A C T I C E
E M B E R 2 . 0
W H AT ’ S N E W ?
The thinnest, lightest, most powerful Ember ever.
S I M P L I F I E D
R E F I N E D M O R E P O W E R F U L
M A N Y F E AT U R E
S AVA I L A B L E T O D AY
S TA B I L I T Y W I
T H O U T S TA G N AT I O N
1.8 2.0 1.9 1.10 1.11 1.12 … All new features
developed on master. No big-bang rewrite. Perhaps counterintuitively, 2.0 doesn't add new features; it simply removes long-deprecated ones.
Stable Beta Canary
O N E TA K E A WAY
– T O M D A L E “Use Ember
CLI today.”
• Many new features will require Ember CLI • Brings
convention over configuration to the ecosystem
None
N O T J U S T J AVA S
C R I P T • Enhance builds (ESNext, linters, CSS preprocessors) • Add deployment targets (Parse, Firebase, Divshot) • CSS (Bootstrap, Foundation, Pure)
N E W I D E A S
S TA R T A D O P T I
N G T O D AY N O T O N LY W I L L Y O U R A P P B E F U T U R E - P R O O F, I T W I L L B E B E T T E R A R C H I T E C T E D
D ATA D O W N , A C T
I O N S U P
I T ’ S A Q U E S T
I O N O F M U TA B I L I T Y
{{user-profile avatar=user.avatarUrl}} {{user-avatar src=avatar}} {{user-avatar-editor src=avatar}} {{user-admin-panel avatarUrl=avatar}}
{{user-profile avatar=user.avatarUrl}} {{user-avatar src=avatar}} {{user-avatar-editor src=avatar}} {{user-admin-panel avatarUrl=avatar}} Pop Quiz
Which of these subcomponents can modify user.avatarUrl?
{{user-profile avatar=model.avatarUrl}} {{user-avatar src=avatar}} {{user-avatar-editor src=avatar}} {{user-admin-panel avatarUrl=avatar}} All of
them!
I N S T E A D O F R
E LY I N G O N 2 - WAY D ATA B I N D I N G , E M I T A C T I O N S
export default Ember.Component.extend({ actions: { setAvatar: function(value) { this.set('model.avatarUrl', value);
} } });
{{user-profile avatar=user.avatarUrl setAvatar="setAvatar"}}
{{user-profile avatar=user.avatarUrl setAvatar="setAvatar"}} {{user-avatar src=avatar}} {{user-avatar-editor src=avatar setAvatar="setAvatar"}} {{user-admin-panel avatarUrl=avatar}}
Ember 1.x
<user-profile avatar={{user.avatarUrl}} setAvatar={{action "setAvatar"}}> <user-avatar src={{avatar}}> <user-avatar-editor src={{avatar}} setAvatar={{action "setAvatar"}}>
<user-admin-panel avatarUrl={{avatar}}> Ember 2.0
<user-profile avatar={{mut user.avatarUrl}}> <user-avatar src={{avatar}}> <user-avatar-editor src={{mut avatar}}> <user-admin-panel avatarUrl={{avatar}}>
Ember 2.0
T H E R E I S N O V
I E W. T H E R E I S O N LY C O M P O N E N T
• Components are isolated • Components are reusable • Components
can be reasoned about
{{view 'user-profile'}} Pop Quiz What properties does the user-profile view
access?
{{view 'user-profile'}} Literally anything!
{{user-profile}} Pop Quiz What properties does the user-profile component access?
{{user-profile}} Literally none.
N O M O R E O B J E
C T C O N T R O L L E R O R A R R AY C O N T R O L L E R
var controller = Ember.ObjectController.create(); var wycats = store.find('user', 'wycats'); controller.set('model',
wycats); controller.get('firstName'); // "Yehuda"
None
P R O X Y I N G C O
N F U S E S T H E H E L L O U T O F P E O P L E
export default Ember.ObjectController.extend({ fullName: function() { return this.get('firstName') + "
" + this.get('lastName'); }.property('firstName', 'lastName') });
export default Ember.Controller.extend({ fullName: function() { return this.get('model.firstName') + "
" + this.get('model.lastName'); }.property('model.firstName', 'model.lastName') });
export default Ember.Controller.extend({ firstName: alias('model.firstName'), lastName: alias('model.lastName'), fullName: function() {
return this.get('firstName') + " " + this.get('lastName'); }.property('firstName', 'lastName') });
U S E E X P L I C I
T W I T H / E A C H
Hello, {{user.firstName}}! {{#with user}} Hello, {{firstName}}. {{/with}}
Hello, {{user.firstName}}! {{#with user as u}} Hello, {{u.firstName}}. {{/with}} Ember
1.x
Hello, {{user.firstName}}! {{#with user as |u|}} Hello, {{u.firstName}}. {{/with}} Ember
2.0
– T O M D A L E “Use Ember
CLI today.”
T H A N K Y O U