How Blitz.js Makes Fullstack Web Development a Breeze

Rate this content
Bookmark

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.

8 min
20 Jun, 2022

Video Summary and Transcription

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.

Available in Español

1. Introduction to Bleach.js

Short description:

I'm going to talk today about Bleach.js and how it's making full-stack web development a breeze. The main purpose of Bleach.js was to make full-stack web development as enjoyable as possible. We decided to have a toolkit instead of a framework, so you can use a framework of your choice and some or all of the Bleach.js features. The core of the framework was Next.js, with authentication, authorization, Prisma setup, React Query, utilities, recipes, and code scaffolding. Blitz 2.0 is the next version we're working on.

Hi, thank you everyone for joining. I'm going to talk today about Bleach.js and how it's making full-stack web development a breeze. I'm Aleksandra, the late Bleach.js maintainer. You can find me on Twitter, as Aleksandra says, so if you have any questions after the talk, don't hesitate to send me a message.

I'm going to talk about three things today. What's the Bleach.js goal? Why was it created in the first place? Then I'm going to talk about the Bleach.js framework and the future of Bleach.

So what are the goals? So the main purpose of Bleach.js was to make full-stack web development as enjoyable as possible. We wanted to give you the best developer experience in the world and make you as productive as possible. So with these goals in mind, let's see how do we achieve them. We're going to start with a timeline, like what was happening during the Bleach.js development, how it started, and where it's going. So in February 2020, Bleach.js was created by Brandon with a huge help of the community. Then over the next few months, we got like tons of positive feedback, like people loved it, people said that it's making them like really productive. And it also reached 11,000 GitHub stars. Last year, in 2021, we decided to fork Next.js because we wanted to be more flexible and hook some Bleach.js code into the Next.js code. Unfortunately, we weren't able to move as fast as we wanted, and the weekly downloads kind of started to decline. So then we started thinking like, what can we do about it? How can we bring Bleach.js to even more people? And how can we move faster than we did before? That's when we decided to, instead of having a framework, we can have like a toolkit. And instead of having you decide whether to use Bleach.js or Next or Bleach.js or Remix, you can use a framework of your choice and some or all of the Bleach.js features. We started working on that early this year and in April, during React Miami. Brandon for the first time announced the Bleach 2.0 alpha.

So let's talk for a bit about the framework, how it looked like. So the core of the framework was Next.js and then we had like authentication and authorization building. We had Prisma set up, React Query, some utilities, like for example, to parse your data with Zot, we had recipes, the 0 API layer, which eliminates the need for using Fetch API. You can import your server code directly to your front-end components. We had code scaffolding and we had like the App Code so you can run blitz new and the new app is generated for you. This is how it looks like. You can run Blitz new, my new app, and then we initialized the new project, we initialize the database, and you can start developing. This is how it looks like just after the new command. You have a new project, you have the authentication and authorization already there. You can sign up and then log in and start using your application.

So now let's see how the Blitz 2.0 is gonna look like.

2. Overview of Blitz.js Toolkit

Short description:

Blitz core includes CLI, n-variables loading, plugins, middlewares, code scaffolding, and more. Blitz.js.next provides GSP and GSSP functions for git static probes and server side probes. Auf offers authentication, authorization, passport adapter, and ZeroAPI plugin. The toolkit includes all framework features and adds possibilities like web sockets, scheduled jobs, mailers integration, and better mobile app support. Visit canary.blitz.js.com for new toolkit documentation and blitz.js.com for the framework documentation.

So, firstly, we have Blitz core. It's gonna have CLI, n-variables loading, plugins, middlewares. This is where recipes and some utilities are gonna be. And we'll also have code scaffolding there.

Then we have a framework adapter Blitz.js.next, which is going to export GSP and GSSP functions that you can use to wrap your git static probes and git server side probes in your pages. And it will also have a wrapper for API routes to be able to use Blitz features inside of your API handler's code.

Then we have Auf, which has the same authentication and authorization that Blitz framework had. It also has a passport adapter for third party authentication and configurable session storage. We also have the plugin for ZeroAPI layer. You can configure your query client. It exports React-like functions like useQuery and useMutation that you can use for Blitz.js resolvers.

So you can start with installing the Alpha version and then running Blitz new. This is the server setup. So in Blitz server TS, you declare what plugins you want to use. In this example, I'm using Alpha server plugin. On the client, you do almost the same. You declare what plugins you want to use on the client. So in the example on the screen, you can see that there is Alpha plugin and Blitz RPC plugin.

Okay, so we saw how this setup looks like. So let's compare the Blitz framework and the new toolkit. So all of the features that were there in the framework are also going to be in the toolkit, which is your API layer, authentication, authorization, new app templates, the code scaffolding, recipes. But in the toolkit, we have like so many possibilities. And there are so many things that we can start working on. Like we can handle web sockets, like Chrome scheduled jobs, job queues, some mailers integration, billing integration, maybe even GraphQL data layer. And we can also add better support for mobile app development.

That was a quick intro into Blitz.js. If you want to know more about the toolkit, you can visit canary.blitz.js.com website. It has all the documentation for the new toolkit. And if you want to check out the old documentation for the framework, you can visit blitz.js.com. Also, you can check out our repository. It's in Blitz.js organization under Blitz. Thank you a lot.

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

React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.

Workshops on related topic

JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Fastify is an HTTP framework for Node.js that focuses on providing a good developer experience without compromising on performance metrics. What makes Fastify special are not its technical details, but its community which is wide open for contributions of any kind. Part of the secret sauce is Fastify plugin architecture that enabled developers to write more than a hundred plugins.This hands-on workshop is structured around a series of exercises that covers from basics "hello world", to how to structure a project, perform database access and authentication.

https://github.com/nearform/the-fastify-workshop
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships
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.
React Advanced Conference 2022React Advanced Conference 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
WorkshopFree
Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.You will know:- Get started with the hello-world template on StackBlitz- File-based routing to create a /products/example route- Dynamic routing /products/:handle- Hit the Storefront API with GraphQL- Move the query into the Hydrogen app- Update the query to fetch a product by handle- Display title, price, image & description.- Tailwind styling- Variant picker and buy now button- Bonus if there’s time: Collections page
Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.