�ݺ�ߣ

DESIGNING REUSABLE
UI COMPONENTS
Danny Rankevich
FEDTech Lead, SimilarWeb
UI Components, SimilarTalk 2016 1

Hi, I’m Danny and I love to develop UI
Components

How do we define an Interface for UI
Components?

M
C
B
Model
Configuration
Behavior

UI Components have a Model
input / output
M

UI Component have a Configuration
How it should work
C

UI Components have behavior
What it should do
B

itemList: Array<Item>
selectedItem: Item
M

allowMultiSelect: Boolean
C

onSelect()
emit ItemSelectedEvent
B

tabList: Array<Tab>
selectedTab: Tab
M

direction: Horizontal|Vertical
C

onSelect()
emit TabSelectedEvent
B

What is a UI Component made of?

S
H
J
Presentation (CSS)
Structure (HTML)
Behavior (JS)

How can we author a UI Component?

• angular
• react
• web components
Component Frameworks

web components
Google standard
Custom Components
Templates
HTML Imports
Shadow DOM

Custom Components
class MyComp extends HTMLElement {
constructor() {
// always call super
super();
// add class
this.classList.add(“...");
// add click listener
this.addEventListener('click', e => { ... });
}
// Called when the element is inserted into a document,
connectedCallback() {}
// Called when the element is removed from a document
disconnectedCallback() {}
}
window.customElements.define(‘my-comp', MyComp);

Templates
<template id=“my-template">
<style>
.toggle {
cursor: pointer;
border-bottom: 1px solid #d6d6d6;
width: 300px;
display: flex;
flex-direction: row;
}
</style>
<div>
<span>some content</span>
</div>
</template>
// using a template
const t = document.querySelector('#my-template');
const content = t.content.cloneNode(true);
element.appendChild(content);

HTML Imports
<html lang="en-US">
<head>
<title>Human Being</title>
<link rel="import" href="/imports/heart.html">
</head>
<body>
<p>What is a body without a heart?</p>
</body>
</html>

Shadow DOM
<div id="host"></div>
<script>
var host = document.querySelector('#host');
var root = host.createShadowRoot(); // Create a Shadow Root
var div = document.createElement('div');
div.textContent = 'This is Shadow DOM';
root.appendChild(div); // Append elements to the Shadow Root
</script>
http://codepen.io/daniran/pres/woBNoN

web components implementation
https://customelements.io/PolymerElements

Web components
adoption

Web components
reality

Frameworks Comparison
Using a one test component
https://codepen.io/collection/XedJpy/

Test Component:Toggler

itemList: Array<Item>
selectedItem: ItemM
C
onSelect()B
---

Internal Composition
ToggleItem
Toggle
ToggleItem
ToggleItem
const items = [
{
title: 'one',
index: 1
}, {
title: 'two',
selected: true,
index: 2
}, {
title: 'three',
index: 3
}
];

React
https://codepen.io/daniran/pen/aBzdqd

Angular
https://codepen.io/daniran/pen/xRbrPm

Web components
https://codepen.io/daniran/pen/yVyvZV

• straight-forward, but requires in-depth binding
know-how even for a small component
• straight-forward, simple and fast
• great standard, but the solution has not yet matured
into a complete offering
Summary

ThanksYou!
Questions?

�ݺ�ߣ

Reusable ui components

More Related Content

Reusable ui components