Re Understand Polymer3
Takanori Oki @roppongi.js #4
Takanori Oki
- @takanorip
- Frontend Developer
- SmartDrive Inc.
- Nuxt.js, Polymer, React, etc...
- Polymer Japan Translation Team
LET'S TRANSLATE
DOCUMENTS ON POLYER
WITH US!!
What's The Polymer
- A Lightweight JavaScript Framework based on Web Components
- It is not a "polyfill"
- Polymer can make Web App.
- But it can't manage application state
features OF Polymer
- Lightweight / High Performance
- Support Typescript
- Data Binding System, Event Handler
- CSS Custom Properties
- Routeing (use core libraries)
- CLI Tools
WHAT'S NEW IN
Polymer 3.0
HTML Imports
ES Modules
Others
- Removed APIs related to HTML Import
- Update the Web Component polyfills
-
Almost 100% backward compatible with Polymer 2.x
others
- Polymer element lifecycle
- Can use with webpack (without polymer-cli and specific loader)
Polymer2.0
<link rel="import" href="/bower_components/polymer/polymer-element.html">
<dom-module id="x-custom">
<template>
<style>
/* CSS rules for your element */
</style>
<div>{{greeting}}</div> <!-- data bindings in local DOM -->
</template>
<script>
class XCustom extends Polymer.Element {
static get is() { return 'x-custom'; }
}
customElements.define(XCustom.is, XCustom);
</script>
</dom-module>Polymer3.0(JS)
import {PolymerElement, html} from '@polymer/polymer';
class LikeableElement extends PolymerElement {
static get properties() { return { liked: Boolean }}
static get template() {
return html`
<style>
.response { margin-top: 10px; }
</style>
<div hidden$="[[!liked]]" class="response">Web components like you, too.</div>
`;
}
}
customElements.define('likeable-element', LikeableElement);Polymer3.0(HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<script
src="./node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
>
</script>
<script
src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"
>
</script>
</head>
<body>
<likeable-element></likeable-element>
</body>
</html>New
Projects
LitElement
- A simple base class for creating custom elements rendered with lit-html
- Ultra-light and Highly performant
- PolymerElement based on this
- https://github.com/Polymer/lit-element
<script src="node_modules/@webcomponents/webcomponents-bundle.js"></script>
<script type="module">
import {LitElement, html} from '@polymer/lit-element';
class MyElement extends LitElement {
static get properties() { return { mood: String }}
_render({mood}) {
return html`<style> .mood { color: green; } </style>
Web Components are <span class="mood">${mood}</span>!`;
}
}
customElements.define('my-element', MyElement);
</script>
<my-element mood="happy"></my-element>PWA Starter Kit
- Sample app for PWA
- manifest, service worker, offline UI
- It contains example of using Redux and Simple routing solution
- https://github.com/Polymer/pwa-starter-kit
Material Web Components
- Pixel-perfect realizations of Google's Material Design spec
- Using SASS in their components
- https://github.com/material-components/material-components-web-components
Summary
- HTML Imports -> ES2015 + Modules
- Bower -> npm
- It became a modern library
- Let's use Polymer3!