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.

Transcript

1. @djm_
   1
   GATSBY
   Under the Hood
   Darian Moody
   

   View Slide

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

   View Slide

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

   View Slide

4. @djm_
   @djm_
   4
   Simple right?
   

   View Slide

5. @djm_
   @djm_
   5
   

   View Slide

6. @djm_
   @djm_
   6
   QUEEN B
   

   View Slide

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

   View Slide

8. @djm_
   @djm_
   8
   So we
   plotted..
   

   View Slide

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

   View Slide

10. @djm_
    BAKE IT OUT!
    10
    BAKE IT OUT!
    

    View Slide

11. @djm_
    11
    

    View Slide

12. @djm_
    @djm_
    12
    

    View Slide

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

    View Slide

14. @djm_
    @djm_
    14
    

    PAINS
    

    View Slide

15. @djm_
    @djm_
    15
    MULTIPLE
    DATA

    SOURCES
    json
    yaml
    ini
    toml
    csv
    flat files
    databases
    APIs
    XML
    custom formats
    CMSs
    Pain One
    

    View Slide

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

    View Slide

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
    

    View Slide

18. @djm_
    @djm_
    18
    INFLEXIBLE
    PATHS
    Pain Two
    

    View Slide

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

    View Slide

20. @djm_
    @djm_
    20
    MULTIPLE
    DATA

    SOURCES
    Solution One
    

    View Slide

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

    View Slide

22. @djm_
    @djm_
    22
    Thanks to..
    NODES
    

    View Slide

23. @djm_
    @djm_
    23
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. @djm_
    @djm_
    32
    78
    IN
    CORE
    

    View Slide

33. @djm_
    @djm_
    33
    SOURCES &
    TRANSFORMERS
    

    View Slide

34. @djm_
    @djm_
    34
    SOURCES
    NODE
    DATA
    

    View Slide

35. @djm_
    @djm_
    35
    SOURCES
    

    View Slide

36. @djm_
    @djm_
    36
    TRANSFORMERS
    NODE NODE
    

    View Slide

37. @djm_
    @djm_
    37
    TRANSFORMERS
    

    View Slide

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

    View Slide

39. @djm_
    @djm_
    39
    

    View Slide

40. @djm_
    40
    

    View Slide

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

    View Slide

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

    View Slide

43. @djm_
    @djm_
    43
    EXPLORE WITH
    IGRAPQL
    

    View Slide

44. @djm_
    @djm_
    44
    INFLEXIBLE
    PATHS
    Solution Two
    

    View Slide

45. @djm_
    @djm_
    45
    onCreateNode API
    

    View Slide

46. @djm_
    @djm_
    46
    createPages API
    

    View Slide

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

    View Slide

48. @djm_
    @djm_
    48
    GATSBY GOES
    FURTHER
    

    View Slide

49. @djm_
    @djm_
    49
    SERVICE
    WORKERS
    

    View Slide

50. @djm_
    @djm_
    50
    CLIENT SIDE
    ROUTING
    

    View Slide

51. @djm_
    JAMSTACK
    51
    

    View Slide

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

    View Slide