Enquanto navegava no GitHub e procurava projetos de código aberto para colaborar, encontrei o Neo.mjs. Me interessei por esse projeto e comecei a pesquisar mais sobre esse novo framework. Quero compartilhar tudo o que descobri sobre isso nesta postagem do blog.

O que é Neo.mjs?

Neo.mjs foi projetado para construir aplicativos da web de alto desempenho orientados a dados, com um forte foco no aproveitamento de web workers para melhorar a capacidade de resposta da interface do usuário. Aqui está uma visão geral detalhada do que ele pode oferecer:

• Multithreading com Web Workers: Uma das principais inovações do Neo.mjs é o uso padrão de web workers. Ele descarrega lógica complexa, cálculos pesados ​​e tarefas de processamento de dados para threads de segundo plano (web workers), permitindo que o thread de UI principal permaneça responsivo.
• Rápido e leve: Tem como objetivo criar aplicativos altamente eficientes e de alta velocidade, reduzindo ao mesmo tempo a pegada da estrutura. Isso o torna ideal para a criação de aplicativos em grande escala e com muitos dados, como painéis, CRMs e ferramentas de visualização de dados.
• UI orientada a dados: A estrutura oferece uma abordagem orientada a dados, que ajuda os desenvolvedores a vincular modelos de dados a componentes de UI de maneira eficiente.

Recursos da estrutura:

• Programação Reativa: Neo.mjs usa um modelo de programação reativa, o que significa que as alterações nos modelos de dados se propagam automaticamente para os componentes da UI, garantindo uma experiência de usuário tranquila.
• Arquitetura baseada em componentes: Como muitas estruturas JavaScript modernas, Neo.mjs emprega uma arquitetura baseada em componentes que permite aos desenvolvedores criar componentes de UI reutilizáveis, promovendo modularidade e capacidade de manutenção do código.
• IU declarativa: Suporta uma forma declarativa de definir interfaces de usuário, permitindo que os desenvolvedores escrevam códigos mais limpos e compreensíveis.
• Dependências mínimas: Neo.mjs foi desenvolvido para funcionar com dependências mínimas, o que ajuda a reduzir tamanhos de pacotes e tempos de carregamento.
• Separação UI/Worker: A estrutura separa efetivamente a renderização da UI de tarefas pesadas de processamento de dados, um fator chave na manutenção de aplicativos responsivos.

Configuração: primeiros passos com Neo.mjs

Configurar seu primeiro projeto é simples. Veja como começar:

Etapa 1: Instale o gerador de aplicativos Neo.mjs

Abra seu terminal e execute o seguinte comando para gerar um novo espaço de trabalho e aplicativo Neo.mjs:

npx neo-app@latest

Etapa 2: siga as instruções de configuração

Depois de executar o comando, você será guiado por uma série de prompts para personalizar seu novo aplicativo Neo.mjs. Veja como foi minha configuração:

> npx neo-app@latest
Need to install the following packages:
[email protected]
Ok to proceed? (y) y

Welcome to the neo.mjs app generator!
current version of neo-app: 7.10.0
? Please choose a name for your neo workspace: neo-workspace
? Please choose a name for your neo app: MyApp
? Please choose a theme for your neo app: 
  neo-theme-dark 
  neo-theme-light 
  neo-theme-neo-light 
  all 
❯ none 
? Please choose your main thread addons: (Press  to select,  to toggle all,  to invert selection, and  to proceed)
❯◯ AmCharts
 ◯ AnalyticsByGoogle
 ◉ DragDrop
 ◯ HighlightJS
 ◯ LocalStorage
 ◉ Navigator
 ◯ MapboxGL
(Move up and down to reveal more choices)
? Do you want to use SharedWorkers? Pick yes for multiple main threads (Browser Windows): no
? Do you want to use a ServiceWorker for caching assets? no

Neste link você encontrará um belo vídeo explicando toda a configuração com mais detalhes.

Etapa 3: iniciar o aplicativo

Após concluir a configuração, os pacotes necessários serão instalados automaticamente. O aplicativo irá então iniciar seu navegador padrão, abrindo localhost:8080. É aqui que você verá seu aplicativo Neo.mjs recém-criado em execução:

Você notará que Neo.mjs gera automaticamente uma pasta de aplicativos em sua área de trabalho. Dentro desta pasta, o ponto de entrada principal da sua aplicação pode ser encontrado no arquivo view/MainContainer.mjs. É aqui que você começará a construir seus componentes de UI e lógica de aplicativo.

Etapa 4: Explore a estrutura

Seu novo espaço de trabalho Neo.mjs vem pré-configurado com pastas para visualizações, componentes e outros arquivos de aplicativos. Passe algum tempo explorando a estrutura do arquivo para entender como as diferentes partes do aplicativo são organizadas. Isso tornará mais fácil quando você começar a construir componentes personalizados.

Atenção

Neo.mjs tem uma sintaxe única que pode parecer um pouco diferente das estruturas JavaScript tradicionais. Ele usa literais de objeto extensivamente para definir componentes de UI de uma forma que se assemelhe a JSON. Essa sintaxe foi projetada para maximizar o desempenho e fornecer flexibilidade para a construção de aplicativos complexos baseados em dados.

Como iniciante, inicialmente achei um desafio entender como os arquivos interagem e se comunicam entre si. Isso é algo que ainda estou aprendendo.

O que vem a seguir?

Estou planejando me aprofundar no Neo.mjs, experimentando a construção de UIs simples e explorando como aproveitar ao máximo seus recursos de desempenho multithread. Fique ligado em uma postagem futura no blog ou até mesmo em um tutorial em vídeo onde espero compartilhar dicas, truques e exemplos mais detalhados de uso do Neo.mjs para construir aplicativos da web de alto desempenho.

Se você estiver interessado em se juntar a mim nesta jornada de aprendizado, sinta-se à vontade para explorar o repositório Neo.mjs GitHub e experimentar alguns dos aplicativos de exemplo em seu site.

Deixe um comentário se você já usou o Neo.mjs antes com algumas dicas!