This document discusses issues with the current state of web components and proposes an alternative approach called Reactive Elements that addresses these issues. Reactive Elements allow existing frameworks like React and Angular to be used as web components by registering components from these frameworks to make them available in HTML. This provides reusability, composability, and other benefits while avoiding the need for multiple polyfills and improving browser compatibility and performance over web components.

1. @PixelsCommander
denis.radin@gmail.com

3. Demolishing
the Babel Tower of WWW

4. If apps are bricks in the
tower they do not match
Since frameworks are not compatible and
every component is reinvented twice

6. Web components
✓ Native (no Babylon)
✓ Reusable
✓ Composable
✓ UI abstraction

7. How does it feel?
<calendar></calendar>

8. As simple as
<map></map>

9. Exposing APIs
<map lang='52.37' att='4.88'></map>

10. Exposing APIs
<calendar chosen='2014-06-19'></calendar>

12. Issues
That is not the heaven

13. Web Components spare parts
HTML Templates – Scaffolding
HTML Import – Packaging
Shadow DOM – Encapsulation
Custom elements...

14. Web Components spare parts
HTML Templates – Scaffolding
HTML Import – Packaging
Shadow DOM – Encapsulation
Custom elements...

15. Web Components spare parts
HTML Templates – Polyfill
HTML Import – Polyfill
Shadow DOM – Polyfill
Custom elements...

16. Web Components spare parts
HTML Templates – Polyfill
HTML Import – Polyfill
Shadow DOM – Polyfill
Custom elements...

17. Web components
✓ Native (no Babylon)
✓ Reusability
✓ Composability
✓ UI abstraction
☓ Production ready

18. One more trouble
Come on! Are not three polyfills
enough of troubles?

19. Web components
✓ Native (no Babylon)
✓ Reusability
✓ Composability
✓ UI abstraction
☓ Production ready
☓ Development efficiency

20. Web components
Bad browser compatibility
Low performance
Bad development efficiency

21. Need more maturer way
May be something from existing
frameworks?

22. Conceptually close
✓ Reusability
✓ Composability
✓ UI abstraction (JSX)
✓ Production ready
✓ Development efficiency
☓ Native (F*cking Babylon)

23. What solves?
✓ Templating via JSX
✓ Import via Webpack
✓ Encapsulation
✓ Well known development flow
✓ Less DOM manipulations

25. +
=

26. Let`s get the foam!

27. Reactive Elements dependencies
☓ HTML Templates
☓ HTML Import
☓ Shadow DOM
✓ Custom Elements
1 of 4? Much better!

28. Reactive Elements dependencies
✓ Native
✓ Reusability
✓ Composability
✓ UI abstraction
✓ Production ready (actually used)
✓ Development efficiency

29. How to convert React component
into a Web component?
document.registerReact('component-name', MyReactClass);

30. Does it feels native to HTML?

32. Does it feels native to HTML?

33. And not React only...
document.registerReact('component-name', MyReactClass);
document.registerAngular('component-name', 'moduleName');
document.registerBackbone('component-name', BackboneView);

35. How to run it
Automatic initialization
Manual start up

36. So

37. and how to get the Scope?

39. Ok it can be easy
for isolated scope
for non-isolated scope
so the scope with properties and methods:

40. and Finally...

41. MVC Elements
https://github.com/MVC-Elements

42. How does it work 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);

45. MVC Elements
https://github.com/MVC-Elements

46. Questions ?
https://github.com/MVC-Elements

47. @PixelsCommander
denis.radin@gmail.com
@stevermeister
stevermeister@gmail.com