Full-stackJavascript ComponentsFor one-dev armies

Write the back-end and the front-end of a feature in a single component and let the framework decide where the code should run.

Nullstack gives you all the tools you need to stay focused on your business logic.

Nulla-Chan

The Holy Trinityof progressive web apps development

Optimized for the first render

Optimized for the first render

On the first render you'll get SEO ready HTML optimized for the first paint of your route in a single request using local functions with zero javascript dependencies in the client bundle

Fluid PWA experience

Fluid PWA experience

After the content is served and the network is idle Nullstack javascript is loaded, the state of the application is restored through hydration and it becomes a single page application

Lightweight API requests

Lightweight API requests

Subsequent server functions will fetch JSON from an automaticallty generated microservice API, deserialize the response, update the aplication state, and rerender the page out of the box

class Feature extends Nullstack {

  // runs in the server
  static async delete({ database }) {
    database.query("DELETE * FROM WAIFUS");
  }

  // runs in the client
  async confirm() {
    if (confirm("You sure? uwu")) {
      await this.delete();
    }
  }

  // runs wherever is best
  render() {
    return (
      <button onclick={this.confirm}>
        Delete
      </button>
    );
  }
  
}

Stop wasting time glueing code together

A full-stack Lifecycle combined with a feature-driven mindset allows you to write clean and reusable code without the need to create APIs manually.

Stop wasting time glueing code together
class Vanilla extends Nullstack {

  // variables are just variables
  count = 0;

  // mutations reflect in the dom
  increment() {
    this.count++
  }
  
  // 'this' is bound by default
  render() {
    return (
      <button onclick={this.increment}> 
        {this.count}
      </button>
    )
  }

}

Become a programmer less dependent on gimmicks

Your components are just POJOs. Take advantage of the existing ecosystem while you write Javascript as it is supposed to be, and see the result reflected in the dom.

Become a programmer less dependent on gimmicks
class Modern extends Nullstack {

  // params are injected on every function
  renderWaifu({ params }) {
    return (
      <p> Hi i'm {params.name} </p>
    )
  }
  
  // routes can have dynamic segments
  render() {
    return (
      <>
        <Waifu route="/waifus/:name" />
        <a href="/waifus/Nulla">
          NullaChan
        </a>
      </>
    )
  }

}

You already know Nullstack

Routes are simple attributes you can assign to any tag, and links are just 'a' tags. You will find out that Nullstack is just a modern version of your current stack.

You already know Nullstack
class Batteries extends Nullstack {

  // variables can be bound to the dom
  name = 'Nulla-Chan';
  isWaifu = true;
  
  render() {
    // preparing an object event
    const isWaifu = !this.isWaifu;

    // events are prevented by default
    return (
      <form>
        <input bind={this.name} />
        <button onclick={{isWaifu}}>
          Toggle Waifu
        </button>
      </form>
    )
  }

}

All the tools you need speak the same language

Most chores are very repetitive. Save your energy for the real challenges using the shortcuts we created, like object events and two-way bindings.

All the tools you need speak the same language

Learn with our Dweebs Experts

Full-stack with Nullstack
Open Source no Brasil - Ajude a traduzir o Nullstack
What are Javascript Components?