Modular Design with Web Components

Modular design with
Web Components
+Rob Dodson
@

InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• News 15-20 / week
• Articles 3-4 / week
• Presentations (videos) 12-15 / week
• Interviews 2-3 / week
• Books 1 / month
Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/modular-design-web-components

Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide
Presented at QCon San Francisco
www.qconsf.com

Agenda
Overview
Components
Join the revolution

http://drbl.in/esYL
Building UI tabs
should be easy!

<paper-tabs>
<paper-tab>KNOWLEDGE</paper-tab>
<paper-tab>HISTORY</paper-tab>
<paper-tab>FOOD</paper-tab>
Less markup. Less JS. Less confusion.
Web Components

Custom Elements
define new HTML/DOM elements

<paper-tabs selected=“1”>
<paper-tab>Tab 1</paper-tab>
declarative, readable
meaningful HTML
common way to extend → reusable
Custom Elements
define new HTML

declarative, readable
meaningful HTML
common way to extend → reusable
Custom Elements
define new HTML
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('core-activate', function() {
console.log(this.selected);
});

Templates
native client-side templating

<video src=“foo.webm” controls></video>
Actually Shadow DOM

HTML Imports
loading web components

Vulcanize
$ vulcanize -o build.html index.html
--csp --strip
npm install -g vulcanize

Custom Elements
Create new HTML elements and extend existing ones
Templates
Native templating in the browser
Shadow DOM
Scoped CSS!!! + encapsulated markup
HTML Imports
Load custom element definitions and resources

Polyfills Web Components
with platform.js *
*soon to be called webcomponents.js

Adds syntactic “sugar”
with polymer.js

Browser support
Summer 2014 (with Polymer)

document.registerElement(‘paper-tabs’, {
prototype: Object.create(HTMLElement.prototype)
});
vanilla
polymer
<polymer-element name=“paper-tabs”>
…
</polymer-element>
usage <paper-tabs>…</paper-tabs>
// document.createElement(‘paper-tabs’);

var shadow = el.createShadowRoot();
shadow.innerHTML = “<style>h2 { color: red; }</style>” + 
“<h2>I’m a profile-card</h2>”;
vanilla
polymer
<polymer-element name=“proﬁle-card” noscript>
<template>
<link rel=“stylesheet” href=“styles.css”>
<h2>I’m a proﬁle-card</h2>
</template>
</polymer-element>

<animated-pages>
<menu-button>
<page-scaffold>

What if we designed HTML
for the mobile web?

<core-field>
<core-icon>
<paper-fab>
<core-drawer-panel>

http://bit.ly/1jkTo5c
core-elements
Image:

<core-toolbar>
A basic container for controls
like tabs or buttons
MY APP

<core-toolbar>
<div>MY APP</div>
<core-toolbar>
MY APP

<core-toolbar>
<core-icon-button icon=“menu”>
</core-icon-button>
<div>MY APP</div>
<core-toolbar>
MY APP

A simple container with a header
section and a content section
<core-header-panel>
<core-header-panel ﬂex>
<core-toolbar>
<core-icon-button icon=“menu">
</core-icon-button>
<div>MY APP</div>
</core-toolbar>
<div class=“content”>…</div>
MY APP

A simple container with a header
section and a content section
<core-header-panel ﬂex>
<core-toolbar>
</core-icon-button>
<div>MY APP</div>
</core-toolbar>
<core-header-panel>
MY APP

<core-header-panel mode=“scroll” ﬂex>
<core-toolbar>
</core-icon-button>
<div>MY APP</div>
</core-toolbar>
Toolbar will scroll with the page
<core-header-panel>

A responsive container that
combines a left- or right-side drawer
panel and a main content area.
<core-drawer-panel>
<core-drawer-panel>
<div drawer> Drawer panel... </div>
<div main> Main panel... </div>

<core-drawer-panel>
<div drawer> Drawer panel... </div>
<div main> Main panel... </div>
A responsive container that
combines a left- or right-side drawer
panel and a main content area.
<core-drawer-panel>

<paper-input ﬂoatinglabel
label="Type only numbers... (ﬂoating)"
validate="^[0-9]*$"
error="Input is not a number!">
</paper-input>

<div class=“card”>
<img src=“science.svg”>
<paper-ripple ﬁt></paper-ripple>
A reactive ink effect for indicating touch
and mouse actions
<paper-ripple>

<div class=“card”>
<paper-shadow z=“5” animated>
</paper-shadow>
A dynamic shadow for conveying
z-depth and spatial relationships
<paper-shadow>

polymer-project.org/apps/topeka/

brick-appbar
brick-deck
brick-tabbar

core-icon
x-instagram
(not shown)

Web Components
can work together

<app-router>
github.com/erikringsmuth/app-router
my-site.com/order/:id
<app-router>

<app-route path="/home" import="/pages/home-page.html"></app-route>

<app-route path="/order/:id" import=“/pages/order-page.html"></app-route>

<page-er>
github.com/addyosmani/page-er
<page-er perpage="5" previous=“<< Previous" next=“Next >>"></page-er>
var pager = document.querySelector("page-er");
document.addEventListener("polymer-ready", function() {
pager.data = model.items;
});

<ajax-form>
github.com/garstasio/ajax-form
Full Name
Country City
Join newsletter√
<form is="ajax-form" action="my/form/handler">
<label>Full Name
<input type="text" name=“full_name">
</label>
…

polymer-project.org/tools/designer/

github.com/ForceDotComLabs/mobile-ui-
elements
github.com/ForceDotComLabs

I want to add a marker
to a Google map.

height: 400px;
}
</style>
<div id="map"></div>
<script src=“http://maps.googleapis.com/maps/api/js?callback=mapReady">
</script>
<script>
var marker = null;
function getCurrentLocation(callback) {
navigator.geolocation.watchPosition(callback);
}
function addMarker(opts, info) {
var marker = new google.maps.Marker(opts);
var infoWindow = new google.maps.InfoWindow({content: info});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(opts.map, marker);
});
return marker;
}
function mapReady() {
var container = document.querySelector('#map');
var map = new google.maps.Map(container, {
zoom: 14, disableDefaultUI: true
});
getCurrentLocation(function(pos) {
var current = new google.maps.LatLng(pos.coords.latitude,
pos.coords.longitude);
map.setCenter(current);
// Re-position marker or create new one.
if (marker) {
marker.setPosition(map.getCenter());
} else {
marker = addMarker({
position: current, map: map, title: 'Your location'
}, '<b>Your location</b>');
}
});
So much code
for one map
marker!

googlewebcomponents.github.io
github.com/GoogleWebComponents

Start with <seed-
element>
github.com/PolymerLabs/seed-element

github.com/PolymerLabs/seed-element

YO POLYMERnpm install -g generator-polymer

{
"name": "my-element",
"version": "0.0.0",
"description": "My awesome Custom Element",
"license": "MIT",
"keywords": [
"web-components"
],
"ignore": [
"**/.*",
"node_modules",
"bower_components"
]
}
bower.json

<thank-
+RobDodson
@rob_dodson

Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/modular
-design-web-components

Modular Design with Web Components

Recommandé

Recommandé

Contenu connexe

Similaire à Modular Design with Web Components

Similaire à Modular Design with Web Components (20)

Plus de C4Media

Plus de C4Media (20)

Dernier

Dernier (20)

Modular Design with Web Components