Right Money Management App For Your Financial Goals
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>
???
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
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
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