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
970
Progressive Enhancement is Dead, Long Live Progressive Enhancement
tomdale
1
880
Other Decks in Programming
See All in Programming
kiroでゲームを作ってみた
iriikeita
0
140
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
180
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
520
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
110
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
190
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
350
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
410
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
16
9.4k
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
120
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
450
実践 Dev Containers × Claude Code
touyu
1
130
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Designing for humans not robots
tammielis
253
25k
RailsConf 2023
tenderlove
30
1.2k
What's in a price? How to price your products and services
michaelherold
246
12k
Site-Speed That Sticks
csswizardry
10
750
Scaling GitHub
holman
461
140k
Java REST API Framework Comparison - PWX 2021
mraible
32
8.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Automating Front-end Workflow
addyosmani
1370
200k
Producing Creativity
orderedlist
PRO
346
40k
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