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
FastBoot™ and Beyond
Search
Godfrey Chan
September 29, 2015
Programming
0
140
FastBoot™ and Beyond
Godfrey Chan
September 29, 2015
Tweet
Share
More Decks by Godfrey Chan
See All by Godfrey Chan
Virtual EmberConf 2022: Platform State of the Union
chancancode
0
220
Virtual EmberConf 2021: Platform State of the Union
chancancode
0
200
Virtual EmberConf 2020: Platform State of the Union
chancancode
1
310
Thinking in TypeScript
chancancode
0
260
The Lifecycle of a Rails Request
chancancode
3
13k
Dropping Down To The Metal™ (2018)
chancancode
0
97
Using Skylight to Solve Real-World Performance Problems
chancancode
1
320
Prying Open The Black Box (EmberConf 2018)
chancancode
0
350
Bending The Curve: Putting Rust in Ruby with Helix
chancancode
2
2.7k
Other Decks in Programming
See All in Programming
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
140
命名をリントする
chiroruxx
1
380
Fibonacci Function Gallery - Part 1
philipschwarz
PRO
0
200
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
350
CSC305 Lecture 25
javiergs
PRO
0
130
テストケースの名前はどうつけるべきか?
orgachem
PRO
0
130
「Chatwork」Android版アプリを 支える単体テストの現在
okuzawats
0
180
htmxって知っていますか?次世代のHTML
hiro_ghap1
0
330
LLM Supervised Fine-tuningの理論と実践
datanalyticslabo
3
940
talk-with-local-llm-with-web-streams-api
kbaba1001
0
170
useSyncExternalStoreを使いまくる
ssssota
6
1k
Zoneless Testing
rainerhahnekamp
0
120
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1366
200k
Statistics for Hackers
jakevdp
796
220k
How to Ace a Technical Interview
jacobian
276
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
Code Review Best Practice
trishagee
65
17k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
The Cost Of JavaScript in 2023
addyosmani
45
7k
Making the Leap to Tech Lead
cromwellryan
133
9k
KATA
mclloyd
29
14k
Designing for humans not robots
tammielis
250
25k
Transcript
Godfrey Chan @chancancode
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
Ember 1.0
<script src=“ember.js”> <script src=“my-app.js”> DOM Ready Boot App appendTo(document.body)
<script src=“ember.js”> <script src=“my-app.js”> DOM Ready Boot App appendTo(document.body)
TAKE OVER ALL THE DOM!
The One True App™
Testing
Emergency Brake
App.setupForTesting()
App.setupForTesting() <script src=“ember.js”> <script src=“my-app.js”> DOM Ready Boot App appendTo(document.body)
App.setupForTesting() <script src=“ember.js”> <script src=“my-app.js”> DOM Ready Boot App appendTo(document.body)
Actually, never mind!
App.setupForTesting() <script src=“ember.js”> <script src=“my-app.js”> Test Setup Boot App appendTo(“#qunit-fixture”)
Test Teardown App.reset()
FastBoot™
None
<noscript> Sorry </noscript>
☁ Web Server
☁ Web Server GET /posts/123-ember-2-0-…
☁ Web Server 200 OK <html> <head> <title>Ember 2.0…</title> </head>
<body> <article>…</article> </body> </html>
Load Ember Boot Worker Boot App Render Destroy Worker GET
/posts/123-ember-2-0-… 200 OK <html> <head> <title>Ember 2.0…</title> </head> <body> <article>…</article> </body> </html>
Load Ember Boot Worker Boot App Render App.reset() GET /posts/123-ember-2-0-…
200 OK <html> <head> <title>Ember 2.0…</title> </head> <body> <article>…</article> </body> </html>
200 OK <html> <head> <title>Ember 2.0…</title> </head> <body> <article>…</article> </body>
</html> Render 200 OK <html> <head> <title>Ember 2.0…</title> </head> <body> <article>…</article> </body> </html> GET /posts/123-ember-2-0-… Boot Worker Render instance.destroy() GET /posts/123-ember-2-0-… Boot Instance instance.destroy( Load Ember Boot Instance
Ember 1.12
Ember.ApplicationInstance Ember.Application
Ember.ApplicationInstance Ember.Application
App.visit(“/posts/123-ember-2-0…”)
⚠ Experimental APIs
For Your Eyes Only
PR #12394 Revisiting the visit API (aka FastBoot™)
Testing
<script src=“ember.js”> <script src=“my-app.js”> Test Setup Boot Instance … instance.destroy()
Manual Boot
import MyApp from 'my-app'; $(function() { let App = MyApp.create({
autoboot: false }); App.visit('/demo', { location: 'none', rootElement: '#demo' }); }); For Your Eyes Only
Multiple Instances
import MyApp from 'my-app'; $(function() { let App = MyApp.create({
autoboot: false }); let sessionId = MyApp.generateSessionID(); App.visit(`/matches/join/${sessionId}`, { rootElement: '#left' }); App.visit(`/matches/join/${sessionId}`, { rootElement: '#right' }); }); For Your Eyes Only
Widgets
ember-islands
Embedding?
PR #12394 Revisiting the visit API (aka FastBoot™)
@chancancode