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
670
EmberConf 2018 Keynote
tomdale
4
1.7k
Secrets of the DOM Virtual Machine
tomdale
1
980
EmberCamp London Keynote 2016
tomdale
11
4.6k
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
900
Progressive Enhancement is Dead, Long Live Progressive Enhancement
tomdale
1
740
Other Decks in Programming
See All in Programming
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
日付と正規化
megmogmog1965
0
140
Namespace on read
tagomoris
2
370
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
生成AIをkintoneに連携してみた
hideg
0
230
Jetpack for KMP
fornewid
1
290
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
The Invisible Side of Design
smashingmag
294
50k
The Language of Interfaces
destraynor
151
23k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
YesSQL, Process and Tooling at Scale
rocio
166
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Rails Girls Zürich Keynote
gr2m
93
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
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