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.
Other libraries
Polymer vs
Jakub Škvára
Full-stack Engineer @ Shipito
Polymer
“jQuery for web components”
#dfua
Polymer - use your own HTML elements
<head>
<html>
<!-- Import element -->
<link rel="import"
href="components/googl...
#dfua
Polymer element
<dom-module id="my-element">
<link rel="import" type="css" href="my-element.css">
<template>
<p>My e...
Components benefits
#dfua
Encapsulation
#dfua
Configuration
#dfua
Composable
#dfua
Decoupling
Polymer advantages
#dfua
Speed of development
#dfua
Rich forms
#dfua
Special elements
#dfua
Material design
Angular vs Polymer vs React
#dfua
Angular Directives
angular.module('helloWorldDirective', [])
.controller('Controller', ['$scope', function($scope) {...
#dfua
Angular vs Polymer
● MVC Framework
● $scope
● Angular template system
● View Library
● encapsulation (Shadow DOM)
● ...
#dfua
● Angular 2.0 directives - same as Polymer Web Components
● Different binding system
○ Changes from Polymer don’t pu...
#dfua
React Components
var HelloWorld = React.createClass({
render: function() {
return (
<div className="helloWorld">
Hel...
#dfua
React vs Polymer
● Virtual DOM
● Server-side rendering
● One-way data flow
● Custom Elements
● Portability
● Two-way...
#dfua
● Render Web Components with React
● react-polymer library
○ https://github.com/jscissr/react-polymer
React + Polyme...
Angular Polymer React
#dfua
DOM
Shadow DOMNormal DOM Virtual DOM
#dfua
DOM updates
Observe
functions that
manipulate the DOM
$watch Tree comparison
#dfua
CSS
Component stylesCSS styles Page or inline
Styles
#dfua
Template
<template>HTML string,
<script> or
external file
JSX
#dfua
Content
<content>Transclusion props.children
#dfua
Data binding
Two-way
One-way
Object.observe()
Two-way
One-way
$watch
One-way
(Flux)
#dfua
Life cycle
Asynchronous
(Created, Ready)
Synchronous
(compile + link)
Mount + update
Let’s try polymer
with your current framework
Workshop: Let's build a new
Polymer application
Tomorrow 16:00
Community hall
Thank you!
Questions?Questions?
@skvaros
+JakubSkvara
www.jakubskvara.cz
Upcoming SlideShare
Loading in …5
×

Polymer vs other libraries (Devfest Ukraine 2015)

4,065 views

Published on

Most modern front-end JavaScript libraries provide support for component based development. Components help separate large applications into standalone building blocks with specified communication API. Let's compare Polymer elements with components from React, Angular.

Published in: Software
  • Be the first to comment

Polymer vs other libraries (Devfest Ukraine 2015)

  1. 1. Other libraries Polymer vs Jakub Škvára Full-stack Engineer @ Shipito
  2. 2. Polymer “jQuery for web components”
  3. 3. #dfua Polymer - use your own HTML elements <head> <html> <!-- Import element --> <link rel="import" href="components/google-map/google-map.html"> </head> <body> <!-- Use element --> <google-map latitude="50.066354" longitude="14.402736" zoom="14.402736"></google-map>
  4. 4. #dfua Polymer element <dom-module id="my-element"> <link rel="import" type="css" href="my-element.css"> <template> <p>My element</p> </template> <script> Polymer({ is: 'my-element' }); </script> </dom-module>
  5. 5. Components benefits
  6. 6. #dfua Encapsulation
  7. 7. #dfua Configuration
  8. 8. #dfua Composable
  9. 9. #dfua Decoupling
  10. 10. Polymer advantages
  11. 11. #dfua Speed of development
  12. 12. #dfua Rich forms
  13. 13. #dfua Special elements
  14. 14. #dfua Material design
  15. 15. Angular vs Polymer vs React
  16. 16. #dfua Angular Directives angular.module('helloWorldDirective', []) .controller('Controller', ['$scope', function($scope) { $scope.hello = {who: 'Devfest'}; }]) .directive('myHelloWorld', function() { return { template: 'Hello {{hello.who}}' }; }); <div ng-controller="Controller"> <my-hello-world></my-hello-world> </div>
  17. 17. #dfua Angular vs Polymer ● MVC Framework ● $scope ● Angular template system ● View Library ● encapsulation (Shadow DOM) ● W3C standards + Polyfills
  18. 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 <input type="text" ng-model="text"/> <input is="iron-input" ng-model="text"/> <paper-input ng-model="text""></paper-input>
  19. 19. #dfua React Components var HelloWorld = React.createClass({ render: function() { return ( <div className="helloWorld"> Hello {this.props.who}! </div> ); } }); ReactDOM.render( <HelloWorld who="Lviv" />, document.getElementById('content') );
  20. 20. #dfua React vs Polymer ● Virtual DOM ● Server-side rendering ● One-way data flow ● Custom Elements ● Portability ● Two-way data binding
  21. 21. #dfua ● Render Web Components with React ● react-polymer library ○ https://github.com/jscissr/react-polymer React + Polymer import polymerReact from 'polymer-react'; import React from 'react'; import {PaperInput} from 'polymer-react/input'; <PaperInput value={this.state.value} onChange={this.valueChanged} />
  22. 22. Angular Polymer React
  23. 23. #dfua DOM Shadow DOMNormal DOM Virtual DOM
  24. 24. #dfua DOM updates Observe functions that manipulate the DOM $watch Tree comparison
  25. 25. #dfua CSS Component stylesCSS styles Page or inline Styles
  26. 26. #dfua Template <template>HTML string, <script> or external file JSX
  27. 27. #dfua Content <content>Transclusion props.children
  28. 28. #dfua Data binding Two-way One-way Object.observe() Two-way One-way $watch One-way (Flux)
  29. 29. #dfua Life cycle Asynchronous (Created, Ready) Synchronous (compile + link) Mount + update
  30. 30. Let’s try polymer with your current framework
  31. 31. Workshop: Let's build a new Polymer application Tomorrow 16:00 Community hall
  32. 32. Thank you! Questions?Questions? @skvaros +JakubSkvara www.jakubskvara.cz

×