Slide 1

Slide 1 text

In defense of static sites A RANT BY LIZ ABINANTE AKA @FEMINISTY, SENIOR SOFTWARE ENGINEER AT NEW RELIC

Slide 2

Slide 2 text

I LEFT FRONT END ... FOR JAVA

Slide 3

Slide 3 text

THE NEXT QUESTION INEVITABLY BECOMES: SO WHY DO YOU EVEN CARE?

Slide 4

Slide 4 text

FAMOUS LAST WORDS "RUN npm install THEN npm start"

Slide 5

Slide 5 text

LOL

Slide 6

Slide 6 text

JS TOOLS FATIGUE IS REAL

Slide 7

Slide 7 text

How did we get here?

Slide 8

Slide 8 text

I HAVE A THEORY

Slide 9

Slide 9 text

SHIP IT BECAME SELL IT

Slide 10

Slide 10 text

OUR TECHNICAL DECISIONS IMPACT USER EXPERIENCE

Slide 11

Slide 11 text

“IF WE SWITCH TO THIS SHINY NEW THING, WE’LL BE ABLE TO SHIP FEATURES FASTER TO CUSTOMERS.”

Slide 12

Slide 12 text

NO YOU WON'T.

Slide 13

Slide 13 text

ALL ABOUT USERS

Slide 14

Slide 14 text

USERS AS AN EXCUSE TO UPGRADE

Slide 15

Slide 15 text

USERS AS AN EXCUSE TO REFACTOR

Slide 16

Slide 16 text

USERS AS AN EXCUSE TO TRY SOMETHING NEW

Slide 17

Slide 17 text

USERS AS AN EXCUSE TO DO WHAT WE WANT

Slide 18

Slide 18 text

OUR COLLECTIVE TECHNICAL ENNUI HAS BECOME OUR USERS' PROBLEM

Slide 19

Slide 19 text

WE HAVE USERS BECAUSE THEY WANT TO USE OUR PRODUCTS

Slide 20

Slide 20 text

NOT BECAUSE THEY LIKE US AS PEOPLE

Slide 21

Slide 21 text

USERS DON'T CARE WHAT TOOLS & LIBRARIES WE USE

Slide 22

Slide 22 text

USERS CARE WHEN WE SHIP SOMETHING MEANINGFUL

Slide 23

Slide 23 text

Ecosystem

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

THRIVING ECOSYSTEM OF BUILD TOOLS AND LIBRARIES

Slide 26

Slide 26 text

THE OPTIONS ARE OVERWHELMING

Slide 27

Slide 27 text

WE ARE EASILY DISTRACTED

Slide 28

Slide 28 text

WE ARE BASICALLY CHILDREN

Slide 29

Slide 29 text

WE ARE GUILTY OF OVER ARCHITECTING

Slide 30

Slide 30 text

WE HAVE TOO MANY TOOLS AND TOO FEW CARPENTERS

Slide 31

Slide 31 text

Rethinking what we build

Slide 32

Slide 32 text

STATIC SITES

Slide 33

Slide 33 text

NO DATABASE. NO BACKEND. NO JS.

Slide 34

Slide 34 text

WHAT DO YOU ACTUALLY NEED JS FOR?

Slide 35

Slide 35 text

NOTHING

Slide 36

Slide 36 text

❤ CSS

Slide 37

Slide 37 text

REMEMBER PROGRESSIVE ENHANCEMENT?

Slide 38

Slide 38 text

Benefits of static sites

Slide 39

Slide 39 text

LOW COST! !

Slide 40

Slide 40 text

DEPLOYS ARE EASY !

Slide 41

Slide 41 text

NO SCALING PROBLEMS

Slide 42

Slide 42 text

SHARED RESPONSIBILITY

Slide 43

Slide 43 text

MULTI-DISCIPLINARY EXPERT NOT REQUIRED

Slide 44

Slide 44 text

FEWER SECURITY CONCERNS

Slide 45

Slide 45 text

PERFORMANCE

Slide 46

Slide 46 text

Downsides

Slide 47

Slide 47 text

UPDATES REQUIRE MANUAL CHANGES

Slide 48

Slide 48 text

AUTOMATION REQUIRES EXPERTISE

Slide 49

Slide 49 text

LOTS OF DUPLICATED WORK WITHOUT TOOLS

Slide 50

Slide 50 text

THERE ARE SO MANY GENERATORS

Slide 51

Slide 51 text

NO ONE-SIZE-FITS-ALL SOLUTION

Slide 52

Slide 52 text

How do you decide?

Slide 53

Slide 53 text

ANSWER SEEMINGLY ENDLESS QUESTIONS

Slide 54

Slide 54 text

HOW OFTEN DOES CONTENT NEED TO BE UPDATED?

Slide 55

Slide 55 text

CAN CONTENT UPDATES BE MADE EASIER WITH AUTOMATION?

Slide 56

Slide 56 text

DO I HAVE THE ABILITY TO AUTOMATE THE THINGS I WANT?

Slide 57

Slide 57 text

DO I NEED USER STATES?

Slide 58

Slide 58 text

DO I NEED THIRD PARTY DATA AT RUNTIME?

Slide 59

Slide 59 text

CAN I SOURCE THIRD PARTY DATA AT BUILD TIME INSTEAD?

Slide 60

Slide 60 text

IS THIS SITE INFORMATIONAL OR INTERACTIVE?

Slide 61

Slide 61 text

AM I PROCESSING PAYMENTS OR HANDLING SECURE INFORMATION?

Slide 62

Slide 62 text

static sites are...

Slide 63

Slide 63 text

REALLY GOOD AT DISPLAYING INFORMATION

Slide 64

Slide 64 text

REALLY BAD AT RECEIVING & MANIPULATING INFORMATION

Slide 65

Slide 65 text

Use cases

Slide 66

Slide 66 text

▸ portfolios ▸ blogs ▸ resumes ▸ prototypes ▸ events and confs ▸ brick and mortar business ▸ informational marketing

Slide 67

Slide 67 text

USE AN API TO GENERATE YOUR CONTENT!

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

How do you build it?

Slide 73

Slide 73 text

THE SAME WAY YOU BUILD AN APP

Slide 74

Slide 74 text

WITH PLANNING, DESIGN, FORETHOUGHT...

Slide 75

Slide 75 text

AND TOOLS !

Slide 76

Slide 76 text

Tools & Generators

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

437

Slide 79

Slide 79 text

! " #

Slide 80

Slide 80 text

FILTER BY LANGUAGE PREFERENCE!

Slide 81

Slide 81 text

PYTHON 111 JAVASCRIPT 91 RUBY 48

Slide 82

Slide 82 text

MOST OF THEM OFFER: ▸ templating ▸ live reloading ▸ Sass or Less compiling ▸ blog aware ▸ deploy hooks

Slide 83

Slide 83 text

PICK ONE THAT WORKS FOR YOU

Slide 84

Slide 84 text

LEVERAGE THE TOOLS WE HAVE

Slide 85

Slide 85 text

FOCUS ON USERS

Slide 86

Slide 86 text

Upgrading

Slide 87

Slide 87 text

UPGRADING FOR YOU AND YOUR USERS

Slide 88

Slide 88 text

ASK YOURSELF

Slide 89

Slide 89 text

HOW HAVE MY USERS' NEEDS CHANGED?

Slide 90

Slide 90 text

WHAT TECHNOLOGY DO I NEED TO SUPPORT THESE CHANGES?

Slide 91

Slide 91 text

HOW DO I BUILD IT?

Slide 92

Slide 92 text

ACTUALLY MIGRATING YOUR CONTENT IS STRAIGHTFORWARD, but please keep in mind...

Slide 93

Slide 93 text

URLS ARE SACRED NEVER CHANGE A URL WITHOUT A REDIRECT!

Slide 94

Slide 94 text

TEMPLATES ON A STATIC SITE ➡ TEMPLATES IN AN APP

Slide 95

Slide 95 text

Build simple first

Slide 96

Slide 96 text

Build beautiful

Slide 97

Slide 97 text

Build for people

Slide 98

Slide 98 text

Thanks! LIZ ABINANTE AKA @FEMINISTY SLIDES: TINYLINX.BIZ/CASCADIA IMAGE CREDITS: TINYLINX.BIZ/CASCADIAIMAGES