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
47
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
330
Testing: The Modern Way
rwjblue
0
28
Testing: The Future... Today?
rwjblue
0
37
Rails Developer's Intro to Ember
rwjblue
1
160
Testing - The Next Frontier
rwjblue
1
48
A tale of two pods
rwjblue
3
800
Ember 2.0 - RFC Recap
rwjblue
6
640
Ember CLI Addons
rwjblue
7
780
RAILS + EMBER.JS + EMBER-CLI = ❤
rwjblue
10
1.8k
Other Decks in Programming
See All in Programming
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
生成AIをkintoneに連携してみた
hideg
0
230
Activities at Cairo Library
cairolibrary720
0
1.2k
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
CSC307 Lecture 13
javiergs
PRO
0
150
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
Terraformテスト入門
msato
0
540
AHC035解説
terryu16
0
730
How to use Macrobenchmark
veronikapj
0
160
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
Optimizing for Happiness
mojombo
373
69k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Building an army of robots
kneath
301
42k
Music & Morning Musume
bryan
43
5.9k
How to Think Like a Performance Engineer
csswizardry
4
590
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
YesSQL, Process and Tooling at Scale
rocio
166
14k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
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