Services & Component Collaboration

Talk given June 2014 on the Ember.js Hangout On Air

Transcript

1. SERVICES
   &
   COMPONENT
   COLLABORATION
   

   View Slide

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

   View Slide

3. SERVICES
   WHAT ARE
   ANYWAYS?
   

   View Slide

4. View Slide

5. ACCESSIBLE
   

   View Slide

6. ACCESSIBLE
   SHAREABLE
   

   View Slide

7. ACCESSIBLE
   SHAREABLE
   FUNCTIONALITY
   

   View Slide

8. ACCESSIBLE
   SHAREABLE
   FUNCTIONALITY
   SINGLETONS
   

   View Slide

9. ACCESSIBLE
   SHAREABLE
   FUNCTIONALITY
   SINGLETONS
   

   View Slide

10. ACCESSIBLE
    this.get('store')
    

    View Slide

11. ACCESSIBLE
    this.get('mine')
    

    View Slide

12. ACCESSIBLE
    SHAREABLE
    FUNCTIONALITY
    SINGLETONS
    

    View Slide

13. SHAREABLE
    this.get('openHouses')
    

    View Slide

14. SHAREABLE
    this NOPE!
    

    View Slide

15. SHAREABLE
    this.get('geolocation')
    

    View Slide

16. SHAREABLE
    this.get('facebook')
    

    View Slide

17. ACCESSIBLE
    SHAREABLE
    FUNCTIONALITY
    SINGLETONS
    

    View Slide

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

    View Slide

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

    View Slide

20. FUNCTIONALITY
    ACCESSIBLE
    SHAREABLE
    SINGLETONS
    

    View Slide

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

    View Slide

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

    View Slide

23. ACCESSIBLE
    SHAREABLE
    FUNCTIONALITY
    SINGLETONS
    SINGLETONS
    

    View Slide

24. View Slide

25. 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));
    }
    })
    

    View Slide

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

    View Slide

27. “I want it NOW!”
    — Veruca Salt
    

    View Slide

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

    View Slide

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

    View Slide

30. 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)
    }
    });
    

    View Slide

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

    View Slide

32. HTML’S FUTURE?
    HTML’S PAST.
    

    View Slide

33. 
    One
    Two
    Two
    
    

    View Slide

34. 
    
    Red
    Blue
    
    
    

    View Slide

35. View Slide

36. View Slide

37. 
    
    Foo
    Bar
    
    
    Baz
    Bing
    
    
    

    View Slide

38. {{#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}}
    

    View Slide

39. 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)
    }
    })
    

    View Slide

40. 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)
    

    View Slide

41. 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)
    }
    })
    

    View Slide

42. 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')
    })
    

    View Slide

43. 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')
    })
    

    View Slide

44. 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')
    })
    

    View Slide

45. 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')
    })
    

    View Slide

46. 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')
    })
    

    View Slide

47. 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')
    })
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

51. {{#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}}
    

    View Slide

52. HEY, WAIT!
    

    View Slide

53. 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?
    

    View Slide