The document discusses the rise of Polymer and web components, highlighting their significance in modern web development. It outlines the capabilities of the Polymer library, including custom elements, two-way data binding, and improved interoperability with other frameworks. Additionally, it introduces the Polymer app toolbox for building progressive web apps and provides insights into the integration of various web components and development tools.

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