Polymer
Jakub Škvára@skvaros
Dev Fest Kraków 2014
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.
Web Components● Custom elements: <my-element></my-element>● Shadow dom: (better <iframe>)● HTML Imports: <link rel="import" href="my-element.
html">● Templates: <template></template>
Polymer:● Data binding: <div>{{model}}</div>
Compatibility
● Chrome 36+● Polyfils
Examples● https://www.polymer-project.org/● http://www.chromestatus.com/features● https://www.polymer-project.org/apps/topeka/● https://www.polymer-project.org/components/paper-calculator/demo.html● http://todomvc.com/architecture-examples/polymer/● http://googlewebcomponents.github.io/● http://customelements.io/● http://html5-demos.appspot.com/● http://builtwithpolymer.org/● http://devfest.gdgbeijing.org/● http://zenorocha.github.io/voice-elements/● http://www.gdgdc.com/● http://ebidel.github.io/material-playground/
Why you should be excitedDeveloper 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)
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>
Create Custom Element<polymer-element name="my-counter" attributes="counter">
<template>
<style> /*...*/ </style>
Value: <span>{{counter}}</span><br>
<button on-tap="{{increment}}">Increment</button>
</template>
<script src=”my-counter.dart” type=”application/dart”>
</script>
</polymer-element>
Custom element dart codeimport 'package:polymer/polymer.dart' ;
import 'dart:html';
@CustomTag('my-counter')
class MyCounter extends PolymerElement {
@observable int counter = 0;
MyCounter.created() : super.created();
void increment(Event e, var detail, Node target) {
counter += 1;
}
}
Custom attributes<my-volume volume="11"></my-volume>
@CustomTag('my-volume')
class MyVolume extends PolymerElement {
@published int volume = 0;
MyVolume.created() : super.created();
}
Templates<template>
<template if="{{count <= 0}}">
<p>Click the button. It is fun!</p>
</template>
<template repeat="{{fruit in fruits}}">
<li>I like {{ fruit }}.</li>
</template>
</template>
Extending DOM elements<button is="fancy-button">Click me</button>
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();
}
}
Useful information
● https://www.dartlang.org/polymer/● https://github.com/dart-lang/polymer-dart-
patterns● https://www.polymer-project.org/● https://www.polymer-project.
org/docs/polymer/debugging.html
github.com/jskvara/dart-polymer-code-lab-krakow/