Gatsby: Under the Hood

Gatsby: Under the Hood

Gatsby has built on the ideas from the existing generation of static generators to provide a truly flexible system for baking out sites.

In this talk, I will take you under the hood to see how Gatsby’s architecture lets you break free of the constraints you’re used to.

A7be9e756c24b601e6010886fe74430d?s=128

Darian Moody

March 19, 2018
Tweet

Transcript

  1. @djm_ 1 GATSBY Under the Hood Darian Moody

  2. @djm_ @djm_ 2 THE TIME STATIC GENERATION SAVED MY BUTT

    First, a little story… @djm_
  3. @djm_ @djm_ 3 < 2 WEEKS 1 CMS PAGE 1

    BACKENDER 1 FRONTENDER 0 OPS
  4. @djm_ @djm_ 4 Simple right?

  5. @djm_ @djm_ 5

  6. @djm_ @djm_ 6 QUEEN B

  7. @djm_ @djm_ 7 UNPREDICTABLE SPIKY TRAFFIC IS THE ENEMY OF

    DYNAMIC GENERATION
  8. @djm_ @djm_ 8 So we plotted..

  9. @djm_ @djm_ 9 Same page for all? ✓ Content known

    up front? ✓ Needs to be cheap? ✓
  10. @djm_ BAKE IT OUT! 10 BAKE IT OUT!

  11. @djm_ 11

  12. @djm_ @djm_ 12

  13. @djm_ 13 STATIC GENERATION HAS COME FAR BUT HAS A

    LONG WAY TO GO
  14. @djm_ @djm_ 14 
 PAINS

  15. @djm_ @djm_ 15 MULTIPLE DATA
 SOURCES json yaml ini toml

    csv flat files databases APIs XML custom formats CMSs Pain One
  16. @djm_ @djm_ 16 DATA FORMAT LIMITATIONS Limiting the possibilities without

    extra effort spent marshalling data Some come with..
  17. @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
  18. @djm_ @djm_ 18 INFLEXIBLE PATHS Pain Two

  19. @djm_ @djm_ 19 SERVER-SIDE ONLY Pain Three

  20. @djm_ @djm_ 20 MULTIPLE DATA
 SOURCES Solution One

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

    TO GATSBY
  22. @djm_ @djm_ 22 Thanks to.. NODES

  23. @djm_ @djm_ 23

  24. @djm_ @djm_ 24 NODES HAVE HIERARCHY FILE NODE MD NODE

    Parent: sourced Child: transformed
  25. @djm_ @djm_ 25 Why nodes? TO BE TREATED THE SAME

    AND YET DIFFERENTLY TOO
  26. @djm_ @djm_ 26 Why nodes? A BUILDING BLOCK FOR OTHERS

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

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

  29. @djm_ @djm_ 29 PUBLIC APIS ..let us interact with nodes

    CREATION sourceNodes createPages ..etc MUTATION onCreateNode onCreatePage ..etc
  30. @djm_ @djm_ 30 PLUGIN-FIRST ARCHITECTURE Small core Make everything a

    plugin
  31. @djm_ @djm_ 31 GATSBY DOGFOODS ITS OWN APIS

  32. @djm_ @djm_ 32 78 IN CORE

  33. @djm_ @djm_ 33 SOURCES & TRANSFORMERS

  34. @djm_ @djm_ 34 SOURCES NODE DATA

  35. @djm_ @djm_ 35 SOURCES

  36. @djm_ @djm_ 36 TRANSFORMERS NODE NODE

  37. @djm_ @djm_ 37 TRANSFORMERS

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

  39. @djm_ @djm_ 39

  40. @djm_ 40

  41. @djm_ @djm_ 41 BUT HOW DO YOU CREATE THE SCHEMA

    AND SERVER?
  42. @djm_ 42 GATSBY DOES THE HEAVY LIFTING You don’t…

  43. @djm_ @djm_ 43 EXPLORE WITH IGRAPQL

  44. @djm_ @djm_ 44 INFLEXIBLE PATHS Solution Two

  45. @djm_ @djm_ 45 onCreateNode API

  46. @djm_ @djm_ 46 createPages API

  47. @djm_ @djm_ 47 SERVER-SIDE ONLY Solution Three

  48. @djm_ @djm_ 48 GATSBY GOES FURTHER

  49. @djm_ @djm_ 49 SERVICE WORKERS

  50. @djm_ @djm_ 50 CLIENT SIDE ROUTING

  51. @djm_ JAMSTACK 51

  52. 52 Questions? Thanks! Darian Moody - @djm_