FastBoot™ and Beyond

Godfrey Chan @chancancode

Ember 1.0

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-ﬁxture”)
Test Teardown App.reset()

FastBoot™

☁ 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

App.visit(“/posts/123-ember-2-0…”)

⚠ Experimental APIs

For Your Eyes Only

PR #12394 Revisiting the visit API (aka FastBoot™)

Testing

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

FastBoot™ and Beyond

FastBoot™ and Beyond

More Decks by Godfrey Chan

Other Decks in Programming

Featured

Transcript