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
880
Other Decks in Programming
See All in Programming
画像コンペでのベースラインモデルの育て方
tattaka
3
1.9k
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
210
ゲームの物理
fadis
5
1.5k
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.3k
AIでLINEスタンプを作ってみた
eycjur
1
200
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
200
ソフトウェアテスト徹底指南書の紹介
goyoki
1
110
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
akatsukigames_tech
0
150
Rancher と Terraform
fufuhu
0
110
CSC305 Summer Lecture 06
javiergs
PRO
0
100
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.2k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Faster Mobile Websites
deanohume
309
31k
The Pragmatic Product Professional
lauravandoore
36
6.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Thoughts on Productivity
jonyablonski
69
4.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Fireside Chat
paigeccino
39
3.6k
Making Projects Easy
brettharned
117
6.3k
Mobile First: as difficult as doing things right
swwweet
223
9.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