Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[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/

Google Developers Group Lviv

October 23, 2015
Tweet

More Decks by Google Developers Group Lviv

Other Decks in Programming

Transcript

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

    from Google, that helps you to use custom HTML elements (web components).
  2. #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.
  3. #dfua Polymer element You can define custom HTML elements which

    have css styles, HTML and JavaScript included.
  4. #dfua Configuration Each component has defined interface and way how

    to define its configuration (HTML = attributes).
  5. #dfua Speed of development Polymer has a predefined set of

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

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

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

    and have the same interface for web and mobile app.
  9. #dfua Angular vs Polymer • MVC Framework • $scope •

    Angular template system • View Library • encapsulation (Shadow DOM) • W3C standards + Polyfills Differences between Angular and Polymer.
  10. #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.
  11. #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.
  12. #dfua • Render Web Components with React • react-polymer library

    ◦ https://github.com/jscissr/react-polymer React + Polymer How to use React and Polymer together.
  13. #dfua DOM updates Observe functions that manipulate the DOM $watch

    Tree comparison How these libraries decide when to update the DOM.
  14. #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.
  15. #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.
  16. #dfua Content <content> Transclusion props.children How to include content in

    custom elements. Example: <my-elem><my-second><p>text</p></my-elem>
  17. #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
  18. #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
  19. 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.
  20. Workshop: Let's build a new Polymer application Tomorrow 16:00 Community

    hall https://github.com/jskvara/polymer-workshop-lviv