Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Glimmer ✨ as a Gateway to Ember 🐹
Search
Robert Jackson
July 11, 2017
Programming
0
60
Glimmer ✨ as a Gateway to Ember 🐹
Talk presented at EmberCamp London.
Robert Jackson
July 11, 2017
Tweet
Share
More Decks by Robert Jackson
See All by Robert Jackson
😂 of TypeScript
rwjblue
0
350
Testing: The Modern Way
rwjblue
0
48
Testing: The Future... Today?
rwjblue
0
62
Rails Developer's Intro to Ember
rwjblue
1
180
Testing - The Next Frontier
rwjblue
1
72
A tale of two pods
rwjblue
3
840
Ember 2.0 - RFC Recap
rwjblue
6
670
Ember CLI Addons
rwjblue
7
810
RAILS + EMBER.JS + EMBER-CLI = ❤
rwjblue
10
1.8k
Other Decks in Programming
See All in Programming
CSS Linter の現在地 2025年のベストプラクティスを探る
ryo_manba
10
3.2k
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
230
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
370
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
720
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
210
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
890
気づいて!アプリからのSOS 〜App Store Connect APIで始めるパフォーマンス健康診断〜
waka12
0
260
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
890
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
480
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.1k
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
350
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
Featured
See All Featured
Faster Mobile Websites
deanohume
310
31k
We Have a Design System, Now What?
morganepeng
53
7.8k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Docker and Python
trallard
46
3.6k
Side Projects
sachag
455
43k
Git: the NoSQL Database
bkeepers
PRO
431
66k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
How GitHub (no longer) Works
holman
315
140k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
GraphQLとの向き合い方2022年版
quramy
49
14k
Transcript
1 Glimmer as a Gateway to Ember
2 Open Source Addict Ember Core Team OUR MISSION Investment
generally results in acquiring
3
4
5
6
7
8 Thank You!!
9 Glimmer.js
10 Optimized for Happiness Service Worker Enabled Mobile First Glimmer.js
11 Glimmer.js
12 Glimmer.js
13 Glimmer.js <user-greeting class="greeting" @name="Ricardo" @greeting="Olá"> </user-greeting>
14 Glimmer.js import Component from '@glimmer/component'; export default class Contact
extends Component { }
15 Glimmer.js import Component from '@glimmer/component'; export default class Contact
extends Component { get name() { return `Doctor Who`; } }
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 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 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 Glimmer.js
20 Ember
21 Ember import Ember from 'ember'; export default Ember.Service.extend({ });
22 Ember Mature Pre-postmodern JS Common Stability
23 Ember import Service from '@ember/service'; export default class extend
Service { }
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 Ember import Component from '@ember/component'; export default class extends
Component { }
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 Ember Actions Computed Properties Injections Element Modification
28 Ember
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 Ember import Component from '@ember/component'; import { action }
from 'ember-decorators/object'; export default class extends Component { @action update() { // ...snip... } }
31 Ember import Component from '@ember/component'; import { service }
from 'ember-decorators/service; export default class extends Component { @service i18n }
32 Ember Glimmer Components
33