Reusable ui components

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

Recommended

Recommended

More Related Content

Similar to Reusable ui components

Similar to Reusable ui components (20)

Recently uploaded

Recently uploaded (20)

Reusable ui components