Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Glimmer ✨ as a Gateway to Ember 🐹

Glimmer ✨ as a Gateway to Ember 🐹

Talk presented at EmberCamp London.

Robert Jackson

July 11, 2017
Tweet

More Decks by Robert Jackson

Other Decks in Programming

Transcript

  1. 1
    Glimmer as a Gateway
    to Ember

    View full-size slide

  2. 2
    Open Source Addict
    Ember Core Team
    OUR
    MISSION
    Investment generally results in acquiring

    View full-size slide

  3. 8
    Thank You!!

    View full-size slide

  4. 10
    Optimized for Happiness
    Service Worker Enabled
    Mobile First
    Glimmer.js

    View full-size slide

  5. 11
    Glimmer.js

    View full-size slide

  6. 12
    Glimmer.js

    View full-size slide

  7. 13
    Glimmer.js


    View full-size slide

  8. 14
    Glimmer.js
    import Component from '@glimmer/component';
    export default class Contact extends Component {
    }

    View full-size slide

  9. 15
    Glimmer.js
    import Component from '@glimmer/component';
    export default class Contact extends Component {
    get name() {
    return `Doctor Who`;
    }
    }

    View full-size slide

  10. 16
    Glimmer.js
    import Component from '@glimmer/component';
    export default class Contact extends Component {
    @tracked('args')
    get name() {
    return `${this.args.first} ${this.args.last}`;
    }
    }

    View full-size slide

  11. 17
    Glimmer.js
    import Component from '@glimmer/component';
    export default class Contact extends Component {
    args: {
    first: string;
    last: string;
    };
    @tracked('args')
    get name() {
    return `${this.args.first} ${this.args.last}`;
    }
    }

    View full-size slide

  12. 18
    Glimmer.js
    ember new test-webapp -b @glimmer/blueprint
    cd test-webapp
    ember install ember-service-worker
    ember install ember-service-worker-asset-cache
    ember install ember-service-worker-cache-fallback
    ember install ember-web-app
    ember serve -prod

    View full-size slide

  13. 19
    Glimmer.js

    View full-size slide

  14. 21
    Ember
    import Ember from 'ember';
    export default Ember.Service.extend({
    });

    View full-size slide

  15. 22
    Ember
    Mature
    Pre-postmodern JS
    Common
    Stability

    View full-size slide

  16. 23
    Ember
    import Service from '@ember/service';
    export default class extend Service {
    }

    View full-size slide

  17. 24
    Ember
    // ...snip...
    test('it “just” works?!?!', function(assert) {
    class TestService extends Ember.Service {}
    let owner = getOwner(this);
    owner.register('service:test', TestService);
    let instance =owner.lookup('service:test');
    assert.ok(instance instanceof TestService);
    assert.ok(instance instanceof Ember.Service);
    });

    View full-size slide

  18. 25
    Ember
    import Component from '@ember/component';
    export default class extends Component {
    }

    View full-size slide

  19. 26
    Ember
    // ...snip...
    test('it renders', function(assert) {
    class XFoo extends Ember.Component {}
    this.register('component:x-foo', XFoo);
    this.register('template:components/x-foo', hbs`hi!`);
    this.render(hbs`{{x-foo}}`);
    assert.equal(this.$().text().trim(), 'hi!');
    });

    View full-size slide

  20. 27
    Ember
    Actions
    Computed
    Properties
    Injections
    Element Modification

    View full-size slide

  21. 29
    Ember
    import Component from '@ember/component';
    import { computed } from 'ember-decorators/object';
    export default class extends Component {
    @computed('first', 'last')
    name(first, last) {
    return `${first} ${last}`;
    }
    }

    View full-size slide

  22. 30
    Ember
    import Component from '@ember/component';
    import { action } from 'ember-decorators/object';
    export default class extends Component {
    @action
    update() {
    // ...snip...
    }
    }

    View full-size slide

  23. 31
    Ember
    import Component from '@ember/component';
    import { service } from 'ember-decorators/service;
    export default class extends Component {
    @service i18n
    }

    View full-size slide

  24. 32
    Ember
    Glimmer Components

    View full-size slide