Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Gatsby intro

752 views

Published on

An introduction to Gatsby.js - a fast and flexible static site generator

Published in: Software
  • Be the first to comment

  • Be the first to like this

Gatsby intro

  1. 1. Intro to Gatsby.js Ben McCormick Windsor Circle Twitter: @ben336 Blog: http://benmccormick.org
  2. 2. Who Am I? • Senior Software Engineer at Windsor Circle in Durham • Blogger at benmccormick.org • Gatsby user since Fall 2016
  3. 3. So What Is Gatsby? A new static site generator built with React, Webpack and GraphQL
  4. 4. What is Gatsby For? • Building lightning fast websites, especially when some of the content is relatively static • Blogs, Business sites, Marketing Sites, eCommerce sites, web apps
  5. 5. Buzzword #1: Static Site Generators • Code executed and HTML generated at build time • Typically generated based on a mix of data files (markdown, images, JSON, ???) templates and code • Examples: Jekyll, Hugo,
  6. 6. Buzzword def: a word or phrase, often an item of jargon, that is fashionable at a particular time or in a particular context.
  7. 7. from https://www.staticgen.com/
  8. 8. Wordpress Model Wordpress runs on a server with content in a database User makes a request Wordpress runs PHP code to pull data from DB load it into a template, and then return HTML
  9. 9. SSG Model SSG builds a combination of data + code into HTML files HTML is deployed to a host User makes request and gets static HTML response <HTML> <HTML> ???
  10. 10. SSG Model (Gatsby Version) from https://www.gatsbyjs.org
  11. 11. Benefits of SSGs (static content) • Fast to load • Simpler, especially for security • Cheap to run • Reliably cacheable
  12. 12. Benefits of SSGs (dynamic/hybrid content) • Faster first load • Progressive Enhancement - we can fall back to plain HTML by default • For JS based SSGs- can reuse client and server code
  13. 13. Buzzword #2: React • JavaScript framework created by Facebook • Component-based workflow • Can be rendered to HTML on the server then “re- hydrated” on the client • Immensely popular, large eco-system • Works with JSX “templating language”
  14. 14. Buzzword #3:Webpack • JavaScript code bundling tool • Supports code-splitting (load only what you need for a specific page, then load more later when its needed without a full reload) • Large ecosystem of plugins to handle all sorts of file types • Hot Reloading: See changes as you update your code
  15. 15. from https://webpack.js.org/
  16. 16. Buzzword #4: GraphQL • Data querying language developed by Facebook • Makes it simple to load all the data needed for a specific component and ONLY that data • Young tool, but popular in the React ecosystem • Comes with a built in playground environment
  17. 17. GraphQL
  18. 18. Benefits of Gatsby • Optimized loads: Load only what you need for initial page, then only load new data for additional pages • Best Practices as plugins: Offline support, image optimization, RSS feed, etc • Flexibility of a React web application • Hot Reloading: See changes as you develop your site
  19. 19. Demo: benmccormick.org • My blog • Converted to Gatsby 1 this month (still some mess) • https://github.com/benmccormick/benmccormick org
  20. 20. Gatsby Cons • Young Project • Learning curve if you’re not in the React/Webpack/GraphQL ecosystem
  21. 21. Still Early Days • Repo opened 2 years ago, full time developed for the past year, 1.0 released this month • Some documentation is missing, some trial and error may be required • Growing fast
  22. 22. Resources • Site: https://www.gatsbyjs.org/ • Github: https://github.com/gatsbyjs/gatsby
  23. 23. Questions?
  24. 24. Ben McCormick Windsor Circle Twitter: @ben336 Blog: http://benmccormick.org

×