Google Polymer builds a comprehensive web platform on the foundation of the emerging standard of Web Components.

1. Polymer Project
The rise of Polymer and Web Components
Kostas Karolemeas, CEO @allcancode

2. My background - Things becoming mainstream
‘80s - Home Computing
‘90s - OOP
‘90s - 3D CG
‘90s - GUI

3. My background - Things becoming mainstream
‘90s - Write Once...
‘90s - WWW
‘00s - Java App Servers
‘10s - Cloud Services

4. The rise of Javascript

5. Google: Web Tools Strategy
https://developers.google.com/web/tools/

6. My Project - Allcancode Platform
https://next.allcancode.com
Front-end:
Polymer | HTML5 Canvas
| Custom iOS/Android
wrappers
Back-end:
Node JS | Koa |
DynamoDB | S3 | RedShift
Infrastructure:
AWS

7. The path to Web Components
WEB COMPONENTS
https://www.webcomponents.org/
“A set of web platform APIs that allow you to create new
custom, reusable, encapsulated HTML tags”

8. The path to Web Components
WEB COMPONENTS
https://www.webcomponents.org/
“A set of web platform APIs that allow you to create new
custom, reusable, encapsulated HTML tags”
Dev Tools

9. Polymer Library
A set of features for creating custom elements that work like
standard DOM elements
https://www.polymer-project.org/1.0/docs/devguide/feature-overview

10. “Anatomy” of a Polymer Component
<element-name greeting=”Hey!”>
</element-name>
Presentation
Behavior

11. Polymer Component Properties
● Property type
● Default value
● Property change observer: Calls a method whenever the property
value changes.
● Read-only status: Prevents accidental changes to the property value.
● Two-way data binding support: Fires an event whenever the
property value changes.
● Computed property: Dynamically calculates a value based on other
properties.
● Property reflection to attribute: Updates the corresponding attribute
value when the property value changes.

12. Polymer Component Properties: 2-way binding

13. Polymer Component Properties: One-way binding (downward)

14. Polymer Component Properties: One-way binding (downward)

15. Polymer Component Properties: One-way binding (upward, child-to-host)

16. Polymer Component Helpers: Repeater
Dynamic Sorting/filtering

17. Polymer Component Helpers: Conditional
Lazy Creation
vs.
<div hidden$=”{{!shouldShow}}”>

18. Polymer Component Local DOM
Polymer.dom(this.root).querySelector(selector)
this.$$(selector)

19. Polymer Component “Local” CSS
Quill Js (Rich Text Editor)
:host ::content .ql-container {
/* … */
}

20. Polymer Component Events
Sender:
this.fire('iron-signal',
{name: 'hello', data: null});
Listener:
<iron-signals on-iron-signal-
hello="onHello">
</iron-signals>

21. Polymer Component Behaviors
/** @polymerBehavior */

22. Polymer Routing
<template>
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section route="{{route}}" data-route="welcome">
<welcome-page></welcome-page>
</section>
</iron-pages>
</template>
<script>
window.addEventListener('WebComponentsReady', function () {
page('/', function () {
page.redirect('/welcome');
});
page('/welcome', function () {
this.set('route', 'welcome');
});
});
</script>

23. Available Elements @webcomponents.org (621)
PolymerElements (94)
● Material Design UI
● Flex layout
● Ajax
● Application Routing
● Google Components (e.g. Maps)
● etc
Vaadin (8)
● Upload
● Date Picker
● etc

24. Polymer 2.0 (Preview)
● Improved interoperability. Easier to use with
other libraries and frameworks. Shady DOM
separated out.
● Data system improvements. Easier to reason
about data propagation. Compatibility with Flux-like
approaches.
● More standard. Standard ES6 classes and the
standard custom elements v1 methods for defining
elements.

25. Polymer App Toolbox
A collection of components, tools and templates for building
Progressive Web Apps with Polymer
https://www.polymer-project.org/1.0/toolbox/

26. Progressive Web Apps
https://developers.google.com/web/progressive-web-apps/
RELIABLE
FAST
ENGAGING

27. Polymer App Toolbox Features
● Component-based architecture using Polymer and
web components.
● Responsive design using the app layout components.
● Modular routing using the <app-route> elements.
● Localization with <app-localize-behavior>.
● Turnkey support for local storage with app storage
elements.
● Offline caching as a progressive enhancement, using
service workers.
● Build tooling to support serving your app multiple
ways:
○ unbundled for delivery over HTTP/2 with server
push
○ bundled for delivery over HTTP/1.

28. Polymer Toolchain
● Polymer CLI
○ Create an App Project
○ Run Tests
○ Local Web Server
○ Lint
○ Build (bundle)
○ Manage Dependencies (Bower)
● Gulp
○ All tools as separate modules

29. Components on the server?
scramjs
micro services
?

30. Thank you!
Q&A
Polymer Project
https://www.polymer-project.org
Kostas Karolemeas, CEO @allcancode
@VoxelPerfect | linkedin.com/in/kostaskarolemeas