Moderne Frontend Entwicklung

Moderne
Frontend-
Entwicklung
2020 / 03 / 09 
SOFTWARE ARCHITECTURE SUMMIT
Joy Heron
@iamjoyheron
Lucas Dohmen
@moonbeamlabs

View Slide

2

View Slide

The role of JS in
modern
Web applications
3
Moderne Frontend Entwicklung

View Slide

4
State
Business Logic
Routing
Rendering Logic
Look & Presentation Logic
Server
Client
HTML
Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlabs

View Slide

5
State
Business Logic
Routing
Rendering Logic
Server
Client
JSON

View Slide

6
State
Business Logic
Routing
Rendering Logic
Server
Client
JSON
JSON API
JSON Client

View Slide

Why Routing?
Solution: 
Store some app 
state in the URI!
Bookmarks?
Deep links?
Reload?
Browser Server
GET /
200 OK…
GET /app.js
200 OK…
App
start…

View Slide

8
State
Business Logic
Routing
Rendering Logic
Server
Client
JSON
JSON API
JSON Client

View Slide

9
State
Business Logic
Routing
Rendering Logic
Server
Client
JSON
JSON API
JSON Client

View Slide

Searchability
Crawler Server
GET /
Static HTML Snapshot
API
run App
AJAX Fun…

View Slide

State
Business Logic
Routing
Rendering Logic
Server
Client
JSON
JSON API
JSON Client
Rendering Logic
Routing
HTML

View Slide

State
Business Logic
Routing
Rendering Logic
Server
Client
JSON
JSON API
JSON Client
Rendering Logic
Routing
HTML
Same Code

View Slide

13
“All your users are
non-JS users
while they‘re
downloading your JS”
Jake Archibald, developer advocate for Google Chrome

View Slide

Prerendering
Browser Server
GET /
Static HTML Snapshot
API
run App
AJAX Fun…
FCP
TTI
load & run
App
AJAX Fun…

View Slide

Hydration
How to simulate
readiness?
What about Events
(Clicks etc)?
How to match server-side
HTML to client-side
DOM?
Browser
GET /
Static HTML Snapsho
FCP
TTI
load & run App

View Slide

State
Business Logic
Routing
Rendering Logic
Server
Client
JSON
JSON API
JSON Client
(Pre-)Rendering Logic
Routing
HTML

View Slide

State
Business Logic
Routing
Rendering Logic
Server
Client
JSON
JSON API
JSON Client
Routing
HTML
Hydration

View Slide

JSON API
Routing
Rendering Logic
Server
Client
JSON
JSON Client
Routing
HTML
Hydration
Business Logic
State
Business Logic
Same functionality, 
different languages!
State

View Slide

State
Business Logic
JSON API
Business Logic
State
Routing
Rendering Logic
Server
Client
JSON
JSON Client
Routing
HTML
Hydration
high control,
high observability
low control,
low observability

View Slide

State
Routing
Rendering Logic
Server
Client
JSON
JSON Client
Routing
HTML
Hydration
Business Logic
JSON API
State
Business Logic
Much, much
more client side JavaScript

View Slide

21
Resilience
customElement.define(
"my-element",
MyElement
);
Modern API in JS Modern API in CSS
.item {
display: contents;
}
Firefox 63: It works Firefox 63: It works
Chrome 69: Exception Chrome 69: Skips that line

View Slide

22
“JavaScript is the
most expensive
part of your
page”
Addy Osmani, Speed team lead for Google Chrome

View Slide

Cost of JavaScript on Reddit.com
Pixel 3
Moto G4
Alcatel 2X 5059D
0 seconds 1 second 2 seconds
Main thread Worker thread
The cost of JavaScript in 2019

View Slide

Web Component Design
24
Test your app on
real, low-cost devices and
slow networks
(No, an emulator is not enough)

View Slide

25
Joy Heron / @iamjoyheron & Lucas Dohmen / @moonbeamlab

View Slide

26
RAGE CLICKS
“15% of users tried to interact sometime between
onload and interactive.”
Akamai: Metrics That Matter
RAGE CLICKS

View Slide

27
Hydration is not a
progressive enhancement,
it‘s an uncanny valley

View Slide

Now what?

View Slide

29
• Client-side state handling
• Better offline support
• Closer to desktop model
• Better performance
• Server-side state handling
• Simpler
• More resilient & observable
• Smaller client footprint
• Better performance

View Slide

30
Lucas' First Law of Web
Development
If you move routing to the
client, a lot of JavaScript
will follow.

View Slide

31
State
Business Logic
Routing
Rendering Logic
Server
Client
HTML

View Slide

32
State
Business Logic
Routing
Rendering Logic
Server
Client
HTML
Rendering Logic
JSON/
HTML

View Slide

33
Let's use the technologies from SPAs,
but keep the architecture of the Web.

View Slide

34
Pure SPA
SSR+RC
Pure SSR
• Large number of users
• Basic UX needs
• Support for past, present
and future devices
• Complex global client
state
• Offline support
• Controlled device
landscape
• Like SSR, but with
• more UX needs
• Complex component
state
• Basic offline support

View Slide

35
The core concept:
components

View Slide

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

View Slide

37
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

Finding the
Components
(The Design Part)
38

View Slide

39
How can we find web components?
Atomic Design: http://atomicdesign.bradfrost.com/

View Slide

40
ACTIVITY:
Let’s find some
web components!

View Slide

41
Can you spot the
components?

View Slide

42
First:
Try to find the
atoms!

View Slide

43
Page Category
Page Title
Button
Table Sort
Table
Search
Emphasized
Table Cell
Table Cell Muted Table Cell
Nav
Item
Logo
Amount
Progress Bar
Label
Toggler

View Slide

44
Now:
Let’s try to find the
molecules!

View Slide

45
Primary
Navbar
Secondary Navbar
Table Header
Toggler
Button Group

View Slide

46
Any organisms?

View Slide

47
Sortable Table - Tabelle!
Main Layout

View Slide

48
What’s the difference
between an organism and a
molecule?

View Slide

49
Our understanding
of the component
boundary may
change over time!
Over the life-cycle of the component, it may
seem more “moleculey” or more “organismy”
If the metaphor doesn’t work for you, find a
different one! (but naming is hard )
Structure is helpful and atomic design is better
than no structure!

View Slide

50
because this can change, avoid
binding your technical structure
too closely to atomic design
DEMO in aiur

View Slide

51
Finally: Templates

View Slide

52
NAVBAR REGION
SECONDARY NAVBAR REGION
MAIN CONTENT AREA

View Slide

53
We’ve broken it into
components…
which ones should we start
with?

View Slide

54
mobile-first
❤

View Slide

55
Layout Tip:
Develop your layout
components first, so that
they behave responsively.
Then test the responsive behavior as
you add each component!

View Slide

56
Develop components in this order…
1. Templates / Layout Containers
2. Atoms
3. Molecules
3. Organisms

View Slide

57
Joy’s First Law of Web
Development
If you sneak responsive
behavior into your web
application, somebody will
be grateful for it in the
future.

View Slide

58
But we only need a desktop
application…
…until the you suddenly
need mobile too!

View Slide

59
Intrinsic Web
Design*
The default behavior of the web (flow+wrap
when not enough space) is a good thing!
Develop components which adjust their layout
based on their available space
* Term coined by Jen Simmons
Also look have a look at: Every Layout

View Slide

60
Create a
concept
for
responsive
design
Where should the
content be shown
on mobile?
Where does it
move to on
desktop?

View Slide

61
DEMO:
let’s look at this
component!

View Slide

Building the
Components
(The Implementation Part)
62

View Slide

63
I
N
P
U
T
C
O
M
P
O
N
E
N
T

View Slide

64
make it work

View Slide

65
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

66
it works!
FOR ALL USERS??

View Slide

67
Accessibility Tip:
If you want to make sure
you are accessible
ACTUALLY USE A
SCREEN READER
Read this book for
more tips!

View Slide

68
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!
s

View Slide

69
HTML it works
FOR ALL USERS!

View Slide

70
make it pretty

View Slide

71
CSS is harder to
OVERRIDE than it is to
WRITE

View Slide

72
CSS Tip:
Use minimal CSS to make it
easy to override your styles
later!

View Slide

73
CSS Tip:
SCOPE your CSS correctly to
avoid style clashes.
(Unfortunately, CSS always has a
global scope)

View Slide

74
type=“text” name=“col1”
aria-label=“Filter Column 1”/>
Add a CSS class to our component which provides
a SCOPE for all styles that we add to this
component.
Step 2: make it pretty

View Slide

75
Add all CSS Rules within the correct scope
.tabelle-input {
border: 1px solid #24244c;
padding: 0.25rem 0.5rem;
}
type=“text” name=“col1”
aria-label=“Filter Column 1”/>
+ =

View Slide

76
How can I recognize if my
CSS is incorrectly scoped?
What can I do to fix it?

View Slide

77
CSS Code Smell
Having to override styles because your default style doesn’t make sense
p {
font-size: 2rem;
}
/* 1rem or 16px is actually the browser default */
.component1 p {
font-size: 1rem;
}
.component2 p {
font-size: 1rem;
}

View Slide

78
Refactoring poorly scoped CSS
p {
font-size: 2rem;
}
1. consider in which context you
defined the problematic rule
I think I defined this
for the header area…
2. create a scoped
component for that use case
.header-area p {
font-size: 2rem;
}
/* no longer have to override
back to the default in other
components! */

View Slide

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

View Slide

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

View Slide

81
S
O
R
T
I
N
G
C
O
M
P
O
N
E
N
T

View Slide

82
make it work

View Slide

83
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

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

View Slide

85
HTML it works
FOR ALL USERS!

View Slide

86
make it pretty

View Slide

87
HTML Tip:
You can select an input
element by clicking on it’s
HTML label

View Slide

88
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);
}
.sr-only {
@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

89



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

90
• 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

91
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

92
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

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

View Slide

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

View Slide

95
H
E
A
D
E
R
C
O
M
P
O
N
E
N
T

View Slide

96
make it work

View Slide

97
Table Header Component

Principal

View Slide

98
Sale Order Name
→ Sort Sale Order Name Ascending, radio button 1 of 6
Sort Sale Order Name Ascending
→
→ Sort Sale Order Name Descending, radio button 2 of 6
Sort Sale Order Name Descending
→
Filter Sale Order Name, edit text
→
→ Kunde
→ Sort Kunde, radio button 3 of 6
Sort Kunde Ascending
→
→ Sort Kunde Descending, radio button 4 of 6
→ …

We could add a
label which is a
bit more
descriptive, but
it sounds ok!…

View Slide

99
HTML it works
FOR ALL USERS!

View Slide

100
make it pretty

View Slide

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

View Slide

102
Tip #8
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

103
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

104
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

105
Add new styling classes

Principal
…

Note: We have to add an extra here because if we set
`display: grid;` on a th, it no longer behaves like a header
Almost there!!!

View Slide

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

View Slide

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

View Slide

108
Joy Heron / @iamjoyheron
HTML it works
FOR ALL USERS!
CSS it’s pretty!
JS no need!

View Slide

109
T
A
B
E
L
L
E
C
O
M
P
O
N
E
N
T …the one in which we actually use JavaScript

View Slide

110
make it work

View Slide

111
Tabelle

…

Perform Search

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

View Slide

112
DEMO:
let’s see how it works
without JS!
❤
The magic of FORMS

View Slide

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

View Slide

114
HTML it works
FOR ALL USERS!
CSS
use styling from
corporate design

View Slide

115
make it better

View Slide

116
JavaScript Tip:
Submit forms
asynchronously and replace
your DOM with the result
from the server

View Slide

117
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

118
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

119
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

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

View Slide

121
JavaScript Tip:
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

122
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

123
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

124
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

125
…and much more…

View Slide

126
DEMO:
let’s see how it works
with JS!

View Slide

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

View Slide

128
C
O
N
T
A
I
N
E
R
C
O
M
P
O
N
E
N
T …the one which we implement together!

View Slide

129
Joy Heron / @iamjoyheron &
Lucas Dohmen / @moonbeamlabs
Main Layout Component
Start with the mobile version
page category
page title
buttons
main content

View Slide

130
Main Layout Component
And then consider it on a larger viewport
page category
page title buttons
main content

View Slide

131

How can I get
consistent
spacing in my
design?
page category
page title
buttons
main content

View Slide

132
Spacing Tip:
Use a collection of
predefined spacing variables
to achieve a consistent
design.

View Slide

133
Predefined Spacing Variables
Use a scale to define spacing variables
// 1rem == 16px
$spacer-xxs: 0.25rem;
$spacer-xs: 0.5rem;
$spacer-sm: 0.75rem;
$spacer-md: 1.25rem;
$spacer-base: 2rem;
$spacer-lg: 3.25rem;
$spacer-xl: 5.25rem;
$spacer-xxl: 8.5rem;
:root {
—spacer-xxs: #{$spacer-xxs};
—spacer-xs: #{$spacer-xs};
—spacer-sm: #{$spacer-sm};
—spacer-md: #{$spacer-md};
—spacer-base: #{$spacer-base};
—spacer-lg: #{$spacer-lg};
—spacer-xl: #{$spacer-xl};
—spacer-xxl: #{$spacer-xxl};
}
Scale Based on Fibonacci
See Also: Modular Scale
Sass Variables CSS Custom Properties

View Slide

134
DEMO:
let’s implement this
component together!

View Slide

Maintaining the
Components
(The Architecture Part)
135

View Slide

136
Introducing Architecture Pattern:
Shared Component Library

View Slide

137
Step 1: Develop components using a pattern library
Possible Tools:
• aiur
• fractal
• Pattern Lab
• Storybook

View Slide

138
Step 2: Use a templating language which works both in
your pattern library and all of your services
Possible
Templating
languages:
• complate
• handlebars
pattern library
Alert.jsx
Button.jsx
Collapser.jsx
Navbar.jsx
SCS 1
/* uses JSX templates */
SCS 2
SCS 2

View Slide

139

View Slide

140
faucet-pipeline
simple asset pipeline for JS, Sass, and static assets
opinionated configuration that just works for most
basic use cases
https://www.faucet-pipeline.org/

View Slide

pattern library - v0.5.0
Badge.jsx
141
Step 3: Publish your library using semantic versioning
Alert.jsx
Button.jsx
Collapser.jsx
Navbar.jsx
Alert.jsx
Button.jsx
Collapser.jsx
Navbar.jsx
Badge.jsx
Alert.jsx
Alert.jsx
Alert.jsx
Alert.jsx
Alert.jsx
Alert.jsx
Alert.jsx
Collapser.jsx
Navbar.jsx
⏱

View Slide

142
Step 4: Services use templates from published library
v3.0.65
v3.24.0
SCS 4
v3.4.0
SCS 3
SCS 2
SCS 1

View Slide

143
Avoid breaking changes AS MUCH AS POSSIBLE!
v3.0.65
v3.24.0
SCS 4
v3.4.0
SCS 3
SCS 2
SCS 1 SCS only have
to pull a new
version when
they need the
changes!!
THANKS TO
BACKWARD
COMPATIBILITY

View Slide

144
Benefits of
HTML
Templates
for web
components
Change ONCE, modify all instances
Easier to MAINTAIN components over time
PUBLISHING templates as a library allows
for maximal reuse in projects

View Slide

Title Text
145
Photo by Jens Lelie on Unsplash
We need a big mental shift:
From “Let’s Build a Website” to
“Let’s maintain a product which
other products use as a dependency”
- Brad Frost

View Slide

146
How to
make a
component
backward
compatible
When adding new parameters, make them
OPTIONAL or add a default value
Instead of breaking a component, create a
COPY of the existing implementation and
give it a NEW NAME
Avoid DEPENDING too strongly on the
structure of the component when using it in
other components or in UI Tests

View Slide

147
Shared Component Library 
in summary:
1. Develop components using a pattern library
2. Use a templating language which works both
the pattern library and all services
3. Publish library using semantic versioning
4. Use templates in all services
guiding principle: 
Avoid breaking changes AS MUCH AS POSSIBLE!

View Slide

148
But this is all technical!
Where are the people?
How does this work in a
team?

View Slide

Components
provide a language
between backend
and frontend
149
Cross-functional Team
Backend
Database
Platform
Frontend
Design & UX
Design-
Dev
Fullstack-Dev
Fullstack-Dev
Frontend-
Dev
Backend-Dev
Devops-Dev

View Slide

150
A simple team

View Slide

151
A new product
with the same
design system?
But what happens
when we have to
split our teams?

View Slide

152
Collaboration
with split teams
AVOID throwing
components over
the wall!
Namespace .star-… Namespace .heart-…
Namespace .global-…
When combining
CSS from different
systems, use unique
CSS prefixes for all
CSS rules!

View Slide

153
Designated team
to develop
component
library according
to corporate
design
Namespace .star-… Namespace .heart-…
Namespace .global-…

View Slide

154
There are loads of
different team
constellations but
in all of them we
want…
to RELEASE new versions of our component
library quickly as we develop new ideas
to UPGRADE to new versions of our
component library quickly WITHOUT
worrying about breaking changes
that's why backwards compatibility is so important

View Slide

155
DEMO:
modify template
and view changes
in the app

View Slide

156
Modern Frontend Design
faucet-pipeline.org
https://github.com/moonglum/aiur
Thank you!
Joy Heron
@iamjoyheron
Lucas Dohmen
@moonbeamlabs
https://github.com/innoq/invoicing-example
complate.org

View Slide

Moderne Frontend Entwicklung

Moderne Frontend Entwicklung

Joy Heron

More Decks by Joy Heron

Other Decks in Technology

Featured

Transcript