polymer vs other libraries (devfest ukraine 2015)
TRANSCRIPT
Other libraries
Polymer vs
Jakub ŠkváraFull-stack Engineer @ Shipito
Polymer“jQuery for web components”
#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>
#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>
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) {
$scope.hello = {who: 'Devfest'};
}])
.directive('myHelloWorld', function() {
return {
template: 'Hello {{hello.who}}'
};
});
<div ng-controller="Controller">
<my-hello-world></my-hello-world>
</div>
#dfua
Angular vs Polymer
● MVC Framework
● $scope
● Angular template system
● View Library
● encapsulation (Shadow DOM)
● W3C standards + Polyfills
#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>
#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')
);
#dfua
React vs Polymer
● Virtual DOM
● Server-side rendering
● One-way data flow
● Custom Elements
● Portability
● Two-way data binding
#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} />
Angular Polymer React
#dfua
DOM
Shadow DOMNormal DOM Virtual DOM
#dfua
DOM updates
Observefunctions 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-wayOne-way
Object.observe()
Two-wayOne-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 applicationTomorrow 16:00Community hall
Thank you!Questions?Questions?
@skvaros+JakubSkvarawww.jakubskvara.cz