Introduction

[00:00:00]
>> I'm excited, today is gonna be a good day. We are talking about an introduction to Gatsby. Gatsby is a cool framework. We're gonna talk more about what that is, but before we do that, let's dive right in with a little bit of an intro about who I am.

[00:00:14]
My name is Jason Lengstorf, I am the VP of Developer Experience at Netlify, I'm also the host of Learn With Jason. Once upon a time, I was a Gatsby team member, I used to work at Gatsby. I'm also a boop enthusiast, if you've ever seen my show, you've seen any of the silly projects that I make, you'll know that corgis and boops factor in pretty heavily to my work.

[00:00:34]
So, before we get started, let's do a little bit of disambiguation of what Gatsby isn't. So there are two Gatsby's. If you start googling around you're gonna see references to Gatsby, the framework and you're also going to see references to Gatsby Cloud. These are two sides of the same company, one is an open source project, one is a business.

[00:00:54]
But this can get a little bit confusing, so for the purposes of this workshop, let's be clear that what we are going to be talking about is only Gatsby the open source framework. We're not going to talk about Gatsby Cloud today. So, if you're interested in Gatsby Cloud, you can check out Gatsbjs.com, but we're not gonna cover that.

[00:01:14]
So at its core, Gatsby is a site generator. Gatsby is a way for people to build sites from code. It's very powerful for that. It rose to popularity as a way to manage your blog. You could have markdown files and turn those into a working blog site using React, which is a great way if you're a developer to get your portfolio out into the world.

[00:01:37]
Or start writing a blog about what you're learning or otherwise collect your thoughts and get those shared with the world. Gatsby is also built on React. So React is a JavaScript framework. It's made popular by Facebook. It's what powers their UI. And the main offering of React is components and reactivity.

[00:01:57]
So what you see with React is that you get your UI breaks down into component files. Those component files can be mixed, matched, shared, remixed, and it's a little more containable. It's a little easier to think about and reason about what's happening in your code which is why React is powerful.

[00:02:19]
And then the ability to add in that reactivity layer, that ability to quickly pull in React to changes, update the state based on what's going on, keep track of some data and update a different part of your UI based on that data. Those are all things that make React really appealing.

[00:02:34]
It's one of the reasons it's the leading framework out there today. Gatsby decided to bet on react as the right way to build for the web, and it did this in a way that involves server side rendering. So server side rendering is when you take React code, which typically would run on a client, and you use a server to generate the resulting HTML.

[00:02:54]
So what would happen after the React code ran, gives you some markup that would show in the browser. That's how you can see the output of a React app in the browser. When you server side render React, you're actually able to eliminate JavaScript altogether and you just get some HTML, so Gatsby will take your React, code server side rendering, put some HTML in.

[00:03:14]
And then when it hits the browser, it'll rehydrate and put that JavaScript back on top. So you start where if somebody disables JavaScript with a Gatsby site, they'll still be able to load it. It still works. You can see the pages, you can browse the site, everything works the way you would expect.

[00:03:30]
And then if you enable JavaScript, you get more interactivity and more features. The site will load and then become app like instead of having to do a full page refresh, you'll get JavaScript redirects between pages and there's a lot of extra bonuses that happen when you add JavaScript.

[00:03:46]
But, it's not required, it's an optional enhancement which I think is a really powerful model when you start thinking about building with JavaScript in general. Gatsby is also all in on GraphQL. If you're familiar with GraphQL, it is another Facebook invention. It is a query language for data.

[00:04:06]
And if you've worked with API's before, one of the most common ways that you'll see that done is through REST endpoints. That's when you go to a website and it goes slash API slash posts. And then when you hit that, you end up getting back a JSON object that's an array of the posts and all the data that you would need.

[00:04:24]
This is a really powerful model when you're looking at REST API's. They are great for small subsets of data or linear data. But as data grows in complexity, you start to see this network effect where well, you don't just need posts. I need posts and the comments for that post and the author of the post and the authors of the comments and comments written by those comment author.

[00:04:53]
And it just starts to get into this messy thing where I'm not just looking at data in one way, I'm starting to think about the the graph of data, the connections between all the data. That's what GraphQL is designed to solve. GraphQL is a way to combine data in a graph like way which means that we can say I want my posts and now right in the query for my posts, I would like to get the author, and the comments.

[00:05:15]
And then inside those queries, I would also like to get additional comments, additional posts by that author, maybe categories, and related posts. All those things can happen in the same query. Whereas in REST, I would have to make an individual rest call for each of those things and then combine that data myself.

[00:05:32]
So, GraphQL is, it treats data as more of a free form flexible thing, whereas REST t is a little more rigid about the way that it approaches data. And that's why Gatsby went all in on. Gatsby has made this bet on, you're going to build sites using content from a lot of different places, your file system, you'll have images, you'll maybe pull in some third party data.

[00:05:56]
You're gonna have additional things coming in. And all of those need to connect, I have a blog post, but I need to pull some images for it. I also wanna pull in some comments from a third party system. And there are a lot of things that lead to me needing data from a lot of sources and I don't wanna have to do that data reconciliation myself.

[00:06:14]
GraphQL allows me to pull all those together in a single query and then use them and that's why Gatsby is bet on that. Gatsby is also opinionated, Gatsby is gonna tell you where to put your files. It's gonna tell you how to query for data. It's gonna give you components that you should use to get all the benefits, right?

[00:06:31]
It's very much a framework that says, we're going to give you a set of guardrails within which you can succeed, it's designed for that. And this is a really good thing when you are trying to get something done quickly, when you're trying to get a whole team to follow the same set of rules.

[00:06:49]
One of the biggest challenges you'll run into with any software at scale, is documentation. So when you write bespoke software, you're not just writing code, you also have to write and maintain the documentation for that code. Or else anybody who's never worked on it before, is having to learn the entire system from scratch through reverse engineering.

[00:07:10]
When you use an opinionated framework, when you opt into something like reactor to Gatsby, what you're getting is a lot of community documentation and a lot of community best practices that lighten your documentation back. So instead of having to document the whole system, here's every bit of code we wrote, why it does, what it does and how you can use it.

[00:07:28]
We can now say, most of this is React, most of this is Gatsby. You are also able though, to do these things, so we only have to document our custom stuff instead of the whole thing. And that can be a strength, it can also be a hindrance, and there are reasons why you wouldn't want a super opinionated framework.

[00:07:48]
I find that for myself, whenever I'm working on code, if I find that the majority of the code I'm writing is to back out of decisions made by the framework I've chosen, I've probably chosen the wrong framework. So when you're planning your project, when you're thinking through how you're gonna build this thing, start considering the trade offs.

[00:08:06]
Is this something that will benefit from that consistency, those guardrails, that high predictability of how things will be created on the site or is this something where what I'm trying to do is weird? I'm trying to do something that I've never seen before. And for me to do this using a framework, we'll require me to back out a bunch of decisions or use the escape hatches to get away from the opinions that are held by this framework.

[00:08:31]
Gatsby is built around performance, it's one of their core value propositions. They are very conscious of how to make websites load and feel faster. One of the big promises of the web has always been that we can make our own app store. We've seen this in progressive web apps.

[00:08:47]
We've seen this in the ability to have a website be offline and installable on your desktop, on mobile phones. But there's always been this issue where apps generally just feel better, they feel snappy. They feel like things just happen, right and Gatsby is trying to address that problem.

[00:09:05]
Gatsby is doing a lot of things behind the scenes that make pages feel like they load instantly, that make your initial page loads really fast. And all of that, we'll get into the specifics of how they do that as we start actually building a site. But at its core, Gatsby is always trying to think about the way that it will impact its users on the performance side.

[00:09:28]
And probably the biggest reason to use Gatsby is that Gatsby is wildly convinient. It has a bunch of starters that do most of the things you would need. You wanna build a blog, great, there's a bunch of different templates that you can install right now, that will give you a blog and all you have to do is start writing.

[00:09:44]
It also has a huge number of plugins and whether those are for pulling in data from somewhere else, hooking into third party services. Doing transformations of data into different formats, all of those things are not only possible, but really straightforward with Gatsby. So if you're trying to get something up in a hurry, Gatsby is worth considering because it's so fast and so convenient versus rolling something on your own.