This course has been updated! We now recommend you take the Intermediate Gatsby, v2 course.
Transcript from the "Benefits of Gatsby Themes" Lesson
[00:00:00]
>> Jason Lengstorf: So the major benefit of using themes in Gatsby versus just doing a site individually is that when you create a theme, you're able to package up that logic in a sharable way. So in the theme that we're gonna create today, we're gonna add support for writing up docs.
[00:00:15] And in those docs, we might wanna use that in multiple sites. Maybe if you work in an agency, this is gonna be a common pattern where you've got clients that need similar but slightly different things. You can package up all the common functionality into a theme, and then share that in a reusable way.
[00:00:34] And a major benefit here over using a standard boilerplate is that when you're using a theme, that theme is an NPM package. When you use a boilerplate, you're cloning a repo. As soon as you clone a repo, that is now your responsibility. You've fully opted-in to maintaining all of the code in that boilerplate.
[00:00:53] If things happen upstream, you would have to then manually import those changes. You would have to look at the migration docs, figure out what changed. And then, port those changes over into each usage of that boilerplate. That's a huge pain. And if you've got a lot of sites, if you're working on, say, a client site, and they've got a suite of 15 different properties, the time investment to do an upgrade like that is not small.
[00:01:15] So with a theme, it becomes a package, just an NPM installed package. So to get those upstream updates, all you have to do is NPM install the theme at latest and you get those updates. So now, you can set up something like dependabot to automatically keep your sites up to date with whatever the upstream latest best practice is.
[00:01:37] Another benefit of using themes versus just building it all out directly is that because themes are composable you can break down sites into small, logically grouped sets of functionality that handle one thing really well in a really maintainable way, which then makes that sharing much more easy. If you built a site, and that site has a blog and e-commerce and a marketing page and an email capture form, those are four distinct jobs that if they were broken into themes, then any site that needs a contact form, you can just drop in the contact form theme.
[00:02:13] Any site that needs a blog, you drop in the blog theme. And your sites become more like Lego block assembly rather than looking at previous work and copy pasting out the pieces that you need. So this is gonna give you all the same benefits of building it as a site, but with an added layer of benefits of upstream updates and the ability to compose smaller units of code together much more quickly and maintainably.
[00:02:43]
>> Speaker 2: So Gatsby themes is not just about the UI, it's actually the functionality as well?
>> Jason Lengstorf: Gatsby themes is UI and functionality. So a Gatsby theme is effectively a fully functioning Gatsby site. The only difference is that it accepts configuration options and needs to be installed as a package, as opposed to running standalone.
[00:03:05] But a lot of Gatsby sites these days, if you look at the default blog theme starter, what it is is just an empty folder with a content folder for blogs and a Gatsby config that installs the theme. And the rest of everything else in it is handled in the theme itself.
[00:03:25]
>> Jason Lengstorf: It’s anything that you can do with a Gatsby site, but packaged up in such a way that it’s configurable, reusable, and shareable. So ranging from theme to the underlying data manipulation and schema customization and all the things that you would do on a standard site.
>> Speaker 3: Is there a difference between a plugin and a theme, or things that one can do that the other can't?
[00:03:48]
>> Jason Lengstorf: For the most part, no. The one major difference is that themes, when they use the Gatsby theme tag, opt-in to component shadowing behavior, and they have a Gatsby config. So really, a Gatsby theme is a plug-in with a Gatsby config in it. And anything else is a plug-in without a Gatsby config in it.
[00:04:10] That's the major difference. And then, the naming is required because that's how Gatsby identifies that a theme should be handled differently.
>> Speaker 2: So is the concept of a boilerplate gonna go away pretty much then?
>> Jason Lengstorf: Inside the Gatsby world, I would expect that it will be de emphasized.
[00:04:29] I mean, I don't think anything ever really goes away, because it's an open ecosystem. People have preferences and people are gonna do things the way they're gonna do them. In my experience, I have completely stopped using boilerplates because themes function as boilerplates. But they add an additional layer of benefits that I, to me, it just doesn't make sense to do a boilerplate anymore.