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

  <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

Material Web Components

Summary

  • HTML Imports -> ES2015 + Modules
  • Bower -> npm
  • It became a modern library
  • Let's use Polymer3!

Thank you!

改めて理解するPolymer3

By Takanori Oki

改めて理解するPolymer3

  • 2,081