Polymer vs other libraries (Devfest Ukraine 2015)
•
1 like•5,409 views
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.
Report
Share
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
More Related Content
What's hot
What's hot (20)
Similar to Polymer vs other libraries (Devfest Ukraine 2015)
Similar to Polymer vs other libraries (Devfest Ukraine 2015) (20)
Recently uploaded
Recently uploaded (20)
Polymer vs other libraries (Devfest Ukraine 2015)
- 1. Other libraries Polymer vs Jakub Škvára Full-stack Engineer @ Shipito
- 2. Polymer “jQuery for web components”
- 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. #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>
- 12. #dfua Rich forms
- 15. Angular vs Polymer vs React
- 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. #dfua Angular vs Polymer ● MVC Framework ● $scope ● Angular template system ● View Library ● encapsulation (Shadow DOM) ● W3C standards + Polyfills
- 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. #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. #dfua React vs Polymer ● Virtual DOM ● Server-side rendering ● One-way data flow ● Custom Elements ● Portability ● Two-way data binding
- 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} />
- 23. #dfua DOM Shadow DOMNormal DOM Virtual DOM
- 24. #dfua DOM updates Observe functions that manipulate the DOM $watch Tree comparison
- 25. #dfua CSS Component stylesCSS styles Page or inline Styles
- 29. #dfua Life cycle Asynchronous (Created, Ready) Synchronous (compile + link) Mount + update
- 30. Let’s try polymer with your current framework
- 31. Workshop: Let's build a new Polymer application Tomorrow 16:00 Community hall