Services & Component Collaboration

Slide 1

Slide 1 text

SERVICES & COMPONENT COLLABORATION

Slide 2

Slide 2 text

Kerrick Long Things I make and do Where to ﬁnd me online meetup.com/STLEmber Lead Front-end Developer at Second Street www.KerrickLong.com twitter.com/KerrickLong github.com/Kerrick

Slide 3

Slide 3 text

SERVICES WHAT ARE ANYWAYS?

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

ACCESSIBLE

Slide 6

Slide 6 text

ACCESSIBLE SHAREABLE

Slide 7

Slide 7 text

ACCESSIBLE SHAREABLE FUNCTIONALITY

Slide 8

Slide 8 text

ACCESSIBLE SHAREABLE FUNCTIONALITY SINGLETONS

Slide 9

Slide 9 text

ACCESSIBLE SHAREABLE FUNCTIONALITY SINGLETONS

Slide 10

Slide 10 text

ACCESSIBLE this.get('store')

Slide 11

Slide 11 text

ACCESSIBLE this.get('mine')

Slide 12

Slide 12 text

ACCESSIBLE SHAREABLE FUNCTIONALITY SINGLETONS

Slide 13

Slide 13 text

SHAREABLE this.get('openHouses')

Slide 14

Slide 14 text

SHAREABLE this NOPE!

Slide 15

Slide 15 text

SHAREABLE this.get('geolocation')

Slide 16

Slide 16 text

SHAREABLE this.get('facebook')

Slide 17

Slide 17 text

ACCESSIBLE SHAREABLE FUNCTIONALITY SINGLETONS

Slide 18

Slide 18 text

FUNCTIONALITY this.get('geolocation') .getProperties( 'latitude', 'longitude' )

Slide 19

Slide 19 text

FUNCTIONALITY this.get('facebook') .getLoginStatus() .then(function(response) { // Do things })

Slide 20

Slide 20 text

FUNCTIONALITY ACCESSIBLE SHAREABLE SINGLETONS

Slide 21

Slide 21 text

SINGLETONS this.get('geolocation') .askPermission() .then(success, failure)

Slide 22

Slide 22 text

SINGLETONS this.get('geolocation') .set('watch', true)

Slide 23

Slide 23 text

ACCESSIBLE SHAREABLE FUNCTIONALITY SINGLETONS SINGLETONS

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

App.GeolocationService = Ember.Service.extend({ getPosition: function() { /* Logic */ } }) App.NearbyTweetsRoute = Ember.Route.extend({ model: function() { return this.get('services.geolocation') .getPosition().then(function(loc) { return this.get('services.twitter') .findNearbyTweets(loc); }.bind(this)); } })

Slide 26

Slide 26 text

“I hope this can be a starting point for the community to start evolving on our shared understanding of what services are.” — Tom Dale

Slide 27

Slide 27 text

“I want it NOW!” — Veruca Salt

Slide 28

Slide 28 text

App.GeolocationService = Ember.Object.extend({ // Awesome code })

Slide 29

Slide 29 text

Ember.Application.initializer({ name: 'service:geolocation', initialize: function(container, application) { container.register( 'service:geolocation', App.GeolocationService, { singleton: true } ) } })

Slide 30

Slide 30 text

Ember.Application.initializer({ name: 'injectGeolocation', before: 'geolocation', initialize: function(container, application) { var n='geolocation', l='service:geolocation' application.inject('controller', n, l) application.inject('route', n, l) } });

Slide 31

Slide 31 text

COMPONENT COLLABORATION HOW CAN LEAD ME TO HTML’S FUTURE?

Slide 32

Slide 32 text

HTML’S FUTURE? HTML’S PAST.

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Red Blue

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Foo Bar Baz Bing

Slide 38

Slide 38 text

{{#x-accordion}} {{#acc-item}} {{#acc-title}}Foo{{/acc-title}} {{#acc-content}}Bar{{/acc-content}} {{/acc-item}} {{#acc-item}} {{#acc-title}}Baz{{/acc-title}} {{#acc-content}}Bing{{/acc-content}} {{/acc-item}} {{/x-accordion}}

Slide 39

Slide 39 text

App.XAccordionComponent = Em.Component.extend({ tagName: 'x-accordion', init: function() { this._super() this.set('accordionItems', Em.ArrayProxy.create({ content: [] })) }, registerItem: function(accordionItem) { this.get('accordionItems').addObject(accordionItem) }, activeItem: null, toggleItem: function(accordionItem) { var isActive = accordionItem === this.get('activeItem') var newActiveItem = isActive ? null : accordionItem this.set('activeItem', newActiveItem) } })

Slide 40

Slide 40 text

App.XAccordionComponent = Em.Component.extend({ tagName: 'x-accordion', init: function() { this._super() this.set(‘accordionItems', Em.ArrayProxy.create({ content: [] })) }, registerItem: function(accordionItem) { this.get(‘accordionItems').addObject(accordionItem) }, activeItem: null, toggleItem: function(accordionItem) { var isActive = accordionItem === this.get('activeItem') var newActiveItem = isActive ? null : accordionItem this.set('activeItem', newActiveItem)

Slide 41

Slide 41 text

Slide 42

Slide 42 text

App.AccItemComponent = Em.Component.extend({ tagName: 'acc-item', accordion: Em.computed.alias('parentView'), init: function() { this._super() this.get('accordion').registerItem(this) }, isExpanded: Em.computed.equal('accordion.activeItem', '@this') })

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

App.AccTitleComponent = Em.Component.extend({ tagName: ‘acc-title', accordionItem: Em.computed.alias('parentView'), accordion: Em.computed.alias('accordionItem.parentView'), toggle: function() { this.get('accordion').toggleItem(this.get('accordionItem')) }.on('click') })

Slide 46

Slide 46 text

Slide 47

Slide 47 text

App.AccTitleComponent = Em.Component.extend({ tagName: ‘acc-title', accordionItem: Em.computed.alias('parentView'), accordion: Em.computed.alias('accordionItem.parentView'), toggle: function() { this.get('accordion') .toggleItem(this.get('accordionItem')) }.on('click') })

Slide 48

Slide 48 text

App.AccContentComponent = Em.Component.extend({ tagName: 'acc-content', accordionItem: Em.computed.alias('parentView'), isVisible: Em.computed.alias('accordionItem.isExpanded') })

Slide 49

Slide 49 text

App.AccContentComponent = Em.Component.extend({ tagName: 'acc-content', accordionItem: Em.computed.alias('parentView'), isVisible: Em.computed.alias('accordionItem.isExpanded') })

Slide 50

Slide 50 text

App.AccContentComponent = Em.Component.extend({ tagName: 'acc-content', accordionItem: Em.computed.alias('parentView'), isVisible: Em.computed.alias('accordionItem.isExpanded') })

Slide 51

Slide 51 text

Slide 52

Slide 52 text

HEY, WAIT!

Slide 53

Slide 53 text

HEY, WAIT! TIE IT ALL TOGETHER. THERE IS NO COHESIVENESS TO THOSE TOPICS. YOU REALLY SHOULD DO SOMETHING TO MAKE YOUR TALK FEEL LIKE AN ORGANIZED WHOLE. IF YOU’RE NOT EVEN GOING TO BOTHER WITH SOME SORT OF CONCLUSION TO ROUND UP EVERYTHING YOU JUST TALKED ABOUT, THEN WHAT ARE WE ALL EVEN DOING HERE ANYWAYS?