Decoupling Drupal: A Conversation with Shane Thomas of Gatsby

​

Open Waters Podcast: Season 2, Episode 3 

In this episode, we're joined by Shane Thomas of Gatsby to talk about decoupled Drupal and how features in Gatsby make it easier to make decoupled websites using Gatsby and other CMS like WordPress or Drupal. Shane gives us insight into what makes Gatsby unique as well as some sneak peeks into upcoming features. 

Episode Transcript 

Mark Shropshire: All right. Welcome everybody to the Open Waters podcast. And today we have a very special episode. We are going to be talking about decoupled websites. We'll get into decoupled Drupal. We'll get into some Gatsby because today we have Shane Thomas of Gatsby, who's our guest today, and I'm here as usual with Mario Hernandez as a cohost. Gatsby provides development teams and open source front-end framework for creating dynamic, optimized websites and cloud platform for delivering them on a blazing fast edge network. That's a lot of words, but it all makes sense. And it sounds fantastic. So Mario, I'm gonna kick it over to you and we'll kind of start chatting it up with Shane.

Mario Hernandez: Excellent. Thanks a lot, Shrop. I appreciate it. Very excited to be on this episode two of the Open Waters podcast, season two. And thank you so much, Shane, again for joining us. We appreciate you taking the time from your busy schedule to join us one more time. I think we had you on the first season of the podcast. Tell us about your role at Gatsby today and how you became interested in the decoupled Drupal architecture.

Shane Thomas: Yeah. So I've been working with Drupal since I think 2009. And I started a little web agency doing, starting with Drupal 6 websites. So I've been working with Drupal for a long time. I used to run a website and I guess I still do, but it's not really active called codekarate.com. So I've done a lot of videos and all kinds of different content for Drupal. When I was really using it heavily. I worked at a Drupal agency in the past as well. I've been part of some startups. Then I started to really get interested in hearing about, you know, headless Drupal and decoupled Drupal. And what does it mean? And there are a lot of new JavaScript front-end frameworks that were coming out about this time. And you may have heard of static site generators that are popular and maybe pulling data from some of CMS systems like Drupal and other CMS providers.

And so that got me really interested in digging into it a little bit more. And I kept hearing at actually at Drupal camps, I kept hearing talk about this Gatsby thing. What does this Gatsby thing? And originally it was just, oh, it's a static site generator, just make all your content static. And then when I really dug into it, I realized it's not just a static site generator, it's really a React framework. So if you're familiar with React, it's it's a way to it's a JavaScript front end in front end library to build websites and web apps and gets these built on top of that. And so then I started playing around and realized like Gatsby is really kind of an ecosystem for building websites and web apps. And now with Gatsby Cloud, there's kind of this entire platform that really makes it easy to do that. And so I started met with some of the people at Gatsby, saw them at some conferences, and I guess the stars aligned and I was hired as an engineer to work on the Drupal integration. So it kind of all kind of coincided pretty well with my back background in Drupal. And from there spent quite a bit of time working on the Drupal integrations, which I'm sure we'll talk a little bit about. And then eventually took over as an engineering manager for our integrations and collaboration squad at Gatsby.

Mario: That's pretty neat. Code Karate I know Shrop, he gave a thumbs up. I benefited a lot from that myself.

Shrop: Yeah. That is a great kind of background review Shane where, where you, you know, where you've been and how you got to where you're at today. And you mentioned some of the work you've done, like with Drupal and Gatsby, and Gatsby and Drupal working together. Can you give us a high level kind of perspective of where Gatsby fits in to the decoupled discussion?

Shane: Yeah. So, what Gatsby allows you to do, and I guess that's kind of the, one of the best benefits of Gatsby is you can bring your content from anywhere. So there's a lot of different CMS systems that marketers and content editors like to use. Drupal's a great choice, right? You can model your content and set it up however you want. There are other ones like WordPress or Contentful, and Gatsby is not opinionated about which framework you use to build your content. So essentially you bring the content and then we provide the front-end framework for it. And the reason you might choose to do that is because a lot of CMS providers like Drupal, like WordPress there, they tried to do all things. And so sometimes when you try to do all things, you don't do everything as well as something that's very specific or focused.

And so by Gatsby being very focused on just the front end of your website, it can be, uh, more performance and you can get a better Lighthouse scores, which can help conversions because your users or your customers are experiencing a faster, more app-like website. And so their load times are better. It seems they don't get frustrated if the page takes too long to load those types of things. And so that, that's kind of how it fits in. As you know, it's not necessarily a replacement for Drupal or WordPress or any CMS provider. It's kind of just taking the theming layer, if you've heard of WordPress themes or Drupal themes, and saying rather than use what's provided with within the framework, use Gatsby instead for that part, and then still use or WordPress or Contentful or whatever for all your content.

Mario: You know, we've been working with Gatsby for a little while now, and certainly we can see the benefits, but but one question that, you know, we, we get quite a bit is, you know, why would a site owner look into going the decoupled architecture route? So let's say, for example, why would a marketer, you know, we'll find this appealing, right? What are some of the benefits and from let's say, security, performance hiring, and that kind of thing. What are some of those things that you think are beneficial for a marketer to look into the couple of architecture?

Shane: Yeah. So deciding to go to decoupled is certainly, it's not an easy decision to make, and there's a lot of considerations. It's. Especially if you built sites, not decoupled before, it's, it is a change and you need people with a little bit different engineering backgrounds. However, it is getting easier to hire JavaScript engineers. There's, you know, that's definitely something that people are interested in and learning about. And so they're coming out fresh from school or from, you know, other industries and they're digging right into JavaScript. So they're literally, I'm not saying that engineers are easier to find, but there's more interested engineers. It seems like than hiring someone very specific or specialized, like it's Drupal engineer. And so by separating that out, you can have someone focused on the back end and then someone focused kind of on the front end or the framework side.

So by decoupling, you kind of split those concerns off a little bit. Also, you really, one of the big drivers of decoupling is performance, which I had mentioned a little bit before your, your speed of your website matters because if your customers are having a better experience, they're more likely to either buy it from you or call you, if you're trying to get them to call and use your services or sign up for your product, whatever it is. They're more likely to convert if the website is so well-designed fast and it feels like they don't have, you know, it's a seamless experience for them. And that's where front-end frameworks and going decoupled can help with that because you can use a framework that's specifically focused on performance. And the other thing is just security. So using a front

You're not necessarily exposing everything available through your, your website. So you have kind of an API, you can kind of hide certain things you don't want to see. And it does help that, you know, everything's static. So you it's secure and it's it's faster, it's highly available. So you don't necessarily have to have a running server for a lot of your stuff. So if you ever had a website go down and you're wondering why, why is my website always going down? Well, that's not saying it never could happen, but it's a lot less likely to happen when you're just serving more static content and less where every, every request has to go back to a web server to generate that information. So, and then those are some of the reasons, um so there's definitely trade-offs though, you know, good at good and bad for both, but there's a lot of good things about deciding to to look into a decoupled architecture.

Shrop: I know we were talking a little bit before we started well, before Mario hit the record button, then you know, we do have a lot of Drupal folks listening to this today. But I do want to mention that when you dig into Gatsby, what's what I really like is that you can even have markdown be your backend. You know, that could be the source of content. You can have so many, like you said previously, Shane, It's it's not really opinionated about the content. You know, you bring the content in different forms and, and I'm pretty sure that you can but you tell me, Shane, here on this, if I'm right or wrong, but I mean, you could have Drupal and WordPress and markdown, you could actually have multiple sources even for different pieces of content into a Gatsby site. It might get complicated, but it's interesting.

Shane: Yeah. So, you see that quite a bit, especially as the sites get more complex, that you might have a Drupal for dynamic lead building landing pages, right? Because Drupal, you can model content. You can set up, you know, if you're familiar with Drupal using, you know, paragraphs or something like that, to set up a really dynamic landing page builder, and that builds onto your Gatsby site, but maybe you have products, too. So you use Shopify for your for your e-commerce part of your site. So your products are served from Shopify, and maybe you have a marketing team, you're a big organization and they just are, they love WordPress. They just have a blog, that's all they need. And so they could be using just the blog parts of WordPress. You can have all three of those systems and everyone, you know, the developers who are building these landing pages and, you know, making that available and using Drupal,

And then, you know, you have your marketers that are blogging and WordPress, and then, you know, people managing all your products in Shopify and it all kind of ties together and gets pulled into all into one Gatsby site. So it's kind of referred to as the content mesh, it's something that the Gatsby likes to call it internally. And I think we have, you know, posts on what the content mesh really is, but it's really a, you bring the content from anywhere and Gatsby's kind of your source of truth that pulls in that content and build your website. You're certainly not locked in as much to just using the tools that you're given. You can kind of look for the best tool for the job.

Mario: It'll meets at the end, right. At the front end. Yeah, exactly. So, so once you've done your homework and you know, you've done a little research and you say, okay, this is the way I like to go. And, you know, you arrive at that decision to go to decoupled, what are some of the marketing benefits that a content manager or a marketer should expect to see, besides some of the things that you already mentioned?

Shane: I mean, definitely, you know, we talked about performanceReally the benefits are I w I would say, and of course the a, if you're a marketer, you want to test this, right? But I would say conversions are the, are the biggest thing, right? If you have a better website, you provide a better experience. You're going to get more conversions. Your, your analytics are going to go up into the right, which is what you want, if you're a marketer. So, so that, that's the biggest selling point. There are certainly some trade-offs though, that you have to consider because it's, it's not the same, right? If you're familiar with working in WordPress, or you're familiar with working in Drupal, and now you have this kind of decoupled architecture, you know, this, you, whether it's a Gatsby site or another framework like Next.js or some, some other, you know, front-end framework, that's decoupled your back end from your front end.

Now, there are some considerations, things that you kind of took for granted, like live preview are a little bit more complicated and, not saying they don't work, but there there's some differences in how your content editing workflow might change from what it was before to what it is with the decoupled architecture. So those are things that you certainly need to keep in mind when you're, when you're choosing to make that decision. And also making sure that your developers understand that the first time you do it, there's a learning curve to moving to a decoupled architecture. And so you have to go through that, you know, just like you did when you first built it, you went from a, a static HTML website to a WordPress or Drupal website. You know, there's, there's learning curves at each step. And so this is no different.

Now, I do believe that once you, once the development team learns how to, how to use it and how it all ties together, that most of the time that I've seen, they don't want to go back. They love the love working in that, with that model, like separating out the concerns between the back end and the front end, and being able to I think in a lot of ways people think it's going to take a lot longer to build the decoupled sites. And I think at the beginning it does, but in the long term, I think it actually is as fast or maybe even faster, because you can work on the back end and front end in parallel rather than a lot of times it seems like with in the past, you'd have to kind of build, you couldn't really do that. You had to build the backend stuff first, and then you'd have a front and themer or designer come in and build the front end pieces. So this kind of allows you to do both at the same time, at least to more of an extent.

Mario: Yeah, I can, I can see, you know, when you mentioned talking about being able to bring the content from any source, right. I mean, when we build a site, let's say Drupal-WordPress site you know, things can get pretty complicated just within that platform. So I can only imagine how things get a little more complicated and complex if you're bringing any more tools, right? Like Gatsby or combining WordPress and Drupal together, markdown or something else. So certainly something to keep in mind. And I say this because a lot of people say, oh, Gatsby is great. And I love to use it. I want to use it, but yeah, you need to take a step back and kind of consider, okay, what is this going to mean to my workflow now? What is this going to do to my build of my site? How has this complexity going to affect performance from the editing point of view deployments and that kind of thing. So a lot of those things a lot of people don't consider, you know, they just see this shiny thing, which is great, but there's a lot of things that need to be considered when moving into something like this, where the complexity is drastically increased.

Shrop: One of the things I'm excited about speaking of taking complexities of decoupled and just website building in general is a lot of the work that Shane you and the Gatsby team have done with Gatsby Cloud. Could, could you just briefly mention a few of the things that Gatsby Cloud gives you know, gives the development teams and marketing teams, that sort of thing.

Shane: Yeah. Yeah, definitely. So one of the things you have to keep in mind with, if you choose to build a website with Gatsby specifically, is that we talked to her a little earlier about how it creates everything kind of as a static website. And there's the when you have that process of taking all your content from a CMS, like Drupal, and then building a static website, there's that build process that has to happen. And you can think about it as if you were using a Drupal website and you didn't use any kind of caching or anything like that, every time you go to that page, the server is doing work to generate that content. That means every user that goes to that page, the server's doing work for every single user that views it. And now of course you can add caching layers and things to try to prevent that and make it faster.

But Gatsby kind of flips that model on its head. So rather than adding layers of caching, it's just fast by default. And you have to, I think I've heard someone say you have to work pretty hard to make Drupal websites fast. It's certainly possible, but you have to really work at it. And it's kind of the opposite. You have to work pretty hard to make Gatsby websites slow. I've certainly seen it, but it's really out of the box, it's pretty fast. So but there's that build process that has to happen. So it happens once and then all your users get the benefit of that build process. But you have to keep that in mind that there's, that when you change content, when you you know, update your site and, you know, update your version of Gatsby, there has to go through this build cycle.

And especially if you're with a website that has tens of thousands of pages, that process can take a long time. So it Gatsby Cloud has incremental builds and cloud builds that speed that up. So rather than rebuilding the entire site, it'll only rebuild pages that have changed, and that speeds up your build times from, you know, maybe 5, 10, 15, 20 minutes, if your site's really big to tend to 30 seconds or less, depending on how the size of your site and what kind of change you made. So that's the first thing that Gatsby Cloud provides is really an optimized build service. So it, your site gets built faster. Again, Gatsby's an open source framework. You can certainly do all of this yourself, but Gatsby Cloud, we'd like to think is the best way to build a Gatsby website. On top of that, it also offers a live preview service for content editors.

So, one of the things you lose with going decoupled is it's harder to preview your content. If you're editing in a CMS, you're used to be able to click on view something that's not published yet, or click the preview button and see what it's going to look like. You kind of lose that. And Gatsby Cloud provides a service. So you get that back. So as a content editor, you can feel confident that when you click the publish button, it might take five or 10 or 15 seconds for it to go live. But when it's there, you know what it's going to look like. And then the last thing that Gatsby Clouid offers, so kind of the third tier, is a hosting service for your Gatsby site. So you can kind of have it all under one roof. You can build it, you can preview it. And then once you're ready, you hit deploy and then published. And then it goes, and it's hosted all kind of within Gatsby Cloud.

Shrop: It's got to be, you know, Gatsby's open source, but you've provided these tools on top of that. That's like the best practice way that you've like the Gatsby team believes to do all these things like hosting and, and builds and previews. I think that's fantastic.

Mario: You mentioned Gatsby preview, which is definitely something that we have seen in the early stages of Gatsby being an issue. And we definitely have also seen how much work your team is putting into making sure that that is something that works as people would expect it to see. Can you give us a little bit more on the Gatsby preview, specifically, and how that can benefit the content authoring experience, and maybe perhaps where you, where you and your team are with Gatsby preview, anything else coming down the pipe with that?

Shane: Yeah, I'll see. I'll have to be careful. I don't share too much information about what's what's coming up. Marketing team might not be happy if I divulge too much too quick, but preview is really important to what we're doing and it's not an easy problem to solve when you have, you know, potentially multiple systems funneling into one Gatsby site, right? You might need to preview content from WordPress or Drupal or Shopify. There's all these different sources. And when you change, let's just make a simple example of changing content in a blog post. You want to be able to preview that before you click the publish button. It seems like an easy problem, but when you have all those systems working together, it's actually a little more complicated. And so we've been one coming up with, how do we make preview more reliable?

You know, there there've been issues that just in the past with, you know, all those different systems working together, that sometimes things come up and your, your preview server stops running, or something happens where the developers that built the Gatsby site didn't correctly think about all the different possibilities. And so that causes your preview to break in this certain scenario where they add certain fields and don't add others or something like that. So there are all these different things. And what we've really been focused on is, one, reliability, making sure that it works, and if it doesn't work, we, you know, why. Is it a problem with the previous server and Gatsby Cloud? Is it a problem with the sites? And so that's been a big focus of making sure we're one preventing those problems. And two, if there are problems servicing it in an actionable way.

And on top of that, we've been releasing recently, we released something called preview UI. I guess that's, I don't know if that's an official public name yet, or if that's just an internal name, but essentially it provides kind of an indicator where, if your previews rebuilding or someone saved content, it tells you the status of that. And it gives you links to the air logs. It provides you the ability, you know, simple little things like, oh, click here to copy the link and send it to somebody so they can view it, give you the okay, and then you can publish it. And that's really where we're interested in figuring out is how do we make the content editing experience more collaborative, better? Because content editing, there's this weird fear (for) marketers, there's this weird kind of in-between stage of, you know, you need to build some content, you maybe write the first draft, and then there's all these edits that happen are these requests from different parties.

And a lot of times that might be happening outside the CMS in general, like in a Google doc. And then someone goes in and pastes it in the CMS, and then they do another round after it actually decides how it looks like. So we're trying to make that easier. So we're providing one solution for that, so they can build it in their CMS of choice, preview it, collaborate on it, make sure it's right, and then eventually publish it. So that's where I would say the next steps are that we're not there yet is kind of those, those features to help content editors and marketers collaborate on their content before they're ready to publish. And so that's not to tip our hat too much, but that's where we're, we're really looking to improve for all Gatsby users in the future.

Shrop: One thing that you mentioned earlier, you alluded to the preview button and I think about Drupal's preview button and Mario, you and I talked about this the other day you know, preparing a bit for, for this episode and I've kinda, I've become accustomed now both on mediacurrent.com and on some other projects we're working on, with having preview in, and there's also the Gatsby Drupal module that you started working on, Shane, and really pushed that along. That's what you mentioned that earlier, but all these pieces I'm, I'm, I'm really digging the Gatsby preview over that hitting the preview button Drupal experience because there's, depending on also Drupal set up, sometimes that preview button in Drupal, doesn't do what you exactly think it should, for various reasons. And, you know, once everything's set up correctly, like I feel like the Gatsby preview is really giving you a more correct show of what the website would look like. And that's the exciting part for the authoring experience. Mario, you're, I see you nodding a little bit. What are your thoughts on that?

Mario: Absolutely. Yeah. You know, I think as a content editor, right? Or content creator, you want to be able to see a more accurate representation of what your page will ultimately look like on the front end. Right? So having that preview give you that is definitely something that will be appealing to people who work on content. Yeah, go ahead, Shane.

Shane: I was going to say, and the one interesting thing is, especially on Gatsby cloud, the preview service uses the same build process as our build service. So I'm not going to say it's not possible, but there should be almost no reason. It's not identical every time, because, you know, unless you coded something, you can, of course, Gatsby's a framework, you can, you can break preview in your Gatsby site if you wantdc to and make it work for nobody. But assuming nothing is too wild in your setup, it's going to be the exact same every time. So, you know, when you're previewing something, you're actually, the cool thing about it, when you click the preview button in Drupal, for instance, you're only seeing that page, right? That one Drupal page, if it's a blog post, you're seeing that one page. You're not seeing the state of the site, like, how is this going to show up in the blog listing page? How is this going to show up in the footer of related posts with your Gatsby site? It's a full site. You can click the links, you can navigate and see where this content might show up in other places. And so it's really it provides you that really accurate representation of what it's going to look like when it does go live. So that is one benefit. Again, that, that process of updating it and all those places does take a little bit more time. So that's the trade-off is it might be a little bit slower to get that preview, but you know what you're looking at is going to be right. And when you click the publish button, you can click publish with confidence.

Shrop: Well, just shifting gears, a little bit back to decoupled overall. Are, are there any gotchas for a site owner, marketers, developers that they should be aware of before jumping into decoupled?

Shane: Just that it's going to be different than websites you built in the past. So, be prepared for, you know, no matter what kind of front end framework you're using or what kind of decoupled backend you're using, just prepare that it's a learning curve. There's going to be a few headaches along the way. You know, all the frameworks try to make it as seamless as possible, but every, every website's different, right? Every website's unique. And so there's all of these, you know, ideas, and while they're being used by huge companies, there's always, you know, new kind of edge cases that you might run into and you might have to work through, especially as your developers or engineers are really getting up to speed with how it's all built. And then as a marketer or site owner, just know that how you interact with your content is going to have to change a little bit.

Shane: And so you're going to, it's a learning process there, too. The one gotcha, I would say, a lot of times especially I've seen, when people start to build a decoupled website, they don't think about the content editor or the marketer until the website's about done, because they're like, the website is ready to go, let's publish it, and they put all the initial content in, and now the marketer or content editor wants to change something, and it doesn't quite work. The preview doesn't work right. The, the experience, they weren't prepared for it, there was no training there. So I would say if you're looking into that, just make sure you don't forget about that and kind of punt that until the end, because otherwise you're going to maybe be scrambling a little bit and the marketers might throw their hands up and say, this isn't what I signed up for. I thought this was going to be, the site's fast, but I can't do anything with it. I can't change the content. I don't know how it works. So making sure that you have documentation or trainings or whatever, to bring everyone up to speed rather than waiting till the very end to figure that stuff out. That, that'd be one. Gotcha.

Shrop: That's so good. And Mario, Shane said the training word that I know that had to excite you a bit.

Mario: Well, absolutely. You know, it's, you don't want to forget about the people who ultimately will probably be using the website more than anybody else. Right? And so you want to keep it in the mind from the beginning, there is about their experience, not just the visitor experience, but I think that's all the questions we have. I mean, this was really informative and feels like we, we talked to the Gatsby team quite a bit. And, you would think that a lot of this stuff is not going to get us excited or anything, but this stuff is pretty cool, especially the preview. That's something that I'm really excited about.

Shrop: Yeah. This was great. Well, Shane, thanks so much for coming on today to talk to us about decoupled and and to learn a little bit more about Gatsby. I'll always, Mario, I think you agree, it sounds like that's where you're headed. Like I always learn something every time, every time we talk to somebody from Gatsby or talk to someone else just about decoupled in general. So there's all these different experiences. It's not you know, it's not a one experience fits all kind of thing, but, but really appreciate you coming on today and talk and talking to us about all this.

Shane: Yeah, definitely. Thanks for having me. It was fun.