Recommended
More Related Content
What's hot
What's hot (20)
Similar to Intro to Gatsby.js: A Static Site Generator Built with React
Similar to Intro to Gatsby.js: A Static Site Generator Built with React (20)
More from Ben McCormick
Recently uploaded
Recently uploaded (20)
Intro to Gatsby.js: A Static Site Generator Built with React
- 1. Intro to Gatsby.js Ben McCormick Windsor Circle Twitter: @ben336 Blog: http://benmccormick.org
- 2. Who Am I? • Senior Software Engineer at Windsor Circle in Durham • Blogger at benmccormick.org • Gatsby user since Fall 2016
- 3. So What Is Gatsby? A new static site generator built with React, Webpack and GraphQL
- 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. 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. Buzzword def: a word or phrase, often an item of jargon, that is fashionable at a particular time or in a particular context.
- 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. 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. SSG Model (Gatsby Version) from https://www.gatsbyjs.org
- 11. Benefits of SSGs (static content) • Fast to load • Simpler, especially for security • Cheap to run • Reliably cacheable
- 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. 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. 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
- 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. GraphQL
- 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. Demo: benmccormick.org • My blog • Converted to Gatsby 1 this month (still some mess) • https://github.com/benmccormick/benmccormick org
- 20. Gatsby Cons • Young Project • Learning curve if you’re not in the React/Webpack/GraphQL ecosystem
- 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
- 23. Resources • Site: https://www.gatsbyjs.org/ • Github: https://github.com/gatsbyjs/gatsby
- 24. Questions?
- 25. Ben McCormick Windsor Circle Twitter: @ben336 Blog: http://benmccormick.org
Editor's Notes
- Hey everybody, I’m the third speaker tonight so hopefully your brains aren’t too full. I’ll try to keep things moving.
- Who has already heard about gatsby? Its been around for ~ a year, but just released a revamped 1.0 at the beginning of this month So many buzzwords…
- Show Segment Blog
- Vs wordpress
- VS a monolith web app
- Everything is a re-usable component with a clear interface JSX isn’t really a templating language ¯\_(ツ)_/¯
- Like a more limited SQL for APIs? Github, Shopify, NYTimes
- Query for grabbing all JavaScript related posts from my blog
- Compared to other static site generators: It’s about smart data handling and builds Not just for text
- Webpack is abstracted away a bit, React and GraphQL are definitely not
- There have been a lot of updates this month, and I’ve seen some bugs come through. Documentation looks better for new starters than for upgraders right now Benefit of the structure is that bugs are build time problems not run-time for the most part
- Opportunities to contribute