Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Polymer vs Angular vs React comparison
Ähnlich wie Polymer vs Angular vs React comparison (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (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