Pump up the JAM with Gatsby (2019)
•
1 gefällt mir•217 views
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.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (19)
Ähnlich wie Pump up the JAM with Gatsby (2019)
Ähnlich wie Pump up the JAM with Gatsby (2019) (20)
Mehr von Stefan Adolf
Mehr von Stefan Adolf (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Pump up the JAM with Gatsby (2019)
- 1. pump up the JAM with Gatsby Generates super fast static PWAs Stefan Adolf, Turbine Kreuzberg
- 2. Hello, I am Stefan Adolf Developer Ambassador Turbine Kreuzberg @stadolf #reactjs #mongodb #blockchain #codingberlin #elastic #symfony2 #turbinejetzt #microservices
- 3. A brief history of “CMS” CMS Run software on your own infrastructure “Oh look, someone broke into my Apache because I forgot to upgrade my application” The do it yourself desaster Website builders Let a dentist create her own website without knowing anything “Could you please add this commerce component and change text to RTL?” Let a 3rd party shoot in your foot Flat CMS Render and cache content server side “Lets use modern frontend features like React / SPAs” Content smells past due
- 4. Meet the JAM stack Javascript APIs Markup
- 5. Javascript APIs Markup JAM in a nutshell Markup is built on deploy time no server involved in page rendering pages are preprocessed / SSRed and statically served All user interaction logic happens in frontend / JS Server side operations are always API driven e.g. XHR form interactions “AJAX” content loading
- 6. How “static site generators” work Layout/pipeline Static page 1 Static page 2 Static page N Optimized assets ./_site
- 7. middleman ❍ creates layouts using erb ❍ provides content by json ❍ renders assets using gulp ❍ runs bundle exec middleman build on deployment ❍ upload results from ./build
- 8. jekyll ❍ creates layouts using liquid ❍ provides content by markdown ❍ renders assets using ruby-sass ❍ runs jekyll b on deployment ❍ upload results from ./_site
- 9. hugo ❍ creates layouts using go ❍ provides content by yaml ❍ renders assets using pipes ❍ runs hugo on deployment ❍ upload results from ./public
- 10. “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.”
- 11. gatsby ❍ creates layouts using React ❍ provides content by GraphQL ❍ renders assets using webpack ❍ runs gatsby build on deployment ❍ upload results from ./public
- 12. How Gatsby works createNode createPageStaticpagetransformers Static page 1 Static page 2 Static page N Content for 1 Content for 2 Optimized assets ./public
- 13. 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
- 15. 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
- 16. GraphQL ❍Automatically inferred GraphQL schema ❐ all content pieces become queryable data nodes ❐ use createNodeApi to create your own GraphQL nodes ❍Uses a large cached Redux store for SSR internally ❍Allows linear filters for page data ❍StaticQuery hook for inline (“static”) page queries
- 17. createNode
- 19. → GraphQL = done.
- 20. Create pages from nodes query pages gatsby-node.js
- 21. page query render result templates/article.js content query in page template
- 22. Frontmatter, JSON & MDX ❍Frontmatter: (meta)data in your MD files ❐ Becomes part of GraphQL schema 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. Assets / images ❍everything in /static will be served untouched. ❍Import assets from sources & let Webpack handle them ❐ b64 encodes smaller images ❐ Querying for a file’s “publicURL” publishes it ❍Gatsby Image & Transformer-Sharp: ❐ Convert images on build time ❐ fixed / fluid images sizes, srcsets & transforms (e.g. crops) ❐ can render inline super lores images on page load ● B64 / blur or svg
- 26. Gatsby Image / Sharp pages/planets.js
- 27. 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
- 29. Render 10k product pages. ❍ Cold start ❐ 8s bootstrap ❐ 45s queries / gql transformation ❐ 10s page rendering ❐ = 1 min render time.
- 30. Change 1/10k products. ❍ Warm start ❐ Bootstrap time: ~10s ❐ 28 page queries 0,4s ❐ 8s page rendering ❐ = ~25s render time.
- 31. Change 500/10k products. ❍ Warm start ❐ Bootstrap time: ~10s ❐ 500 page queries 3s ❐ 8s page rendering ❐ = ~30s render time.
- 33. Wrapup ❍Gatsby gets many things very right ❍Not yet another “static site generator” ❐ it consolidates all your data to GraphQL ❐ But rather a content agnostic, GQL driven, React PWA SSR engin ❍fast rebuilds ❍very modern frontend stack ❍Lots of plugins: connect any CMS or DB, + Gatsby Image ❍incredibly simple to deploy ❐ Just upload your files. ❐ Run npm install && gatsby build on your CD ❍it is production ready
- 34. Thank you o/ Stefan Adolf Turbine Kreuzberg @stadolf @elmariachi111 #reactjs #mongodb #blockchain #codingberlin #elastic #symfony2 #turbinejetzt #microservices