DEV Community: Christian Mortaro

A 2 years old alternative to React server components

Christian Mortaro — Mon, 11 Jan 2021 16:54:32 +0000

Over the last almost two years, I and my friends have been using a custom framework for our daily freelances.

Nullstack has the concept of server functions since day one and one of my favorite features of it is the fact that it only exposes the minimum required dependencies to the client bundle, but is still a fully capable SPA framework.

In the light of the recent posts about react server functions I decided to make a video explaining the solution we came up with.

This video is the last part of a playlist that describes the most used features of Nullstack in under 20 minutes.

The video shows step by step the mental process behind a demo with server components that works offline as well, but for those who just want to see some code, here is a quick example:

import Nullstack from 'nullstack';
import {readFileSync} from 'fs';
import {Remarkable} from 'remarkable';

class About extends Nullstack {

  readme = '';

  static async getReadme() {
    const text = readFileSync('README.md', 'utf-8');
    const md = new Remarkable();
    return md.render(text);
  }

  async initiate() {
    this.readme = await this.getReadme();
  }

  render() {
    return (
      <article html={this.readme} />
    )
  }

}

export default About;

You can learn more about it in the Nullstack Documentation

Full-Stack with Nullstack

Christian Mortaro — Sat, 09 Jan 2021 14:37:53 +0000

The first 2 video tutorials of Nullstack are available already!

Nullstack is a full-stack framework for building progressive web applications.

It connects a stateful UI layer to specialized microservices in the same component using vanilla javascript.

Server functions with Nullstack:

Routable Components with Nullstack:

The documentation is available at https://nullstack.app/ for those who prefer text over video.

Full-stack Javascript Components

Christian Mortaro — Sun, 03 Jan 2021 01:48:25 +0000

We’re releasing the first version of Nullstack!

...Yes, another JavaScript framework. This one is made by a very small team, but we have some nice things to offer. Applications built in Nullstack have a slightly good perceived performance and the code tends to be relatively small compared to other frameworks.

Nullstack is an isomorphic framework, focused on giving some quality of life (and of code) to freelancers. It’s based on vanilla Javascript. We’ve been using it in our freelancing projects for 2 years now and thought it was time to release it into the world.

Nullstack components interop between both the back-end and the front-end seamlessly allowing you to write code like this:

import Nullstack from 'nullstack';

class PokePoll extends Nullstack {

  pokedex = [];

  prepare({project, page}) {
    page.title = `${project.name} built with Nullstack!`;
  }

  static async getTopTenpokedex({database}) {
    return await database.collection('pokedex').find().sort({votes: -1}).limit(10).toArray();
  }

  async initiate() {
    this.pokedex = await this.getTopTenpokedex();
  }

  renderPokemon({ranking, name, sprite, number, votes}) {
    return (
      <li>
        <div>
          <h2>#{ranking}</h2>
          <img src={sprite} alt={name} />
          <span>#{number}</span>
          <a href={`/${name}`}>{name}</a>
          <small>{votes} votes</small>
        </div>
      </li>
    )
  }

  render({page}) {
    return (
      <div>
        <h1> {page.title} </h1>
        <ul>
          {this.pokedex.map((pokemon, index) => <Pokemon {...pokemon} ranking={index + 1} />)}
        </ul>
      </div>
    )
  }

}

export default PokePoll;

If you’re interested you can check out documentation or the application example we’ve built. We hope you enjoy Nullstack as much as we do!