Polymer presentation from: Dart + Polymer code lab GUG.cz 30.8.2014

1. Polymer
Jakub Škvára
@skvaros
Interaktivní prezentace: https://slides.com/jskvara/polymer/

2. What is polymer
Polymer 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.

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

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

5. 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é.

6. Everything is an element
● AngularJs - directive
● EmberJs - component
● ReactJs - component
Web Components je soubor specifikací, jak používat vlastní elementy v HTML.
Moderní JS framworky již vlastní elementy používají, ale mají vlastní implementace.

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

8. The Polymer world-view
(Everything is an Element)
● Functional
● Reusable
● Interoperable
● Encapsulated
● Configurable
● Programmable
● Event generator
● Composable <video>
Výhody komponent: Funkční (browser ví jak vykreslit), Znovupoužitelné, Interakce s JS,
Zapouzdřenost, Konfigurovatelné, Programovatelné, JS Eventy, Skládatelné. Př:<video>

9. Features
● 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}})
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

10. Current state
Chrome > 36 - native
Polyfills
Custom Elements
■ OK (except :unresolved)
■ Github using <time>
Vše nativní od Google Chrome verze 36
Pro ostatní prohlížeče existují polyfilly
Některé specifikace jsou použitelné již dnes
Github používá tag <time> dnes

11. Other libraries
● X-Tag + Bricks (mozilla)
● Cooperation
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

12. Future
● Standard
● Native Libraries
● Angular 2
● ReactJS
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í

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

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

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

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

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

18. Google Web Components
Sbírka hotových google elementů, které lze použít na webu
Ukázka: http://googlewebcomponents.github.io/

19. Import Custom Element
<!-- Polyfill Web Components support for older browsers -->
<script src="components/platform/platform.js"></script>
<!-- Import element -->
<link rel="import" href="google-map.html">
<!-- Use element -->
<google-map lat="37.790" long="-122.390"></google-map>
Použití hotového elementu

20. Create Custom Element
<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>
Vytvoření nového elementu

21. polymer.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;
}
}
Vytvoření nového elementu v programovacím jazyce Dart

22. Custom attributes
<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 'package:polymer/polymer.dart';
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>
Používání vlastních atributů u elementů

23. Template conditionals
<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>
Podmínky v šablonách
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;
}
}

24. Template loops
<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>
Cykly v šablonách
import 'package:polymer/polymer.dart';
@CustomTag('fav-fruits')
class FavFruitsElement extends PolymerElement {
final List fruits = toObservable(['apples', 'pears', 'bananas']);
FavFruitsElement.created() : super.created();
}

25. Extending DOM elements
<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';
Rozšíření DOM elementů
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>

26. Why you should be
excited
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)
Proč se o Polymer zajímat? Produktivita (známé technologie + lepší čitelnost) a
znovupoužitelnost (hotové komponenty, spolupráce s frameworky, izolace CSS)