Oi mundo, gostaria aqui de compartilhar uma pequena satisfação da minha rotina de side projects, estou desenvolvendo um projeto que gostaria de ter feito a muito tempo, um visualizador de algoritmos de ordenação. Esse post não é exatamente um tutorial, mas tentarei compartilhar um pouco das dores do desenvolvimento. Enquanto isso, você pode brincar com os algoritmos aqui: sorting.guilherssousa.dev

Sem dependências

Eu gosto bastante de usar Svelte para side projects, porque ele oferece o melhor dos dois mundos quando precisamos de lidar com projetos um pouco mais complexos do que uma interface de formulário simples, ele traz por padrão uma solução forte de gerenciamento de estado, ferramentas de animação de elementos bastante úteis, uma sintaxe de descrição de interface um pouco mais prática do que o React, e o melhor de tudo, tudo é compilado, trazendo apenas o necessário para o bundle final, o que resulta em estatísticas muito legais (apesar delas não serem tudo)

Porém, é apenas isso que eu estou usando. Não tem dependências de projeto como algoritmos prontos de ordenação. Não tem Tailwind CSS, não tem nada além dos SFCs de HTML, CSS e Javascript.

Lidando com generators

Nesse projeto, eu usei generator functions, uma funcionalidade que permite que a execução de uma função seja pausada e retomada em qualquer ponto do programa (desde que ele ainda esteja em escopo, óbviamente).

A primeira tentativa de uso foi retornar os índices que estavam sendo comparados, e fazer um highlight deles em tempo real, mas isso tem alguns problemas:

• Dependendo do tempo de execução (sem RAF Loops), os índices podem estar desatualizados
• Os objetos perdem contexto de chaves, então o Svelte não sabe lidar com os updates
• Só funciona bem com algoritmos de comparação simples como Bubble Sort

Na minha segunda iteração do projeto, segui um padrão que consiste em retornar todo o estado atual da amostra que está sendo organizada, junto com objeto de cores que será repassado para a camada visual, onde qualquer definição de cor pode ser enviada pelo algoritmo, como ponto A e B, pivôs, etc.

Pausando e retomando

Como generator functions permitem a pausa de execução de uma função, isso significa que dá pra pausar um sorting e retomar ele usando ações de botões, o que é bem conveniente (no momento atual, também dá até pra fazer backtracking, mas isso usaria muita memória pra amostras gigantes [>=1000 elementos])

Algoritmos implementados

Até agora já implementei os seguintes algoritmos de ordenação

• Bubble Sort
• Quick Sort

Você pode contribuir com mais algoritmos pelo repositório do GitHub

É isto, obrigado.