JS Nation

JSNation 2022

How Blitz.js Makes Fullstack Web Development a Breeze

Hi, thank you everyone for joining. I'm going to talk today about Bleach.js and how it's making full stack web development a breeze. I'm Aleksandra, the lead Bleach.js maintainer. You can find me on Twitter as Aleksandra says, so if you have any questions after the talk, don't hesitate to send me a message. I'm going to talk about three things today. Like, what's the Bleach.js goal? Why was it created in the first place? Then I'm going to talk about the Bleach.js framework and the future of Bleach. So, what are the goals? So, the main purpose of Bleach was to make full stack web development as enjoyable as possible. We wanted to give you the best developer experience in the world and make you as productive as possible. So, with these goals in mind, let's see how do we achieve them. We're going to start with a timeline, like what was happening during the Bleach.js development, how it started and where it's going. So, in February 2020, Bleach.js was created by Brandon with a huge help of the community. Then over the next few months, we got like tons of positive feedback, like people loved it, people said that it's making them like really productive, and it also reached 11,000 GitHub stars. Last year, in 2021, we decided to fork Next.js because we wanted to be more flexible and hook some Bleach.js code into the Next.js code. Unfortunately, we weren't able to move as fast as we wanted, and the weekly downloads kind of started to decline. So, then we started thinking, like, what can we do about it? How can we bring Blitz to even more people? And how can we move faster than we did before? That's when we decided to, instead of having a framework, we can have like a toolkit. And instead of having you decide whether to use Bleach.js or Next.js or Bleach.js or Remix.js, you can use a framework of your choice and some or all of the Bleach.js features. We started working on that early this year, and in April, during React Miami, Brandon, for the first time, announced the Blitz 2.0 alpha. So, let's talk for a bit about the framework, how it looked like. So, the core of the framework was Next.js, and then we had like authentication and authorization built in. We had Prisma set up, React Query, some utilities, like, for example, to parse your data with Zoid. We had recipes, the zero API layer, which eliminates the need for using Fetch API. You can import your server code directly to your front-end components. We had code scaffolding, and we had like the app code again, so you can run Blitz new, and the new app is generated for you. This is how it looks like. You can run Blitz new, my new app, and then we initialize the new project, we initialize the database, and you can start developing. This is how it looks like just after the new command. You have a new project, you have the authentication and authorization already there. You can sign up and then log in and start using your application. Now, let's see how the Blitz 2.0 is going to look like. Firstly, we have Blitz core. It's going to have like CLI, n-variables, loading, plugins, middlewares. This is where recipes and some utilities are going to be, and we'll also have code scaffolding there. Then we have like a framework adapter, Blitz.js Next, which is going to export GSP and GSSP functions that you can use to wrap your Git static props and Git server-side props in your pages. And it will also have like a wrapper for API routes to be able to use Blitz features inside of your API handler's code. Then we have Auth, which has the same authentication and authorization that Blitz framework had. It also has a passport adapter for third-party authentication and configurable session storage. We also have the plugin for zero API layer. You can configure your query client. It exports like React functions like useQuery and useMutation that you can use for Blitz.js resolvers. So you can start with installing the alpha version and then running Blitz new. This is the server setup. So in Blitz server TS, you declare what plugins you want to use. In this example, I'm using AuthServerPlugin. On the client, you do almost the same. You declare what plugins you want to use on the client. So in the example on the screen, you can see that there is AuthPlugin and BlitzRPCPlugin. So we saw how the setup looks like. So let's compare the Blitz framework and the new toolkit. So all of the features that were there in the framework are also going to be in the toolkit, which is zero API layer, authentication, authorization, new app templates, the code scaffolding, recipes. But in the toolkit, we have so many possibilities. And there are so many things that we can start working on. We can handle web sockets like Chrome, scheduled jobs, job queues, some mailers integration, billing integration, maybe even GraphQL data layer. And we can also add better support for mobile app development. So that was a quick intro into Blitz.js. And if you want to know more about the toolkit, you can visit canary.blitzjs.com website. It has all the documentation for the new toolkit. And if you want to check out the old documentation for the framework, you can visit blitzjs.com. Also you can check out our repository. It's in Blitz.js organization under Blitz. Thank you a lot. I hope you enjoyed the conference. And don't hesitate to reach out if you have questions.


#blitz.js