Mascote Nulla-chan criada por Bianca Zanette (Bilkaya)- 8 min de leitura
Nullstack Instances: Bom código melhorando o próprio futuro
- Índice
Já tendo desenvolvido projetos com linguagens como Java, PHP e C# e frameworks como Angular, sempre expresso o quanto busco por ferramentas otimizadas, seja na parte do desenvolvedor ou na do usuário final.
E minha mais recente descoberta que supre tal busca é o framework brasileiro Nullstack.
Se dê um tempo para imaginar isso:
Um framework que te permite escrever em Javascript puro e manipular desde a estrutura do banco de dados até a renderização no browser, em um único componente, se preferir.
Tome o tempo que precisar para sonhar com isso e imagine o poder que teria se fosse possível, espera, e se já for?
O Primeiro Passo - Receio
Desde o começo, vendo em um post em grupo de desenvolvedores eu estranhei a ideia. Foi apenas estudando a documentação, conhecendo seus recursos, objetivos e histórico dos autores que enxerguei a importância de seu conceito.
A vida toda de desenvolvedor é comumente condicionada à títulos como front e back-end, quais tem uma gama própria de ferramentas cada, necessidade de buscar as melhores para o caso atual e de aprendê-las.
É visto casos onde o tempo usado para terminar estes passos iniciais e baixar pacotes para o desenvolvimento, ser o suficiente para termos usuários de projeto desenvolvido em Nullstack satisfeitos.
Pontos como esses que me fizeram até mergulhar na base de código do framework, algo que mesmo nunca tendo feito com outra ferramenta, me surpreendeu por consistir em simplesmente ler o bom e velho JS puro e bem escrito.
Logo me vi perder o receio de até mesmo implementar novos recursos.
O Segundo Passo - Evolução
Um dos recursos mais interessantes que vi que seria ótimo implementar foi o apelidado Instances, qual consiste em tornar acessível ao desenvolvedor uma lista de todas as instâncias ativas da aplicação, incluindo seus dados e funções.
Usei o conhecimento dos primeiros dias de estudo da base de código para gerar a primeira iteração da funcionalidade:
A base deste recurso pensei que seria melhor desacoplada usando a API de plugins de elementos, qual consiste em percorrer cada node do template e modificar ou utilizar seus dados, e também era um recurso interno até esta minha Pull Request: nullstack#35.
// função transformadora da antiga API de plugin de elementos
transform({node, depth, scope}) {
// se não havia armazenado a instância
if (!scope.context.instances[node.type.name]) {
// cria nova manualmente
const instance = new node.type(scope);
// armazena no context
scope.context.instances[node.type.name] = instance;
} else {
// tendo armazenado, apenas guarda nas instâncias globais
// utilizando a chave (key) da instância
const key = node.attributes.key || generateKey(depth);
scope.instances[key] = scope.context.instances[node.type.name];
}
}
Já aqui temos coisas interessantes rolando simplificadamente, como o uso da chave da instância e armazenamento de instances no objeto context que é um dos conceitos base tendo uma seção dedicada na documentação: Contexto.
Sendo direto e inspirado como um código escrito em Nullstack, o scope é o escopo interno do framework armazenando tudo necessário, desde manifest até cabeçalhos do projeto e requisições, gerando uma estrutura chamada context (ambos em server e client).
O context é o derivado do scope que fica disponível para o desenvolvedor, possibilitando manipulação de informações do projeto, página e segredos (como acesso à uma base de dados).
Assim, minha ideia foi seguir com esse armazenamento alimentado pelo plugin no context interno:
// construtor de cada componente
constructor(scope) {
// ... // se não havia armazenado
if (!scope.context.instances[name]) {
// ... // cria proxy da instância atual
const proxy = new Proxy(this, instanceProxyHandler);
// ... // retorna proxy da instância
return proxy;
}
// retorna proxy anteriormente criado
return scope.context.instances[name];
}
E, com o review e os insights dos membros chegamos na mais otimizada iteração, repensando praticamente tudo da primeira e suprindo client e server da forma mais minimalista:
// client/client.js
client.instances = {};
context.instances = client.instances;
Já estamos prontos no client. Vamos pra próxima...
O quê? Tá estranhando? Também estranhei e inicialmente neguei tal solução, mas é simples, uma das principais magias do Nullstack vem de transformar tudo em proxies.
Em outras palavras, está sendo disponibilizada a referência de instances para o context, qual estará sempre sincronizada e permite manipulação.
Assim, a implementação no server não tem mistério:
// server/prerender.js
const scope = {};
scope.instances = {};
context.instances = scope.instances;
E então, com esses ajustes suportados pelo código bem desacoplado, conseguimos tal recurso como o desse exemplo no gatilho de ciclo de vida initiate:
async initiate({ instances }) {
// supondo um componente com key="counter"
const { counter } = instances;
// modifica uma variável do componente como se fosse local
counter.count++;
counter.showCount = true; // até atribui valor
// e, por que não, acionar um método de
// armazenamento assíncrono do valor dele daqui
await counter.saveCount();
}
No fim, assim como o próprio recurso evoluiu usufruindo da simplicidade e otimização qual é escrita a base da ferramenta, meu conhecimento e fluídez evoluiu ao, por exemplo, ser desafiado em ambiente até então desconhecido.
Próximo Passo - Eterno Aprendizado
Este texto representa o sucesso da primeira tentativa de expressar minha experiência em projetos tão interessantes de código-aberto.
E apenas um exemplo de conhecimento trabalhado em uma vida de Constante/Eterno Aprendizado, onde se começa com um Java e veja só onde podemos chegar!
Qual será o próximo recurso implementado em um projeto de código-aberto?
Que tal você que lê este texto participar de seu desenvolvimento e me contar?
Desejo o melhor!
Até a próxima!
Links úteis: