Мы вступаем в интересный век — век веб-компонент. В докладе рассказывается о том, как подружить различные MVC фреймворки с веб-компонентами и научить их общаться между собой при помощи MVC Elements, проекта позволяющего конвертировать React, Backbone вью, а так же Angular директивы в веб-компоненты.

2. @PixelsCommander
denis.radin@gmail.com

4. Demolishing
the Babel Tower of WWW

5. If apps are bricks 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 it feel?
<calendar></calendar>

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

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

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

13. Issues
That is not the heaven

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

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

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

17. Web Components spare parts
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
Come on! 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 browser compatibility
Low performance
Bad development efficiency

22. Need more maturer way
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?
✓ Templating via JSX
✓ Import via Webpack
✓ Encapsulation
✓ Well known development flow
✓ Less DOM manipulations

26. +
=

27. Let`s get the foam!

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 convert React component
into a Web component?
document.registerReact('component-name', MyReactClass);

31. Does it feels native to HTML?

33. Does it feels native to HTML?

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

36. How to run it
Automatic initialization
Manual start up

37. So

38. and how to get the Scope?

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

41. and Finally...

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

43. 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);

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

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

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