Feature-DrivenFull Stack JavaScript Components

Nullstack is a web framework that makes coding fun again.

Write the backend and frontend of a feature in a single isomorphic component with zero boilerplate or glue code.

Get Started
class WaifuCounter extends Nullstack {

  // runs in the server
  static async getWaifus({ database }) {
    const sql = "SELECT COUNT(*) FROM WAIFUS";
    return database.query(sql);
  }

  // runs in the client
  async countWaifus() {
    this.waifus = this.getWaifus()
  }

  // runs wherever is best
  render() {
    return (
      <button onclick={this.countWaifus}>
        Count: {this.waifus}
      </button>
    );
  }

}

Great for the Dev. Great for the Userfrom fast SSR to offline PWA out of the box

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 automatically generated microservice API, deserialize the response, update the aplication state, and rerender the page out of the box

class WaifuCreator extends Nullstack {

  // extracted into a microservice
  static async insertWaifu({ database, name }) {
    const sql = "INSERT INTO waifus (name) VALUES (?)";
    return database.query(sql, name);
  }

  // invokes the microservice
  async create() {
    this.insertWaifu({ name: "Nulla-Chan" })
  }

  // render in the DOM
  render() {
    return (
      <button onclick={this.create}>
        Create Waifu
      </button>
    );
  }
  
}

Never write another API

You write features for products. The compiler extracts your front end code and replaces all static async functions with calls to microservices

Never write another API
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>
    )
  }

}

Easy to read and write

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

Easy to read and write
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 (
      <div class="not-class-name">
        <Waifu route="/waifus/:name" />
        <a href="/waifus/Nulla">
          NullaChan
        </a>
      </div>
    )
  }

}

You already know Nullstack

JSX tags follow the HTML standard, routes are simple attributes you can assign to any tag, and links are just anchor tags. You will find out that Nullstack is just a modern version of your current stack.

You already know Nullstack
class Batteries extends Nullstack {

  name = 'Nulla-Chan';
  happy = false;

  action() {
    console.log('event already prevented')
  }

  render() {
    return (
      <form onsubmit={this.action}>
        {/* two way bindings */}
        <input bind={this.name} />
        {/* object events */}
        <button onclick={{ happy: true }}>
          Hug {this.name}
        </button>
      </form>
    )
  }

}

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. Give it a try and you will get it!

DX with Batteries Included

Learn with our Dweebs Experts

Nullstack at TDC Future
What are JavaScript Components?
Open Source no Brasil - Ajude a traduzir o Nullstack