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
49
Testing: The Future... Today?
rwjblue
0
63
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
XP, Testing and ninja testing ZOZ5
m_seki
3
740
Devoxx BE 2025 Loom lab
josepaumard
0
100
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.9k
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
6
3k
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
290
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
170
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
Six and a half ridiculous things to do with Quarkus
hollycummins
0
180
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
CSC305 Lecture 04
javiergs
PRO
0
270
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
300
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
410
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.3k
Designing for Performance
lara
610
69k
Practical Orchestrator
shlominoach
190
11k
The Cost Of JavaScript in 2023
addyosmani
55
9k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
KATA
mclloyd
PRO
32
15k
Producing Creativity
orderedlist
PRO
347
40k
Building Applications with DynamoDB
mza
96
6.7k
Agile that works and the tools we love
rasmusluckow
331
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Making Projects Easy
brettharned
120
6.4k
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