Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Gatsby.js - how is it different from other static site generators

Gatsby.js - how is it different from other static site generators

Gatsby.js is changing the static-site-generator game, and it's for something more profound than just using React or GraphQL. This presentation digs into what is a static site generator and highlights the key concepts that make Gatsby a game-changer.

Transcript

  1. @bobylito Gatsby.js A Paris.js talk by Alex / @bobylito

  2. @bobylito Hi, I’m Alex Software engineer Independent contractor @bobylito /

    alex@noima.xyz Loves JS
  3. @bobylito I’m a static website generator addict

  4. @bobylito Two questions How is gatsby different from other generators?

    Is gatsby for you / your next project?
  5. @bobylito Two questions How is gatsby different from other generators?

    Is gatsby for you / your next project?
  6. @bobylito Two questions How is gatsby different from other generators?

    Is gatsby for you / your next project?
  7. @bobylito What is a static website generator?

  8. @bobylito A tool that transforms markup in HTML

  9. @bobylito With the help of templates

  10. @bobylito They come in different size and shapes

  11. @bobylito And they share common properties • Pipelines • Content

    is the main concern • Templating come second • Content comes from files
  12. @bobylito Gatsby.js

  13. @bobylito Templates

  14. @bobylito Template first! ▾ src/ ▸ components/ ▸ images/ ▾

    pages/ 404.js index.js page-2.js gatsby-browser.js gatsby-config.js gatsby-node.js gatsby-ssr.js LICENSE package-lock.json package.json README.md yarn.lock React components
  15. @bobylito Templates are using React

  16. @bobylito Templates are also usable in the front-end • No

    more duplication of templates • Same mindset at runtime and at build time
  17. @bobylito Content

  18. @bobylito Source plugins

  19. @bobylito Content plugins - GraphQL MDX example

  20. @bobylito Source agnostic Files Databases Headless CMS

  21. @bobylito Assets are content

  22. @bobylito Plugins can optimize assets - image example PNG full

    resolution Megabytes JPEG with just enough quality to look great Kilobytes
  23. @bobylito Plugins can optimize assets - image example Full resolution

    Too much for mobile or Too small for desktop Different sizes for each screen Perfect everywhere
  24. @bobylito Generating pages

  25. @bobylito Create pages API - Two parts • Extension point:

    createPages • Function: createPage
  26. @bobylito Create pages API - example

  27. @bobylito Bringing everything together

  28. @bobylito Flip the model - get new API powers

  29. @bobylito Is Gatsby right for your next project?

  30. @bobylito Why not choose Gatsby.js? • Choices / ecosystem •

    Magic • You have mastered something else
  31. @bobylito Bad reasons to choose Gatsby.js or not? • X

    Y Z are using it • Tech: React, GraphQL
  32. @bobylito Why choose Gatsby.js? • Best practices built-in • You’re

    building a web app • Well documented • Community
  33. @bobylito Thanks! Find me on twitter @bobylito Looking for a

    JS freelancer: alex@noima.xyz
  34. @bobylito Links and resources • My talk about JSDoc in

    static website generators • Playlist Detective, a project I built with Gatsby and Algolia • Create pages API • Gatsby image plugin • Gatsby plugin repository