This course has been updated! We now recommend you take the Intermediate Gatsby, v2 course.
Transcript from the "Introduction" Lesson
[00:00:00]
>> Jason Lengstorf: Hi everyone. Super excited for you all to be here today. And we're gonna be learning about intermediate, and then in tiny parenthetical slash, advanced Gatsby today.
>> Jason Lengstorf: We're gonna get into some of the kinda edges and corners of what you can do with Gatsby. Get into some more powerful stuff, moving outside of what you would typically think a set of site is capable of.
[00:00:21] And I'm really really looking forward to doing it. So, a little bit about me I'm Jason. I am kind of a, I've made it my career to learn, I really really like doing that. And one of the ways I learn is by teaching, so I do that as often as I can, which is part of the reason why I'm here today.
[00:00:39] I'm currently a principal developer experience engineer at Netlify. Prior that I was head of Developer Relations at Gatsby and then I was a front end architect at IBM before that. I live in Portland, Oregon and also I teach a or I run a weekly live stream on Twitch.
[00:00:57] A couple of times a week I pair program with somebody and we build something from scratch. It's called Learn with Jason, it's a lot of fun. And it's full of silly sound effects you can chat along live, it's a good time if you wanna learn something and and also hopefully giggle a little bit at my terrible jokes.
[00:01:15]
>> Jason Lengstorf: So, before we get started I wanna set a little bit of who this workshop is for just to make sure that we've got our assumptions straight. I'm gonna make two assumptions. One is that you've built at least a simple Gatsby site before, we're gonna be talking about a lot of the internals of Gatsby.
[00:01:32] And I'm not gonna go over things like what the files are named, or those sorts of things.
>> Jason Lengstorf: So, definitely ask if I do something that you're not clear on. But I will be assuming that you've at least seen some of the Gatsby development process before. And I'll also be assuming that you're at least a little familiar with React.
[00:01:54] So we're going to be doing things like using React Hooks. We're going to be managing state today and handling forms. So, if you've never used React or you're not super comfortable with React, you may want to go back and watch Brian Holt's Intro to React or another course that'll kind of bring you up to speed on that.
[00:02:14] If you're uncomfortable with Gatsby, then you may want to go back and watch my front end Masters course on kind of a Beginner Gatsby.
>> Jason Lengstorf: With that being said, I think we're ready to jump in. So before we talk about what Gatsby is, it's kind of important to understand what the problems are that it's solving.
[00:02:32] So the first thing is just to kind of get an overview of the challenges of modern web development.
>> Jason Lengstorf: The biggest problem that I've seen, especially lately, is that getting started in modern web development is really overwhelming. There are tons of options, there are lots and lots of pieces.
[00:02:50] And they don't necessarily feel clear as to how they fit together. It feels like a lot of stuff going on. It's very noisy in the ecosystem with everybody saying that they've got preferences and those preferences are usually stated like facts so it can be really difficult to understand what the quote unquote best practices are.
[00:03:12]
>> Jason Lengstorf: On top of that the way we manage data is evolving. I mean, it used to be, back in the day, at least when I was getting started that you'd have some kind of a centralized store of your data. You would have an API or you would have your WordPress instance or your Drupal instance.
[00:03:26] And that would manage everything. If you had a blog that was in WordPress. If you had e-commerce, that was in WordPress. If you had a form, that was in WordPress. And so your CMS was kind of this monolithic, one size fits all approach to data management. And that's changing now so it's starting to come apart.
[00:03:44] We'll talk a little bit more about that in a minute.
>> Jason Lengstorf: And then just getting it right is hard. Any particular tiny sliver of modern web development could become a career in and of itself, and we're seeing that happen. People like Harry Roberts have made an entire career just out of optimizing web performance.
[00:04:01] And other people, like Rachel Andrew, have made a career out of teaching people CSS and CSS Grid. You can go down the rabbit hole in any one of these things and it's a completely valid profession with a huge amount of knowledge to acquire and share. So for us, the average developer working in a company, how do we expect to get all of these things right?
[00:04:25] How do we expect to not only build a good app and deliver good features, but get performance right? Get maintainability right? Make sure that we're shipping modern and apps that are gonna scale with us, and there are just so many different things that we need to know in order to get this right and that's super overwhelming.
[00:04:50]
>> Jason Lengstorf: So Gatsby is an attempt to address some of these challenges and one of the ways to think about it is that it's a shortcut, right? So Gatsby is a shortcut to allow developers to quickly build excellent apps and sites. And what that means is that it's trying to set some defaults and some pathways so that you have to make fewer decisions to get a good outcome.
[00:05:16]
>> Jason Lengstorf: So to give an illustration of what that means, a lot of workflows involve a ton of boilerplate to get started, and let's just illustrate that. So let's say I've got, I wanna write some code and I wanna get that code on to the internet, right? That's, that seems like a one step thing, but when you start to dig into it, if you're going from scratch and rolling your own thing, you're gonna end up.
[00:05:34] Okay, I need to set up some web packs, I wanna use modern features. Okay, well that means I have to have Babel because I need to transpile those features into something that the browser understands. Then you need post CSS so that you can use modern CSS features. Now you're looking at node so that you can actually set up a server that hosts that code somewhere.
[00:05:51] Then you might be getting into containers like Kubernetes. Then NginX if you want to set up reverse proxies because your containers are managing different parts of the app. You need a CDN like fastly so that you can get things to your users quickly. And if you're feeling overwhelmed, I mean, this is overwhelming.
[00:06:09] Each one of these things could be a career, right? I mean, there were people when I worked at IBM whose entire job was just dealing with the containers. And the reverse proxies that kept them alive on the services that we deployed. So there are a huge number of complexities that get introduced as you start to work on modern web apps.
[00:06:30] So to simplify that Gatsby kind of takes an approach of let's take all of these things. And just set up some happy path defaults and say that for the vast majority of web apps there's a way to ship these that will be mostly right most of the time.
[00:06:46] And that allows us to remove a ton of boilerplate. So we can get started and deploy something to production that will start out passing all the lighthouse audits for performance. It'll start out getting straight A's on web page test. And that puts you, as a web developer in a position to not have to become an expert, but just to pay attention to what you're doing to make sure that you're not having regressions.
[00:07:10] So the average web app, if you start you add something and then you have to go figure out why it's slow. This intentionally takes a lot of the boilerplate and says if you do it like this, you're gonna be okay and then as you start to add things you just have to be watching as opposed to kind of bringing up the whole boilerplate just enough.
[00:07:29] And it looks kind of like this, you have your code, you write that in Gatsby and you push it up to Netlify which hooks up to Github and that puts it on the Internet, so it's a much simpler process. And inside that Gatsby workflow, you're using React and GraphQL.
[00:07:45] So you're not doing quite as much orchestration of tools, you're doing more building the actual thing that you want to work on. And so it takes a lot of that work out of the way and allows you to focus on shipping features, as opposed to setting up the foundation for shipping features.
[00:08:05]
>> Jason Lengstorf: Another way to think about Gatsby is that it's an orchestration layer for taming the Content Mesh. The Content Mesh is a buzzword that Gatsby made up but Iove it because it kind of describes what's happening in the the front end landscape right now, if you look at monolithic CMS is they're all starting to back away from this idea that we can handle everything.
[00:08:26] WordPress has a headless implementation, Drupal calls it decoupled Drupal where it no longer has opinions about the front end. Most major services are starting to ship all of their data via API so that you can build your own front end on top of it. That means that we're moving away from this idea of one size fits all or one tool to rule them all.
[00:08:48] And we're starting to move toward this idea of the Content Mesh. Where you pull different services together to use them for what they're best at. A way to think about this is, if you look at the average website, you've got your images, you've got your search functionality, you've got content.
[00:09:03] Maybe you've got products that you sell. And each of those things is going to be pulled from a different service. So maybe you've got your images on cloud near you. Maybe you're using Algolia for search, Contentful to manage your content, Stripe to manage your e-commerce. And that's a good thing.
[00:09:18] That means that you're using each of these tools which, depending on who you ask is best in class at what it does. And you're using it only for what it does. You're not trying to make Contentful into an e-commerce platform. That's not what it's for. You're not trying to make Stripe into a content management system, because that's not what that's for.
[00:09:36] You just use the tools for what they're best at, and stitch them together in your front end. Now, as you can imagine, this can get kind of complicated because now we're talking about just in this simple example we're looking four different APIs that we have to request things from, put together, stick on to the page and make sure that we didn't make everything horribly slow in the process.
[00:09:56] So what Gatsby does is it has this idea of a centralized GraphQL layer. And it will pull data from any source that you can think of whether that's a file system, software as a service and API, something like that, pull it in and put it into the centralized GraphQL layer.
[00:10:12] Then you query that GraphQL layer in React. And that means that for developers data access stays the same no matter what source you're using. You're going to be requiring a GraphQL API, and it starts to feel familiar as you get more and more comfortable with the way the Gatsby imports data, so everything starts to feel about the same.
[00:10:31] You're always gonna get all Contentful data, and the nodes, and then you'll get some fields inside. And that stays true across services. Once you've done, once you've got everything working, you build it and that outputs a folder full of static assets. The static assets can be uploaded to an Amazon S3 bucket to nullify to whatever CDN kind of object storage that you want, which is great because that means you don't have to keep a live running server, you just need the CDN.
[00:11:02] And as far as keeping things up and inexpensive, a CDN is about the best way to keep things available and not spend a fortune doing it.
>> Jason Lengstorf: And then when it hits the browser rehydrates into a React app. And that means that you don't lose any dynamic capabilities, you can still make asynchronous requests, you can still do client side routing, you can still do authentication, all the things that you would do with the regular React app.
[00:11:26] But you've cut out a lot of the complexity of getting that React app up onto the web. You don't have to ship a node server to serve that did that React mounts into you can just put some static assets up and React will handle that for you. As an example of how this might look in a real website, this is an old screenshot of the Gatsby's Swag Store, the UI has been updated but the concepts are the same.
[00:11:48] How this works is that when you load this site, you're looking at data from multiple sources. So the first source is gonna be Shopify and Shopify keeps inventory of each of these products. It has the photos and the price and the sizes, all the things that you would expect in an e-commerce store.
[00:12:07] Then, we on the client side, load off zero for authentication, and we use Shopify's Buy SDK to dynamically load whether or not a thing is in stock and to manage a shopping cart.
>> Jason Lengstorf: Then once you're logged in, you can see your GitHub data. So we use GitHub to decide whether or not you have qualified for the discount codes.
[00:12:31] If you do one pull request to Gatsby, you get a $10 discount code. If you do five you get a $25 discount code, it's kind of Gatsby's way of saying thanks for participating in open source. And so they pull this to get the contribution count. And then below that, you can also see your most recent contributions.
[00:12:51] So it's kind of a cool way to use live data. But you have to be authenticated for that right. This is all dynamic. So it runs on the client side. And this is a good example of Gatsby being more than just like static sites, right? It can be dynamic.
[00:13:07] It's just static assets.