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 late 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. 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.js 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 Bleach.js 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 or Bleach.js or Remix, 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 Bleach 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 building. We had Prisma set up, React Query, some utilities, like for example, to parse your data with Zot, we had recipes, the 0 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 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 initialized 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.

So now let's see how the Blitz 2.0 is gonna look like.

So, firstly, we have Blitz core. It's gonna have CLI, n-variables loading, plugins, middlewares. This is where recipes and some utilities are gonna be. And we'll also have code scaffolding there.

Then we have a framework adapter Blitz.js.next, which is going to export GSP and GSSP functions that you can use to wrap your git static probes and git server side probes in your pages. And it will also have a wrapper for API routes to be able to use Blitz features inside of your API handler's code.

Then we have Auf, 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 ZeroAPI layer. You can configure your query client. It exports React-like 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 Alpha server plugin. 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 Alpha plugin and Blitz RPC plugin.

Okay, so we saw how this 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 your API layer, authentication, authorization, new app templates, the code scaffolding, recipes. But in the toolkit, we have like so many possibilities. And there are so many things that we can start working on. Like 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.

That was a quick intro into Blitz.js. If you want to know more about the toolkit, you can visit canary.blitz.js.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 blitz.js.com. Also, you can check out our repository. It's in Blitz.js organization under Blitz. Thank you a lot.