It's lean, it's crazily fast and it's packed with features: Gatsby is a game changing static PWA generator. This talk starts with a short intro into the consolidated GraphQL content interface and how Gatsby builds pages. We’re then digging into custom content plugins that allow you to connect nearly any data source, explain Gatsby's page generation process and how editors can use MDX to embed dynamic components into their content. We conclude with a build time performance demo that renders and updates a huge amount of pages at once.

1. Stefan Adolf
Pump up the JAM with Gatsby
what‘s this field good for?
Please sendtemplates in openformats next time

2. pump up the JAM with
Gatsby
Generates super fast static PWAs
Stefan Adolf, Turbine Kreuzberg

3. Hello, I am
Stefan Adolf
Developer Ambassador
Foostack developer
Turbine Kreuzberg
@stadolf
#reactjs #mongodb #ethereum #codingberlin
# Apps #symfony #turbinejetzt #microservicesĐApps #symfony #turbinejetzt #microservices

4. A brief history of “CMS”
CMS Systems
Run software on
your own
infrastructure
Website build kits
Let a dentist create
her own website
without any knowledge
Flat file CMS
Render and cache
content server side
The do it yourself desaster
“Could you please add
this commerce
component and
change text to RTL?”
Let a 3rd
party shoot
in your foot
“Yet another
outdated server
template language
to learn”
Content smells past due
“Damn, someone
broke into my
Apache because I
forgot to upgrade
my Linux server”

5. Meet the JAM stack
Javascript APIs Markup

6. Javascript APIs Markup
JAM in a nutshell
 SPAs / PWAs
 Rich frontend applications (J/M)
 fetch, post & interpolate content when it’s needed
 All user interaction logic happens in frontend / JS
 Oh hello, I found a public API here.. .

7. Javascript APIs Markup
Static site generators
 Prebuild everything as static markup
 Deploy on a web server: painless & brainless
 Deploy on CDNs & edges
 API never needed at render time (only at build)

8. How “static site generators” work
Static page 1
Static page 2
Static page N
Optimized assets
./_site
Layout/pipeline

9. middleman
❍
creates layouts using erb
❍
provides content by json
❍
renders assets using gulp
❍
runs bundle exec middleman build on deployment
❍
upload results from ./build

10. jekyll
❍
creates layouts using liquid
❍
provides content by markdown
❍
renders assets using ruby-sass
❍
runs jekyll b on deployment
❍
upload results from ./_site

11. hugo
❍
creates layouts using go
❍
provides content by yaml
❍
renders assets using pipes
❍
runs hugo on deployment
❍
upload results from ./public

12. “Gatsby.js is a static Progressive Web App generator.”
“Don't build a website with last decade's tech.”
“Liberate your sites from legacy CMSs and fly into the future.”

13. gatsby
❍
creates layouts using React
❍
provides content by GraphQL
❍
renders “assets” using webpack
❍
runs gatsby build on deployment
❍
uploads results from ./public
❍
generates (re-)active PWA!

15. How Gatsby works
createNode
createPageStaticpagetransformers
Static page 1
Static page 2
Static page N
Content for 1
Content for 2
Optimized assets
./public

16. Most features are just plugged in
❍CMS / CMS API adapters
❐ Contentful, Wordpress, Craft, Drupal, Dropbox Paper, Directus, ButterCMS,
Ghost, Morty, cockpit, sulu, Transifex, Silverstripe,...
❍Filesystem based (“flat”) content
❐ Markdown, JSON, Yaml, CSV, toml,...
❍Database / API support
❐ Mongo, GSheets, Mysql, Dynamo,...
❐ Trello, Strapi, Instagram, Shopify,...
❍Transformer plugins
❐ Image processing (!)
❐ Markdown / MD / MDX

17. Pages, Layout & Routing
❍ components in src/pages render as page
❐ filename == URL
❐ Gatsby Link integrates with @reach/router
❍ React Helmet for metadata
❍ Supports allTM styling variants
❐ Sass compile steps (Bootstrap, Bulma)
❐ Component CSS
❐ Styled components (Grommet) & JSS
❍ createPageApi creates pages out of code / nodes

18. GraphQL
❍ Gatsby automatically infers GraphQL a schema
❐ all content sources become queryable data nodes
❍ Allows simple filtering of page data
❐ allTextFiles({filter: { content: { regex: “code”} } })
❍ StaticQuery hook for inline (“static”) page queries

19. createNode API
hvv-plugin/gatsby-node.js
Add any data source to Graphql

21. createNode

22. Create pages from nodes
gatsby-node.js
createPage API

23. templates/article.js
query details in page template

24. Frontmatter, JSON & MDX
❍Frontmatter: (meta)data in your MD files
❐ Becomes part of GraphQL schema queryable!→ queryable!
❍Use plain JSON files to store tabular data
❍MDX: embed React JSX components in MD, e.g for
❐ Slideshows
❐ Signups / interactive forms
❐ Dynamic advertisments
❐ Tweets & Youtube Videos, all inlined in content

25. Frontmatter
Markdown
JSX
MDX
data/some-meetup.mdx

26. MDX page template
templates/mdx.js

27. MDX
data/some-meetup.mdx

28. Unholy world of sh(i|or)tcodes

29. Gatsby Image / Sharp
pages/planets.js

30. Speed (frontend)
❍“performance isn’t optional, it’s built in”
❍inlines critical CSS
❍code/data splitting per route
❍Prefetch page data (JSON) on link hovers
❍offline support: service workers cache content
locally

32. Speed (backend)
❍All API queries are serialized in a Redux cache
❍Only impacts of changed data are rerendered
❍20.000 product pages = 180s (cold start)
~ 1000 pages/s = 20s for complete page build
❐ =3.5 min overall build
❐ =600M of statically generated output
❍Rebuilds = ~30s

33. Wrapup
❍ Not yet another “static site generator”
❐ content agnostic, GQL driven, React PWA SSR engine
❐ Forget all your server side performance issues
❍ connects to any CMS (even Wordpress) or DB
❍ Gatsby Image
❍ incredibly simple to deploy
❐ Just upload your files.
❐ Run npm install && gatsby build on your CD

34. Conclusion
Start using Gatsby today.
No excuses.
it’s really that great.

35. Thank you o/
Stefan Adolf
Turbine Kreuzberg
@stadolf
@elmariachi111
#reactjs #mongodb #ethereum #codingberlin
#elastic #symfony2 #turbinejetzt #microservices