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