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.

0dfd10ad198ae5a87640da046a77a90a?s=128

Robert Jackson

July 11, 2017
Tweet

Transcript

  1. 1 Glimmer as a Gateway to Ember

  2. 2 Open Source Addict Ember Core Team OUR MISSION Investment

    generally results in acquiring
  3. 3

  4. 4

  5. 5

  6. 6

  7. 7

  8. 8 Thank You!!

  9. 9 Glimmer.js

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

  11. 11 Glimmer.js

  12. 12 Glimmer.js

  13. 13 Glimmer.js <user-greeting class="greeting" @name="Ricardo" @greeting="Olá"> </user-greeting>

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

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

    extends Component { get name() { return `Doctor Who`; } }
  16. 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}`; } }
  17. 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}`; } }
  18. 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
  19. 19 Glimmer.js

  20. 20 Ember

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

  22. 22 Ember Mature Pre-postmodern JS Common Stability

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

    Service { }
  24. 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); });
  25. 25 Ember import Component from '@ember/component'; export default class extends

    Component { }
  26. 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!'); });
  27. 27 Ember Actions Computed Properties Injections Element Modification

  28. 28 Ember

  29. 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}`; } }
  30. 30 Ember import Component from '@ember/component'; import { action }

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

    from 'ember-decorators/service; export default class extends Component { @service i18n }
  32. 32 Ember Glimmer Components

  33. 33