Ember 2.0 in Practice - Speaker Deck

Slide 1

Slide 1 text

I N P R A C T I C E E M B E R 2 . 0

Slide 2

Slide 2 text

W H AT ’ S N E W ?

Slide 3

Slide 3 text

The thinnest, lightest, most powerful Ember ever.

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

M A N Y F E AT U R E S AVA I L A B L E T O D AY

Slide 6

Slide 6 text

S TA B I L I T Y W I T H O U T S TA G N AT I O N

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

Stable Beta Canary

Slide 9

Slide 9 text

O N E TA K E A WAY

Slide 10

Slide 10 text

– T O M D A L E “Use Ember CLI today.”

Slide 11

Slide 11 text

• Many new features will require Ember CLI • Brings convention over configuration to the ecosystem

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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)

Slide 14

Slide 14 text

N E W I D E A S

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

D ATA D O W N , A C T I O N S U P

Slide 17

Slide 17 text

I T ’ S A Q U E S T I O N O F M U TA B I L I T Y

Slide 18

Slide 18 text

{{user-profile avatar=user.avatarUrl}} {{user-avatar src=avatar}} {{user-avatar-editor src=avatar}} {{user-admin-panel avatarUrl=avatar}}

Slide 19

Slide 19 text

{{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?

Slide 20

Slide 20 text

{{user-profile avatar=model.avatarUrl}} {{user-avatar src=avatar}} {{user-avatar-editor src=avatar}} {{user-admin-panel avatarUrl=avatar}} All of them!

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

export default Ember.Component.extend({ actions: { setAvatar: function(value) { this.set('model.avatarUrl', value); } } });

Slide 23

Slide 23 text

Slide 24

Slide 24 text

{{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

Slide 25

Slide 25 text

Ember 2.0

Slide 26

Slide 26 text

Ember 2.0

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

• Components are isolated • Components are reusable • Components can be reasoned about

Slide 29

Slide 29 text

{{view 'user-profile'}} Pop Quiz What properties does the user-profile view access?

Slide 30

Slide 30 text

{{view 'user-profile'}} Literally anything!

Slide 31

Slide 31 text

{{user-profile}} Pop Quiz What properties does the user-profile component access?

Slide 32

Slide 32 text

{{user-profile}} Literally none.

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

var controller = Ember.ObjectController.create(); var wycats = store.find('user', 'wycats'); controller.set('model', wycats); controller.get('firstName'); // "Yehuda"

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

export default Ember.ObjectController.extend({ fullName: function() { return this.get('firstName') + " " + this.get('lastName'); }.property('firstName', 'lastName') });

Slide 38

Slide 38 text

export default Ember.Controller.extend({ fullName: function() { return this.get('model.firstName') + " " + this.get('model.lastName'); }.property('model.firstName', 'model.lastName') });

Slide 39

Slide 39 text

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') });

Slide 40

Slide 40 text

U S E E X P L I C I T W I T H / E A C H

Slide 41

Slide 41 text

Hello, {{user.firstName}}! {{#with user}} Hello, {{firstName}}. {{/with}}

Slide 42

Slide 42 text

Hello, {{user.firstName}}! {{#with user as u}} Hello, {{u.firstName}}. {{/with}} Ember 1.x

Slide 43

Slide 43 text

Hello, {{user.firstName}}! {{#with user as |u|}} Hello, {{u.firstName}}. {{/with}} Ember 2.0