Download as PDF, PPTX
Uploaded byStefan Adolf
Gatsby (Code.Talks) 2019
The document discusses the capabilities and benefits of using Gatsby, a static site generator designed for building fast Progressive Web Apps (PWAs) with modern technologies like React, GraphQL, and content management systems. It contrasts traditional CMS approaches with JAMstack architecture, emphasizing static pre-rendering and ease of deployment. The presentation encourages developers to adopt Gatsby for improved performance, security, and flexibility in web development.
More Related Content
Similar to Gatsby (Code.Talks) 2019
Gatsby (Code.Talks) 2019
- 1. Stefan Adolf Pump upthe JAM with Gatsby what‘s this field good for? Please sendtemplates in openformats next time
- 2. pump up theJAM with Gatsby Generates super fast static PWAs Stefan Adolf, Turbine Kreuzberg
- 3. Hello, I am StefanAdolf Developer Ambassador Foostack developer Turbine Kreuzberg @stadolf #reactjs #mongodb #ethereum #codingberlin # Apps #symfony #turbinejetzt #microservicesĐApps #symfony #turbinejetzt #microservices
- 4. A brief historyof “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 JAMstack Javascript APIs Markup
- 6. Javascript APIs Markup JAMin 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 Staticsite 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 sitegenerators” work Static page 1 Static page 2 Static page N Optimized assets ./_site Layout/pipeline
- 9. middleman ❍ creates layouts usingerb ❍ provides content by json ❍ renders assets using gulp ❍ runs bundle exec middleman build on deployment ❍ upload results from ./build
- 10. jekyll ❍ creates layouts usingliquid ❍ provides content by markdown ❍ renders assets using ruby-sass ❍ runs jekyll b on deployment ❍ upload results from ./_site
- 11. hugo ❍ creates layouts usinggo ❍ provides content by yaml ❍ renders assets using pipes ❍ runs hugo on deployment ❍ upload results from ./public
- 12. “Gatsby.js is astatic 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 usingReact ❍ 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 Staticpage 1 Static page 2 Static page N Content for 1 Content for 2 Optimized assets ./public
- 16. Most features arejust 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 automaticallyinfers 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 anydata source to Graphql
- 21.
- 22. Create pages fromnodes gatsby-node.js createPage API
- 23. templates/article.js query details inpage 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.
- 26.
- 27.
- 28. Unholy world ofsh(i|or)tcodes
- 29. Gatsby Image /Sharp pages/planets.js
- 30. Speed (frontend) ❍“performance isn’toptional, 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 APIqueries 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 yetanother “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 Gatsbytoday. No excuses. it’s really that great.
- 35. Thank you o/ StefanAdolf Turbine Kreuzberg @stadolf @elmariachi111 #reactjs #mongodb #ethereum #codingberlin #elastic #symfony2 #turbinejetzt #microservices