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.

Front-end tower of Babylon

1,944 views

Published on

This is about the great front-end tower of Babel which is being built right now. And how to stop miscommunication during the construction mixing web-components and React.js with help of Reactive Elements library.

Published in: Internet, Technology, Business
  • Be the first to comment

Front-end tower of Babylon

  1. 1. @PixelsCommander denis.radin@gmail.com
  2. 2. Demolishing the Babel Tower of WWW
  3. 3. If apps are bricks in the tower they do not match Since frameworks are not compatible and every component is reinvented twice
  4. 4. Web components ✓ Native (no Babylon) ✓ Reusable ✓ Composable ✓ UI abstraction
  5. 5. How does it feel? <calendar></calendar>
  6. 6. As simple as <map></map>
  7. 7. Exposing APIs <map lang='52.37' att='4.88'></map>
  8. 8. Exposing APIs <calendar chosen='2014-06-19'></calendar>
  9. 9. Issues That is not the heaven
  10. 10. Web Components spare parts HTML Templates – Scaffolding HTML Import – Packaging Shadow DOM – Encapsulation Custom elements...
  11. 11. Web Components spare parts HTML Templates – Scaffolding HTML Import – Packaging Shadow DOM – Encapsulation Custom elements...
  12. 12. Web Components spare parts HTML Templates – Polyfill HTML Import – Polyfill Shadow DOM – Polyfill Custom elements...
  13. 13. Web Components spare parts HTML Templates – Polyfill HTML Import – Polyfill Shadow DOM – Polyfill Custom elements...
  14. 14. Web components ✓ Native (no Babylon) ✓ Reusability ✓ Composability ✓ UI abstraction ☓ Production ready
  15. 15. One more trouble Come on! Are not three polyfills enough of troubles?
  16. 16. Web components ✓ Native (no Babylon) ✓ Reusability ✓ Composability ✓ UI abstraction ☓ Production ready ☓ Development efficiency
  17. 17. Web components Bad browser compatibility Low performance Bad development efficiency
  18. 18. Need more maturer way May be something from existing frameworks?
  19. 19. Conceptually close ✓ Reusability ✓ Composability ✓ UI abstraction (JSX) ✓ Production ready ✓ Development efficiency ☓ Native (F*cking Babylon)
  20. 20. What solves? ✓ Templating via JSX ✓ Import via Webpack ✓ Encapsulation ✓ Well known development flow ✓ Less DOM manipulations
  21. 21. + =
  22. 22. Let`s get the foam!
  23. 23. Reactive Elements dependencies ☓ HTML Templates ☓ HTML Import ☓ Shadow DOM ✓ Custom Elements 1 of 4? Much better!
  24. 24. Reactive Elements dependencies ✓ Native ✓ Reusability ✓ Composability ✓ UI abstraction ✓ Production ready (actually used) ✓ Development efficiency
  25. 25. How to convert React component into a Web component? document.registerReact('component-name', MyReactClass);
  26. 26. Does it feels native to HTML?
  27. 27. Does it feels native to HTML?
  28. 28. And not React only... document.registerReact('component-name', MyReactClass); document.registerAngular('component-name', 'moduleName'); document.registerBackbone('component-name', BackboneView);
  29. 29. How to run it Automatic initialization Manual start up
  30. 30. So
  31. 31. and how to get the Scope?
  32. 32. Ok it can be easy for isolated scope for non-isolated scope so the scope with properties and methods:
  33. 33. and Finally...
  34. 34. MVC Elements https://github.com/MVC-Elements
  35. 35. 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);
  36. 36. MVC Elements https://github.com/MVC-Elements
  37. 37. Questions ? https://github.com/MVC-Elements
  38. 38. @PixelsCommander denis.radin@gmail.com @stevermeister stevermeister@gmail.com

×