codemotion rome 2016 - polymer
TRANSCRIPT
@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
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>
<!-- add elements here -->
</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
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?
