Pump up the JAM with Gatsby
0 likes252 views
The document discusses Gatsby, a static site generator that enables fast, modern web applications with built-in progressive web app (PWA) support and enhanced performance. It emphasizes Gatsby's advantages, such as GraphQL integration, service workers, and a seamless developer experience, while addressing common issues with traditional content management systems (CMS). Through various demos, the document showcases Gatsby's functionality, deployment options, and content management capabilities.
Pump up the JAM with Gatsby
- 1. Gatsby generates super fast static PWAs pump up the JAM with Stefan Adolf, Turbine Kreuzberg
- 2. Hello, I am Stefan Adolf Developer Ambassador Turbine Kreuzberg @stadolf #javascript #mongodb #serverless #blockchain #codingberlin #elastic #aws #php #symfony2 #turbinejetzt
- 3. CMS a brief history of “CMS” “Look Ma, I got my own LAMP server” Great! Oh look, someone broke into it because you forgot to update it
- 4. CMS a brief history of “CMS” “Look Ma, I got my own LAMP server” Great! Oh look, someone broke into it because you forgot to update it “Do it yourself desaster”
- 5. CMS a brief history of “CMS” “Look Ma, I got my own LAMP server” Great! Oh look, someone broke into it because you forgot to update it Website as a Service “Look Ma, I got my own blog” Great! Oh, can you just add Plugin XYZ and change the reading direction to RTL? “Do it yourself desaster”
- 6. CMS a brief history of “CMS” “Look Ma, I got my own LAMP server” Great! Oh look, someone broke into it because you forgot to update it Website as a Service “Look Ma, I got my own blog” Great! Oh, can you just add Plugin XYZ and change the reading direction to RTL? “Do it yourself desaster” “let a 3rd party shoot in your foot”
- 7. CMS a brief history of “CMS” “Look Ma, I got my own LAMP server” Great! Oh look, someone broke into it because you forgot to update it Website as a Service “Look Ma, I got my own blog” Great! Oh, can you just add Plugin XYZ and change the reading direction to RTL? Static Site Generators “Look Ma, I did not even install PHP on the server!” Great! Can you please add this dynamic calendar widget on every page? “Do it yourself desaster” “let a 3rd party shoot in your foot”
- 8. CMS a brief history of “CMS” “Look Ma, I got my own LAMP server” Great! Oh look, someone broke into it because you forgot to update it Website as a Service “Look Ma, I got my own blog” Great! Oh, can you just add Plugin XYZ and change the reading direction to RTL? Static Site Generators “Look Ma, I did not even install PHP on the server!” Great! Can you please add this dynamic calendar widget on every page? “Do it yourself desaster” “let a 3rd party shoot in your foot” “Prebuild all the html and forget.”
- 9. static site generators ๏create layout using ๏create content in ๏create assets with ๏push to repo ๏ $ ๏= static html / css / js goes to ๏upload to how they all work. erb json gulp bundle exec middleman build ./build cloudfront
- 10. static site generators ๏create layout using ๏create content in ๏create assets with ๏push to repo ๏ $ ๏= static html / css / js goes to ๏upload to how they all work. liquid markdown ruby-sass jekyll b ./_site Aerobatic
- 11. static site generators ๏create layout using ๏create content in ๏create assets with ๏push to repo ๏ $ ๏= static html / css / js goes to ๏upload to how they all work. go yaml pipes hugo ./public netlify
- 13. “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.”
- 14. ๏PWA support out of the box ๏offline support, link prefetching, service workers ๏React application with initial SSR support ๏initial content loading & progressive enhancement (e.g. fetch data on the client) ๏source agnostic, auto type-inferring GraphQL interface ๏outstanding developer experience ๏opinionated tool choices: CSS modules, GraphiQL, webpack dev server / HMR ๏support for modern JS / Flow / Typescript
- 15. ๏Gatsby fundamentals ๏Setup, queries, pages ๏Assets & Client side usage ๏Deployment ๏Content management ๏Scale What to expect
- 16. Content → GraphQL ๏Gatsby infers a GraphQL schema from your data automatically ๏all pieces of content are considered a node ๏use the createNodeApi to create GraphQL nodes on your own ๏stored in a large Redux store internally ๏use the createPageApi to create pages out of code / out of nodes ๏source plugins out of the box: ๏markdown, json, yaml, filesystem, mongodb, graphql, …
- 17. Assets ๏everything in /static will be served as is. ๏trust Webpack transforms when importing assets from sources ๏b64 encodes smaller images ๏if you explicitly query for a file’s “publicURL” it’s published ๏Gatsby Image & Transformer-Sharp: ๏Do explicit image conversions on build time ๏support fixed / fluid images sizes, srcsets (Retina!) & transforms (crops) ๏can render a super lores version on page load
- 18. Demo 1: Development ๏DX / GraphiQL ๏createPagesAPI ๏live editing ๏client side React usage ๏CSS Modules ๏Asset rendering
- 19. Deployment Options 1.build locally / on CI and upload artifacts to S3 2.Github Pages / Gitlab Pages (+ Gitlab CI support) 3.use now.sh (no repo needed ;) ) 4.create deployment from repo on Netlify
- 20. Content Management ๏host local Markdown files & assets in Github ๏Contentful, GraphCMS, Prismic as headless CMS ๏reuse your good old Wordpress backend (!) ๏install Netlify CMS to manage content in your own repository ๏Github/lab bridge & authentication ๏many widgets available ๏publishing workflow included
- 21. the “heroku” of the JAMstack era you push the code to your repo, they take care of the rest Repo / CI integration in Gitlab, Github, Bitbucket Plus: AWS Lambda Functions without “AWS”. Just use, no setup. Identity: Signups, user management, 3rd party logins Forms: add 1 attribute, get all the responses & a captcha
- 22. Demo 2: Deployment & Content Management ๏Gitlab > Netlify ๏Netlify CMS ๏Contentful
- 23. Why is it so fast? ๏“performance isn’t optional, it’s built in” ๏inlines critical CSS ๏code/data splitting per route ๏Prefetching resources ๏offline support: service workers cache content locally
- 24. V2 got even faster ๏React 16, webpack 4, Babel 7, @reach/router ๏up to 75% faster site builds ๏3x faster SSR performance ๏30% less core client JS (ca. 56kB) ๏GraphQL stitching (beta): directly use remote GQL APIs
- 25. Demo 3: performance & many pages Does it scale?
- 26. ๏Gatsby gets many things very right ๏much more than yet another “static site generator” ๏ultrafast rebuilds, ultramodern stack ๏incredibly simple to deploy ๏it consolidates all your data ๏- you have to wrap your head around the node APIs ๏it is production ready Wrapup
- 27. Reserving judgements is a matter of infinite hope. F. Scott Fitzgerald in 2018 if you’d gather all best practices and tools to build a fast, modern and maintainable website and put them together… … you’d end up building Gatsby.
- 28. Thank you, this was Stefan Adolf Developer Ambassador Turbine Kreuzberg @stadolf https://gitlab.com/elmariachi111/gatsby-planets #javascript #mongodb #serverless #blockchain #codingberlin #elastic #aws #php #symfony2 #turbinejetzt