Our CI/CD Learning Tool is out. Have a look! Upvote now on Product Hunt -->

Back to the list
Brandon Bayer
Episode 42 - August 17, 2021

Brandon Bayer on Blitz.js, the fullstack framework for React

Featuring Brandon Bayer, developer, Blitz.js creator, and founder of Flightcontrol
Apple Podcasts Google Podcasts Spotify

Brandon Bayer talks about his creation, Blitz.js, a Next.js fork and a fullstack, batteries-included framework for React. In this episode, we talk about the inspiration for the project, the challenges along the way and what’s planned for this great framework’s future. Listen to the episode now.

🎧 Key Takeaways

  • What is Blitz.js and how it relates to React.
  • JavaScript or TypeScript, which is best?
  • When is Blitz 1.0 coming out.
  • What features are planned for the future.

Listen to our entire conversation above, and check out my favorite parts in the episode highlights!

You can also get Semaphore Uncut on Apple PodcastsSpotifyGoogle PodcastsStitcher, and more.

Like this episode? Be sure to leave a ⭐️⭐️⭐️⭐️⭐️ review on the podcast player of your choice and share it with your friends.

Edited Transcript

Darko (00:02): Hello, and welcome to Semaphore Uncut a podcast for developers about building great products. Today, I’m excited to welcome Brandon Bayer. Brandon, thank you so much for joining us. So please just go ahead and introduce yourself.

Brandon Bayer (00:17): So I’m Brandon, I’m the creator of Blitz.js, And I went to college for electrical engineering. That’s what my dad was, and I was like, “Okay, this seems cool.” But in the process of those courses, I took a couple of software classes, and I was like, “Whoa, this is amazing.” And so I got a job as an intern doing the software engineering, but it was very low levels, embedded software, programming microcontrollers, and construction lasers. I eventually took a Bootcamp and learned Ruby on Rails and that got me into web programming. And so then I quit my job to do consulting, and I’ve been an independent consultant for almost four years now. And then last year, I guess that’d be about 15 months ago, I created Blitz.js. That’s taken most of my time over the past year.

What is Blitz.js?

Darko (01:15): Great. And for our listeners who are not familiar with Blitz.js yet, can you give us a brief intro of what it is, and what you’re aiming to be?

Brandon (01:25): So Blitz is a fullstack framework for React. The idea is to have the same type of experience like Ruby on Rails or Laravel where it’s batteries included fullstack framework that has everything you need end-to-end from the user interface all the way to the database and background processing. Blitz is built on top of Next.js, so you have the same kind of standard experience as Next.js, but then so much more around it that’s suited for building a full-stack app.

Brandon (02:43): There’s a cycle that happens in the technology of bundling and unbundling. And you go through this phase where everything becomes unbundled, like React was kind of the start of that, where you just have to piece together your entire stack, you pick, React for the library and then something else for CSS and something else for everything else. And so that’s kind of the unbundling. And then there’s a cycle of bundling where everything kind of brings together in a really nice user experience. But then it kind of goes to some more unbundling, after that. And so Blitz fits in that phase of bundling where we’re bringing everything together into a really nice user experience.

Blitz.js Features

Darko (04:41): We share the part of the history around Ruby on Rails. And I remember that ActiveRecord was a big piece of it, of a user experience that they provided. And I saw that you also invested heavily in that layer, but it is actually a bit different layer, which also kind of eliminates needs for writing the APIs manually, which is very useful. It sounds very interesting, although I haven’t played with it, so can you give us an intro on that?

Brandon (05:08): There’s two things here. So the first thing is the ORM layer. And for that we use Prisma. And Prisma is like a next-generation ORM. It’s more like a query builder in subsistence. It’s not, class-based, it’s not object-oriented. So it’s a lot different than Active Record in that respect, but it’s fully typed via TypeScript. And so you define your schema and a GraphQL syntax, and then Prisma will handle your migrations declaratively, and then it’ll generate a fully typed database client. And so it’s really nice to use.

Brandon (05:56): The second piece that you have to have with any type of client-side rendered app, right? Like with React, Vue, or whatever is you have to have some type of API to connect your back-end to your front-end.

Brandon (06:37): One day I was laying in a hammock in Thailand thinking about this, and I asked myself, “What would it look like if it was easy?” And so, as I was thinking about that, I just kind of have this picture in my imagination of writing code that runs on the server and then importing that code directly into your React component. And it would just work, magically, without doing any fetching or API… like request-response objects, all that stuff. It would just work, right?

Brandon (07:06): “Well, that’s really cool, let’s see if I can figure it out, see if we can make it work.” And we actually did. And so what happens is we abstract the API layer into a compile step. So as a developer, you don’t have to worry about the API. You just write code that runs on a server. You import that function directly into your component, and then just like a local function import, but then a compile-time, we swap that out with an API call. And so it makes for this super productive experience where you get that dynamic client side rendering and everything you want there, but without managing a Rest or GraphQL API.

Testing Blitz.js

Darko (09:07): You mentioned that Blitz.js comes with batteries included. And what are the choices that you have made? What are you offering, if I start with Blitz.js. What I will have to use to test it?

Brandon (09:37): And we have Jest installed and set up by default. So currently there’s basically no integration between Jest and Blitz itself, but we just set everything up for you. And we’re kind of looking at ways that we can improve that experience even further. But right now you still get a really awesome starting point. So you have router mocks and provider mocks and everything already set up for you. And so it’s easy to just start writing tests.

Brandon (10:23): I personally believe that most of your tests should be full end-to-end test. Only doing unit tests for complex business logic. And so I’m a big fan of using Cypress or Playwright for just doing full end-to-end tasks. Exactly like your user uses the app.

Blitz.js add everything that Next.js is missing

Darko (10:42): What did you find the hardest in the journey so far?

Brandon (11:19): Dealing with NPM, weird NPM issues. It’s so annoying, so you have NPM and Yarn and different versions, and then things like NPM version seven comes along and totally changes how peer dependencies work. That has all been a nightmare. It’s just like, “Oh, another one of these issues.”

Brandon (11:39): But another interesting thing is sort of the tension between Next.js and Blitz and originally Blitz was… We kind of built our own sort of compiler that would take your Blitz code and compile it into a valid Next.js app and then run that with just regular Next.js.

Brandon (12:11): So what we ended up doing is just forking Next.js. Now we’re getting rid of our custom compiler, and we’re moving all of our custom logic into Next.js core. It’s taken a fair amount of time to make that migration, but it’s going to result in just so much nicer experience for our users. We’re still keeping up to date with Next.js. We’re planning on staying up to date with them, for the foreseeable future.

Brandon (12:53): I think definitely one of the best decisions that we made is to build on top of Next.js, because a lot of people love it, and now Blitz just adds everything that Next.js was missing, that fixes everything they were frustrated about. And so I think it’s just going to be really healthy for the entire ecosystem.

When is version 1.0 coming?

Darko (13:44): And can you give us your perspective on the current state of project? What is in the stack right now, if someone tomorrow starts building on it and what you are seeing are the first next steps that you would also love to see included, but are not around just yet.

Brandon (13:59): Currently in Beta status. And we’ve been there since February or March of this year, so almost like four or five months, I think, so a lot of people are building production apps already running apps in production. A lot of people have been running production apps since the Alpha stages, which is funny, but the main next steps for 1.0, we’re trying to do as soon as we can, is just getting rid of this custom compiler approach and moving everything into the fork. And then after that, we don’t really have a well-defined plan. It’s kind of up to whatever people want, whatever users want, our community, but definitely one big thing we’ll be working on after 1.0 is better mobile app integrations.

Brandon (14:50): Then the other thing we want to pursue is having the same zero API approach with React Native. If you have your Blitz app and a monorepo and you have your React Native app in that same repo, and then you can just import your Blitz backend code directly into your React Native components, and then we’ll just compile away into API layer, same as the web. And so that’s kind of the dream we’re going for.

JavaScript or TypeScript?

Darko (18:58): Great. If you would be answering now the world of web development, what advice would you give yourself in terms of like JavaScript and TypeScript?

Brandon (19:08): You want to learn as many fundamentals of the language as you can, I would say, of JavaScript and TypeScript. TypeScript is really great, because it has some learning curve, but it makes long-term maintenance and refactoring things so much easier. And I think it helps you kind of reason about your code too, kind of forces you to write the types of… what types are coming into this function. And I think it’s good to learn full-stack stuff. Even if you want to focus on frontend or backend, it’s really good to know both sides and be able to understand how did they do databases work, how to read and write from a database, how to do CSS. And it’s good to have some general knowledge about everything, even if you don’t specialize, even if you’re going to specialize in one thing.

How to get started with Blitz.js?

Darko (19:54): Would you advise someone to wait for a 1.2 or going straight away and they will not regret the 1.0 release and conversion and so on.

Brandon (20:21): Just go straight away. There’s no plan breaking changes, although there’s a few minor ones possible, but yeah, it’s a good time to start building an app with Blitz. And the best way to do that is just install Blitz globally. So like npm install blitz and then run, blitz new myapp and give it your app name. And that will generate a full, basic application for you. And there’s a lot of files in there, so don’t be overwhelmed by it. But we’re optimizing for building a real production application, not just very simple, like, wow, this is so simple, like first impression wild thing, but then once you actually need to do something, you have to go look up a ton of docs and copy and paste stuff. So we just give you everything that you’re going to want by default. That also includes user sign up, log in, and log out is already set up for you with a new app. And so we have authentication built in, authorization, it’s all in there ready to go. But go to Blitzjs.com for all the documentation. So we have a lot of documentation there, that’ll really help.

Brandon (22:15): We have a blitz generate command, so it’s very similar to Rails Generate, and it’ll generate either to some code or all of the code you need for an end to end feature. So you can run Blitz Generate All Project and then pass in the model names, like name:string active:boolean. And it’ll generate your database model. It’ll generate all your Blitz queries and mutations and your pages and a form component for that. So you can just start it and then you can already have all your basic CRUD operations set up for you.

Darko (22:49): Thank you, Brandon. It seems to be a very interesting product. I’m looking forward to seeing your next couple of years. How adoption will go, and we will sure link to Blitz.js. So I hope that 1.2 will be out soon and good luck with the project.

Brandon (23:07): Thank you. Well, one thing to all of you listening, Blitz is open source, and so we love contributors. We have a how to contribute guide in our documentation that goes through how to clone the repo and then how to contribute or how to fix things. So we’ll just love contributions in any way, even if it’s just answering questions and our discord. And so we’d love to have you involved in some way, and then also last, but not least, if you want free Blitz.js stickers go to Blitzjs.com/stickers and enter your address in there and then we will send you three free stickers.

Meet the host

Darko Fabijan

Darko, co-founder of Semaphore, enjoys breaking new ground and exploring tools and ideas that improve developer lives. He enjoys finding the best technical solutions with his engineering team at Semaphore. In his spare time, you’ll find him cooking, hiking and gardening indoors.

twitter logolinkedin logo