Polymer is production ready, how about you?

@granze

Polymer is production ready. How about you? Maurizio Mangione

ROME 18-19 MARCH 2016

http://creativecommons.org/licenses/by-nc-sa/3.0/

@granze

@Granze

Google Developers Expert

Milano JS Founder

http://milanojs.com/

http://milanojs.com/

@granze

What is this talk about?

@granze

I ♥ Polymer

@granze

Web Components

@granze

Custom Elements<my-component></my-component>

<x-element attribute="test"></x-element>

@granze

HTML Imports<link rel="import" href="path/to/component.html">

@granze

Templates<template id="template">

<div>

<h1>Web Components</h1>

<img src="http://webcomponents.org/img/logo.svg">

</div>

</template>

@granze

Shadow DOMvar progressBar = document.createElement('div');

var shadowRoot = progressBar.attachShadow({mode:

'closed'});

var template = document.getElementById('template');

shadowRoot.appendChild(template).content.cloneNode

(true));

V1

@granze

webcomponents-lite.js

@granze

Standards

@granze

“Always bet on Javascript”

Brendan Eich

@granze

“Always bet onthe Web Platform”

Me

@granze

@granze

Let’s build an App

@granze

1 Create reusable elements

● Start with the seed-element

● Use Polyserve

● Publish via Bower

@granze

<seed-element>

● Element boilerplate

● Test ready

● Auto generated docs

@granze

@granze

Visual and non-visual elements

@granze

2 Put things together

@granze

How elements talk to each other

API API

<child-component><child-component>

@granze

<g-tag my-attr="true">Polymer({

is: 'g-tag',

properties: {

myAttr: {

type: Boolean

}

}

});

@granze

Mediator Pattern

API API

BUSINESS LOGIC

wrapper

<child-component><child-component>

@granze

The wrapper

@granze

<x-app><link rel="import" href="polymer/polymer.html">

<dom-module id="x-app">

<template>



</template>

<script>

Polymer({ is: 'x-app' });

</script>

</dom-module>

@granze

index.html<!DOCTYPE html>

<html lang="en">

<head>

<link rel="import" href="x-app/x-app.html">

</head>

<body>

<x-app></x-app>

</body>

</html>

@granze

<template is="dom-bind"><body>

<template id="app" is="dom-bind">

<a href="#" on-click="sayHello">Click me!</a>

</template>

<script>

const app = document.querySelector('#app');

app.sayHello = () => { console.log('Hello') };

</script>

</body>

@granze

Should I use Mediator Pattern?

@granze

Use what you like the most

● Events (fire, listen)

● Flux-like architecture

● Your own solution

@granze

3 Testing

@granze

Web component tester

> npm i -g web-component-tester

> wct

@granze

Web component tester

@granze

4 The build step

@granze

Tools of the trade

● Vulcanize

● Crisper

● NPM scripts or Gulp

@granze

Vulcanize> vulcanize target.html > build.html

@granze

Crisper> cat index.html | crisper -h build.html -j build.js

@granze

So, what I need?

● Elements

● Let them talk to each other

● Test all the things

● Build/deploy

@granze

Polymer Starter Kit

@granze

PSK’s Hot features

● Offline support

● Complete build chain

● Responsive app layout

@granze

Yeoman> npm i -g yo

> npm install -g generator-polymer

> yo polymer

@granze

Ok sold, but is not so easy...

@granze

@granze

You can win!One component at a time

@granzeCredits: http://nocamels.com/2014/06/israeli-researchers-create-trojan-horse-of-chemotherapy

@granze

I don’t want to add more stuff to my legacy app

@granze

Think about jQuery plugins

@granze

Useful resources

@granze

Community

http://polymer-slack.herokuapp.com

@granze

Polycasts

@granze

@granze

Awesome Polymer

https://github.com/Granze/awesome-polymer

@granze

Should you build your appentirely with Web Components?

@granze

Is up to you!

@granze

Polymer is good because

● Built on standards

● Freedom of choice

● Production ready...

@granze

...how about you?

@granze

Thanks

http://creativecommons.org/licenses/by-nc-sa/3.0/

Polymer is production ready, how about you?

Software