polymer project presentation

Polymer

Jakub Škvára@skvaros

Interaktivní prezentace: https://slides.com/jskvara/polymer/

What is polymerPolymer is a new type of library for

the web, built on top of Web Components, and designed to

leverage the evolving web platform … on modern browsers.

Polymer je nový typ knihovny pro web od Googlu, postavený na standardech Web Components a slouží pro zjednodušení vývoje pro web a moderní prohlížeče.

Core Elements

Základní elementy (Core elements)Ukázka: http://www.polymer-project.org/components/core-elements/demo.html

Paper Elements

Material design (elementy od Google stejné pro web i Android)Ukákzka: http://www.polymer-project.org/components/paper-elements/demo.html

Divs Hell

Aktuální vývoj aplikací vypadá tak, že máme HTML plné elemntů <div> bez dalšího významu, což je extrémně nepřehledné.

Web Components je soubor specifikací, jak používat vlastní elementy v HTML.Moderní JS framworky již vlastní elementy používají, ale mají vlastní implementace.

Everything is an element● AngularJs - directive● EmberJs - component● ReactJs - component

Součástí polymeru jsou: polyfilly pro starší prohlížeče (Foundation), polymer.js (přidává funkcionalitu) a elementy (Core + Paper elements)

The Polymer world-view(Everything is an Element)

Výhody komponent: Funkční (browser ví jak vykreslit), Znovupoužitelné, Interakce s JS, Zapouzdřenost, Konfigurovatelné, Programovatelné, JS Eventy, Skládatelné. Př:<video>

● Functional● Reusable● Interoperable● Encapsulated● Configurable● Programmable● Event generator● Composable <video>

Features

Hlavní specifikace Web Component: Shadow dom(zapouzdření), HTML Import (jako CSS import), Custom elements (naše elemeny). Polymer přidává šablony a data-binding

● Web Components○ Shadow dom (better <iframe>)○ HTML Imports (<link rel="import"

href="....html">)○ Custom elements (createdCallback,

attachedCallback, detachedCallback, attributeChangedCallback)

● Polymer○ Templates (<template></template>)○ data-binding ({{model}})

Current state

Vše nativní od Google Chrome verze 36Pro ostatní prohlížeče existují polyfillyNěkteré specifikace jsou použitelné již dnesGithub používá tag <time> dnes

Chrome > 36 - native

Polyfills

Custom Elements

■ OK (except :unresolved)■ Github using <time>

Other libraries

Existuje knihovna využívající standardy Web Components od Mozilly s nazvem X-Tag.Mozilla a Google spolu komunikují při vývoji obou knihoven, aby zachovaly kompatibilitu

● X-Tag + Bricks (mozilla)● Cooperation

Future

Do budoucna: web components více rozšířené a součástí browserůAngular 2 bude pravděpodobně používat Polymer a ReactJS uvažuje o použití

● Standard● Native Libraries● Angular 2● ReactJS

Designer

Polymer designer (webová aplikace na rychlý návrh polymerových komponent)Ukázka: http://www.polymer-project.org/tools/designer/

Calculator

Kalkulačka za použití paper elementůUkázka: http://www.polymer-project.org/components/paper-calculator/demo.html

Todo MVC

Polymer Todo MVC (stejná aplikace napsaná v různých JS frontend frameworcích)Ukázka: http://todomvc.com/architecture-examples/polymer/

Chromium Features Dashboard

Přehled implementovaných vlastností v různých verzích prohlížeče ChromiumUkázka: http://www.chromestatus.com/features

Custom Elements

Sbírka hotových elementů, které lze použít na webuUkázka: http://customelements.io/

Google Web Components

Sbírka hotových google elementů, které lze použít na webuUkázka: http://googlewebcomponents.github.io/

Import Custom Element

Použití hotového elementu



<script src="components/platform/platform.js"></script>



<link rel="import" href="google-map.html">



<google-map lat="37.790" long="-122.390"></google-map>

Create Custom Element

Vytvoření nového elementu

<polymer-element name="my-counter" attributes="counter">

<template><style> /*...*/ </style>

<div id="label"><content></content></div>

Value: <span id="counterVal">{{counter}}</span><br>

<button on-tap="{{increment}}">Increment</button>

</template>

<script>

Polymer({

counter: 0, // Default value

counterChanged: function() {this.$.counterVal.classList.add('highlight');},

increment: function() {this.counter++;}

});

</script>

</polymer-element>

polymer.dart

Vytvoření nového elementu v programovacím jazyce Dart

import 'package:polymer/polymer.dart';

import 'dart:html';

@CustomTag('click-counter')

class ClickCounterElement extends PolymerElement {

@observable int count = 0;

ClickCounterElement.created() : super.created();

void increment(Event e, var detail, Node target) {

count += 1;

}

}

Custom attributes

Používání vlastních atributů u elementů

<polymer-element name="volume-nob">

<template>

<p>You turned the volume to {{volume}}.</p>

</template>

<script type="application/dart" src="volume_nob.dart"></script>

</polymer-element>


import 'dart:html';

@CustomTag('volume-nob')

class VolumeNobElement extends PolymerElement {

// @published means 'this is an attribute', and it is observable.

@published int volume = 0;

VolumeNobElement.created() : super.created();

}

<volume-nob

volume="11">

</volume-nob>

Template conditionals

Podmínky v šablonách

<polymer-element name="click-counter">

<template>

<button on-click="{{increment}}">Click

Me</button>

<template if="{{count <= 0}}">

<p>Click the button. It is fun!</p>

</template>

<template if="{{count > 0}}">

<p>You clicked {{count}} times.</p>

</template>

</template>

<script type="application/dart" src="

click_counter.dart"></script>

</polymer-element>


import 'dart:html';

@CustomTag('click-counter')

class ClickCounterElement extends PolymerElement {

@observable int count = 0;

ClickCounterElement.created() : super.created();

void increment(Event e, var detail, Node target) {

count += 1;

}

}

Template loops

Cykly v šablonách

<polymer-element name="fav-fruits">

<template>

<ul>

<template repeat="{{fruit in fruits}}">

<li>I like {{ fruit }}.</li>

</template>

</ul>

</template>

<script type="application/dart" src="fav_fruits.dart"></script>

</polymer-element>import 'package:polymer/polymer.dart';

@CustomTag('fav-fruits')

class FavFruitsElement extends PolymerElement {

final List fruits = toObservable(['apples', 'pears', 'bananas']);

FavFruitsElement.created() : super.created();

}

Extending DOM elements

Rozšíření DOM elementů

<polymer-element name="fancy-button" extends="button">

<template>

<style>:host {background: pink;}</style>

<content></content>

</template>

<script type="application/dart" src="fancy_button.dart"></script>

</polymer-element> import 'package:polymer/polymer.dart';

import 'dart:html' show ButtonElement;

@CustomTag('fancy-button')

class FancyButton extends ButtonElement with Polymer, Observable {

FancyButton.created() : super.created() {

polymerCreated();

}

}

<button is="fancy-button">Click me</button>

Why you should beexcited

Proč se o Polymer zajímat? Produktivita (známé technologie + lepší čitelnost) a znovupoužitelnost (hotové komponenty, spolupráce s frameworky, izolace CSS)

Developer productivity

■ DOM + JS + CSS → no new APIs to learn!■ say what you mean → readability

Re-usability

■ don't reinvent the wheel■ easy interop with other frameworks■ CSS isolation

Good software engineering paradigms on web (OOP)

polymer project presentation

Engineering