Framework Fullstack Brasileiro! [Nullstack] [Parte 1]

O Nullstack é framework full stack e orientados a recursos, ou seja, você escreve os componentes com funcionalidades backend e frontend e o framework decide onde o código será executado!

Parece meio confuso de início, mas é muito simples!

Vamos como o Jack, o estripador, por partes:

Classe Nullstack

Esta é a estrutura Básica de uma classe Nullstack

import Nullstack from 'nullstack'

class OlaMundo extends Nullstack {
  render() {
    return (
      <div>
        Olá Mundo!
      </div>
    );
  }
}

E SIM, ela parece muito as classes do React no tempo das cavernas e não é conicidência, o Nullstack usa o JSX para montar a estrutura HTML.

Funções...

Função do cliente

As funções no Nullstack são simples como:

import Nullstack from 'nullstack'

class ComponenteComFuncao extends Nullstack {
  
  async executaMagica() {
      alert('Isso só pode ser mágica!')
  }
  
  render() {
    return (
      <button onclick={this.executaMagica}>
        Clique Aqui!
      </button>
    );
  }
}

Mas você, caro leitor, poderá chegar a conclusão de que este Framework é somente mais um no mar de bibliotecas e frameworks javascript já desenvolvidos Enquanto você lia este parágrafo, mais 16 bibliotcas e 5 frameworks Javascripts foram criados, mas a magia total do framework não foi completamente ativada!

Função do Servidor

Convido você, caro(a) convertedor(a) de café em código, a fazer uma experiência mental.
Imagine que você precise retornar para a interface do usuário uma mensagem bonita que está no seu servidor.

Em Geral, criaríamos duas pastas, uma para o backend e outra para o frontend.
No Back, intanciaríamos, por exemplo, uma instância o express, criaríamos a rota para retornar a mensagem e rodaríamos o servidor.
No Front, rodaríamos um npx create-react-app my-app, faríamos um fetch para recuperar a mensagem, adicíonaríamos na tela a mensagem e subiríamos o client.

Com o Nullstack fazemos assim:

import Nullstack from 'nullstack'

class ClasseMuitoComplexaNossa extends Nullstack {

  mensagem = ''

  static async getMensagemDoServidor() {
    return `Existem duas maneiras de escrever programas sem erros; 
            Apenas o terceiro funciona.`
  }

  async executaMagica() {
    this.mensagem = await this.getMensagemDoServidor()
  }

  render() {
    return (
      <div>
        <button onclick={this.executaMagica}>Quero uma Frase!</button>
        {this.mensagem}
      </div>
    )
  }

}

E SIM, é simples assim!

---

Agora que introduzi alguns dos conceitos do Nullstack, te convido a participar do Discord e ajudar a contribuir para o crescimento do framework e da comunidade!

(A arte da waifu, Nulla-Chan, é de propriedade do pessoal da Nullstack)