Jason Lengstorf on GatsbyJS

Jason Lengstorf is a developer on the GatsbyJS team.

Jason didn't start his career even remotely in the tech field. He was a musician.
Jason's band didn't have much money, so he learned design to make merch, learned some markup to edit their myspace, eventually learned to build a website for them, then learned backend so his bandmates could upload images and post things.

Jason talks about Gatsby's plans to compete with the more seamless WordPress model. He also talks about gatsby's differences from WordPress and the use cases for each service.
One of Gatsby's strengths is how good it is for learning Javascript and React, you can quickly go from the command line to getting stuff on the screen in two minutes, much like create-react-app, the differences is that with Gatsby you get a data layer and a good deployment story.

Finally, they talk about what it's like to manage a repo that has 964 contributors, 5500 commits, and 936 issues. It was more chaotic in the early days, but they have brought on some people who are helping manage it and are defining better processes.

If you are interested in learning Gatsby, they have recently put much work into revamping their official tutorials.
Check them out here

Transcript

"Jason Lengstorf on GatsbyJS" Transcript

Topics:

• His early musical aspirations that lead to his career as a developer
• Gatsby's goals in creating an agnostic unified data layer.
• The differences between Gatsby and other static site generators
• Gatsby 2 and its many performance upgrades
• Managing a large and active repository

Resources:

• Gatsby
• Gatsby on Twitter
• Gatsby Tutorials
• Netlify

Jason Lengstorf:

• Website
• Twitter
• Github

John Lindquist:

• Twitter
• Website

Transcript

John Lindquist: Alright, I'm here with Jason today. Jason, why don't you go ahead and introduce yourself.

Jason Lengstorf: Sure. Yeah, my name is Jason Lengstorf. I am a developer on the Gatsby.js open source framework. And I've been doing a lot of work on the developer relations part of things.

John Lindquist: Awesome. So, tell me a bit about your history as a developer and how ... What's your path from knowing nothing to, now, working with Gatsby?

Jason Lengstorf: It's a long and wandering one.

John Lindquist: Okay.

Jason Lengstorf: I started out wishing that I was a musician, right? I wanted to be a rockstar. So, I dropped out of college to be a full-time musician. And because we were a band, we didn't have any money.

Jason Lengstorf: So, I learned design so that we could have merch and posters. And then, I learned web design a little bit so that I could customize our Myspace page. And then, I learned how to do a full website.

Jason Lengstorf: And eventually, I needed to figure out how to let other people in the band post photos and blog posts. And so, I had to learn some backend stuff so I could do that. And it kind of just grew from there.

Jason Lengstorf: When the band broke up, I realized I was significantly better as a developer than I was as a musician. So, I started an agency. My agency grew. I got reasonable amount of experience. Eventually, ended up contracting around for awhile.

Jason Lengstorf: Started working as a front-end architect at IBM. And then, just at the end of last year, started looking around and got moved over to Gatsby as of, I think, February?

John Lindquist: Okay. Sweet. That's a fun path. Do you regret ... Do you still get a chance to sing or guitar, whatever you were doing?

Jason Lengstorf: Yeah. So, I was a bad guitarist. And then, probably a worse vocalist. So, I don't think the world is missing much without me making music. But I still play from time to time, just for fun for myself.

John Lindquist: Awesome. Alright, so let's chat about Gatsby for a bit. So, what is Gatsby for people who haven't heard about it yet?

Jason Lengstorf: Gatsby is a site generator that's built on React and GraphQL. So, the core focus of Gatsby is to create a unified data layer so you can pull data from anywhere, any headless CMS, any API, static files, whatever you want.

Jason Lengstorf: And then, you use React and GraphQL to build your whole front-end. And then, we will build that into a really high performance, progressive web app so that you're able to focus on building a great experience and not focusing on performance tuning and all that kind of stuff.

Jason Lengstorf: So that's kind of the super high level view, but the general idea is we're trying to make really good decisions baked into a framework so that you get ... You can ace your performance audits, and things like that, without having to do any extra work.

John Lindquist: So, by any CMS, any API are some examples of that: Ruby, Python, Node, just literally anything pretty much?

Jason Lengstorf: Anything that exposes its data through an API. So, we've been able to pull in ... WordPress is a common backend CMS for us. We use software as a service platforms like GraphCMS or Contentful.

Jason Lengstorf: We've pulled in Drupal sites. We can pull in Shopify. We just built this wag store powered by Shopify. And we can even do weird stuff like Workshop.me, which is one of Ryan Florence's projects. He has actually built from a Google Sheet using Gatsby.

Jason Lengstorf: So, Gatsby consumes that Google Sheet and builds a website out of it.

John Lindquist: Cool. Yeah. Is there a most common approach? I mean, I know static site generators typically have some mark-down files, just on your local machine. And you say, build. And then, you'd deploy it.

John Lindquist: Is that still the most common thing? Or what do you guys see-

Jason Lengstorf: I would say that's the ... It's the path of least resistance, right? So, if you're just working on your own blog, the easiest way to get started, if you're starting from scratch, would be to build a Gatsby site, write some markdown files and publish those.

Jason Lengstorf: What Gatsby's trying to overcome though, and I think this is maybe what we're uniquely bringing as a framework, is that you can use Gatsby for your personal blog and just write markdown.

Jason Lengstorf: But as you scale, when you've got a content team or a marketing team or, for example, you've got your dev team writing docs in markdown, but your content team is using WordPress or Contentful for that.

Jason Lengstorf: And your marketing team has got Salesforce hooked up. In traditional business models, or development models, you would end up having three apps for those three data sources that would have to be fit together through sub-domains or reverse proxies, or something like that.

John Lindquist: Right.

Jason Lengstorf: With Gatsby, what you can actually do, is you can plug all three of those into the same Gatsby backend. And it will unify that data into our GraphQL data layer so that you develop the same way, regardless of where that data came from.

Jason Lengstorf: And so, it will kind of expand with you as you go from a single ... From a one developer shop up to an infinitely scaled company.

John Lindquist: Right. Yeah. And I can't even imagine trying to take a Jekyll or the others, a Hugo, or something through static site generators. And what the migration story would be to Contentful, or something like that.

Jason Lengstorf: Yeah. It's definitely possible. The stuff that Hugo is doing and the stuff that the Jekyll does, they're really good tools. I think this just isn't what they're built for. They're built for very quickly building small static sites.

Jason Lengstorf: And they're excellent at that. We are targeting ... We just want to do more. We want to be kind of a data agnostic development layer. So, we worked hard to make sure everything was extensible.

Jason Lengstorf: So, if you've got any API, you can just write a source plugin for it. And then, that means that any Gatsby site now can install that plugin and pull in your data source. So, you can write a custom API and have it be integratable with Gatsby out of the box.

Jason Lengstorf: So, you could say, "Hey, do you want to build a site with your data? Here's what you do." And we're seeing that a lot of ... I think, a company called Wings is a new headless CMS. And part of their core marketing strategy was they launched.

Jason Lengstorf: And part of their launch was, we also have a Gatsby plugin, which is ... We are over the moon about that that we've been able to make that kind of impression in the open source community.

Jason Lengstorf: Anyways, that's kind of what we're after is that type of openness and data agnosticism.

John Lindquist: Agnosticism. I like it. Now, spell that.

John Lindquist: So, would you say if ... Say, someone who was about to sign up for a site at WordPress.com, what's the difference, skill level-wise, that's required between just signing up for an account on WordPress and maybe playing with some preferences or a PHP template, or something, compared to launching something through Gatsby where ... I'm not familiar with it.

John Lindquist: But is there Gatsby hosting where you can create an account and just kind of go from the default templates?

Jason Lengstorf: Not yet. That's a plan. Gatsby got Venture Capital funding back in the end of 2017. So, one of the things that we're hoping to bring out, that we're working on now, are a couple different tools that will make Gatsby more of an active competitor with the WordPress seamless model.

Jason Lengstorf: So, one thing that WordPress does better than us right now is if you don't do code at all, you can still set up and operate a WordPress site.

John Lindquist: Right.

Jason Lengstorf: You're limited in what you can do. You're stuck with whatever theme you can find and whatever plugins, and kind of putting all that together. But there's just this amazing ecosystem in the WordPress community where if you are not a developer, there's almost nothing you can't do with WordPress.

Jason Lengstorf: And that's all with free open source plugins, which is amazing. Gatsby is ... So, if you were a developer who wanted to build a custom theme, the ramp-up between WordPress and Gatsby, depending on what your level of comfort with PHP versus Javascript is, I would make an argument that it's easier to ramp up with Gatsby, because there are fewer internals.

Jason Lengstorf: WordPress has a lot of internals and Gatsby is a little bit more of a concentrated suite of things that it does. That could also make it harder, because in WordPress, almost everything you do on a standard site is kind of baked into the core.

Jason Lengstorf: Whereas, with Gatsby, you're going to end up adding plugins. Almost immediately, you need a plugin just to add the title tag to the HTML. And so, things like that, I think, can be a little bit overwhelming for people.

Jason Lengstorf: But we did that by design, because we didn't want to bake a ton of stuff into the core. If you're comfortable with the plugin style architecture and you're comfortable with writing a little bit of code, I think it's going to come down to your preference.

Jason Lengstorf: But my preference would be that, I think, Gatsby's a little bit easier to pick up.

John Lindquist: Right. And it's funny. I know a lot of people who their introduction of programming has been launching a WordPress blog. And then, they're like, "Well, I want to change something."

John Lindquist: And they look at the plugins. And then, they're like, "Well, that doesn't quite fit what I want to do." So, they copy and paste, whatever in-line Javascript or PHP, or whatever it's going to be.

John Lindquist: Usually, outdated plugins.

Jason Lengstorf: Right.

John Lindquist: It's funny how much that it's a real development experience for people, even though they're fumbling around a bit. How often do we just check static overflow for the units we're looking for and copy and paste.

John Lindquist: I think, it's really cool that now, if Gatsby brings that story about, then it can be truly an introductory programming experience for people. Where, here's this working thing and what do you want to change?

John Lindquist: And then, they say, "Well, I want to change the way that the footer looks." And then, they can do the footer code and make some calendar widget, or whatever.

Jason Lengstorf: Yeah, that's-

John Lindquist: I think that's exciting that Javascript and React can be more of an introduction.

Jason Lengstorf: And I would agree with that. I have found that we've seen people using Gatsby as a way to learn React. Because one of the things that's difficult about Javascript development is the kind of immediately sharp learning curve.

Jason Lengstorf: When you go from, "Okay, I'd like to learn Javascript.", to, "How do I get some Javascript onto the screen.". If you're trying to learn React, you can use Create React app, which is great.

Jason Lengstorf: But if you're not using Create React app, you're kind of looking at like, "Okay, before I can write any React, I need to set up Babel. I need to set up Webpack. I need to set up my CSS suite of SAS or post-CSS, or whatever."

Jason Lengstorf: And all of these things are very context-heavy tasks that require you to just have so much knowledge before you can configure them in a way that doesn't feel like just copy, paste, pray. Right?

Jason Lengstorf: And so, what Gatsby does and what Create React app does well, is we are trying to abstract away all of that. When you build a Gatsby site, you just do Gatsby new and then, pick your starter.

Jason Lengstorf: And you're able to move into that folder, run Gatsby develop and then, change something in a file and immediately see it live on the page. We've got hot reloading built in. We've got file watching.

Jason Lengstorf: All of that is happening so that you're just running the server. And if you go from never having used Gatsby before, you can go from there to actually looking at your changes, live rendering on the page inside of two minutes.

John Lindquist: And that's a story that WordPress and the others don't have.

Jason Lengstorf: Yeah. For custom development, yeah, 100%. The only thing that's really, really close to that ... Create React app is another one. It's really, really good at this. Where I would say, Gatsby is a little bit ... It's got a little more power than something like Create React app is we've also got data access baked in.

Jason Lengstorf: We've also got a really good deployment story. We wanted to make it-

John Lindquist: Which are things you can make anyway, right? Regardless of whatever site, you're-

Jason Lengstorf: If you're building a website, yeah.

John Lindquist: Going to do that in deployment.

Jason Lengstorf: Exactly, right? You've got to put it somewhere. And so, how do you do that? So, we've thought through, "Okay, once you've built a site, where does it go?" And when you're looking in something like a static site generator, which at its core, that's what Gatsby is, you can host it for free on GitHub pages.

Jason Lengstorf: You can host it for free on Netlify. And Netlify has kind of been our recommended way to go, because Netlify will watch your GitHub repo. And whenever you make a change, it just automatically polls and updates everything.

Jason Lengstorf: It's magical. I'm in love with Netlify as a service. So, we've got that great story of you build something, you hit Gatsby build and then, you save those change ... Or you hit commit, push that up to GitHub and then, Netlify will build your site.

Jason Lengstorf: And the same with data. We've got a story for how to get data in. If you want to use data, here's what you do. And if somebody hasn't already built it for you, here's some instructions on how to get it in so that you can use it in the same way that you would use data from anywhere else.

John Lindquist: Right. Right. So, I see that Gatsby's version two is in beta. What sort of changes are we looking forward to in the upcoming version two release?

Jason Lengstorf: The biggest ones are mostly under the hood. So, a lot of what's happening in Gatsby version one is just older versions of the technology that powers the web. So, Gatsby version one is on Webpack version one.

Jason Lengstorf: So, Gatsby version two is moving us to Webpack version four. So, it's a big jump. We get a lot of performance benefits there. There are additional performance benefits like better code splitting, better dead code elimination, some other kind of ... How we can do things like sub-setting your fonts.

Jason Lengstorf: So, if you have a web font that you're using, if it's included in the repo, we are going to be able to run a plugin that will look at just what characters you use and only include those in a sub-set font so that you're only sending down what you really need.

Jason Lengstorf: Instead of having to send 500 characters, you send down 10. So, those are some of the under the hood things that are going to happen to make the sites faster, to make your build times faster.

Jason Lengstorf: We've improved the build time by about, I think, it was 80% or something. It's a huge difference between Gatsby v1 and Gatsby v2. One of the biggest limitations of static sites is that they're very slow to build.

Jason Lengstorf: So, we are putting a lot of effort into making it faster. And our target, and who knows if this is physically possible, but what we really want to do is get to the point where our static sites are building in ... Huge static sites are building in seconds instead of minutes.

Jason Lengstorf: And so, those are ... That's another big one that we're working on. And then, other than that, there are just a couple kind of magic things in v1. We had this layout component in Gatsby v1 that was automatically applied to your pages.

Jason Lengstorf: And it kind of worked as an app shell, sort of. You would define your header and footer in there. And it ended up being just this ... It was a little bit confusing, right? So, in v2, we removed that.

Jason Lengstorf: And we went to the point where, now, the Gatsby stuff is pulled out and you have to actually use it like a React component. You plug it in and you have to include it and wrap your files in it.

Jason Lengstorf: And it's exactly what you've always done in React. So, we made a couple decisions like that that make React feel more like React. And there's less magic from Gatsby. We added a couple other things around GraphQL.

Jason Lengstorf: We're going to support external GraphQL schemas as first-class citizens. I think that poll process is getting merged today, if it hasn't been already. And I think everything else is more around stability.

Jason Lengstorf: We've got a whole migration guide written up that covers the nitty-gritty details. There are a couple breaking changes, in terms of the names of things changed to be more clear. But otherwise, it's not a ... The migration path is pretty shallow for most websites, because most people aren't using the stuff that we ended up changing.

John Lindquist: Right. Right. Now, would you recommend, if someone starts with it today, that they just dive into v2?

Jason Lengstorf: I would start with v2. Our current push is to get to a release client, or a release candidate, for v2 soon. If it were up to me, we would probably have our release candidate out in the next two weeks.

Jason Lengstorf: So, the time horizon for v2 going stable is potentially a couple of months. But I would not ... I would say, it's probably not longer than that.

John Lindquist: Okay. Awesome. I'm excited. I see on the GitHub page that Gatsby has 964 contributors, 5,500 commits. What's it like managing such a popular open source project? I'm sure, it looks like the issues are at 936, not that that means ... Not that that reflects the quality or anything.

John Lindquist: But that's just a lot of people asking questions, or [crosstalk 00:17:32]-

Jason Lengstorf: Yeah.

John Lindquist: That's a load of things on your mind, day in and day out.

Jason Lengstorf: Yeah. And it's something that I am not terribly involved in the day-to-day management of the repo. So, one of the things that is very nice about having a strong maintainer community is that ... So, Kyle Matthews is the original creator of Gatsby.

Jason Lengstorf: And he mostly spends his time on new features, what's kind of next generation stuff. And then, we're super lucky to have great people like Mike Allanson, Michal ... I'm going to murder his last name. He's Polish. And I think it's like Piechowiak, I think.

John Lindquist: Sounds right to me.

Jason Lengstorf: I'm so sorry, Michal. And then, we've got just this army of amazing people who just show up and put in the work and help keep these things moving. So, we've got ... Mike and Michal are full-time with us now.

Jason Lengstorf: We've contracted them for as many hours as they'll give us, basically, to manage this and keep things under control. We're also working with someone named William Imoh from Nigeria who's helping us do, what we're calling, open source gardening.

Jason Lengstorf: Because a lot of those 900 issues have been fixed. He didn't have great organization in the previous versions of the repo where they were just kind of managed in a very ... There are tons of things happening, so we're tracking as best we can.

Jason Lengstorf: But also, there's just general chaos. So, now we're trying to get more methodical, especially since we got funded. We want to bring that back into check. And so, we've contracted Marissa Morby who is an excellent organizational architect to help us write some project workflow processes, to find some things that we can do better to make the project workflow just work and just identify some different ways that we can do a better job of that.

Jason Lengstorf: Because it is really, really difficult when you've got dozens of issues opening a day to not let some fall through the cracks. And so, we're trying very hard to not let that happen.

Jason Lengstorf: But even just today, we had someone who was unhappy because we ... They opened a poll request. And they did a ton of work on this poll request and we just missed it. It just got lost.

Jason Lengstorf: And by the time we found it again, it was out of date. It didn't match with our roadmap. And so, we ended up having to close it. So, that's super frustrating because had we been paying attention, we would have caught it and we would have closed it earlier, because it wasn't in line with what we were headed for.

Jason Lengstorf: But instead, it was like months. Alright. Somebody just waiting. Like, "Are they going to merge my work? What's up with this?" And so, we're trying to figure out, how do we make that not happen again?

Jason Lengstorf: How do we make improvements that prevent us from taking advantage or letting down the people who are basically volunteering their time to help make Gatsby better for the rest of the community?

John Lindquist: Right. Yeah. And I know for certain, for every young, happy person, there's thousands who are happy. So, you can-

Jason Lengstorf: Yeah, and-

John Lindquist: [crosstalk 00:20:28]. No one's perfect.

Jason Lengstorf: Yeah. Our goal is that we don't create ... We don't want to create unhappy people. There will definitely be people who just don't like the product and that's fine. But we don't want to be the ones who are like, "Hey, we did something crappy and you have to deal with that. And now, you don't like us very much."

John Lindquist: So, if someone were to get started with Gatsby today, I know there's a lot of examples in the repo, which one should they start from? Or, is the document the best place to go? What would be your recommended path to I know nothing about Gatsby to launching a personal blog, or whatever?

Jason Lengstorf: We have just done a huge effort with Shannon Soper and Amberley Romo have just done a huge amount of work on improving our tutorial. So, that would definitely be the best place to start. It's really comprehensive.

Jason Lengstorf: They added a part zero that's like ... It will tell you what the command line is and how to get Node installed. And then, it goes all the way from there to pretty advanced topics like building source plugins and stuff like that.

Jason Lengstorf: So, I don't know if it actually builds a source plugin. But we get you to the point where you'll have the level of understanding that you can then jump to the advanced guide on building a source plugin.

John Lindquist: Right. That's awesome.

Jason Lengstorf: But yeah, for a beginner, that's definitely where you would want to start. Hit up the tutorial, skip ahead to the part where it seems new. And then, go through that.

John Lindquist: Cool. And that's at gatbsyjs.org/tutorial, so.

Jason Lengstorf: That's correct, yes.

John Lindquist: Alright. So, it's about time to wrap up. Is there anything you'd like to promote or say about your life or Gatsby before we close it off?

Jason Lengstorf: Something that we're trying to do right now is get more people involved in open source, especially if you're somebody who feels like you're typically not part of the open source crowd.

Jason Lengstorf: So, first time contributors, we'd love to have you. We've got open pairing hours available, so you can find that on our WeMeet. You can tweet at us. It's on my Twitter. There's a link to actually schedule an hour.

Jason Lengstorf: Somebody from the Gatsby core team will do a screen share with you. And we can look at any code you want to do, whether you're getting started with Gatsby. If you're wanting to make a contribution to open source.

Jason Lengstorf: And if you want to make that contribution, it doesn't even have to be to Gatsby. It could be to any open source project you want. We just want to try to get more people involved. So, that's my big effort right now.

Jason Lengstorf: So, come and talk to me. And let's get some time set up.

John Lindquist: Awesome. That's great. You're awesome, Jason.

Jason Lengstorf: Well, thank you.

John Lindquist: Well, thanks so much for your time today. And have a wonderful rest of the week.

Jason Lengstorf: Yeah, thank you for having me. I really had a good time.