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.2k
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
690
EmberConf 2018 Keynote
tomdale
4
1.7k
Secrets of the DOM Virtual Machine
tomdale
1
990
EmberCamp London Keynote 2016
tomdale
11
4.7k
Hella Good Ember
tomdale
7
1.2k
EmberConf 2016 Keynote
tomdale
12
2.3k
Introduction to FastBoot - Global Ember Meetup
tomdale
1
150
An Update on FastBoot
tomdale
2
910
Progressive Enhancement is Dead, Long Live Progressive Enhancement
tomdale
1
750
Other Decks in Programming
See All in Programming
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
4
90k
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.6k
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi23
0
110
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
210
o1モデルのプロンプトエンジニアリングって?
ktc_wada
0
260
エンジニア1年目で複雑なコードの改善に取り組んだ話
mtnmr
3
2k
XStateでReactに秩序を与えたい
gizm000
0
730
Perl 5 OOP機構30年史 - Perl 5's OOP Mechanism over the past 30 years
moznion
0
270
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
Modular Monolith Go Server with GraphQL Federation + gRPC
110y
1
580
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Making Projects Easy
brettharned
113
5.8k
Thoughts on Productivity
jonyablonski
66
4.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
A designer walks into a library…
pauljervisheath
201
24k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.2k
Building Flexible Design Systems
yeseniaperezcruz
325
38k
GitHub's CSS Performance
jonrohan
1030
450k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
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