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

Gatsby.js - how is it different from other stat...

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.

More Decks by Alexandre Valsamou-Stanislawski

Other Decks in Programming

Transcript

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

    is the main concern • Templating come second • Content comes from files
  2. @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
  3. @bobylito Templates are also usable in the front-end • No

    more duplication of templates • Same mindset at runtime and at build time
  4. @bobylito Plugins can optimize assets - image example PNG full

    resolution Megabytes JPEG with just enough quality to look great Kilobytes
  5. @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
  6. @bobylito Why not choose Gatsby.js? • Choices / ecosystem •

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

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

    building a web app • Well documented • Community
  9. @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