Gatsby: Under the Hood

@djm_ 1 GATSBY Under the Hood Darian Moody

@djm_ @djm_ 2 THE TIME STATIC GENERATION SAVED MY BUTT
First, a little story… @djm_

@djm_ @djm_ 3 < 2 WEEKS 1 CMS PAGE 1
BACKENDER 1 FRONTENDER 0 OPS

@djm_ @djm_ 4 Simple right?

@djm_ @djm_ 5

@djm_ @djm_ 6 QUEEN B

@djm_ @djm_ 7 UNPREDICTABLE SPIKY TRAFFIC IS THE ENEMY OF
DYNAMIC GENERATION

@djm_ @djm_ 8 So we plotted..

@djm_ @djm_ 9 Same page for all? ✓ Content known
up front? ✓ Needs to be cheap? ✓

@djm_ BAKE IT OUT! 10 BAKE IT OUT!

@djm_ 11

@djm_ @djm_ 12

@djm_ 13 STATIC GENERATION HAS COME FAR BUT HAS A
LONG WAY TO GO

@djm_ @djm_ 14   PAINS

@djm_ @djm_ 15 MULTIPLE DATA  SOURCES json yaml ini toml
csv flat files databases APIs XML custom formats CMSs Pain One

@djm_ @djm_ 16 DATA FORMAT LIMITATIONS Limiting the possibilities without
extra effort spent marshalling data Some come with..

@djm_ @djm_ 17 STRUGGLE HANDLING MULTIPLE SOURCES ..and others.. 1.
On disk & remote data handled differently 2. No standard representation of data 3. No common way to query/filter/sort data 4. Lotsa plumbing and I’m not Mario

@djm_ @djm_ 18 INFLEXIBLE PATHS Pain Two

@djm_ @djm_ 19 SERVER-SIDE ONLY Pain Three

@djm_ @djm_ 20 MULTIPLE DATA  SOURCES Solution One

@djm_ 21 SOURCING, TRANSFORMING & QUERYING OF DATA IS CENTRAL
TO GATSBY

@djm_ @djm_ 22 Thanks to.. NODES

@djm_ @djm_ 23

@djm_ @djm_ 24 NODES HAVE HIERARCHY FILE NODE MD NODE
Parent: sourced Child: transformed

@djm_ @djm_ 25 Why nodes? TO BE TREATED THE SAME
AND YET DIFFERENTLY TOO

@djm_ @djm_ 26 Why nodes? A BUILDING BLOCK FOR OTHERS

@djm_ @djm_ 27 Why nodes? TO SOLVE THE QUERYING PROBLEM

@djm_ @djm_ 28 WHAT NEXT? We have nodes..

@djm_ @djm_ 29 PUBLIC APIS ..let us interact with nodes
CREATION sourceNodes createPages ..etc MUTATION onCreateNode onCreatePage ..etc

@djm_ @djm_ 30 PLUGIN-FIRST ARCHITECTURE Small core Make everything a
plugin

@djm_ @djm_ 31 GATSBY DOGFOODS ITS OWN APIS

@djm_ @djm_ 32 78 IN CORE

@djm_ @djm_ 33 SOURCES & TRANSFORMERS

@djm_ @djm_ 34 SOURCES NODE DATA

@djm_ @djm_ 35 SOURCES

@djm_ @djm_ 36 TRANSFORMERS NODE NODE

@djm_ @djm_ 37 TRANSFORMERS

@djm_ @djm_ 38 FLEXIBILITY! ..but at what cost?

@djm_ @djm_ 39

@djm_ 40

@djm_ @djm_ 41 BUT HOW DO YOU CREATE THE SCHEMA
AND SERVER?

@djm_ 42 GATSBY DOES THE HEAVY LIFTING You don’t…

@djm_ @djm_ 43 EXPLORE WITH IGRAPQL

@djm_ @djm_ 44 INFLEXIBLE PATHS Solution Two

@djm_ @djm_ 45 onCreateNode API

@djm_ @djm_ 46 createPages API

@djm_ @djm_ 47 SERVER-SIDE ONLY Solution Three

@djm_ @djm_ 48 GATSBY GOES FURTHER

@djm_ @djm_ 49 SERVICE WORKERS

@djm_ @djm_ 50 CLIENT SIDE ROUTING

@djm_ JAMSTACK 51

52 Questions? Thanks! Darian Moody - @djm_

Gatsby: Under the Hood

Gatsby: Under the Hood

More Decks by Darian Moody

Other Decks in Programming

Featured

Transcript