Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Polymer vs Angular vs React comparison
Similaire à Polymer vs Angular vs React comparison (20)
Dernier
Dernier (20)
Polymer vs Angular vs React comparison
- 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