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!
(A arte da waifu, Nulla-Chan, é de propriedade do pessoal da Nullstack)
Temos algumas perguntas:
- Se quisermos programar rotas para APIs, como é no Next.js, como podemos fazer? Achei esta documentação que descreve como é feita uma rota, mas e se eu quiser montar várias?
- Ainda, esse sistema de rotas, acredito eu, é baseado no Express 4 (pelo seu
package.json
). Assim sendo, posso adicionar Middlewares normalmente? Se sim, existe algum ítem na documentação sobre isso? - Sobre Stateful Components, toda propriedade declarada no componente é automaticamente observável, como no Vue? (
data
easyncData
)
Me parece um projeto excelente, tirando todos os detalhes irritantes do React. Parabéns!