the rise of polymer and web components (kostas karolemeas) - greecejs #17
TRANSCRIPT
![Page 1: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/1.jpg)
Polymer ProjectThe rise of Polymer and Web Components
Kostas Karolemeas, CEO @allcancode
![Page 2: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/2.jpg)
My background - Things becoming mainstream
‘80s - Home Computing
‘90s - OOP
‘90s - 3D CG
‘90s - GUI
![Page 3: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/3.jpg)
My background - Things becoming mainstream
‘90s - Write Once...
‘90s - WWW
‘00s - Java App Servers
‘10s - Cloud Services
![Page 4: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/4.jpg)
The rise of Javascript
![Page 5: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/5.jpg)
Google: Web Tools Strategy
https://developers.google.com/web/tools/
![Page 6: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/6.jpg)
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
![Page 7: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/7.jpg)
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”
![Page 8: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/8.jpg)
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
![Page 9: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/9.jpg)
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
![Page 10: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/10.jpg)
“Anatomy” of a Polymer Component
<element-name greeting=”Hey!”></element-name>
Presentation
Behavior
![Page 11: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/11.jpg)
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.
![Page 12: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/12.jpg)
Polymer Component Properties: 2-way binding
![Page 13: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/13.jpg)
Polymer Component Properties: One-way binding (downward)
![Page 14: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/14.jpg)
Polymer Component Properties: One-way binding (downward)
![Page 15: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/15.jpg)
Polymer Component Properties: One-way binding (upward, child-to-host)
![Page 16: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/16.jpg)
Polymer Component Helpers: Repeater
Dynamic Sorting/filtering
![Page 17: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/17.jpg)
Polymer Component Helpers: Conditional
Lazy Creationvs.<div hidden$=”{{!shouldShow}}”>
![Page 18: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/18.jpg)
Polymer Component Local DOM
Polymer.dom(this.root).querySelector(selector)
this.$$(selector)
![Page 19: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/19.jpg)
Polymer Component “Local” CSS
Quill Js (Rich Text Editor):host ::content .ql-container { /* … */}
![Page 20: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/20.jpg)
Polymer Component Events
Sender:this.fire('iron-signal', {name: 'hello', data: null});
Listener:<iron-signals on-iron-signal-hello="onHello"></iron-signals>
![Page 21: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/21.jpg)
Polymer Component Behaviors
/** @polymerBehavior */
![Page 22: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/22.jpg)
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>
![Page 23: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/23.jpg)
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
![Page 24: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/24.jpg)
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.
![Page 25: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/25.jpg)
Polymer App ToolboxA collection of components, tools and templates for building Progressive Web Apps with Polymer
https://www.polymer-project.org/1.0/toolbox/
![Page 26: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/26.jpg)
Progressive Web Apps
https://developers.google.com/web/progressive-web-apps/
RELIABLE
FAST
ENGAGING
![Page 27: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/27.jpg)
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.
![Page 28: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/28.jpg)
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
![Page 29: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/29.jpg)
Components on the server?
scramjs
micro services ?
![Page 30: The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17](https://reader031.vdocuments.net/reader031/viewer/2022030222/58b88e571a28ab3e3a8b52ab/html5/thumbnails/30.jpg)
Thank you!
Q&A
Polymer Project
https://www.polymer-project.org
Kostas Karolemeas, CEO @allcancode@VoxelPerfect |
linkedin.com/in/kostaskarolemeas