This document provides an overview of Polymer, a library for building web applications using web components. Polymer leverages emerging web standards like custom elements, shadow DOM, templates and data binding to provide reusability and encapsulation. It allows developers to create custom HTML elements with associated JavaScript behavior that can be reused across projects. The document discusses Polymer's core capabilities and components, how to create and use custom elements, and why developers should be excited about its potential to improve productivity and software design.

1. Polymer
+JakubŠkvára
@skvaros
Dev Fest Prague 2014 #itshackademic

3. <paper-tabs>
<paper-tab>KNOWLEDGE</paper-tab>
<paper-tab>HISTORY</paper-tab>
<paper-tab>FOOD</paper-tab>
</paper-tabs>

4. The secret to building large apps is never build
large apps. Break your applications into small
pieces. Then, assemble those testable, bite-sized
pieces into your big application"
Justin Meyer

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

6. Web Components
● Custom elements: <my-element></my-element>
● Shadow dom: (better <iframe>)
● HTML Imports: <link rel="import" href="my-elem.html">
● Templates: <template></template>
Polymer:
● Data binding: <div>{{model}}</div>

8. Compatibility
● Chrome 36+
● Polyfils

9. Core Elements

10. Paper Elements

11. Future
● Native implementation in browsers
● Other elements (customelements.io)
● Angular 2
● Learn
● Build
● Share

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

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

14. 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.js” type=”text/javascript”>
</script>
</polymer-element>

15. Custom element JavaScript code
// my-counter.js
Polymer({
counter: 0,
increment: function() {
if (this.name) {
this.counter += 1;
}
}
});

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

17. Extending DOM elements
<button is="my-button"></button>
<polymer-element name="my-button" extends="basic-button">
<template>
<span>
<i class="icon"></i>
</span>
</template>
</polymer-element>

18. Useful information
● https://www.polymer-project.org/
● https://www.polymer-project.
org/docs/polymer/debugging.html
● http://customelements.io/
● http://builtwithpolymer.org/
● http://googlewebcomponents.github.io/

19. <thank-you>
Q&A
#itshackademic

20. github.com/jskvara/polymer-code-lab-prague