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.

32 min
10 Jun, 2021

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

Node Congress 2022Node Congress 2022
32 min
A Glimpse Into the Future of Fullstack Development with Blitz.js
Blitz was created as a fullstack React framework, inspired Ru on Rails, and with a goal to make you as productive as possible! It features a ""Zero-API"" data layer abstraction, has authn & authz out of the box and a few more exciting features. However, we recently decided to pivot Blitz to a framework agnostic toolkit, which means a huge and thrilling change for the Blitz community. During this talk, I will introduce the core concepts, talk about the why & how of the pivot, and give you a glimpse of Blitz's future.
You can check the slides for Aleksandra's talk here.
JSNation 2022JSNation 2022
8 min
How Blitz.js Makes Fullstack Web Development a Breeze
Blitz was created as a full-stack React framework, inspired by Ruby on Rails, and with a goal to make you as productive as possible! It features a “”Zero-API”" data layer abstraction, has authn & authz out of the box and a few more exciting features. However, we recently decided to pivot Blitz to a framework agnostic toolkit, which means a huge and thrilling change for the Blitz community. During this talk, I will introduce the core concepts, talk about the why & how of the pivot, and give you a glimpse of Blitz’s future.
React Summit Remote Edition 2021React Summit Remote Edition 2021
34 min
The Dawning of a New Age for Fullstack React
New fullstack frameworks like Blitz.js and RedwoodJS are ushering us into a new era for fullstack development. They are mixing old concepts and ideas with cutting edge technologies to make fullstack developers more productive than ever. Watch this talk to go on a journey through time and get excited about what lies ahead.

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
67 min
Build Fullstack Apps in Record Time with Blitz.js
Workshop
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.