$30 off During Our Annual Pro Sale. View Details »

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.

Darian Moody

March 19, 2018
Tweet

More Decks by Darian Moody

Other Decks in Programming

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