You already know that I'm pretty frustrated with the way we do things on the web. In order to fetch a list of things and display them as rectangles on a webpage, we need to jump through 1938137 hoops. What is this, Circus Charlie? Anyone? Remember that game??? I'm old 😭

 

The problem with our current stack

The process of making a web app is so unnecessarily complex and so many people are going for a SPA even when it's not needed. GraphQL makes working with an API easy, but it still involves building that API, and writing a lot of boilerplate. You might not mind all of that until someone removes the layer for you. And that's Blitz.

 

"Damn, I just want to fetch some data directly from the database and display it!" - You, probably

 

"You can do that with PHP and raw SQL..." - Someone on HN, probably

 

"LMAO" - You

 

"Well, why don't you use Rails?" - Someone on Reddit, probably

 

"I only know JavaScript and I want to use React" - You, probably

 

"Welp, too bad there's nothing similar to Rails in the React world..." - Someone on Twitter, probably

 

"Hey, what if there was a Fullstack React framework, similar to Ruby on Rails?" - Blitz, if it could talk, probably

 

Meteor crying in the corner, probably

 

What is Blitz?

Blitz "removes" the API layer in a very clever way so you can directly call functions from your backend, which completely changes the game. Actually, this is not the best way to describe what it does, so you better read the docs. TL;DR: it's magic.

 

What I like about Blitz is that it builds on top of already solid solutions like Next.js, react-query, and Prisma. I already used them in other projects, but I love the way Blitz glues all of them together and it magically works.

 

The ability to get whatever you want directly from the database, with the nicely typed API from Prisma, and then just display it, is a pretty wonderful experience. It makes me feel that for years we had no frickin' clue why we did things the way we did them until finally someone realized that we don't have to do them that way.

 

When generating a new Blitz app you get all the authentication boilerplate generated for you and I all I have to say is fucking finally. It's 2020, I don't want to build the authentication layer again, and again, and again, and again. Hey frameworks, just let me get me the current user with const user = useCurrentUser() and don't bother me with anything else.

 

I can't even describe how fast you can ship a product when there is no API layer and boilerplate involved.

 

There are similar frameworks to Blitz which go in a completely different direction by rebuilding most of the stack. Personally, I'm tired of the React community constantly reinventing things that don't need reinventing. Next.js is already amazing, so just imagine how much code we'd be able to reuse if we all agree on using it by default. More reusing, less reinventing, please.

 

Launching a production app in a few days

I already did two streams with Brandon, the creator of Blitz, and I couldn't wait to actually try Blitz on a real project. The problem is, I needed a real project because I didn't want to waste my time on some demo gibberish which is never going to see the light of day.

 

I got frustrated by the app that I was using for writing changelogs for Sizzy, so I decided to sit down and write my own tool with some more advanced features that will make the process easier.

 

I livestreamed the entire process from "hello world" to deployment and I couldn't believe that it only took me only 5 days.

 

Actually, the majority of the work was done in only 2 days, which is crazy. Someone commented "my boss shouldn't see this" on the stream and the credit for that goes to Blitz. You can definitely ship faster than a team of people who would argue about the modeling of the API, raw SQL queries, and whether to use redux-saga or RxJS for fetching the data.

 

Hey Kitze, if you finished most of the things in 2 days, why did it take you 5 days?

 

Great question, reader.

 

• Day 3: Polishing the design and adding extra features
• Day 4: Deployment. I deployed the database to DigitalOcean without a problem, but I had a problem with deploying the Blitz app to Vercel. Turns out, the problem wasn't with Blitz or Vercel and it was ... TypeScript. Yup, I couldn't deploy the app because TS was being a pain in the ass, and the Vercel logs didn't show that. I had to dive deep, find the problematic files, and fix everything, so that took most of the day.
• Day 5: CSS. Of course. You can put as many layers as you want on top of CSS, it's still CSS at the end of the day. I literally lost an entire day on centering things and making sure the fixed header and sticky footer layouts work in Safari on iOS. Oh, by the way, fuck Safari. We finally got rid of the pain that's IE pain, but Safari is here to replace it.

What did I build?

I built Fungarzione - The app for keeping your users in the loop and I wrote a separate article about it.

 

Conclusion on Blitz

I still have to explore Blitz a bit more to figure out all the downsides, but I think that I'd definitely pick Blitz for most of my future apps unless I have a really specific reason not to. Brandon said there will be a way to reuse the same Blitz client in React Native apps, so you won't miss the actual API layer.