Web Component Design

Web Component
Design
Designing Frontends for Reusability
TEGERNSEE, 23 FEB 2019 
JOY HERON

View Slide

2
Web Component Design
Joy Heron
Consultant @ INNOQ
[email protected]
@iamjoyheron

View Slide

3
Photo by Brett Patzke on Unsplash
My Journey

View Slide

4
Spring 2016

View Slide

5
Spring 2016
Summer 2016
Spring 2017
Winter 2017
Fall 2018
… and in the future??

View Slide

6
Why am I always
implementing the
same thing?

View Slide

7
Would I do this in the
backend?
Joy Heron / @iamjoyheron

View Slide

8
Abstraction
Step 1: copy Step 2: copy
Step 3: Abstract!

View Slide

9
Time to find an abstraction!
GET /search?col1=x&col2=y
200 OK
…

View Slide

And now let’s build
it with web
components!
10
That’s what I did.
It’s called: Tabelle
https://github.com/innoq/tabelle

View Slide

11
What is a web component?
HTML
CSS
probably
JavaScript
possibly
make it pretty
make it better
make it work
FOR ALL USERS!

View Slide

12
Single
Responsibility
Principle
Each Component should do
ONE thing REALLY WELL
If you need more functionality, write a new
component and compose them!
Benefit of HTML First:
HTML composes naturally!

View Slide

13
How to find web components?
Joy Heron / @iamjoyheron Atomic Design: http://atomicdesign.bradfrost.com/

View Slide

14
F
I
R
S
T
C
O
M
P
O
N
E
N
T

View Slide

15
make it work

View Slide

16
Filter Field Component
Step 1: make it work
GET /search?
col1=my+search+str&
col2=Option+1
What we need

Option 1
Option 2
Option 3

Search

How to get it

View Slide

17
it works!
FOR ALL USERS??

View Slide

18
Tip #1
If you want to make sure
you are accessible
ACTUALLY USE A SCREEN
READER

View Slide

Common Excuses for not using screen readers
19
MORE
Apple VoiceOver
ChromeVox
Orca
Excuse #1: I don’t have one!
Free Screen Readers:

View Slide

Common Excuses for not using screen readers
20
Excuse #2: It’s HARD!
Yes.
But if you have time to focus on
accessibility, then look into it!

View Slide

21
DON’T design your components
based on how YOU use a screen
reader
BUT the basic commands are pretty
easy to figure out!
Read up on Accessibility!!!

View Slide

22
let’s try it out…

View Slide

23
Currently

Edit Text. 
You are currently on a text field
inside of web content…
Solution
Step 1.2: make it accessible
aria-label=“Filter Column 1” />
Filter Column 1, Edit Text. 
You are currently on a text field
inside of web content…
❤
Let’s test our component with a screen reader to see how it sounds!

View Slide

24
HTML it works
FOR ALL USERS!

View Slide

25
make it pretty??

View Slide

26
CSS is harder to
OVERRIDE than it is to
WRITE

View Slide

27
Tip #2
Use minimal CSS to make it
easy to override your styles
later!

View Slide

28

…

Add a CSS class to our component to allow users
to write their own styles later!
Step 2: make it pretty

View Slide

29
HTML it works
FOR ALL USERS!
CSS
someone else can
make it pretty!
JS? make it better?
?

View Slide

30
CSS
someone else can
make it pretty!
JS no need!
HTML it works
FOR ALL USERS!

View Slide

31
S
E
C
O
N
D
C
O
M
P
O
N
E
N
T

View Slide

32
make it work

View Slide

33
Sort Button Component
GET /search?sort=col1_asc
What we need
name=“sort” value=“col1_asc” />
Sort Column 1 Ascending

Search

How to get it
HTML Element?
name=“sort” value=“col1_desc” />
Sort Column 2 Descending

View Slide

34
Sort Column 1 Ascending, radio button, 1 of 2 
You are currently on a radio button, 1 of 2, …
❤

View Slide

35
HTML it works
FOR ALL USERS!

View Slide

36
make it pretty

View Slide

37
Tip #3
You can select an input
element by clicking on it’s
HTML label

View Slide

38
Visually hide radio buttons and style their labels.
%visually-hidden {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
.visually-hidden {
@extend %visually-hidden;
}
Source: https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
Move content offscreen so it is
not visible but can still be read
by a screen reader.
SCSS Placeholder Selector & Util CSS Class

View Slide

39



Visually hide radio buttons and style their labels.
.arrow {
@extend %visually-hidden;
}
.arrow—asc {
@include icon-before(‘up.svg’, #acacac);
cursor: pointer;
}
.arrow—desc {
@include icon-before(‘down.svg’, #acacac);
cursor: pointer;
}
So far, so good:

View Slide

40
• Style checked, focused, and hover input states!
• Because our label follows our input, we can
style this using pure CSS with a ‘+’!
.arrow:checked + .arrow—asc::before,
.arrow:checked + .arrow—desc::before {
background-color: #535353;
}
.arrow:focus + .arrow—asc::before,
.arrow:focus + .arrow—desc::before,
.arrow:hover + .arrow—asc::before,
.arrow:hover + .arrow—desc::before {
background-color: #6882cb;
}
Result:
focused:
checked:

View Slide

41
Hide our labels visually
id=“col1_asc” type=“radio”
name=“sort” value=“col1_asc” />


id=“col1_desc” type=“radio”
name=“sort” value=“col1_desc” />


base:
checked:
focused:

View Slide

42
Step 2.2: Double-check accessibility
Sort Column 1 Ascending, radio button, 1 of 2 
You are currently on a radio button, 1 of 2, …
❤

View Slide

43
HTML it works
FOR ALL USERS!
CSS it’s pretty!
JS? make it better?
?

View Slide

44
HTML it works
FOR ALL USERS!
CSS it’s pretty!
JS we’re ok for now!

View Slide

45
before we move on to the
next component…

View Slide

46
Tip #4
Use a templating engine as
an abstraction for your
component

View Slide

47
Benefits of
HTML
Templates
for web
components
Change ONCE, modify all instances
Easier to MAINTAIN components over time
PUBLISH templates as an npm library for use
in other projects

View Slide

input and select components
48
{{!— input.hbs }}
type=“text” name=“{{name}}”
aria-label=“Filter {{label}}” />
{{!— select.hbs }}
name=“{{name}}”
aria-label=“Filter {{label}}”>
{{> @partial-block}}

{{> input name=“col1”
label=“Column 1” }}
{{#> select name=“col2”
A
B
…
Z
{{/select}}

View Slide

arrows component
49
{{!— arrows.hbs }}
id=“{{name}}_asc” type=“radio”
name=“sort” value=“{{name}}_asc” />

Sort {{label}} Ascending

id=“{{name}}_desc” type=“radio”
name=“sort” value=“{{name}}_desc” />

Sort {{label}} Descending

{{> arrows name=“col3”

View Slide

50
T
H
I
R
D
C
O
M
P
O
N
E
N
T

View Slide

51
make it work

View Slide

52
Table Header Component

Column 1
{{> arrows name=“col1” label=“Column 1” }}
{{> input name=“col1” label=“Column 1” }}

View Slide

53
Column 1
→ Sort Column 1 Ascending, radio button 1 of 6
→
→ Sort Column 1 Descending, radio button 2 of 6
→
Filter Column 1, edit text
→
→ Column 2
→
→ …

View Slide

54
Tip #5
Wrap input fields in a
role=group to add a
navigation level for a screen
reader
Note: The builtin HTML Element fieldset provides similar
behavior but is extremely difficult to style

View Slide

55

Column 1

Column 1

View Slide

56
Column 1, group VO+→ Column 2, group
VO
+
↓
Column 2
→
→
Filter Column 2, edit text
→
Navigation via
groups with a
screen reader!
❤

View Slide

57
HTML it works
FOR ALL USERS!

View Slide

58
make it pretty

View Slide

R.I.P
Whack-A-Mole
CSS
59

View Slide

60
Tip #6
Design CSS
like a box of chocolates
Design your container with
love and place your
components inside it.
(use Flexbox or CSS Grid)

View Slide

61
Define a CSS Grid for Layout
HEADER
▲
▼
SEARCH
.tabelle-header {
display: grid;
grid-template-areas:
“header arrow-asc”
“header arrow-desc”
“search search”;
}
1fr
Takes up a proportional
amount of grid
auto
grid-template-columns: 1fr auto;

View Slide

62
Place children items in grid
HEADER
▲
▼
SEARCH
.tabelle-header {
.header {
grid-area: header;
}
.arrow—asc {
grid-area: arrow-asc;
}
.arrow—desc {
grid-area: arrow-desc;
}
.tabelle-input {
grid-area: search;
}
}
.tabelle-header {
grid-template-areas:
“header arrow-asc”
“header arrow-desc”
“search search”;
}

View Slide

63
Add new styling classes

role=“group” aria-labelledby=“col2g”>
Column 1
…

Almost there!!!

View Slide

64
Tip #7
With CSS Grid or Flexbox,
vertical alignment is finally
easy!

View Slide

65
Center table header vertically
.tabelle-header {
.header {
align-self: center;
}
} ❤

View Slide

66
Our HTML Template for reuse
❤
{{!— tabelle-header.hbs }}
role=“group” aria-labelledby=“{{name}}_group” >

{{label}}

{{> arrows }}
{{#if select}}
{{> select }}
{{else}}
{{> input }}
{{/if}}

View Slide

67
HTML it works
FOR ALL USERS!
CSS it’s pretty!
JS? make it better?
?

View Slide

68
HTML it works
FOR ALL USERS!
CSS it’s pretty!
JS no need!

View Slide

69
L
A
S
T
C
O
M
P
O
N
E
N
T

View Slide

70
make it work

View Slide

71
Tabelle

{{> tabelle-header name=“col1” label=“Column 1” }}



…

Perform Search

Wrap in a form so that we can
submit user filter queries

View Slide

72
Tabelle
❤
The magic of FORMS

View Slide

73
HTML it works
FOR ALL USERS!
CSS? make it pretty?
?

View Slide

74
HTML it works
FOR ALL USERS!
CSS
someone else can
make it pretty!

View Slide

75
make it better

View Slide

76
Tip #8
Submit forms
asynchronously and replace
your DOM with the result
from the server

View Slide

77
Tabelle
Step 3: make it better
Submitting forms asynchronously
// stringify form data as `application/x-www-form-urlencoded`
function serializeForm (form) { … }
function submit (form) {
const uri = serializeForm(form)
return fetch(uri)
.then(response => response.text())
}
⚠ Only the application happy path is being considered here.
Source: https://github.com/FND/uitil

View Slide

78
Tabelle
Replacing the tbody with response HTML
function template2dom (htmlString, selector) {
let tmp = document.createElement(‘template’)
tmp.innerHTML = htmlString.trim()
return tmp.content.querySelector(selector)
}
function replaceTbody (tbody, htmlResponse) {
let newTbody = template2dom(htmlResponse, ‘tbody’)
tbody.innerHTML = newTBody.innerHTML
}

View Slide

79
Tabelle
Override default submit behavior
function doSubmit (component, form) {
let tbody = component.querySelector(‘tbody’)
submit(form)
.then(html => replaceTBody(tbody, html))
}
function initializeSubmit (component, form) {
form.addEventListener(‘submit’, ev => {
doSubmit(component, form)
ev.preventDefault()
})
}
Who calls the initialize function?

View Slide

80
Historically:
adding a component
dynamically used to require
BOTH the HTML Markup and
a function to initialize it

View Slide

81
Tip #9
Use Custom Elements to define
a custom HTML Element AND
define how to initialize it.
The browser will then initialize
your component for you!

View Slide

82
Tabelle
Custom Elements allow you to define how the
component needs to be initialized.
class Tabelle extends HTMLElement {
connectedCallback () {
let form = this.form
initializeSubmit(this, form)
}
get form () {
return this.querySelector(‘form’)
}
}
customElements.define('ta-belle', Tabelle)

…

As soon as ta-belle appears in the DOM,
connectedCallback will be called!
✨

View Slide

83
Tabelle
Custom Elements provide scope:
this is bound to the HTML Element itself
and it’s native JavaScript API
let form = this.form
initializeSubmit(this, form)
}
get form () {
return this.querySelector(‘form’)
}
}
customElements.define('ta-belle', Tabelle)

View Slide

84
Tabelle
Make the implementation more dynamic by
triggering submits when an input element changes
import { debounce } from ‘util’
…
form.addEventListener(‘change’, () => doSubmit(this, form))
form.addEventListener(‘keyup’,
debounce(300, ev => doSubmit(this, form)))
}
}
Make sure to debounce ‘keyups’ for
input[type=text] elements!
https://davidwalsh.name/javascript-debounce-function

View Slide

85
Tabelle
Step 3: Further possible improvements
Replace whole instead of
for added flexibility
Integrate with the History API so the user can
go back and forth in their search history
Instantiate the filter fields on the
client

View Slide

86

View Slide

87
HTML it works
FOR ALL USERS!
CSS it’s pretty!
JS faster & dynamic

View Slide

88
https://github.com/innoq/tabelle
https://github.com/innoq/tabelle_rails_example
Thank you!
https://tabelle-rails-example.herokuapp.com/

View Slide

Web Component Design

Web Component Design

Joy Heron

More Decks by Joy Heron

Other Decks in Technology

Featured

Transcript