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

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