Polymer ProjectThe rise of Polymer and Web Components

Kostas Karolemeas, CEO @allcancode

My background - Things becoming mainstream

‘80s - Home Computing

‘90s - OOP

‘90s - 3D CG

‘90s - GUI

My background - Things becoming mainstream

‘90s - Write Once...

‘90s - WWW

‘00s - Java App Servers

‘10s - Cloud Services

The rise of Javascript

Google: Web Tools Strategy

https://developers.google.com/web/tools/

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

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”

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

Polymer LibraryA set of features for creating custom elements that work like standard DOM elements

https://www.polymer-project.org/1.0/docs/devguide/feature-overview

“Anatomy” of a Polymer Component

<element-name greeting=”Hey!”></element-name>

Presentation

Behavior

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.

Polymer Component Properties: 2-way binding

Polymer Component Properties: One-way binding (downward)

Polymer Component Properties: One-way binding (downward)

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

Polymer Component Helpers: Repeater

Dynamic Sorting/filtering

Polymer Component Helpers: Conditional

Lazy Creationvs.<div hidden$=”{{!shouldShow}}”>

Polymer Component Local DOM

Polymer.dom(this.root).querySelector(selector)

this.$$(selector)

Polymer Component “Local” CSS

Quill Js (Rich Text Editor):host ::content .ql-container { /* … */}

Polymer Component Events

Sender:this.fire('iron-signal', {name: 'hello', data: null});

Listener:<iron-signals on-iron-signal-hello="onHello"></iron-signals>

Polymer Component Behaviors

/** @polymerBehavior */

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>

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

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.

Polymer App ToolboxA collection of components, tools and templates for building Progressive Web Apps with Polymer

https://www.polymer-project.org/1.0/toolbox/

Progressive Web Apps

https://developers.google.com/web/progressive-web-apps/

RELIABLE

FAST

ENGAGING

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.

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

Components on the server?

scramjs

micro services ?

Thank you!

Q&A

Polymer Project

https://www.polymer-project.org

Kostas Karolemeas, CEO @allcancode@VoxelPerfect |

linkedin.com/in/kostaskarolemeas