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
Do you really want to delete this prezi?
Neither you, nor the coeditors you shared it with will be able to recover it again.
Make your likes visible on Facebook?
Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.
Front-End Chemistry 101: Polymer
Talk about polymer and web components
by
Tweet
