Upgrade to Pro — share decks privately, control downloads, hide ads and more …

FastBoot™ and Beyond

22bb3e56828870ee9a0dd93aeadbe04a?s=47 Godfrey Chan
September 29, 2015

FastBoot™ and Beyond

22bb3e56828870ee9a0dd93aeadbe04a?s=128

Godfrey Chan

September 29, 2015
Tweet

Transcript

  1. Godfrey Chan @chancancode

  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  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™

  30. None
  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