Video details

Ria Carmin: Jamming with Gatsby and Sanity | José Muñoz: The future of React


Ria Carmin & José Muñoz

Talk 1: “Jamming with Gatsby and Sanity” A demo of a JAM (JS, API, Markup) Stack with Gatsby static site generator and Sanity CMS. — Ria Carmin, UX Engineer @ EquitySim / Organizer @ ReactVancouver Talk 2: “The future of React” A look at the Suspense API in 2020. — José Muñoz, React Native Developer @


Hello, everybody, welcome to Vancouver for July twenty ninth, and I be happy that you guys can join us. And actually and I'm just looking at funding social where a lot of people are joining us. And it looks like a great number of people tonight. And thanks for joining us, even with the weather, because it is so beautiful, at least here in Vancouver for those of you that are elsewhere. Welcome to our feed coming from Vancouver. We'll just start off with a couple of quick announcements. We'll have a couple of speakers tonight, which I'll mention in a second. And we do kind of have an after party after for those who want to do some socializing video, chatting with some other developers, but reacts to that. We'll be doing that after our Talk to US evening as well. So we are Vancouver, basically. We are a meetup that has been going for a while, initially founded by someone in Vancouver. Eric Can took it over and it's been going for about four years or so. And even now in our socially distant covid times, we've still managed to continue and we are doing this live feed. I'm Jonathan. I'm one of the organizers and I just kind of kick things off and keep things going as we run. The show has been working behind the scenes to get all this together and actually is going to do this. Talking tonight about a topic that Anita does some social media work for us there, a few of the volunteers as well. But probably right now it's been the four of us just organizing the online version of Vancouver. We are streaming through stage ten, as we always mention that just kind of our host right now who used to always be hosted at different companies. But Stage Ten has been a great product that has helped us just really easily stream slide stream speakers. It's really cool. So if anyone else has aspirations to do some live broadcasting and get some people on, it's been a really cool tool. Also want to show the terminal. They've obviously been a great support for us. I mentioned them pretty much every time they've been super active with us. They are running a hackathon right now. So if people are interested, you've got some time you want to do do some learning or have some fun. They are running a hackathon looking at the issue of unemployment. It's started mid mid-July. It's going all the way to August 12. There's still a couple of weeks left. So if anyone is still interested looking for a team, you can join up through through terminal and you have to check it out and and maybe make something cool. We've done a couple of hackathon, two or three Vancouver, and they were right wing covid started. And there are definitely some great experiences and a great way to also meet new people, particularly for those of you that might be a little bit more socially distanced, depending on where you're living, where things are at for the covid situation in your area. OK, we will get into tonight's speakers just to get things rolling. So our first speaker will be this evening. And we also have Hosie so we can be chatting about Gatsby and then Hoess. Can we talk about suspense, which is an in upcoming API for a synchronization within react? So I think we'll leave it to Reha to do her talk next. React found my name is Rhea, I'm an organizer, Vancouver and a French engineer, and they wanted to show you a couple technologies, techniques that I think are absolutely fantastic. And my number one choice in building marketing sites, blog kind of projects. So projects that are content heavy and interaction light. So, for example, the company where I work, equity SEM, we have equity, some dot com, the marketing side. So, you know, all content that explains what the platform does and finance dot dotcom, which is a web app, the direction and data rich, the actual simulation. And no, unfortunately I don't have one hundred million dollars. This is just fake money. And so what I'm talking about here is that we've got these two guys is Jim Stack, JavaScript API is Mark-Up. It's sort of a way to architect the front end with the goal of optimizing for Speed and SEO and also making updating the content more streamlined. So Jim Stack is Farzat secure sites and apps delivered by pre rendering files and serving them directly from a CDN, removing the requirement to manage or run Web servers. And this is from Jim Steg. I want to go. I won't go too deep into different varieties of GM stock since I'll be mostly talking about Gadsby and Saddiq combo. But just to give you a quick overview sort of context in case if you're not familiar with GM stock at all, so usually you start with picking some sort of static side generator. So maybe you've heard of Jakiel that has been popular for a long time. Or maybe you heard some you were kids on the block, like a Levante, 20 or so, as the name suggests, is assembling a static side, using some sort of templating engine. You can host cheaply usually. And the idea is the speed and simplicity and the ability of a website coded by hand with just a script but conveniently generated from tablas files. There are all sorts of ascetics, generators out there in terms of variety, in terms of the language used and templating engine you have, you know, JavaScript, Elm Python, go Ned PPY among some of the languages and you have really you mark down some others and tippling and I recommend checking out this website. But again, that has, you know, kind of collection of all the static side generators out there. So you can sort of pick what you sort of are looking for. So the generators then you probably want to create content, which could be blog post, product descriptions, et cetera, content that you feed through the templates to generate pages or sections on your website. Most that the generators will let you use local files and save markdown format as M and Jim stock. But for more complex sort of professional projects, you probably want to opt in for a CM's content management system. And that case of GM stock, you probably want a headless steam. And what headless seems is, as opposed to a traditional CMS that only cares about serving content through an API, it doesn't provide hosting templating forms. Emails like traditional C.M.A. WordPress Hellstrom is basically a database with a nice, nice dashboard. It will also provide an API for your front end to pull the data. And it could be addressed. It could be graphics well or something else proprietary for that particular CMS. Some of them will offer you hosting the most day based database. Some of them you will have to figure out how to dig yourself and the same deal with generators or dozens of them, you know, all sorts of kind to choose from. Again, this is a really cool site that shows you some of them, the open source and down below the clotheshorse. And Saudi seems to be the most popular one here. So, yeah, definitely check it out to see what's available and do. The third component is that sometimes you probably want to add also some sort of dynamic functionality to your starting site that might require computation and working with third party API. So, for example, thinking, you know, things like sending data from a form or maybe using Tullio API to send a text, something along those lines. And in that case, people usually like to use servers, serverless model, which makes use of services like Amazon Lambda Azure functions versus all the other others out there. So that's it. These are your three sort of components of GM stock status by generator. You have some sort of content place and services functions optionally if you need some of dynamic functionality. So, yeah, let's jump into Gadsby now, and you kind of like a quick one on one if you want to follow along the code snippets that I'll be showing, if you want to just, you know, kind of like clone it, you can use this repository with with a demo that I'm using for this for this talk. Yeah. Feel free to clone it, you know, and then install and just kind of running alongside. It's a link. So Gadsby Gosbee is probably one of the more popular static side generators today. It uses react for its templating. It also graphical API to pool your content and data sources. It actually doesn't generate HTML pages. It ships a code splitted react up with all your content pre fetched and baked in for your purposes. So you have your entry point over here and it's demo and then these are your chunks. So on top of that, Gadsby over's a lot of additional plugins for optimizing your website performance. Some of my favorites are guessable offline. That not only allows your site to run offline, but more importantly, Cubs', how much bandwidth your users need to fetch your sites, especially the second or not. First time that there's this plugin is based on a bit of a or progressive web approach and utilize the service workers. Another favorite of mine is Gadsby image. It's react component that optimize image loading for the great user experience. And obviously there are a lot of other amazing useful plugins, Bigazzi projects. But I want to sort of jump into how Gaspin deals with content. So when you generate and you guys decide whether cly you get little start projects. So if you run, Gadsby knew the name of your project and the starter, the path to the starter reffo, something you know right away is that you'll get. This pages directory, I mean, every component in that directory gazy will transform into a page, so say if you have about medius component, it means that on your Web site you're going to have like my Web site, I can't say about me page and whatever component that file exports by default will be that Page's content. So that's pretty straightforward. And as I said before, Dabbous graphics well under the hood to get your data. So what happens is you define your data sources like Seems Margon or whatever it is. And during the build phase, Gadsby will check what data you want based on your queries and then goes and fetches it and makes it into the build. How the benefit being that users won't have to experience load delays due to latency and content will be available for Carlist index. Or your Web site can rank very, very high in search results. So how much? Q Well, do you actually need to know to work with Gadsby? Actually, very little. You only have to write you to write graphical queries, but even for that, you are helped a lot and a lot of complexity is actually handled by Gadsby under the hood and you'll never have to deal that much, to be honest. So, yeah, let's try to fetch an image from filesystem just to get started. So I'm going to add this Gadsby source filesystem plug in first. You have access to my legal files in Gadsby comes with graphical dashboard. So when you when you serve your site, when you localhost want a report, slash, underscore, underscore, underscore, graph, you well you will have this kind of explorer like that which will help you to build your queries so you can build your query, you know. So whatever you want to look out of this little image of like a gnome, I want to put on my page. So doing a query and then what to do with it next is there are a few ways to get content into gassy pages, but one of them is using this you static query hook so imported from Gadsby and Baraquio and then assign the result of the query to this image constant. And this part I basically just copied and pasted from graphical. And the lot you can use, you can get you get the image. So and that's this guy here. So that's the sort of how you query data from local source. Oh, yeah, this is the guy. So let's jump into sanity now. Sanity. So what about the CMS? Sanity is obviously a CMS that offers a graphical API that works perfectly with Gadsby. And the reason why I like sanity a lot is, is developer driven and allows you to write your schema in JavaScript objects and then customize your editing dashboard to your heart's desire. So basically, you're programmatically define your schema versus creating some sort of browser guey. So let me show. So no surprises. Here you get this. You like, you initialize project and you start to server and what you get there. So you get a bunch of stuff, but then you come to the schemas. So you'll look at the schemas folder. And in order to define a scheme, you add a file there. So say we're working on this info. That's what you wanted to do, is you want to export an object from that file that contains the schema. So this is the object and has a title, name, ID type. So I'm adding the schema info like here. And then you want to define the types of data you want to store in the fields array. So, you know, I'm just showing some basic stuff. There's a couple of strings. The one is title. The description has some validation and then optionally you could also add some previous rules into how the content is displayed on the dashboard, but it's more advanced. So we're just going to hop onto the next step. Which is going to schemata just file where you need to import your info and export it through this great scheme to help her get added to the bottom of the list of stuff you already have. And that's pretty much should be it. And then when you run your server. Hey, guys, so something happened there. Not sure what, but his feet got cut there for a second, so just checking in with her to find out what happened and whether she'll be available yet or not. I guess for now, what we'll do is if she is able to switch over to Hosie, then Jose will be able to present next. That was a really good presentation so far. I think there's only a few minutes left, so hopefully we didn't mess this too much. Also, I did forget to mention is that we will do kind of a Q&A panel after Rean has a chat. Just if you guys have any questions, you can post them on this channel or on YouTube, on the YouTube comments, or I think you can post on a live feed. So if anyone does have any questions for Reha about Gatsby or Hosie about suspense, then we'll be able to chat about them after school. So that is that. And so Hosie will be up next. And hopefully if everything is OK, then we'll be able to switch over and get started. Hi, my name is someone else. I'm a software engineer, and so I can do this. I live here in Burnaby. I'm originally from Honduras on my spare time. I like to cook things I see on YouTube, but when I'm not talking, I'm building react and react native applications here with my team based in Vancouver. All right. So that's that's me. I'm here to talk about loading stuff. I think little stuff is hard. I feel like oftentimes we find ourselves writing the word is floating several times a day. We want to make sure our applications remain responsive, even in slow connections. So we have load in indicators to give the user feedback that the app is working. If you think about your application, a lot of time and energy is focused on coordinating when stuff comes in, when it comes out, what to show the user. So these are the patterns that you might be familiar with. It's called Effect on render, and it's one of the most widely used data fetching patterns in react. It consists of an effect that makes a request and then that's the setting to state. We imperatively check if the request is ongoing and then display a loader while while the things. But we get a result. Right. But we do this across several different other components that do their own different requests. And then those components will do their best to provide a good user experience. They're similar patterns like Fritsche then render there similar to to what we do with hooks and effects. But they're not ideal to to they don't atap really well to the real world. So what do I mean by this? There's this thing that I like to call the developer bias, the developers bias. I've been I've been working in software for almost seven years now, and one of the things that seems ubiquitous for us is that we get really high end hardware, we get high speed Internet. And that's because they our project needs us to iterate as fast as possible. In real life. Our applications are used by people with a variety of different devices that can go they can be high end devices, they can be mid-range devices, they can be even low end devices. The problem that we face is that not only do we have limitations on some device capabilities, but we also have we also have sometimes good Wi-Fi, sometimes rural cellular data, an application that's stuck on the full page. Spiner for three seconds doesn't provide the average user experience. And on the other side of this spectrum, on the other extreme, if you have a high end device and everything loads separately and the layout shifts every few milliseconds, then that's also that also doesn't provide a really good experience finding a balance in between this using traditional patterns as possible today. It just it's just kind of difficult to orchestrate before moving forward. This apps that we're going to talk about are experimental, but in order to address the orchestration issues that we have used in attritional patterns, we have suspense and confirmed mood. Suspense is the declarative API to write loading seats and concurrent. This is a set of features that help react, adapt and stay responsive, even in even in devices with bad network or low capabilities. Suspense brings a new pattern to react that decouples visual presentation of floating states where data is being read and how data is requested and should mean. So let's rethink our previous example, some of this friction, but you can consider it like the serious black mirror, like one day it'll become a reality. All right. If you notice, we're no longer using an effective data. We don't even have a locator. So it seems like this shouldn't work. Right. And while this my image might seem counterintuitive first, because we're used to having those things and then orchestrating the manually, the mental shift is going from some an imperative imperative to be checking for data and presenting a load and say to declaratively saying this component is going to be loaded when we get data and not until then end suspense is going to allow us to to just let reac know. We have to complete a request before completing this, before rendering this suspense. Let us choose well-defined boundaries where we're willing to show loading states that let us stream data as it comes in and start rendering immediately, but only show requests the results to the user in an order we agree to in places we agree to and with the frequency we it feels good suspension's data agnostic so it can help us with a lot more things than just API requests. So say we wanted to make an image suspense compatible. We could just take a simple loader that's basic JavaScript, just plain old JavaScript and wrap it around our suspense API that still is experimental and then just return a regular image and that's going to be cached in the images is not going to the images is not going to render until we've had the data already cached. They can also work for other assets like fonts, Audy, attacks, even video tax. Another great example that we could use to dispense with and you can do this today, by the way, is Cozzolino. When an application gets to a certain size, we want to split the application bundle and into pieces, right, so that the browser only processes the JavaScript that is required for the current page and then the rest of the code is sent to the client as the user browses. So while this might seem complicated at first, the API is really simple. Again, to wrap an import over up lazy and then just like before, you set a boundary with a loader and in suspense is going to figure out the rest. And again, this is something that's available on the current stable release. And so there's no problem. There's nothing experimental or experimental about this specific slide. Suspense is very flexible. No one can make produce suspense examples. Maybe we would remove the boundaries that we have and just let it be a single full page loader. Or if we want to be more detailed about it, then we can just wrap each individual component into its own boundary. Again, if if if we can skip alone in state when it's unnecessary, it will do it. But I think it's very hard to see this concepts just by looking at code. So I prefer a small demo that's going to show us how we load data and how that looks like in a few different artificial scenarios. And then this. So I prepare this small demo and what we're going to do here is that we're going to see the same the same component for both hooks and usual suspects. We're going to use we're going to use throttling when in one of our senators. So the game here is count the loaders and we're going to count the loaders both with regular Internet and with throttled Internet to start with hooks and count the loaders. OK, so that's two loaders we're going to refresh. Three times, just for good luck. So there's always like two lawyers, doesn't matter how much we load or not. Let's see what happens when we have a slow treaty. So now that the connection is strong, we see a little bit more time passes. And that is slow thinking, we'll get one loader and then two loaders and then we get our guy, so that's using hooks with our regular fetch, then render the render, then flash pattern. Right. Let's go back over here and just refresh for good measure. Now we're going to see the suspense equivalent of this. Remember, we're trying to catch the loaders. So let's see. So one and two and then this one on the bottom can a little bit. But this is with no throttling, and that's. Third one, so if you noticed just another one, if you notice in this suspense example, sometimes we get to loaders, sometimes get one loader, sometimes we get three loaders. That's what happens when we're when we're in a slow connection. So basically, what basically what happens is that in in fast connections, we can skip certain loading states. So you're going to see less of this on a slow connection where everything is loading separately, then that's that's OK. If you have to show something to the user, it's better than just freezing up. This is with slow connection with suspense. And yet just one of the sign to show who's the one. It's pretty similar, but you saw that this was already rendered, so it didn't show any letters for it. All right. So before I let you guys share some resources, if you want to try suspense today, again, it doesn't really matter if you if you see this if you know this for a day to day work, it doesn't really matter because these are experimental APIs. But if you have extra time in your day, like I have because of parenting, then you could try S.W. R, which is made by the same people who make next year. Yes, that was that was already stable and it's pretty easy to use reac cash is the official one. The official that's not been released yet is not stable. And this one's the one that was announced with the features. And the last one is the platform, which is based on cash, but it is an extension of an extension of what we saw with the image component. And you get another set of wrappers for audio and video and several other goodies that are suspense ready specifically for suspense. So if you want to if you want to try that, if you want to experiment with react, I know that our demo here is going a little bit hard to see it. But once you want to see it on different devices, once you see it in somewhere other than the high end computer or stable or stable connection, you can see the difference in the user experience. So that's pretty much it for me. So yeah. Yeah. Thanks for that. And yeah. Sorry about. This will bring the sound OK. Weird. All right, yeah, so we're importing info schema into the great schema helper and yeah, that's about it. What you should do at this phase two. Now, when you run your your sanity server, you should see your your info in one of the tab. So I added some extra stuff here. Not the wrong one. So I did some extra stuff here just to show you, like if you check out the repo, just to show us some other kind of stuff you can do with it. But these are like two strings that you just saw in the presentation. So the last thing you would need to do in order for us to head off to the Riak part is to rancidity deploy. And depending on a kind of starter project depicting might also need to deploy the QOL as well to have that graphical API available for your Gadsby. So there's always a ton of really cool stuff ahead of the sanity. But since it was just like a quick demo, yeah, it's sort of like a full circle and get the standard of data into into gastineau together. Gadsby in sanity. So we want to start with is getting the Gadsby source said, a plug in for your your Gadsby project and in your Gosbee config, you're going to add this plug in settings. So you want to resolve it and then add those options. So after you deploy your sanity, Sims, you'll have access to this dashboard at Manchanda. So everything you need to find is going to be here a project this year. Tokens are down there and you're putting the stuff I'm putting in process. And so figure out the sort of that, how to protect your tokens. And now when you're really like so you have to stop and restart your Gadsby server, but you should be able to see your sanity data and your graphical. So when you look at graphical and you look at the sanity info, you'll be able to assemble your query pretty easily and try it out, see if it runs. So where do you go from there? You want to add the data to your component? So so I showed you the the hook before. So another way you can use it is using this, this other approach by exporting a query constant. I know it's like it's not super obvious how this works, but there is this way. And something to keep in mind is the switch only works for page components or components of the page directory to export this constant query. And here I'm just basically copying and pasting what I what I could have assembled in graphical and then sort of like works like an agency. It passes this data proff to your component that you can then the structure into whatever you do, do whatever you you want and use their component. And that's pretty much and then you get the stuff in your site and that's pretty much it. A super simple. This was the end of my Doctorow's. We're pretty close to the end anyways. Yeah. If I will stick around in the virtual room after the talk. So if you have questions when I talk about Jim Stack or specifically Gaspare or sanity. Yeah. Feel free to stay. Stay around and we'd love to talk to you. Cheers. I'm going to switch to our panel section now with Jonathan. Cool. All right, thanks, guys. And yeah, just apologize to everyone for the bit of a technical glitch. It looks like stage 10 failed us for a minute or so, but kudos to you for keeping things going. Great talks for both you guys. I really enjoyed both both of the topics. So, yeah, I guess if anyone does have any questions, feel free to post them in SLOK or YouTube. And we can just do a couple of quick questions now. But outside of that game, after, as we mentioned, you can look more personally in front and social, whereas you guys are right now, first of all, how are you guys doing? How's how's it been for you guys? What's been happening? We've got summer here in Vancouver. Well, it's my first summer here in Vancouver. I moved here last year, and when I came here, it was winter. I never thought I was going to get this hot Canada. So it's it's a nice surprise, though. So it's it's been good to get the extra sunlight. So it's been really nice, even though we're still inside. But it's really nice. Yeah. Yeah. Definitely enjoying the summer as well. Yeah. No, it's definitely been, it's been helpful with everything. It's been going on to have the nice weather. I know we were talking a little bit yesterday when we were just getting organized about working from home. So I'm just curious to how that's going. You guys. I know day you mentioned that you've actually been working from home now, so this isn't like permanently. Yeah, my company's remote first. We used to have an office before the lockdown, but after we went into lockdown, we decided that we were going to transition into the remote and now we just meet up every other week. So that has been really convenient. We have changed towards more a synchronized dynamic. It's great if your organization has a good level of trust, because I do know some organizations are a little bit more structured and they do want you to check in or or give you an update. Like we do use scrum. We do do scrum loosely. But it's it's always a good balance between being able to work from home and not have a commute, especially now. But there's also the there's also the stress of being in the same place we work and we live. So I would say that it's important to have a separation of the space where you work and on and where the space where you relax. Yeah, for sure. So our team went full of remote since the quarantine and I think we're going to stay remote after. And it's definitely been a huge change for a lot of things the way I work, because now I work on a different schedule. I start at seven a.m. and I finish really early. There's been definitely a really big change, but I've definitely learned it's like a different story when you start it. It's definitely not really enjoyable. But then now I have so much time for like other projects and everything. I guess it just takes a lot of conscious planning, I think something like this. But my experience was just like a lot of really conscious planning and to, you know, how are you just like getting yourself organized, like saying like, I'm going to be at my work space, whatever it is at this time, and figuring out how you how are you going to interact with your coworkers? So, like, we started doing a daily reading thing when we at the specified time every day, which is like a read like engineering or like self-improvement, something book, just kind of like keep in touch and like each other's faces. So, yeah, I feel like it definitely can have like a lot of really positive things, positive impact on your just kind of like out of work life. Only if you put a lot of conscious planning into sort of like how that work life looks like, because at first it was yes, it was more of a nightmare where like you can, like, separate work from home and you feel lazy and there's a couch right there and you can eat all the time. So but if you when you start, like, consciously putting structure and deciding, you know, this is how I'm going to do it, it definitely I personally I felt it free up a lot of space and time for me. Yeah. Like a. Projects in life, including graphic user. Oh, oh, oh, here slightly. Are there any questions at all Reia that's posted that we can chat about and actually Hozier give an idea when the suspense will be more will be finalized. Well, I've been waiting for this. Yeah, but they haven't been having something like a specific date yet, but there has been there has been a lot of events lately since since then, Susan, the announcement date. So it's now there has been improvement, but there hasn't been an official date, right? Yeah, it looks really cool. And I love the the more declarative style of of handling because it's such a common issue of having loading Hanaway cleanly. And you're right, I didn't think about it until you mentioned it, but we do it in a very different way and creative. But it's all very manual. So it really will be really interesting to see when that becomes more finalized, becomes a more like a common approach, like a standardized approach to handling that issue. So, yeah, and I think that another thing that's good to notice is that from from suspense perspective, it doesn't matter what you're loading. So it could be an API request. It could be code or an image and all of that you can synchronize. Now, you're not just going to let the browser flash an image without just without text. You can just define we're going to present this until it's loaded or declaratively, say this piece of the state is going to. Yeah, sorry, sorry about that, but yeah, you could even even assets like fonts and images, those you can coordinate to prevent flashes of unstyled email. And what you were saying about the boundaries was that basically you rap what you want to wait in a suspense boundary so that, like you say, could be anything zikri a whole bunch of little components or images, video or whatever and whatever in that suspense boundary will be hidden behind the loading until everything is ready. Yeah. And you can customize that loading is so in the case of images, you can you can very easily have a thumbnail, a low resolution thumbnail for your loader. And then when the big image is already Bikash, it's going to switch. And like that that effect where the image goes from low risk to the big risk right now, very easy to achieve. Cool. Are there any questions for you? Yeah, I have a couple of questions. So one was about the queries and engraft. Well they're not ask the question and bhagavan or the answer to sort of. Yeah. So I just want to emphasize that again, it's a it's a bit unintuitive that you need to export a constant name query and a page like in the same file as a page component because you're not importing it anywhere. It's kind of like handle by Gosbee Magic and bhajans basically handled by like under the hood. So does that. And there's one question for you say doggers asking if your company is already using suspense in production. I'm started to talk them into it. I'm starting to it looks really sweet. I would love to. Yeah, I would really love to do suspense somewhere for sure, for user experience. I think it adds a lot. I just have a question about what's your experience been like with sort of the GM stock like and because I it seems like a really great way of approaching static sites and flexible but performance. You can just maybe talk about the high level, about what your experience been like, performance improvements, because it is a bit of a different process and the classic react application, right? Well, yeah. Well, let me start with the first part. So, yeah, I've actually working with Jim Stack, quite surprisingly, quite a lot. Again, I started with, like, Jack like a while back building a lot of sites and documentation sites with them. And it is a really, really great set of techniques for precise where kind of like content heavy. You want to add like a lot of like some sort of like editing space or you can edit content. It's so now you can set up web hooks to deploy. Every time you change your content, you can really set up a nice, streamlined system to work with the GM stock. So it's not like there's not. And then it's really seem like there's not a lot of manual work. And yeah, to show it, even if you kind of like to go with the name like GM JavaScript APIs markup right. At kind of outgrew its initial definition because it's now it's like all the different programming languages and all the different data sources in all the different templating. So it's kind of definitely like it's active and evolving is just like as a methodology I guess, or like a style. But when it comes to Gadsby. So when I come to like your last part of your question, it actually it's really, really easy to do if you're a web developer to become Gadsby. And I think a lot of people are using Gadsby when they don't really need it because it's reacting. They're familiar with it because if you're really building just like a blog site, there's no you know, there's no, like, functionality with you're not building any user interaction into it. Maybe you should stick into something that actually generates just some JavaScript, because as I mentioned in my talk, Gadsby does, you know, assemble. Yeah, it does export a Ariake application. Right. So it's fantastic if you want to if you're kind of in the middle space. Right. If you want to let it still be able to do everything that the Riak is able to do. Right. Have dynamic data, loading some dynamic functionality, whatever that might be, with the way it handles things. I think Greg Gadsby is a great choice and obviously it's optimized it's built on the idea of being super fast, super performant. You can definitely see a gasp like a side built in Gadsby. There's no way time when you switch pages, it flows absolutely beautifully. The image plug in, you end up with all your images on the fly and blurs the man. So it basically it's everything you would want to build for a site like that just given to you and you just using it almost like just cutting edge techniques just given to you. And you don't have to worry about stuff. Yeah. So definitely I think Groover websites, I guess besides I worked professionally besides a bunch and I think. Yeah, like if you, if you, if you're building something that requires some dynamic functionality, I think it's a great choice. Every developer tool possible. It's a great answer that we use Gosbee in my workplace as well, and I've really enjoyed working with it to cool. Since we're getting 40 a.m. wrap up and then for those who want to hang out and be social, we do head over the front end. So maybe the link for that really you can maybe post that in the event channel looks like for those who I know, it's a part of my trip already, but I'm turning social over a bunch of different video group chats. And if you want to of a beer, you want to talk about JavaScript Gatsby, you want to talk about suspense Mozi And you'll be there as one of the bunch others And I hope everyone has a great end of July and August. Thanks for joining us tonight. See you guys. Thanks guys.