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