@ChrisFerdinandi GoMakeThings.com
A simpler, faster world-wide web
THE LEAN WEB
Slide 2
Slide 2 text
MESS
The web is a
Slide 3
Slide 3 text
fix it
How to
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Chris Ferdinandi
GoMakeThings.com
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
https://vanillajsguides.com
Slide 8
Slide 8 text
Vanilla JS Academy
https://vanillajsacademy.com
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Started from the bottom,
now we here
Slide 12
Slide 12 text
HTML CSS WordPress
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
=>
Slide 15
Slide 15 text
powerful
native features
ease of use
the sweet spot
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
“My biggest challenge
is keeping up.
Slide 19
Slide 19 text
A push for simplicity
Slide 20
Slide 20 text
Is there a conference for web
developers that specifically
caters to “lean web” (don’t use
JS if not necessary etc.)?
— Thomas Fuchs
https://twitter.com/thomasfuchs/status/925341886944038914
Slide 21
Slide 21 text
Start End
1
Modern best practices
(and why they’re bad)
New best practices
3
How we got here
2
Slide 22
Slide 22 text
Modern Best Practices
(and why they’re bad)
1
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Modern Best Practice
JavaScript Frameworks
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
var data = {
todos: [
{
item: 'Adopt a puppy',
completed: true
},
{
item: 'Buy dog food and a dog bed',
completed: false
}
],
username: 'Chris'
};
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
if (data.todos.length > 0) {
// create list items
} else {
return 'You don\'t have any todos yet.
Please add one.'
}
Which has a better
First Meaningful Paint time?
① a raw 8.5MB HTML file with the
full text of every single one of my
27,506 tweets
② a client rendered React site with
exactly one tweet on it
https://twitter.com/zachleat/status/1169998370041208832
Slide 40
Slide 40 text
https://twitter.com/zachleat/status/1169998370041208832
(Spoiler: @____lighthouse
reports 8.5MB of HTML wins
by about 200ms)
— Zach Leatherman
var callout = {
backgroundColor: 'slategray',
fontSize: '2em'
};
Hi there!
Slide 56
Slide 56 text
Hi there!
Slide 57
Slide 57 text
import React, { Component } from 'react';
import Button from ‘./Button';
class DangerButton extends Component {
render() {
return ;
}
}
export default DangerButton;
Slide 58
Slide 58 text
Click Me
Slide 59
Slide 59 text
Modern Web Problem
Gatekeeping
Slide 60
Slide 60 text
Here’s a straw-man composite from
several recent conversations: These
tools let us move faster. Because we
can iterate faster we’re delivering
better experiences.
— Alex Russell
https://infrequently.org/2018/09/the-developer-experience-bait-and-switch/
Here’s a straw-man composite from
several recent conversations: These
tools let us move faster. Because we
can iterate faster we’re delivering
better experiences.
— Alex Russell
https://infrequently.org/2018/09/the-developer-experience-bait-and-switch/
Slide 66
Slide 66 text
Modern Best Practice
Single Page Apps (SPAs)
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
A Vicious Circle
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
Modern Web Problem
Fragility
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
People don’t (usually) browse the web
with JS disabled