Download to read offline
Uploaded byFDConf
«Разрушаем Вавилонскую Башню WWW с помощью веб-компонент»
The document discusses the incompatibility of web components and frameworks, highlighting issues such as poor browser compatibility and low development efficiency. It presents a comparison between traditional web components and reactive elements that offer better reusability, composability, and production readiness. Additionally, it provides instructions on converting React components into web components and integrating different frameworks seamlessly.
More Related Content
Similar to «Разрушаем Вавилонскую Башню WWW с помощью веб-компонент»
«Разрушаем Вавилонскую Башню WWW с помощью веб-компонент»
- 2.
- 4.
- 5. If apps arebricks in the tower they do not match Since frameworks are not compatible and every component is reinvented twice
- 7. Web components ✓ Native(no Babylon) ✓ Reusable ✓ Composable ✓ UI abstraction
- 8. How does itfeel? <calendar></calendar>
- 9.
- 10. Exposing APIs <map lang='52.37'att='4.88'></map>
- 11.
- 13. Issues That is notthe heaven
- 14. Web Components spareparts HTML Templates – Scaffolding HTML Import – Packaging Shadow DOM – Encapsulation Custom elements...
- 15. Web Components spareparts HTML Templates – Scaffolding HTML Import – Packaging Shadow DOM – Encapsulation Custom elements...
- 16. Web Components spareparts HTML Templates – Polyfill HTML Import – Polyfill Shadow DOM – Polyfill Custom elements...
- 17. Web Components spareparts HTML Templates – Polyfill HTML Import – Polyfill Shadow DOM – Polyfill Custom elements...
- 18. Web components ✓ Native(no Babylon) ✓ Reusability ✓ Composability ✓ UI abstraction ☓ Production ready
- 19. One more trouble Comeon! Are not three polyfills enough of troubles?
- 20. Web components ✓ Native(no Babylon) ✓ Reusability ✓ Composability ✓ UI abstraction ☓ Production ready ☓ Development efficiency
- 21. Web components Bad browsercompatibility Low performance Bad development efficiency
- 22. Need more maturerway May be something from existing frameworks?
- 23. Conceptually close ✓ Reusability ✓Composability ✓ UI abstraction (JSX) ✓ Production ready ✓ Development efficiency ☓ Native (F*cking Babylon)
- 24. What solves? ✓ Templatingvia JSX ✓ Import via Webpack ✓ Encapsulation ✓ Well known development flow ✓ Less DOM manipulations
- 26.
- 27. Let`s get thefoam!
- 28. Reactive Elements dependencies ☓HTML Templates ☓ HTML Import ☓ Shadow DOM ✓ Custom Elements 1 of 4? Much better!
- 29. Reactive Elements dependencies ✓Native ✓ Reusability ✓ Composability ✓ UI abstraction ✓ Production ready (actually used) ✓ Development efficiency
- 30. How to convertReact component into a Web component? document.registerReact('component-name', MyReactClass);
- 31. Does it feelsnative to HTML?
- 33. Does it feelsnative to HTML?
- 34. And not Reactonly... document.registerReact('component-name', MyReactClass); document.registerAngular('component-name', 'moduleName'); document.registerBackbone('component-name', BackboneView);
- 36. How to runit Automatic initialization Manual start up
- 37.
- 38. and how toget the Scope?
- 40. Ok it canbe easy for isolated scope for non-isolated scope so the scope with properties and methods:
- 41.
- 42.
- 43. How does itwork together? 1. getElementByID('angular-component'); 2. getElementByID('react-component'); 3. var data = angular-component.getData(); 4. react-component.display(data); or 5. react-component.setAttribute('data', data);
- 46.
- 47.
- 48.