Show notes
00:12 Hello and welcome to GraphQL patterns. I'm your host Nader Dabit. Today on our panel we have Jimmy Jia.00:18 Hey, I'm Jimmy [inaudible]. I'm a principal scientist at butterfly network working on democratizing medical imaging and GraphQL is actually pretty useful to stress stressor that00:29 and our special guest today is Jason Lengstorf. Uh, welcome to the show, Jason.00:34 Hey, thanks for having me.00:35 I've been seeing quite a lot of you lately. Have an asked.00:39 Uh, I have been noisy.00:40 Yes. Yeah. You, you, uh, you had guts fear. Oh, definitely. All over the place. You all are doing a fantastic job, but for people like us that don't know you are, can you give us an intro?00:52 Sure. Um, I am the head of developer relations at Gatsby. Gatsby is a framework for rapidly building out websites and apps with react and GraphQL. Um, we use GraphQL and I'm kind of an interesting way where we use it during the build time to access, um, file servers and stuff, which allows us to do some really interesting things with data, which I imagine we can talk about a little bit later.01:17 Hmm. Cool.01:19 Very cool. Yeah. So, um, for people that like haven't used Gatsby even, can you kind of give us like an elevator pitch for Gatsby and then I would like to get into like why Gatsby uses GraphQL, like a little bit deeper conversation there.01:34 Yeah. So the elevator pitch is that um, building websites has a whole bunch of different things that are challenging to do and if you want to build a great front end with a lot of frameworks, you not only have to build a great front end, but you have to get really good at Dev ops. You have to get really good at performance management, you have to get really good at all these other like basically things that are complicated enough to be their own careers. Um, what Gatsby is trying to do is take all of that boiler plate and a yak shaving out of the way so that you end up with all of the right settings for high performance, easy to deploy apps. Um, you get to build just the front end and build the front end that you want using data from any data source. So we can, both from the file system, from Api Apis, from, uh, any headless CMS that you've got and that all gets pulled together in a normalized GraphQL layer. And then once you build, we compile down to static assets that can be deployed to any CDN so that you don't have to deal with standing up a bunch of, you know, horizontally scaled node servers or sharding databases or any of the things that get really challenging and scale with, uh, with big websites.02:41 Yeah. So, um, when I started looking at Gatsby and using Gadsby, I never really understood the, you know, the need for all of this. I was like, why can't we just query data dynamically like we've been doing, but, but, you know, I don't know. But, uh, I haven't really been, um, you know, working with these types of applications and scaling myself. I'm usually on a team and we have back end people and people that deal with all this stuff. But after I started playing with it, I started understanding, you know, that um, the main difference I guess like trying to put it even more simply than you put it as, um, typically when you have data coming from a database, the data loads when the page loads or when you, when you actually ask for it. But with Gatsby you can actually set up these static, um, we'll GraphQL queries are static, a http requests. So when the, when you build the application, all of that data gets pulled from the database and it's available to you right there. And only the only, the only way to actually retrieve that data again is to rebuild the application, right. To rebuild the site03:40 for anything. That's anything that we pull in at build time. Yeah.03:44 So in this lends itself well to certain types of applications, right? Like what, what are the types of applications people are building with this?03:51 Um, I mean the things that we see most often because I think they're the most common type of website anyways. Our blogs and portfolios. Um, we've started seeing a lot of people building ecommerce sites because Gatsby lends itself well to kind of a hybrid approach where you pull things like your products, uh, statically at build time. And then you pull things like inventory dynamically at load time because it got to be site. Once it hits the Browser is going to rehydrate into a react APP, which means that you don't lose the ability to do that asynchronous requests. You can kind of do whatever you want. Um, but uh, yeah, so we've seen it, go ahead. We actually do exactly. We actually do exactly that. Like our current ecommerce site are you commerce is built on Kathy for the front end. It's pretty awesome. That's very cool.04:35 Yeah. Um, we, we use this pattern for our swag store too and I am really fond of it because it just makes things so much easier than having to, like, I don't, I, when I used to work at IBM, um, I, I was part of the push to bring GraphQL two IBM. And before this we had all of these like, oh, we need to do a simple thing. Well, let's proxy like 15 microservices in the back of our little node micro service so that we can stand up like this static front end and just the level of complexity to do simple things. When it was all API based, took it from something where like a front end developer would be able to just build like a front end. All of a sudden they're so deep in the stack that they're like writing proxy servers.05:17 And I was like, okay, this is not like, this isn't a good way to work as a developer. You shouldn't have to go that deep in the stack to solve a simple problem. And um, one of the reasons that I ended up over a Gatsby is because they feel like they've solved that problem in a really elegant way. And that's, um, that's kind of, I like the fact that you can build really ambitious apps and just be a front end developer. You don't have to learn how like the deeper parts of the node API is work. Right?05:43 The sweet spot is that that hybrid approach, because when you're, when you're, uh, when you're an ecommerce site, like you mentioned for example, you want people to have a very good user experience. When they land there, everything needs to be snappy, feel really good and can do that really easily with, with, you know, with this fetching of data at Bill Tom. And then like you said, like when you actually land on a page where you're, you know, getting some information about inventory, you can still load all of that stuff. Then you only have like bits and pieces that you end up dynamically getting. Right.06:14 [inaudible]06:16 so do you have like a diff, like when someone sets up something like that, except for instance you have inventory, would you set like some default stuff there are or would you like load the page and have like a spinner? Like how would that work? Just out of curiosity.06:28 Okay.06:28 You can do it however you'd like. I would say if it's something like inventory, you wouldn't want to show default information, you would want to show like the skeleton pattern, um, or a loader or something. Um, because if you showed that there was one available and then it like snapped to zero, that can be kind of a bummer. Um, but for other things, you know, you go ahead, you serve,06:48 but like both Gatsby query in GraphQL on the build time, and then maybe you be saying like a polo or something to actually deal with graphical at run time. Right. Sort of cool. Exactly.07:00 Um, yeah.07:02 Yeah. I mean that's basically, we basically, we basically need to do just that actually. Do you know Jason Cleanse? Yeah. He's one of your contributors. Yeah, he's actually, he actually works in the, I was trying to get them to like draw me, draw me for this call, but you build everything out for us. It's like, Hey, look, it's got to be, it's great. It's easy. It looks fantastic.07:17 Yeah. It's, uh, Jason's great. Um, I think we would've worked a whole lot harder to, to poach him if he hadn't had the same name as me because I put the Kibosh right on that, like, that can help me.07:27 Oh No, that's [inaudible] I don't want to talk about that. I was very attached. I was like, ah, oh Jason. Anyway, um, hello. So maybe let's put, how did, so what's actually the story behind like, um, what's the story behind gets me making use of GraphQL. Cause I remember I recalled that like, I guess cow was pretty active in GraphQL circles. Like really like back when you first started. Um, how did, how did this whole like, gasp, you put scrap gold thing get started.08:13 So I don't have, um, I, I don't have the deep story. You'd have to talk to Kyle to get exactly that. But from, from the way that I've heard this story told, um, Kyle was looking for ways to kind of make it easier to solve data problems like data management problems. And so when he wanted to build a, like a static site using the file system, accessing the file systems, kind of a pain, and then your file system needed to do, like if you're using markdown and you've got front matter and you want to pull out these different variables, um, finding ways to access that easily. It was kind of a pain. And then when you expand that further and you want to start pulling in data from Yammel Jason or go further and get something from arrest Api or, or something like that, you start to see that the data really quickly gets out of control.09:09 And so I think Kyle saw that GraphQL could act as basically like a middle tier, like a normalization layer for data. And that would make it so that if you're building a site you get to use react and then the data layer is always consistent. Whether your cup pulling from, you know, a database like well, you know, you've got to a source and Gatsby for postgres. Um, we've got, whether you're pulling from your Api, um, you know, we've got like 850 something plugins at this point. And so you, you're able to pull data from all these different places and when you actually interact with that data, you don't have to think about sending off the, the request dealing with Heteros, things like that. You just get to say, I need like this data from Shopify in this data from the file system in this data from wordpress.09:54 And then all of those things come back in a normalized query. And so I think that that, um, that idea that you could make your data more approachable for front end developers cause that's the promise of GraphQL, right? Like GraphQL and ratings data approachable to front end engineers. Um, and I think that Kyle saw that very early, I mean, great Gatsby has been around. Um, he was basically like an early adopter of both react and relay. Um, and he, you know, kind of experimented with that. So I think he was very fortunate that like Gatsby was right place right time. Um, it started earlier than people were ready for it and matured right at the point where people were ready for it, which is why I think we're seeing the, the popularity of Gatsby now. Um, but yeah, it's a, it, it, as far as I can tell it was because we wanted, we wanted a really like consistent way of interacting with data regardless of where it came from. That makes sense. Yeah. I mean it's, it's a really cool application. It's one of the things where it's like Sarah coming to the outside, you don't necessarily like, it's not something you necessarily expect, but like it makes it a big obviously makes ton of sense. Super useful.11:02 Yeah. And it didn't make any sense to me when I first heard about it until actually use it. And then after using it, it just made so much sense. It was just, you know, like a light bulb moment for me and it just felt right. And it's kind of one of those, I think that's one of the reasons that, uh, the Gatsby success really, I mean there's other things I do similar, you know, things like Mex js with the static, um, the rendering and things like that. But, um, you know, having the first class graph, QL support in the smart way that it was implemented, definitely set it apart. And it was a very innovative thing. And I'm assuming you'll see like other people adopting this stuff, it's kind of like the trailblazer blazer type of a deal. So what kind of companies are using Gatsby right now? Just out of curiosity? Uh, like I know we talked about the type of companies, but are there any like companies that people have heard of?11:52 Yeah, definitely. Um,11:54 Ideo, the, that big design agency, they, uh, just launched a Gatsby site. Um, AWS it sounds like we're using it. Yeah. Ada, AWS. Uh, I know IBM is using it for the carbon design a system and they're also, the last I talked to them, they were trying to like make that into a pattern that all teams could use. Um, paypal is doing experiments with, with Gaspe. Right now they're, uh, they're split testing. paypal.me with a [inaudible]. Um, we've seen, uh, websites for Nike, like the Colin Kaepernick just do it. A campaign was a Gatsby website. Um, shop Flamingo, which is the Harry's Shave Club, a women's line of razors, that's a Gatsby ecommerce site, um, in a couple of like more ambitious things like hopper, which is, uh, a booking site is also a Gatsby APP, which is, which is pretty fun. Um, but yeah, I think there, I mean it's, it's been really interesting because we're seeing a lot of people using it.12:52 Um, and especially a lot of people like the react js docs are a Gatsby site. Um, so it's, it's very cool to see that. Like we're getting adoption in the commercial and the like the techie sphere. Um, yeah. And just, it's, it's kind of like nerd street cried, you know, we've got like Kenzie Dodds and Danny Habermas and you like, they're all using Gatsby now for their personal blogs, which makes me like infinitely happy and nervous because every time they have a problem, they're like, here's what went wrong with Gatsby on Twitter. And we're like, oh shit, everybody has to like panic and go, go. Like figuring out how to solve those problems before they spiral out of control. But the gift and the curse of being extremely popular. Yeah, exactly.13:35 So when people, when things go ride, people tweet about it but also things go wrong.13:41 Yeah, we've been very, we've been very fortunate that like, you know, I always joke that be in Dev Rela Gatsby is the easiest job in the world cause I just get to retweet all the nice things people say about us. Um,13:53 developers love Gatsby. It's great. Um,13:57 yeah,13:57 so I guess for these, for, for Lisa to use cases I didn't like,14:05 it seems like there's a split between like the more classic static page like doing like a blog or something where we're, it's like essentially it's purely a static site generator versus the set of pages like ecommerce applications where they're really, at this point you're, you're using Gatsy almost in some ways. Like a, you know, a more customizable now or something where this is a framework for delivering a page that gets you a lot of really nice separate server side rendering around beans. Like, you know, managing, writing those scenes out of the box and it's just like not setting up a bunch of junk that you would need to for, for a full fledged, um, for a normal web app. Um, is there like any sort of tension between supporting those two use cases well or is it just sort of fall out naturally?14:47 Yeah,14:47 the, the nice thing about trying to jus…
Full show notes at the publisher 
Our TOPPODCAST Picks 
Stay Connected
