Front-End Chemistry 101:
Polymer
Polymer
Core
Hello Polymer World
Example
Eco
System
Web
Components
Custom
Elements
Bunch of Useful Resources
https://www.polymer-project.org/
http://webcomponents.org/
http://customelements.io/
http://component.kitchen/
https://github.com/GoogleWebComponents
http://x-tags.org/
https://www.polymer-project.org/tools/designer/
https://github.com/PolymerLabs
https://ele.io
https://github.com/PolymerLabs/seed-element
https://github.com/Polymer/web-component-tester
Polymer Project
Templates
Shadow DOM
HTML Imports
Core &
Paper
Elements
Custom Elements
Gallery
https://www.polymer-project.org
Creating
Layout
Integration
```html
<html>
<body>
<template id="progress-bar">
<div class="wrapper">
<div class="progress"></div>
</div>
</template>
</body>
</html>
```js
var t, clone;
t = document.querySelector('#progress-bar');
clone = document.
importNode
(t.content, true);
// Populate the src at runtime.
clone.querySelector('.progress')
.innerHTML = 'Hello world!';
document.body.appendChild(clone);
http://goo.gl/cbixjG
http://goo.gl/Swm3LP
```js
var proto;
proto = Object.create(
HTMLElement.prototype
);
proto.createdCallback = function () {
this.innerHTML = 'hello world';
};
document.
registerElement
('progress-bar', {
prototype: proto
});
```html
<progress-bar></progress-bar>
http://goo.gl/4XkpTI
```html
<button>Hello, world!</button>
```js
<script>
var host, root;
host=document.querySelector('button');
root = host.
createShadowRoot
();
root.textContent = 'Shadow DOM!';
</script>
http://goo.gl/EUxxrv
```html
<head>
<link rel="
import
" href="my_file.html" />
</head>
https://github.com/bolshchikov-public/fed-chemistry-101
<polymer-element
name="progress-bar">
<!-- You future element will live here -->
</polymer-element>
<polymer-element name="progress-bar">
<template>
<!-- Markup will be here -->
</template>
<script>
(function () {
// JS will be here
Polymer();
})();
</script>
</polymer-element>
by Sergey N. Bolshchikov
<template>
<div class="wrapper">
<div id="progress" style="width: 50%;">
</div>
</div>
</template>
<template>
<link rel="stylesheet" href="progress-bar.css"/>
<div class="wrapper">
<div id="progress" style="width: 50%;">
</div>
</div>
</template>
<template>
<link rel="stylesheet" href="progress-bar.css"/>
<div class="wrapper">
<div id="progress"
style="width: {{progress}};"
>
</div>
</div>
</template>
<script>
(function () {
Polymer({
progress: 50
});
})();
</script>
<polymer-element
name="progress-bar"
attributes="progress"
>
<template>
<link rel="stylesheet" href="progress-bar.css"/>
<div class="wrapper">
...
</template>
<script>
...
</script>
</polymer-element>
https://www.polymer-project.org/docs/polymer/layout-attrs.html
<head>
<script src="bower_components/platform/
platform.js
"></script>
<script src="bower_components/polymer/
polymer.js
"></script>
<link rel="
import
" href="components/progress-bar/progress-bar.html"/>
</head>
<body>
</body>
<head>
<script src="bower_components/platform/platform.js"></script>
<script src="bower_components/polymer/polymer.js"></script>
<link rel="import" href="components/progress-bar/progress-bar.html"/>
</head>
<body>
<progress-bar progress="30"></progress-bar>
</body>
<body
ng-app
>
<input
type="range"
ng-model="value"
ng-init="value = 10"/>
<div>{{value}}</div>
<progress-bar progress="
{{value}}
">
</progress-bar>
</body>
http://bolshchikov.net
http://blog.bolshchikov.net
http://il.linkedin.com/in/bolshchikov
http://github.com/bolshchikov
Web
Components
Tests
Polymer
Seed
Project
w/ Angular
WHY?
Need to know many frameworks
Hard to structure the application
Hard to reuse components
Hard to reuse styling
Have to work on devices
Have to be a good citizen
Front-end Development sucks
2015-Still the Wild Wild West
http://customelements.io/
https://github.com/PolymerLabs/seed-element
https://github.com/Polymer/web-component-tester
<body
fullbleed
vertical layout>
<div flex layout
vertical>
<header>Block 1</header>
<div
flex
>Block
2</div>
<footer>Block 3</footer>
</div>
</body>
<body>
<div class="container">
<header>Block 1</header>
<div class="content">Block 2</div>
<footer>Block 3</footer>
</div>
</body>
body {
margin: 0;
}
.container * {
position: absolute;
left: 0;
right: 0;
}
header {
top: 0;
}
.content {
top: 18px;
bottom: 18px;
}
footer {
bottom: 0;
}
is
Hard
HOW?
Extensibility
Consistency
Encapsulation
Composability
Performance
Introducing Component Model
https://wiki.whatwg.org/wiki/Component_Model
Aurelia
Framework
http://aurelia.io/
webcomponents.js
Figured out by others already
Kendo/wijmo: widgets
Angular: directives
Ember: components
React: components
Vulcanize
https://github.com/polymer/vulcanize
Gmail
vs.
Poly Mail
https://poly-mail.appspot.com/
Loading presentation...
Present Remotely
Send the link below via email or IM
Present to your audience
- Invited audience members will follow you as you navigate and present
- People invited to a presentation do not need a Prezi account
- This link expires 10 minutes after you close the presentation
- A maximum of 30 users can follow your presentation
- Learn more about this feature in our knowledge base article
Front-End Chemistry 101: Polymer
Talk about polymer and web components
by
Tweet
