Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making ember-wormhole work with Fastboot

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

  • Be the first to comment

  • Be the first to like this

Making ember-wormhole work with Fastboot

  1. 1. ember-wormhole + fastboot a 💜 story
  2. 2. Cory Forsyth @bantic
  3. 3. 201 Created Consultants in NewYork City
  4. 4. What ember-wormhole does • render a block to a DOM element somewhere else on the page
  5. 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. 6. How ember-wormhole works
  7. 7. Fastboot • No `didInsertElement` • Component hooks that are called: • didReceiveAttrs, didUpdateAttrs,willRender, willUpdate
  8. 8. Fastboot ember: component-node-manager.js ember: renderer.js SimpleDOM
  9. 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. 10. ember-wormhole+Fastboot issues
  11. 11. ember-wormhole+Fastboot issues • minor hack: `didInsertElement` -> `willRender`
  12. 12. ember-wormhole+Fastboot issues • no `this.element`. Place head/tail nodes manually. component#init ember-wormhole.hbs
  13. 13. ember-wormhole+Fastboot issues • SimpleDOM does not provide `getElementById` utils/dom.js
  14. 14. Demo demo: application.hbs demo: application.hbs
  15. 15. Demo demo: application.hbs demo: application.hbs
  16. 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

×