Lightning talk for EmberNYC explaining how we changed ember-wormhole to be Fastboot-compatible.

1. ember-wormhole +
fastboot
a 💜 story

2. Cory Forsyth
@bantic

3. 201 Created
Consultants in NewYork City

4. What ember-wormhole does
• render a block to a DOM element somewhere else
on the page

5. How ember-wormhole works
• in didInsertElement:
• reads the firstChild and lastChild from
this.element
• find destinationElement via
document.getElementById
• relocate nodes between first/last child to
destinationElement

6. How ember-wormhole works

7. Fastboot
• No `didInsertElement`
• Component hooks that are called:
• didReceiveAttrs, didUpdateAttrs,willRender,
willUpdate

8. Fastboot
ember: component-node-manager.js
ember: renderer.js
SimpleDOM

9. ember-wormhole+Fastboot
issues
• in didInsertElement:
• reads the firstChild and lastChild from
this.element
• find destinationElement via
document.getElementById
• relocate nodes between first/last child to
destinationElement

10. ember-wormhole+Fastboot
issues

11. ember-wormhole+Fastboot
issues
• minor hack: `didInsertElement` -> `willRender`

12. ember-wormhole+Fastboot
issues
• no `this.element`. Place head/tail nodes manually.
component#init
ember-wormhole.hbs

13. ember-wormhole+Fastboot
issues
• SimpleDOM does not provide `getElementById`
utils/dom.js

14. Demo
demo: application.hbs
demo: application.hbs

15. Demo
demo: application.hbs
demo: application.hbs

16. Links
• ember-wormhole
• ember-wormhole demo
• ember-wormhole+fastboot demo
• PR to add Fastboot compat
• ember code:
• env.destinedForDOM check: component-node-manager.js
• InertRenderer