Polymer Code Lab in Dart from DevFest Kraków 2014

1. Polymer
Jakub Škvára
@skvaros
Dev Fest Kraków 2014

3. 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.

4. 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>

6. Compatibility
● Chrome 36+
● Polyfils

7. 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/

8. 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)

9. 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>

10. 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>

11. Custom element dart code
import '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;
}
}

12. Custom attributes
<my-volume volume="11"></my-volume>
@CustomTag('my-volume')
class MyVolume extends PolymerElement {
@published int volume = 0;
MyVolume.created() : super.created();
}

13. 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>

14. 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();
}
}

15. 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

16. github.com/jskvara/dart-polymer-code-lab-krakow/