Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@bobylito Hi, I’m Alex Software engineer Independent contractor @bobylito / [email protected] Loves JS

Slide 3

Slide 3 text

@bobylito I’m a static website generator addict

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

@bobylito What is a static website generator?

Slide 8

Slide 8 text

@bobylito A tool that transforms markup in HTML

Slide 9

Slide 9 text

@bobylito With the help of templates

Slide 10

Slide 10 text

@bobylito They come in different size and shapes

Slide 11

Slide 11 text

@bobylito And they share common properties ● Pipelines ● Content is the main concern ● Templating come second ● Content comes from files

Slide 12

Slide 12 text

@bobylito Gatsby.js

Slide 13

Slide 13 text

@bobylito Templates

Slide 14

Slide 14 text

@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

Slide 15

Slide 15 text

@bobylito Templates are using React

Slide 16

Slide 16 text

@bobylito Templates are also usable in the front-end ● No more duplication of templates ● Same mindset at runtime and at build time

Slide 17

Slide 17 text

@bobylito Content

Slide 18

Slide 18 text

@bobylito Source plugins

Slide 19

Slide 19 text

@bobylito Content plugins - GraphQL MDX example

Slide 20

Slide 20 text

@bobylito Source agnostic Files Databases Headless CMS

Slide 21

Slide 21 text

@bobylito Assets are content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

@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

Slide 24

Slide 24 text

@bobylito Generating pages

Slide 25

Slide 25 text

@bobylito Create pages API - Two parts ● Extension point: createPages ● Function: createPage

Slide 26

Slide 26 text

@bobylito Create pages API - example

Slide 27

Slide 27 text

@bobylito Bringing everything together

Slide 28

Slide 28 text

@bobylito Flip the model - get new API powers

Slide 29

Slide 29 text

@bobylito Is Gatsby right for your next project?

Slide 30

Slide 30 text

@bobylito Why not choose Gatsby.js? ● Choices / ecosystem ● Magic ● You have mastered something else

Slide 31

Slide 31 text

@bobylito Bad reasons to choose Gatsby.js or not? ● X Y Z are using it ● Tech: React, GraphQL

Slide 32

Slide 32 text

@bobylito Why choose Gatsby.js? ● Best practices built-in ● You’re building a web app ● Well documented ● Community

Slide 33

Slide 33 text

@bobylito Thanks! Find me on twitter @bobylito Looking for a JS freelancer: [email protected]

Slide 34

Slide 34 text

@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