Codemotion Rome 2016 - Polymer

@granze
Polymer is production ready.
How about you? Maurizio Mangione
ROME 18-19 MARCH 2016

@granze
@Granze
Google Developers Expert
Milano JS Founder

@granze
What is this talk about?

@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 DOM
var progressBar = document.createElement('div');
var shadowRoot = progressBar.attachShadow({mode:
'closed'});
var template = document.getElementById('template');
shadowRoot.appendChild(template).content.cloneNode
(true));
V1

@granze
“Always bet on Javascript”
Brendan Eich

@granze
“Always bet on
the Web Platform”
Me

@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
Visual and non-visual elements

@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
<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
Web component tester
> npm i -g web-component-tester
> wct

@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
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
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
Community
http://polymer-slack.herokuapp.com

@granze
Should you build your app
entirely with Web Components?

@granze
Polymer is good because
● Built on standards
● Freedom of choice
● Production ready...

Codemotion Rome 2016 - Polymer

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Codemotion Rome 2016 - Polymer

Similar to Codemotion Rome 2016 - Polymer (20)

Codemotion Rome 2016 - Polymer