Video details

Blitz JS - The Fullstack React Framework | Brandon Bayer


Brandon Bayer

Blitz is a hyper productive framework for building fullstack React apps. You'll learn why I created Blitz, it's advantages and disadvantages, how it makes you so productive, and for what cases you should consider using Blitz.


Hello, everyone. It's so exciting to kick off the second day of reactor summit, we had awesome talks yesterday and I'm excited to talk this morning about blitz and building full stack react apps. So let's get into it. I was building full stock react apps for a few years. And I happily put up with the complexity and struggle required to do so, and I did that because I loved building user interfaces with react more than any other way. But the honeymoon and the. And I became increasingly frustrated with the rest, with RockYou, LAPD, Mamak State Tree and a host of other API services and libraries, managing multiple servers, multiple deployments, et cetera. Anything that got in the way of me building features slowly depleted my morale. I really wanted to love full stack web development again. I wanted to be extremely productive again, a building, full stack ups. I wanted to focus on building features instead of mostly marshalling data all around the universe, so I decided enough was enough and I set out to build the best possible developer experience for full stack that apps. Well, there there was two fundamental things that I had to have in place to achieve the developer experience that I wanted. No one had to be monolithic and a monolith means that there's only one thing, everything is all together in one thing. So there's only one thing to develop. There's only one thing to deploy. There's only one thing to reason about as you think about your entire architecture. And a monolith is just as really awesome, and my experience with Ruby on rails, I came to to really appreciate the benefits of the other monolith. Secondly is no API, the API layer in reactor is the biggest source of complexity, headache, heartache, holes in the wall, Walburn and that's too much is is it slows you down more than you would think about. And I knew that I had to go somehow. We'll get Brian in. Sounds great, but how are we going to do this? Well, does it mean we have to go back to 2004 and the server side rendering? I thought so and I was impressed. I was prepared to embrace that. You know, because I wanted this developer experience without the API so bad that I was willing to go down that route, and in fact, when I first announced that I was working on Blitz, the initial prototype was server side rendered. But the early blitz contributors to myself were trying to figure out what would the architecture of Blitz really look like? We were exploring all sorts of things, model, view, controller, basically everything under the sun. And so one day I was laying in a hammock in Thailand thinking about this. And I asked myself, what would this look like if it was easy? So I thought I thought about that for a bit, and I realized that if it was easy, you could write functions that run on the server and then import them directly into your reactor components and use them directly. So you would you could use them without doing such calls or API endpoints or HTP or any of that. It would just work. And so I was like, wow, wow, that's pretty awesome, like this could be this could be a game changer and turns out it was. OK, so now you know about them, the single biggest defining factor of what blitz's. So let's talk about the second two. You know, I mentioned that I was just frustrated with full stack web development with react. But throughout that entire time, there was one thing that constantly shown through the mess, and that was the next guess. You know, next is such a wonderful framework, it's so fast and flexible and performant and so nice a developer experience and so it was so clear that it was a perfect thing to build on top of and add all the other things that you need for Woolstock Web development. OK, so now we need to wait to talk to the database, and back in February, when I started the Blitz, Prisma two was just coming out in beta and it was just pretty obvious that this was going to be the modern way to access databases. And if you don't know about Khurmatu, it's awesome because you have a really nice schema that you can define and have declarative migrations from that schema. You generate a typescript client from that schema and so you have a fully typed database access and then bomblets that those types can flow all the way down to your front end. So everything is fully typed into it. All right, so those are the three key factors of what Blair says. Let's talk about the seven main fundamental features and principles that define everything else we do. All right, Stack monolithic, I touched on that. One thing I want to mention is that a modern monolith scale is much better than like Ruby on Rails, for example. And that's because you can deploy blitz to a serverless environment, not just a server. You can do both, but if you deploy serverless all your server endpoints or can be independently scalable as their functions. And so the whole scaling thing with a monologue, it's just sort of goes away. So that's really awesome. Secondly, API not required number three, convention over configuration. No. Four Lucia pinions compared to strong opinions that are hard to go against. Number five, easy to start, easy to scale. Number six, stability. And number seven, community overcoached. OK, so let's talk about this API layer a bit and get into what it how we actually do this and how it works. We abstract the API into a compile step. So as you're developing your app, like I mentioned, you don't do any API stuff, you just import the server functions into your front end. And then at compile time we swap that out with an HTTP API. And so you do get client side rendering, but without any of the API headache. And how do you do that and what's up is what we call queers mutations. Now, this has nothing to do with scrappier. We just use the same nomenclature and they're just plain asynchronous JavaScript functions that always run on the server. If you're familiar with Ruby in Rails or Laravel, the controller concept is basically replaced by queries or mutations. Now, of course, you can always add an API to a blitz because there's zero restrictions that we give you, so we're 100 percent compatible with next year and in fact, we have less restrictions than the next test does. So it's you know, you don't have to worry about Blitz getting in your way. All right, so let's look at an architecture diagram here, maybe give you a rough idea of kind of how this all fits together so long, the top is client code along the bottom, a server side code and the purple boxes are a pages react pages. And so you can see that in a single app, you can have a server side rendered page in a client side printed page side by side. And they can use the same server code, so the green boxes at the bottom, a query in a mutation, and both of those pages use the same query and then a build time, this middle layer is inserted automatically for you, which as a Jason HTP API. So all your queries, mutations are exposed that a unique YORO and you can use that directly for mobile apps or third parties or anything else. OK, let's talk about convention over configuration. This means by default, things just work and it doesn't mean no configuration, it just means configuration is optional. So most of the boring stuff is completely done for you out of the box, and this is especially especially going to see a lot of this principle whenever you generate a new app. And because it has so much stuff set up for you, basically all the things that you would set up, you take like the first week or so of a new project and set up all that's done. So we include, yes, let pretty near Just Husky get hugs and a number of other things just already set up for you. Now, the big thing that's really, really awesome is authentication and authorization to set up a new apps by default. So that means when you run blitzing you and your app name and generate a new app, you can immediately sign up and log in as a user. And isn't that amazing? Like who? Like you don't have to ever do authentication stuff for so many projects because you get out of the box with Blitz and then if you want to add social login, we have a passport, that just adapter that you can just drop in on a single file and very easily add in, like, how about the location or any other type of thing that in anything there's a password. Yes. Adapter for. OK, let's get into some code. All right, so this is a sign up mutation that always runs on the server and basically the same thing is what you'll get in and then app by default on this will be generated for you. So you can see we export a default asynchronous a function, and the first argument to that is the arguments to the mutation are yet to the mutation and the second is a context parameter. In this context, parameter is provided by middleware and blitz. And so by default, you have one middleware configured, which is such a middleware and that's built in session management from Blitz. OK, and so inside this mutation, the first thing we're going to do is validate the input and we use a library called Zade that's really awesome for both runtime validation and typescript types. So you're guaranteed to after this line, email and password are both strings and the password is. Has the minimum looks OK and then we're going to hashed password and then we're going to create a user in the database. This object is provided by Prisma to and so you can see how nice it is just to create a user. So to email the password and you get that user back. And then secondly, the last thing we do before returning is to create a new session, which is how you log in and you can stop the other ID rolls. Anything else you need in there to use on the front of. So fairly, fairly simple. Now, how do we use this while you import this direct function into your component? And so here is the sign up form and you can see we import it on the fifth line. I believe we import that function we were just looking at and we pass it to use mentation hook inside the component got. And then we can just use that mutation thing inside the ointment, and so you just call it just a weight, just like a regular function there, and it just all works for you. So super slick. All right, let's look at another one, this is a project query and. So you can see again, we get some inputs and then the context parameter and the first thing we do in this case, let's call it session to authorized, and this is going to ensure that the user logged in at this, not through an error in the error, will propagate all the way to the front end and they will show either a login form if they're not logged in or it'll show an unauthorized page if they don't meet the required rule. And of course, you can customize that whatever you want, but that must be set up. So we find the project, and if it's not, we don't get the project and we throw are not found error, and again, that propagates to the front end the four of warpage. All right, so let's use this thing, we simply import this function over into your component. And inside this project component, the first thing we do is get the parameter from the route. So this is project ideas, a dynamic parameter that you get from the Earth. And then we have a used query hook that you pass that query function. We were just looking at you pass it to use query. And then the second parameter to that is the argument. So where ideas equal to the idea of this route and then you get that back and you just render. Now, one thing to note here is we have concurrent mode enabled and blitz apps by default. And so you're using suspense, which is really awesome. So you can see in this component we don't have this entire Elst. Danso if loading so the loading if errors or the error, if something else shows something, whatever, it's just very simple. So it's a really cool. And then in of the page component toward the bottom half of the screen is you can see we have the suspense component and the fallback for the air. And so the really nice API. Yes, query is built on top of react query and a query provides a ton of awesome stuff that you get by default in here, like caching all your server data cache invalidation, pulling all these sorts of things, really powerful features, and you just get it by default. OK, so how do you get started with Blitz? Well, it's pretty hard. There's only two commands and the first thing is install blitz globally as a key ally. And then secondly, as on blitz neun pass up the name of your app and that's it. And it'll just generate your group for you, install your dependencies and so forth. And then, like I mentioned, you can immediately sign up and log in as a user and it's awesome. All right, let's talk about community over card, so this is one of our foundational principles. People are far more important than anything else, and these are principles that we hold dearly in the Bliss community, but it's also principles that we as a community at large should really embrace and live by. Secondly, we treat every person with dignity and worth, regardless of who they are, what their beliefs. They every person is worthy of dignity and worth. We're all in this together. We all want to we all want to be productive. We all want to have fun in our jobs. And we're all more similar than we are different. So we can and should solve problems together. We have an entire page in our documentation linked here that details how the black community operates, will go through pretty much everything. And you can get a good idea, like if you want to be involved in the black community or not, or you just want to see how things operate, that's a good place to do so. OK, now let's talk about how you can contribute to Blitz, so we need your help, we we love all the help we can get. We have a bunch of features in our Enghelab that are ready to work on, but they just sitting there waiting for somebody to work on them. I'm working mostly full time on Blitz and then doing consulting on the side. So so far I'm doing that. I'm contributing by far the most, but would love anyone else to help in their free time as much as they can. We appreciate any type of contribution, whether it's code documentation, improving documentation, tutorials, videos, blog, post, anything you can think of. Secondly, donations and sponsorships, it is my goal to work full time on Blitz without having to do consulting on the side. And then beyond that, I would love to pay other people to work on Bletch to full time. So I would love any type of donation or sponsorship that you can give us through how there's a there's a button on on our bow. And then secondly, the best place to get started here is this the blistery documentation which is linked to. So this is concludes the end of my presentation, blistery is the best place to go to get started there. You can follow me, Fly-by-wire on Twitter and Blechacz on Twitter as well. And so I would love to answer your questions now and any time later on Twitter. Anything like just reach out, happy to happy to help answer questions and a love for you to try out Blitz and then let me know how it goes. Thank you so much.