DEV Community: Luís Gabriel Marchió Batista

DevLog #01 — Aloy: Introdução ao projeto Aloy

Luís Gabriel Marchió Batista — Thu, 24 Apr 2025 12:09:38 +0000

📅 Data: 23 de Abril de 2025

✍️ Autor: Luís Gabriel Marchió Batista

Fala pessoal, tudo certo?

Gostaria de compartilhar com vocês um projeto pessoal que tenho desenvolvido nos últimos meses… e que tem me deixado bem empolgado.

Cerca de dois meses atrás, comecei a pensar em como poderia organizar melhor minha vida, automatizar minhas anotações, rotinas diárias, lembretes, enfim...

Mas aí bateu a pergunta:

"Por que me limitar a automatizar só o básico?"

O que estava me travando não era a tecnologia em si, mas sim as limitações das assistentes virtuais atuais e das ferramentas atuais… tipo a Alexa, o Google Assistant, ferramentas que não se comunicam entre si, etc…

Elas são feitas pra atender todo mundo, de forma genérica. E aí o resultado é sempre o mesmo: uma solução mediana, que serve pra todo mundo… mas NUNCA uma funcionalidade extremamente forte e completa para o meu caso ou para o seu caso.

Comecei a me questionar:

Por que eu preciso de 30 ferramentas diferentes de IA pra fazer tarefas simples no meu dia a dia?
Por que essas ferramentas não conversam entre si?
Por que tudo que eu uso hoje é centralizado por empresas terceiras, que impõem limites e travam funcionalidades?

Foi aí que eu pensei:

Por que não criar minha própria assistente virtual? Algo feito sob medida, do meu jeito. Local, modular, privada, customizada para as minhas necessidades.

Assim nasceu a ideia da Aloy (obs: sim, o nome é inspirado na franquia da sony: Horizon ksksks)

O que é a Aloy, afinal?

A Aloy é uma assistente pessoal inteligente, construída para rodar localmente, ela roda no seu desktop sem depender da clouds services. A proposta dela é ser:

Privada, onde seus dados são gerenciados apenas por você
Modular, você escolhe quais blocos quer rodar naquele momento e tem a liberdade total de adicionar novos módulos conforme surgir a necessidade, seja por conta de um trabalho novo ou de um projeto novo… você sempre pode remover ou adicionar módulos
Extensível, você pode criar seus próprios comandos e personalizar com as suas palavras e jeitos… afinal a LLM roda na sua maquina local, você pode treina-la da forma que preferir. O banco de dados é seu, você desenvolve o cérebro do seu modelo de IA
Visual, com uma interface bonita e futurista. As cores predominantes são roxo, azul e preto — pra dar aquele ar de tecnologia, futuro… e porque roxo é a melhor cor que tem.
E principalmente, útil de verdade, sem enrolação

Ela entende comandos em linguagem natural, e já começa a transformar essas frases em ações dentro do seu próprio sistema operacional ou apenas em uma conversa amigável adaptando sempre o contexto para melhor atender você nas suas necessidades.

Um projeto pessoal, não um produto

Importante dizer: a Aloy não é um projeto comercial.

Ela não foi feita pra ser vendida como "a solução perfeita pra todo mundo”

Ela nasceu pra mim, pras minhas necessidades, pro meu estilo de vida.

O que eu queria era:

Algo 100% meu
Que eu pudesse editar, adaptar, reescrever se quisesse
Que não dependesse de nenhum provedor cloud (AWS, Google, Azure...)
Que rodasse local, com meus dados, sob meu controle

E a visão de futuro é clara:

Transformar a Aloy em um projeto open source, pra que qualquer pessoa possa fazer o mesmo — editar, adicionar funcionalidades, e criar uma versão da Aloy que seja perfeita pra sua realidade.

Porque cada um tem suas próprias limitações e seus próprios desafios no dia a dia. E nenhuma solução genérica vai resolver isso melhor do que algo feito sob medida por você mesmo.
Esse DevLog é escrito de Dev (e um toque de IA para agilizar a vida ksks) para Dev

A Aloy é simplesmente:

Liberdade, autonomia e controle.

O que já tá funcionando até agora?

Apesar de estar nos estágios iniciais, já tenho alguns serviços da Aloy rodando

Uma interface desktop em Electron + React + Tailwind + Shadcn/ui
Um monitor de recursos do hardware em Go, que acompanha CPU, RAM, Armazenamento e etc..
Um serviço de processamento de linguagem natural, usando uma LLM local (GEMMA) via LM Studio, escrito em Python com FastAPI
A primeira funcionalidade real: o Aloy-Scheduler, pra criar alarmes e agendamentos simples… Esse serviços está escrito em Node e se conecta diretamente com o Google Calendar (nesse caso dependendo sim de uma alternativa externa para comunicação com entre vários dispositivos. Provavelmente como uma solução temporária)

No quesito arquitetura utilizo microservices, para comunicação HTTP e RabbitMQ e por fim, para iniciar todo o projeto ALOY, eu encapsulo containers docker dentro de um docker-compose (onde eu tbm ligo serviços externos como o RabbitMQ e o Localstack para rodar localmente).

Por que isso importa?

Porque eu não quero mais depender de ferramentas limitadas. Quero poder dizer:

“Aloy, me acorde às 7h da amanhã”

E ela fazer isso, do meu jeito, com minhas ferramentas, do jeito que eu configurei.

Sem pagar mensalidade.

Sem abrir mão da minha privacidade.

O que vem a seguir?

Os próximos passos do projeto basicamente é implementar a parte de conversação por áudio:

Expandir o NLP pra entender mais tipos de frases
Criar serviços para converter áudios em texto
Criar serviços para converter texto em áudios

💬 Curtiu a proposta?

Bem, é isso, se você curtiu essa proposta me segue ai para ver os próximos DevLogs do projeto Aloy, em breve eu vou abrir o projeto para algo full open source, atualmente o único repositório publico é o frontend em Electron e React

Vou deixar o GitHub e algumas redes sociais aqui em baixo:

🌐 https://luismarchio-portfolio.vercel.app/

📸 https://www.instagram.com/luis_marchio/

💼 https://www.linkedin.com/in/luís-gabriel-marchió-batista-4a8b58287/

🐱 https://github.com/LuisMarchio03

Estou sempre aberto a criticas construtivas, ideias ou apenas trocar conhecimento mesmo…

Obrigado por ler até aqui,

Ass. LuisMarchio03

O que é o Virtual DOM e por que ele torna o React tão eficiente?

Luís Gabriel Marchió Batista — Sun, 08 Sep 2024 18:12:03 +0000

Com a crescente complexidade das aplicações web modernas, a necessidade de otimização e desempenho tornou-se um aspecto essencial do desenvolvimento. O React, uma das bibliotecas JavaScript mais populares, trouxe consigo uma solução inovadora para melhorar a eficiência na manipulação da interface de usuário: o Virtual DOM. Este conceito desempenha um papel fundamental no desempenho superior do React. Neste artigo, vamos entender o que é o DOM e o Virtual DOM, como eles funcionam e por que o Virtual DOM é uma peça tão importante para o sucesso do React.

O que é o DOM?

O Document Object Model (DOM) é uma interface de programação que representa a estrutura de documentos HTML e XML como uma árvore de nós. Ele é o elo entre o código JavaScript e os elementos de uma página web, permitindo que o conteúdo e a estrutura sejam acessados e manipulados dinamicamente.

Quando um desenvolvedor precisa modificar um elemento da página, como adicionar um novo componente ou atualizar o conteúdo de um elemento de texto, ele faz isso através do DOM. No entanto, essa interação direta com o DOM pode ser lenta e ineficiente, especialmente em aplicações complexas que exigem muitas alterações frequentes na interface do usuário.

O Problema do DOM Real

A manipulação direta do DOM real tem um custo de desempenho considerável. Cada vez que o DOM é atualizado, o navegador precisa recalcular o layout da página e redesenhar os elementos, o que pode ser uma tarefa demorada. Em grandes aplicações web com muitas interações dinâmicas, essas atualizações constantes podem causar lentidão, levando a uma experiência do usuário prejudicada.

Historicamente, muitos frameworks JavaScript atualizavam o DOM com mais frequência do que o necessário, mesmo para pequenas mudanças. Essa abordagem, embora funcional, não era otimizada. Diante desse desafio, a equipe do Facebook criou uma solução inovadora: o Virtual DOM.

O que é o Virtual DOM?

O Virtual DOM é uma representação leve e em memória do DOM real. Ele é uma cópia simplificada do DOM que existe apenas na memória e não interage diretamente com o navegador. O Virtual DOM permite ao React atualizar a interface do usuário de maneira muito mais eficiente.

Quando há uma mudança no estado de um componente React, o Virtual DOM é atualizado primeiro. O React, então, compara a versão atual do Virtual DOM com a versão anterior, utilizando um processo chamado diffing, que identifica as mudanças mínimas necessárias para atualizar o DOM real. Esse processo evita a atualização desnecessária de elementos e minimiza o impacto no desempenho da aplicação.

Como o Virtual DOM Funciona?

O funcionamento do Virtual DOM pode ser explicado em três etapas principais:

Alteração de Estado
Sempre que há uma mudança de estado em um componente (geralmente via setState), o React gera uma nova árvore de nós que representa o estado atualizado do componente no Virtual DOM. Neste ponto, duas versões da árvore virtual coexistem na memória: a anterior e a atualizada.

Diffing
O React, então, compara essas duas árvores usando um algoritmo de diferenciação eficiente, conhecido como algoritmo heurístico, que reduz a complexidade dessa comparação de O(n³) para O(n). Esse processo mapeia as diferenças entre as duas árvores, determinando quais partes precisam ser alteradas no DOM real.

Re-renderização
Depois que o diffing é concluído, o React aplica as mudanças mínimas necessárias ao DOM real. Esse processo é altamente otimizado, pois o React agrupa as atualizações em lote, o que significa que várias modificações podem ser aplicadas de uma só vez, em vez de atualizar o DOM para cada pequena mudança.

Reconciliation: O Processo de Atualização Otimizado

A fase de Reconciliation (Reconciliação) é onde o React determina as modificações necessárias para o DOM real. É nesse momento que o algoritmo de diffing é utilizado para comparar as duas versões do Virtual DOM. A eficiência desse processo é fundamental para garantir a alta performance das aplicações React.

Para acelerar ainda mais esse processo, o React permite que os desenvolvedores utilizem chaves (ou keys) ao renderizar listas de elementos. Isso ajuda o algoritmo de diffing a identificar rapidamente quais elementos mudaram, tornando as atualizações ainda mais eficientes.

O Impacto do Virtual DOM no Desempenho

Um dos maiores benefícios do Virtual DOM é a redução drástica no número de interações com o DOM real. Como já discutido, a manipulação direta do DOM é cara em termos de desempenho. Ao interpor o Virtual DOM entre o código e o DOM real, o React consegue limitar a quantidade de operações que precisam ser realizadas, otimizando a performance da aplicação.

Essa abordagem também facilita o desenvolvimento de interfaces complexas e dinâmicas, sem que o desenvolvedor precise se preocupar tanto com a otimização manual do DOM. O React cuida de todo o processo de atualização de forma eficiente.

Fiber: A Nova Era da Reconciliação no React

Com a introdução do React 16, uma nova engine de reconciliação chamada Fiber foi implementada. O objetivo do Fiber é melhorar ainda mais a capacidade do React de lidar com atualizações de interface, especialmente em cenários onde é preciso dividir grandes tarefas em partes menores para evitar travamentos na interface do usuário.

Para saber mais sobre o Fiber e seu impacto na reconciliação do React, você pode consultar o guia completo no GitHub.

Conclusão

O conceito de Virtual DOM é uma das principais razões pelas quais o React se tornou tão popular e amplamente utilizado para o desenvolvimento de aplicações web modernas. Ao introduzir uma camada intermediária entre o código e o DOM real, o React consegue otimizar o processo de atualização da interface do usuário, proporcionando uma experiência mais rápida e eficiente.

Com a adoção de algoritmos avançados, como o diffing, e o foco na redução de operações desnecessárias no DOM real, o React permite que desenvolvedores criem interfaces complexas com excelente desempenho, sem precisar lidar diretamente com as ineficiências do DOM. E com a introdução do Fiber, o futuro do React parece ainda mais promissor em termos de desempenho e usabilidade.