What is Nullstack and why should React developers migrate to it?

Bruno Leonardo Michels
3 min readMar 17, 2023

--

Nullstack is a feature-driven full stack JavaScript framework that helps you build isomorphic applications and stay focused on shipping products to production. It connects a UI layer with state management to microservices in the same component using pure JavaScript classes. You write the backend and frontend of a feature in a single isomorphic component and let the framework decide where the code should run.

If you are a React developer, you might be wondering what are the benefits of migrating to Nullstack. Here are some reasons why you should consider it:

  • No more glue code: You don’t need to create APIs manually or use third-party libraries for data fetching, routing, authentication, etc. Nullstack handles all these aspects for you automatically. You write features for products, not glue code for frameworks.
  • Optimized for performance: Nullstack delivers SEO-ready HTML optimized for the first render of your route in a single request using local functions with zero JavaScript dependencies in the client bundle. After that, it becomes a single page application (SPA) that fetches JSON from an automatically generated microservice API and updates the application state and DOM accordingly. You get fast SSR and offline PWA out of the box.
  • Easy to read and write: Nullstack components are just plain old JavaScript objects (POJOs). You can use JavaScript or TypeScript as it is supposed to be, without any special syntax or boilerplate. JSX tags follow the HTML standard, routes are simple attributes you can assign to any tag, and links are just anchor tags. You already know Nullstack if you know HTML and JavaScript.
  • DX with batteries included: Nullstack has a lot of out of the box shortcuts that were extracted out of repeating patterns in real projects instead of architecture books. For example, you can use two-way bindings, object events, context variables, hooks, plugins, etc. without any extra configuration or installation.
  • TypeScript: Nullstack supports TypeScript natively. You can use it by renaming your `.njs` or `.jsx` files to `.nts` or `.tsx` respectively. Nullstack will compile them with Babel and preserve the types for your editor or IDE. You can use it by adding -ts or --typescript flag when creating a new project with npx create-nullstack-app.
  • Tailwind: Nullstack supports Tailwind natively. You can use it by adding -tw or --tailwind flag when creating a new project with npx create-nullstack-app. This will generate a project template with Tailwind already configured.

Nullstack is not just another framework; it’s a new way of thinking about web development that focuses on features instead of layers. It’s designed to make your life easier as a developer and your users happier as customers.

People are trying to do it, but Nullstack already did 😎

AI already knows about Nullstack, better than any of us probably!

import { Nullstack } from 'nullstack';

class WaifuList extends Nullstack {

waifus = [];

async initiate() {
this.waifus = await this.getWaifus();
}

static async getWaifus({ database }) {
return database.query("SELECT * FROM WAIFUS");
}

render() {
return (
<div>
<h1>My Waifus</h1>
<ul>
{this.waifus.map(waifu => (
<li>{waifu.name}</li>
))}
</ul>
</div>
);
}
}

If you want to learn more about Nullstack or try it out yourself, visit https://nullstack.app/ or follow them on Twitter @nullstackapp.

--

--