Static Site Generators with JavaScript

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Hello I'm Nikas nikas.praninskas.com github.com/nikaspran @nikaspran Tech Lead @ Hostmaker

Slide 3

Slide 3 text

Hostmaker.com - 6 months ago ● Slow-ish ● Legacy stack ○ Slow builds (25+ min) ○ Difficult deployment ● Needed a brand refresh It was time for a rewrite

Slide 4

Slide 4 text

Challenges ● Tons of unique content ○ 9 cities + 6 country hubs ○ 2+ languages each ○ 15+ "templates" ● Dynamically generated content ○ PhraseApp ○ Cosmic JS ○ Greenhouse ○ Our own API ● Search Engine Optimisation ● Page Speed 1500+ unique pages

Slide 5

Slide 5 text

Your regular client side application User Website API

Slide 6

Slide 6 text

What if we could do this instead? User Website API

Slide 7

Slide 7 text

Why? ● Blazing fast ○ No waiting for content, no loading screens ● Once it's up, it's up ○ No moving parts ● Easy deployment ○ Just upload everything to a CDN (i.e. AWS S3) ○ Scaling -> just "add more CDN" ● Great dev experience ○ Reproducible builds -> easy debugging User Website API

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Why not use a static site generator?

Slide 10

Slide 10 text

React Static Site Generators - two clear options

Slide 11

Slide 11 text

Static Site Generators - React Static Why did we pick this then?

Slide 12

Slide 12 text

Gatsby - "Dynamically create pages from data"

Slide 13

Slide 13 text

React Static - just like, getRoutes(), lol

Slide 14

Slide 14 text

"React-Static is a fast, lightweight, and powerful framework for building static-progressive React applications and websites." ● The promise of the power of Gatsby without the complexity ● It's just React, which means it's just JavaScript

Slide 15

Slide 15 text

yarn build /src/ /dist/

Slide 16

Slide 16 text

How it works /src App.js package.json static.config.js index.js /components

Slide 17

Slide 17 text

How it works - static.config.js Routes

Slide 18

Slide 18 text

It's just JavaScript Generate a route for each locale

Slide 19

Slide 19 text

What about pagination?

Slide 20

Slide 20 text

It's just JavaScript

Slide 21

Slide 21 text

What about dynamic content? User Website API What if content changes here? No problem!

Slide 22

Slide 22 text

What about dynamic content? What if content changes here? User Website API ???

Slide 23

Slide 23 text

Webhooks! POST /builds ... ...

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

What went well

Slide 26

Slide 26 text

What went well - Very customisable ● CSS modules ● Imgix ● Translations and localized content ● Dynamic signup flow ● User sessions ● Custom webpack config

Slide 27

Slide 27 text

What went well - Did everything it had to ● Great performance out of the box ○ Code splitting ○ Lazy loading ● Great developer experience ● Started with 500 pre-built pages, now up to 1500+ ● Loading data from 12+ endpoints at build time ● Around 4 minutes to build and deploy everything ● Can scale long term

Slide 28

Slide 28 text

What did not go well

Slide 29

Slide 29 text

What did not go well - It's different ● Even though there's no "server", there's still a build step run via Node ● Can't always use the obvious solution ● Make sure to read the docs

Slide 30

Slide 30 text

Main Takeaway Don't be afraid to experiment!

Slide 31

Slide 31 text

JAMstack "Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup." JS API .html build .css .js Markup - jamstack.org

Slide 32

Slide 32 text

Other people are doing it too "SmashingMagazine.com is now much faster, they went from 800 ms time to first load to 80ms." - www.netlify.com/case-studies/smashing/

Slide 33

Slide 33 text

What this means for you

Slide 34

Slide 34 text

Coming to a framework near you

Slide 35

Slide 35 text

And best of all - it's free ...

Slide 36

Slide 36 text

nikas.praninskas.com github.com/nikaspran @nikaspran Let's keep in touch: Thank you! Live Demo @ hostmaker.com/careers