Building web apps that don’t suck

A presentation at Web Unleashed 2019 in September 2019 in Toronto, ON, Canada by Frédéric Harper

Slide 1

Slide 1

building web apps that don’t suck Frédéric Harper Senior Developer Advocate DigitalOcean @fharper https://unsplash.com/photos/xNJJvB0AkZ8

Slide 2

Slide 2

https://twitter.com/AhmadNassri

Slide 3

Slide 3

— People who can’t code: Coding is fucking hard! https://twitter.com/AhmadNassri

Slide 4

Slide 4

— People who can’t code: Coding is fucking hard! — People who don’t try at all: Coding is fucking hard! https://twitter.com/AhmadNassri

Slide 5

Slide 5

— People who can’t code: Coding is fucking hard! — People who don’t try at all: Coding is fucking hard! — Teachers: Coding is fucking hard! https://twitter.com/AhmadNassri

Slide 6

Slide 6

— People who can’t code: Coding is fucking hard! — People who don’t try at all: Coding is fucking hard! — Teachers: Coding is fucking hard! — Novice Developers: Coding is fucking hard! https://twitter.com/AhmadNassri

Slide 7

Slide 7

— People who can’t code: Coding is fucking hard! — People who don’t try at all: Coding is fucking hard! — Teachers: Coding is fucking hard! — Novice Developers: Coding is fucking hard! — Pro Developers: Coding is fucking hard! https://twitter.com/AhmadNassri

Slide 8

Slide 8

— People who can’t code: Coding is fucking hard! — People who don’t try at all: Coding is fucking hard! — Teachers: Coding is fucking hard! — Novice Developers: Coding is fucking hard! — Pro Developers: Coding is fucking hard! — Famous Developers: Coding is fucking hard! https://twitter.com/AhmadNassri

Slide 9

Slide 9

— People who can’t code: Coding is fucking hard! — People who don’t try at all: Coding is fucking hard! — Teachers: Coding is fucking hard! — Novice Developers: Coding is fucking hard! — Pro Developers: Coding is fucking hard! — Famous Developers: Coding is fucking hard! — Business People: Coding is easy! https://twitter.com/AhmadNassri

Slide 10

Slide 10

— People who can’t code: Coding is fucking hard! — People who don’t try at all: Coding is fucking hard! — Teachers: Coding is fucking hard! — Novice Developers: Coding is fucking hard! — Pro Developers: Coding is fucking hard! — Famous Developers: Coding is fucking hard! — Business People: Coding is easy! https://twitter.com/AhmadNassri

Slide 11

Slide 11

https://giphy.com/gifs/stress-i-need-a-drink-brain-explode-2rqEdFfkMzXmo/

Slide 12

Slide 12

https://www.flickr.com/photos/cannedtuna/466983614/

Slide 13

Slide 13

https://www.flickr.com/photos/jesusbelzunce/4366759251/

Slide 14

Slide 14

https://www.flickr.com/photos/cliph/454796520/

Slide 15

Slide 15

https://www.flickr.com/photos/funadium/1179006213/

Slide 16

Slide 16

architect

Slide 17

Slide 17

motivations

Slide 18

Slide 18

motivations

  1. I’m (micro)tasking

Slide 19

Slide 19

motivations

  1. I’m (micro)tasking 2. I’m local

Slide 20

Slide 20

motivations

  1. I’m (micro)tasking 2. I’m local 3. I’m bored

Slide 21

Slide 21

https://unsplash.com/photos/rk_Zz3b7G2Y

Slide 22

Slide 22

unsplash.com/photos/H7SCRwU1aiM

Slide 23

Slide 23

unsplash.com/photos/cAY9X4rPG3g

Slide 24

Slide 24

design

Slide 25

Slide 25

https://unsplash.com/photos/d0ycMhfRpME

Slide 26

Slide 26

https://www.flickr.com/photos/flyforfun/8449954398

Slide 27

Slide 27

Slide 28

Slide 28

Fi!’s law T: Average time taken to complete the movement a: Start/stop time of the device b: Inherent speed of the device D: Distance from the starting point to target center W: Width of target, measured along axis of motion

Slide 29

Slide 29

Fi!’s law translated the bigger and closer a target is, the easier it is to hit.

Slide 30

Slide 30

optimize

Slide 31

Slide 31

lighthouse demo

Slide 32

Slide 32

HTTP requests

Slide 33

Slide 33

HTTP requests — avoid or minimize 3xx redirections

Slide 34

Slide 34

HTTP requests — avoid or minimize 3xx redirections — GZIP encoding (htaccess, nginx.conf, web.config)

Slide 35

Slide 35

HTTP requests — avoid or minimize 3xx redirections — GZIP encoding (htaccess, nginx.conf, web.config) — image sprites (when it make sense)

Slide 36

Slide 36

HTTP requests — avoid or minimize 3xx redirections — GZIP encoding (htaccess, nginx.conf, web.config) — image sprites (when it make sense) — use CDN (Content Distribution Network)

Slide 37

Slide 37

HTTP requests — avoid or minimize 3xx redirections — GZIP encoding (htaccess, nginx.conf, web.config) — image sprites (when it make sense) — use CDN (Content Distribution Network) — cache the content

Slide 38

Slide 38

HTTP requests — avoid or minimize 3xx redirections — GZIP encoding (htaccess, nginx.conf, web.config) — image sprites (when it make sense) — use CDN (Content Distribution Network) — cache the content — configure the HTTP Cache Headers (Apache, Nginx)

Slide 39

Slide 39

HTTP requests — avoid or minimize 3xx redirections — GZIP encoding (htaccess, nginx.conf, web.config) — image sprites (when it make sense) — use CDN (Content Distribution Network) — cache the content — configure the HTTP Cache Headers (Apache, Nginx) — configure HTTP Expires Response Header (IIS)

Slide 40

Slide 40

misc js

Slide 41

Slide 41

misc js — avoid creating new object when it’s possible

Slide 42

Slide 42

misc js — avoid creating new object when it’s possible — load JavaScript files at the end of the page

Slide 43

Slide 43

misc js — avoid creating new object when it’s possible — load JavaScript files at the end of the page — asynchronously load scripts (async) and fetch data

Slide 44

Slide 44

misc js — avoid creating new object when it’s possible — load JavaScript files at the end of the page — asynchronously load scripts (async) and fetch data — JSON is faster than XML

Slide 45

Slide 45

misc

Slide 46

Slide 46

misc — don’t fix it if it’s not broken

Slide 47

Slide 47

misc — don’t fix it if it’s not broken — you don’t always need a framework or a library

Slide 48

Slide 48

misc — don’t fix it if it’s not broken — you don’t always need a framework or a library — please don’t fix it if it’s not broken

Slide 49

Slide 49

misc — don’t fix it if it’s not broken — you don’t always need a framework or a library — please don’t fix it if it’s not broken — put as much logic as you can on the server-side

Slide 50

Slide 50

misc — don’t fix it if it’s not broken — you don’t always need a framework or a library — please don’t fix it if it’s not broken — put as much logic as you can on the server-side — I’m serious, don’t fix it if it’s not broken

Slide 51

Slide 51

Images

Slide 52

Slide 52

Images — use native image resolution (original width, height)

Slide 53

Slide 53

Images — use native image resolution (original width, height) — use the right image format (PNG, JPEG…)

Slide 54

Slide 54

Images — use native image resolution (original width, height) — use the right image format (PNG, JPEG…) — use image preview for videos

Slide 55

Slide 55

Images — use native image resolution (original width, height) — use the right image format (PNG, JPEG…) — use image preview for videos — compress your images

Slide 56

Slide 56

shortpixel demo

Slide 57

Slide 57

tests

Slide 58

Slide 58

tests — create tests: unit tests, integration tests…

Slide 59

Slide 59

tests — create tests: unit tests, integration tests… — use framework like Mocha or QUnit for JavaScript/Node.js

Slide 60

Slide 60

tests — create tests: unit tests, integration tests… — use framework like Mocha or QUnit for JavaScript/Node.js — test yourself, be the dummiest user you can be

Slide 61

Slide 61

tests — create tests: unit tests, integration tests… — use framework like Mocha or QUnit for JavaScript/Node.js — test yourself, be the dummiest user you can be — test, test and test

Slide 62

Slide 62

the extra mile

Slide 63

Slide 63

https://unsplash.com/photos/fPxOowbR6ls

Slide 64

Slide 64

Slide 65

Slide 65

https://unsplash.com/photos/7XGtYefMXiQ

Slide 66

Slide 66

webhint demo

Slide 67

Slide 67

in the end

Slide 68

Slide 68

the philosophy

Slide 69

Slide 69

the philosophy

  1. Insulate us from the complexity

Slide 70

Slide 70

the philosophy

  1. Insulate us from the complexity 2. Make us accomplish our goals faster & securily

Slide 71

Slide 71

the philosophy

  1. Insulate us from the complexity 2. Make us accomplish our goals faster & securily 3. Help us be awesome in the moment!

Slide 72

Slide 72

resources slides https://speakerdeck.com/fharper recording https://www.youtube.com/user/fredericharper

Slide 73

Slide 73

Frédéric Harper fred@do.co fred.dev my talks are release under the unlicense license