[Jakub Škvára] Polymer vs Other Libraries

[Jakub Škvára] Polymer vs Other Libraries

Presentation from GDG DevFest Ukraine 2015 - the biggest Google related event in the country. October 23-24, Lviv. Learn more at http://devfest.gdg.org.ua/

3a6de6bc902de7f75c0e753b3202ed52?s=128

Google Developers Group Lviv

October 23, 2015
Tweet

Transcript

  1. Other libraries Polymer vs Jakub Škvára Full-stack Engineer @ Shipito

  2. Polymer “jQuery for web components” Polymer is a JavaScript library

    from Google, that helps you to use custom HTML elements (web components).
  3. #dfua Polymer - use your own HTML elements There is

    an example how you can easily import and use custom elements. You can use attributes to pass parameters to the elemnts.
  4. #dfua Polymer element You can define custom HTML elements which

    have css styles, HTML and JavaScript included.
  5. Component benefits What are the advantages of components?

  6. #dfua Encapsulation Each component is encapsulated and can’t influence the

    behaviour of other components.
  7. #dfua Configuration Each component has defined interface and way how

    to define its configuration (HTML = attributes).
  8. #dfua Composable Each component can include other subcomponents and you

    can combine components together.
  9. #dfua Decoupling Each component has defined way how to communicate

    with other components.
  10. Polymer advantages What are the advantages of Polymer?

  11. #dfua Speed of development Polymer has a predefined set of

    custom elements you can use. https://elements.polymer-project.org/
  12. #dfua Rich forms You can extend native elements like <input>

    and create your own custom elements. For example <email-input>.
  13. #dfua Special elements There are custom elements for special use

    cases like maps, service worker, bluetooth, etc.
  14. #dfua Material design You can use material design (paper) elements

    and have the same interface for web and mobile app.
  15. Angular vs Polymer vs React Let’s compare Angular, Polymer and

    React in general.
  16. #dfua Angular Directives Angular directives might look like custom elements.

  17. #dfua Angular vs Polymer • MVC Framework • $scope •

    Angular template system • View Library • encapsulation (Shadow DOM) • W3C standards + Polyfills Differences between Angular and Polymer.
  18. #dfua • Angular 2.0 directives - same as Polymer Web

    Components • Different binding system ◦ Changes from Polymer don’t push changes to Angular ◦ bindPolymer and ng-polymer-elements directives for Angular Angular + Polymer How to use Angular and Polymer together.
  19. #dfua React Components React components look similar to custom elements.

  20. #dfua React vs Polymer • Virtual DOM • Server-side rendering

    • One-way data flow • Custom Elements • Portability • Two-way data binding Differences between React and Polymer.
  21. #dfua • Render Web Components with React • react-polymer library

    ◦ https://github.com/jscissr/react-polymer React + Polymer How to use React and Polymer together.
  22. Angular Polymer React Let’s compare how Angular, Polymer and React

    solve the same problems.
  23. #dfua DOM Shadow DOM Normal DOM Virtual DOM How these

    libraries work with DOM.
  24. #dfua DOM updates Observe functions that manipulate the DOM $watch

    Tree comparison How these libraries decide when to update the DOM.
  25. #dfua CSS Component CSS styles CSS styles CSS or inline

    Styles Updating CSS styles can affect other elements. Polymer - Shadow DOM encapsulates the CSS. React - you can write special inline Styles in JS.
  26. #dfua Template <template> HTML string, <script> or external file JSX

    Polymer - special <template> tag with HTML, CSS, JS. React - JSX - looks like HTML and converted to JS.
  27. #dfua Content <content> Transclusion props.children How to include content in

    custom elements. Example: <my-elem><my-second><p>text</p></my-elem>
  28. #dfua Data binding Two-way One-way Object.observe() Two-way One-way $watch One-way

    (Flux) Angular - digest loop - synchronous Polymer - digest loop - asynchronous React preffers Flux - one-way data flow
  29. #dfua Life cycle Asynchronous (Created, Ready) Synchronous (compile + link)

    Mount + update Angular - 2 phases - compile template + link directive Polymer - asynchronous - onCreated, onReady events React - componentDidMount, etc methods
  30. Let’s try polymer with your current framework You’re probably using

    some sort of components already with your current framework. Next time you will write your own component think if Polymer can help you with it.
  31. Workshop: Let's build a new Polymer application Tomorrow 16:00 Community

    hall https://github.com/jskvara/polymer-workshop-lviv
  32. Thank you! Questions? Questions? @skvaros +JakubSkvara www.jakubskvara.cz