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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Modular Design with Web Components

Ähnlich wie Modular Design with Web Components (20)

Mehr von C4Media

Mehr von C4Media (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Modular Design with Web Components