Up & Running with Polymer

UP & RUNNING WITH POLYMER

Fiyaz Hasan(N.B: Don’t try to pronounce my name. Just call me Fizz)

WEB COMPONENTShttps://www.webcomponents.org/

Allow us to bundle markup and Styles

into custom HTML elements(Magic of Shadow DOM)

<div class="container"></div>

<script> var host = document.querySelector('.container'); var root = host.createShadowRoot(); root.innerHTML = '<p>Hello World</p>' </script>

Writing First Web Component!

<div class="container"></div>

<template> <p>Hello I’m just a simple template</p> </template>

<script> var tmpl = document.querySelector('template'); var host = document.querySelector('.container'); var root = host.createShadowRoot(); root.appendChild(document.importNode(tmpl.content, true)); </script>

Using <template> tag

<div class="container"> <p>I want myself appended inside of a template</p> </div>

<template> <content select="p"></content> </template>

Using <content> tag

<script> var tmpl = document.querySelector('template');

// Create a prototype for a new element that extends HTMLElement var HelloWorldProto = Object.create(HTMLElement.prototype);

// Setup our Shadow DOM and clone the template HelloWorldProto.createdCallback = function () { var root = this.createShadowRoot(); root.appendChild(document.importNode(tmpl.content, true)); };

// Register our new element var HelloWorld = document.registerElement('hello-world', { prototype: HelloWorldProto }); </script>

Javascript for creating custom element

Do you know Angular?

Yes!

Think of Directives…..But Wait!

We have a new concept of components in

Angular 1.5.0

POLYMER(https://www.polymer-project.org/)

A library which can help us working with web components easily

(Just like JQuery, which helps us to work with Javascript somewhat easier but behind the scene everything is plain Javascript)

In Short…• Component creation starts with defining a template in a <dom-

module> tag• Way of creating Local DOM (Shady DOM) under our Light DOM• Local DOM is a way of encapsulating a part of HTML code inside

the Light DOM• Outer scripts and styles can not interfere in Local DOM

<dom-module id="hello-universe"> <template> <h1>Hello Universe Component</h1> </template></dom-module>

Defining Dom Module

<dom-module id="hello-universe"> <template>

……write markup </template> <script> Polymer({ is: "hello-universe" }); </script></dom-module>

Use polymer to stop writing boilerplate code

<link ref="import" href="hello-universe.html"/>

Import components in other document

<!DOCTYPE html>

<html><head> <meta charset="utf-8" /> <title>Asp.Net Core Polymer Starter Template</title>

<link rel="import" href="lib/polymer/polymer.html" />

 <link rel="import" href="components/hello-universe.html" /></head><body> <hello-universe></hello-universe>

<script src="lib/webcomponentsjs/webcomponents-lite.js"></script> </body></html>

Don’t forget to add polymer itself

<hello-universe> <p>Hello</p></hello-universe>

<dom-module id="hello-universe"> <template> <h1>Hello Universe Component</h1> <content select='p'></content> </template> <script> Polymer({ is: "hello-universe" }); </script></dom-module>

Injecting html from Light DOM to Local DOM

<dom-module id="my-input"> <script> Polymer({ is: 'my-input', extends: 'input', created: function () { this.style.border = '1px solid red'; } }); </script></dom-module>

<input is="my-input">

Extending native elements

Lifecycle callbacks…• Created• Ready• Attached• Detached• AttributeChanged

Polymer({

is: ‘x-employee',

properties: { name: String, isHappy: Boolean, salary: { type: Number, readOnly: true, notify: true } }});

Defining Property on your component

type.value.observer. readOnlynotifycomputed reflectionToAttribute

<dom-module id=" x-employee "> <script> Polymer({ is: 'x-employee', properties: { employee : String, isBad: { type: Boolean, notify: true } }, attached: function() { this.textContent = "My name is " + (this.employee || "nobody") + '.\n' + "This emplyee is " + (this.isBad ? "Bad" : "Good") + "."; } }); </script></dom-module>

<x-employee employee="Fiyaz" is-bad></x-employee>

Attribute Mapping

this.$. & this.$$(selector)(static nodes & dynamic (dom-repeat/ dom-if))

<script> Polymer({ is: 'x-custom', listeners: { 'tap': 'regularTap', 'special.tap': 'specialTap' }, regularTap: function(e) { alert("Thank you for tapping"); }, specialTap: function(e) { alert("It was special tapping"); } }); </script>

Events

<template> <button on-tap="handleTap">Kick Me</button> </template> <script> Polymer({ is: 'x-custom', handleTap: function() { alert('Ow!'); } }); </script>

Annotated Events

this.listen(this.$.myButton, 'tap', 'onTap');this.unlisten(this.$.myButton, 'tap', 'onTap');

Imperatively add and remove listeners

<dom-module id="x-custom"> <template> <button on-click="handleClick">Kick Me</button> </template> <script> Polymer({ is: 'x-custom', handleClick: function(e, detail) { this.fire('kick', {kicked: true}); } }); </script></dom-module><x-custom></x-custom><script> document.querySelector('x-custom').addEventListener('kick', function (e) { console.log(e.detail.kicked); // true })</script>

Custom Events

<dom-module id="host-element"> <template> <target-element target-property="{{hostProperty}}"></target-element> </template></dom-module>

Data Binding

<template>  <my-element selected$="[[value]]"></my-element> 

 <my-element selected="{{value}}"></my-element> </template>

Attribute and Property Binding

<dom-module id="employee-list"> <template> <div> Employee list: </div> <template is="dom-repeat" items="{{employees}}"> <div>First name: <span>{{item.first}}</span></div> <div>Last name: <span>{{item.last}}</span></div> </template> <template is="dom-if" if="{{emplyee.isAdmin}}"> <div>You are the man</div> </template>

</template> </dom-module>

Dom-repeat, Dom-if

<template id="t" is="dom-bind">

<iron-ajax url="http://..." last-response="{{data}}" auto></iron-ajax>

<template is="dom-repeat" items="{{data}}"> <div><span>{{item.first}}</span> <span>{{item.last}}</span></div> </template>

</template>

Dom-bind

<user-view first="{{user.first}}" last="{{user.last}}"></user-view>

this.set('name.last', 'Maturin'); <my-page show-login="[[!isLoggedIn]]"></my-page> <div>[[_formatName(first, last, title)]]</div> <img src$="https://www.example.com/profiles/[[userId]].jpg"> <span>Name: [[lastname]], [[firstname]]</span>

[[arrayItem(myArray.*, 0, 'name')]] <input type="checkbox" checked="{{hostChecked::change}}">

<my-element value="{{hostValue::value-changed}}">

Thank You!

Technology

Up & Running with Polymer