FastBoot™ and Beyond

Transcript

1. Godfrey Chan @chancancode
18. Ember 1.0
19. <script src=“ember.js”> <script src=“my-app.js”> DOM Ready Boot App appendTo(document.body)
20. <script src=“ember.js”> <script src=“my-app.js”> DOM Ready Boot App appendTo(document.body)
21. TAKE OVER ALL THE DOM!
22. The One True App™
23. Testing
24. Emergency Brake
25. App.setupForTesting()
26. App.setupForTesting() <script src=“ember.js”> <script src=“my-app.js”> DOM Ready Boot App appendTo(document.body)
27. App.setupForTesting() <script src=“ember.js”> <script src=“my-app.js”> DOM Ready Boot App appendTo(document.body) Actually, never mind!
28. App.setupForTesting() <script src=“ember.js”> <script src=“my-app.js”> Test Setup Boot App appendTo(“#qunit-fixture”) Test Teardown App.reset()
29. FastBoot™
31. <noscript> Sorry </noscript>
32. ☁ Web Server
33. ☁ Web Server GET /posts/123-ember-2-0-…
34. ☁ Web Server 200 OK <html> <head> <title>Ember 2.0…</title> </head> <body> <article>…</article> </body> </html>
35. 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>
36. 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>
37. 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
38. Ember 1.12
39. Ember.ApplicationInstance Ember.Application
40. Ember.ApplicationInstance Ember.Application
41. App.visit(“/posts/123-ember-2-0…”)
42. ⚠ Experimental APIs
43. For Your Eyes Only
44. PR #12394 Revisiting the visit API (aka FastBoot™)
45. Testing
46. <script src=“ember.js”> <script src=“my-app.js”> Test Setup Boot Instance … instance.destroy()
47. Manual Boot
48. import MyApp from 'my-app'; $(function() { let App = MyApp.create({ autoboot: false }); App.visit('/demo', { location: 'none', rootElement: '#demo' }); }); For Your Eyes Only
49. Multiple Instances
50. 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
51. Widgets
52. ember-islands
53. Embedding?
54. PR #12394 Revisiting the visit API (aka FastBoot™)
55. @chancancode