Blitz.js: A new Full-Stack React framework on the horizon

When I heard about Blitz.js at our local JavaScript conference, it immediately caught my attention. The speaker’s first sentence was: “Blitz.js is a full stack JavaScript framework”, and I was like “Is Blitz.js the JavaScript framework I have been waiting for?”.

Since then, I have watched several videos on Blitz.js and started to play around with it. In this blog post, I will give you a brief overview of Blitz.js and its amazing features.

What is Blitz.js?

Blitz.js is a full-stack framework for React. It is the equivalent of Ruby on Rails but for JavaScript and React. Blitz.js is built on top of Next.js. Thus, you get everything excellent about Next.js plus everything else you need for building a full-stack app.

How does Blitz.js work?

Fundamentally it works the same as Next.js. However, Blitz adds a new “Zero-API” data layer, which abstracts the API layer into a compile step. As a developer, you do not need to mess with REST or GraphQL APIs. Blitz lets you write functions that run on the server, import them into your React components, and they will work like magic.

Importing functions from server-side into React components

Blitz.js main features

Blitz.js comes with all the boring stuff already configured for you. I would highlight the folder structure, ESLint for linting, Prettier for code formatting, Husky for githooks, Jest for testing. With all that in mind, it really gives you a fun experience working with it.

Let’s see the main features and goodies of Blitz.js:

It is designed as a monolithic foundation and comes with a bunch of CLI tooling built-in for code scaffolding.

Blitz.js also comes with Prisma 2 for DB migrations and access. Prisma is a next-generation object-relational mapper (ORM) for Node.js and TypeScript. It simplifies connection, querying, migrations, and data modeling. The default database of Blitz is SQLite, although you can configure it to use other databases like MongoDB, MySQL, PostgreSQL, SQLServer, etc.

Blitz.js has authentication and authorization already baked in. It provides user sign-up, log-in, log-out, password reset, and email confirmation by default. Blitz has built-in session management that works with email/password auth and with any third-party providers. How cool is that!

The framework has been fully built with Typescript, and the Blitz data layer is end-to-end typesafe. All types are completely static without needing a separate type generation process.

It also takes on a concept introduced by Gatsby called “Recipes“. Blitz.js lends a hand to developers by simplifying the integration of third-party dependencies using just a single command. You can find a list of all possible recipes over here, you can create your own recipe too.

Conclusion

Blitz.js is a super powerful framework. How it made everything simple for us is quite amazing. Go to the Blitz.js documentation to learn more about Blitz and take it for a test drive. Creator of Blitz.js, Brandon Bayer said there will be a way to reuse the same Blitz client in React Native apps, so you will not miss the actual API layer.

To sum up, I think it is not really fully ready for absolutely any type of project but it could be there one day. Happy to see Blitz.js grow and evolve.