Build Fullstack Apps in Record Time with Blitz.js

Rate this content
Bookmark

Blitz.js is the Fullstack React Framework. It's heavily inspired Ru on Rails and is focused on making you as productive as possible. It's built on Next.js and adds all the missing pieces you need for building a fullstack app with a database. By far the biggest innovation of Blitz is the new "Zero-API" data layer that abstracts away the API so you don't have to mess with REST or GraphQL APIs! Brandon will cover all the important parts, so you'll know if you might want to use Blitz or not.

This talk has been presented at JSNation Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

The creator of Blitz.js was motivated by the desire to simplify the complexity involved in building full stack React apps, particularly frustrations related to APIs, multiple servers, and excessive configuration.

Blitz.js is designed to be monolithic, meaning it integrates all parts of the app into a single cohesive unit, and it aims to eliminate the traditional API layer to simplify development and enhance productivity.

Blitz.js simplifies development by adopting a monolithic architecture and removing the API layer, allowing developers to focus more on building features rather than managing complexity.

The architectural approach of Blitz.js was inspired by Ruby on Rails, which is also monolithic and known for its productivity benefits. The creator of Blitz.js wanted to replicate these benefits in a React framework.

Blitz.js handles data management by allowing direct interactions between the server-side functions and the front-end components, thereby bypassing the traditional API layer and simplifying the process.

The initial prototype of Blitz.js was server-side rendered, inspired by techniques used in Next.js, specifically the 'get server-side props' feature.

The vision for Blitz.js evolved through discussions among early contributors and practical experimentation, ultimately leading to the innovative idea of importing server functions directly into React components.

Brandon Bayer
Brandon Bayer
32 min
10 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The speaker wanted to create the best developer experience for full stack React apps by simplifying the development process and getting rid of the API layer. They were inspired by server-side rendering in Ruby on Rails and wanted to achieve something similar with React. They announced Blitz with a server-side rendered prototype but wanted to improve it. They envisioned a simple solution where a server function talks directly to the database and is imported into the front-end code, with the framework handling the API layer.

1. Building the Best Developer Experience

Short description:

I wanted to build the best possible developer experience for full stack react apps. It had to be a monolithic, simplifying the development process by having one thing to think about, build, and deploy. I also wanted to get rid of the API layer in React apps, which often adds complexity and slows down development. I was inspired by server-side rendering in Ruby on Rails and wanted to achieve something similar with React. I announced Blitz with an initial server-side rendered prototype, but I wasn't satisfied. I wanted to love what I used in my day-to-day work. So I envisioned a simple solution of a function on the server that talks to the database, imported directly into the front-end code. The framework would handle the API layer, making development easier for the user.

Hello, hello. I'm so excited to show you blitz.js. Let's get into it. I was building react apps for a number of years, full stack react apps, 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 ended and I became increasingly frustrated with all the complexity. Things like rest APIs, graphQL APIs, multiple servers, deployments, state management, configuration, libraries, tooling, everything, just anything that got in the way of me building features slowly depleted my morale. I really wanted to love full stack development again. I wanted to be extremely productive again. I wanted to focus on building features instead of all this other unnecessary configuration and conglomeration in my app.

So I decided enough was enough and I set out to build the best possible developer experience for full stack react apps. So there were two things that I really wanted to have for this experience. That I was going for number one, it had to be a monolithic. Monolithic means there's one thing to think about, one thing to build, one thing to deploy. It's everything is together and cohesive, and it's just much simpler. I got into web development through Ruby on Rails, which is monolithic. And so I know the productivity benefits that you gain from that. And I wanted to get back to that. Secondly, is I wanted to get rid of the API. The API layer in React apps is one of the biggest sources of complexity, confusion, headache, heartache, just pain. And so I wanted to get rid of that. It's amazing. Like we don't realize how much that API layer slows us down and gets in the way until you don't have it anymore. And then you're like, wow, this is amazing. And so I could, I knew a sense of what that was like because of Ruby on Rails, there's no API, you can talk to your database directly from your view if you want to, not recommended, but you can. And so this was very critical.

But how can you accomplish this with React? At the time, so this was back when I started Blitz. Like 14, 15 months ago, I was thinking how can we do this? The only way I knew was server-side rendering. And that's how Ruby on Rails does it. And so, well, I was like, we could do this. At the time Next.js had just added the get server-side props and it would just seem like that would be a good approach. So when I first announced Blitz, I said, all right, here it is. What it is, I had an initial prototype that was server-side rendered, but I didn't love it, I didn't love it. And that was critical for me. I wanted to, I wanted to love what I'm using on my day, in my day-to-day work, you know? So me and the other early Blitz contributors were hashing this stuff out, talking about what would the architecture look like? Would it be a model view controller? Would it be, what would it be? And one day I was laying on a, laying in a hammock in Thailand, pondering this and I asked myself, what would this look like if it was easy? So, as I sat there dreaming about what could I possibly, what would be easy? I got this picture in my imagination of just a function that runs on the server, that talks to the database and just importing that function directly into my front end code, my react components. And then the framework would magically make that thing work, make actually like put an API layer in there. And, but the user wouldn't have to deal with it. And so I was like, wow, that's a cool idea. I wonder if I can make it work.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

A Glimpse Into the Future of Fullstack Development with Blitz.js
Node Congress 2022Node Congress 2022
32 min
A Glimpse Into the Future of Fullstack Development with Blitz.js
Today's Talk introduced Bleeds.js, a full-stack React framework built on top of Next.js. It eliminates the need for an API layer, allowing server code to run directly from the frontend. The Blitz framework is pivoting towards a framework-agnostic toolkit to bring more people to Bleeds and decouple it from any specific runtime. The new Bleed toolkit will include core features like zero API data layer and authentication, with additional features like JWT authentication and advanced data-aware authorization. The audience showed interest in the Blitz Pivot concept and the ETA for the stable 1.0 release is the end of March.
Blitz.js - The Fullstack React Framework
React Summit 2020React Summit 2020
32 min
Blitz.js - The Fullstack React Framework
Blitz is a framework for building full stack React apps with a monolithic architecture and no API layer. It uses Next.js and Prisma 2 and follows convention over configuration. Authentication and authorization are set up by default, and adding social login is easy. The Blitz community emphasizes inclusivity and welcomes contributions. The future of Blitz includes a stable release cycle and the vision of bringing the Zero API experience to mobile.
How Blitz.js Makes Fullstack Web Development a Breeze
JSNation 2022JSNation 2022
8 min
How Blitz.js Makes Fullstack Web Development a Breeze
Bleach.js is a toolkit designed to make full-stack web development enjoyable. It is built on top of Next.js and includes features like authentication, authorization, Prisma setup, React Query, utilities, recipes, and code scaffolding. The upcoming version, Blitz 2.0, is being worked on. Blitz.js toolkit expands on the core framework with additional features like web sockets, scheduled jobs, mailers integration, and better mobile app support. Visit canary.blitz.js.com for documentation on the new toolkit and blitz.js.com for framework documentation.
The Dawning of a New Age for Fullstack React
React Summit Remote Edition 2021React Summit Remote Edition 2021
34 min
The Dawning of a New Age for Fullstack React
React has evolved over the years, introducing breakthroughs like the declarative component model and React hooks. Create React App and Next.js abstracted away webpack config and routing, improving developer productivity. GraphQL backend as a service platforms made it easy to set up a backend without extensive knowledge. Blitz.js and Redwood.js are game-changing batteries included frameworks for full stack React development. They aim to make backend development easier for front end developers and optimize full stack productivity.

Workshops on related topic

Build Fullstack Apps in Record Time with Blitz.js
React Advanced Conference 2021React Advanced Conference 2021
67 min
Build Fullstack Apps in Record Time with Blitz.js
Workshop
Simon Knott
Simon Knott
Blitz.js is the Fullstack React Framework. It's heavily inspired Ru on Rails and is focused on making you as productive as possible. It's built on Next.js and adds all the missing pieces you need for building a fullstack app with a database. By far the biggest innovation of Blitz is the new "Zero-API" data layer that abstracts away the API so you don't have to mess with REST or GraphQL APIs!

Simon will introduce all the important parts & guide you through getting started with Blitz, so you'll know if you might want to use it or not.