Polymer Code Lab in Dart - DevFest Kraków 2014

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/