Mateus Wetah @mateuswetah Post #2
Refatoração para a Versão 2.0 do VerSalic
Também conhecida como: tome cuidado com suas versões no Angular!
Mês passado alguns colegas do Lappis tentaram compilar o código do VerSalic para configurar uma Docker e não tiveram sucesso. Intrigado, fui investigar a situação e vi que nem eu conseguia. A criatura derrotou seu criador! Nesta onda de tentar desenvolver Software Livre a gente muitas vezes se esquece de que o mesmo, antes de tudo, tem que ser livre de nós mesmos.
Então fui analisar a situação. O problema é basicamente na questão das diversas dependências do projeto.
Na minha cabeça, termos um package.json com todos as versões de pacotes do projeto listadas
seria suficiente pra qualquer npm install deixar tudo em ordem pra qualquer um que
baixasse o código do GitHub. Bom, não foi bem assim.
Error! Version vX.X.X not found...
Pra início de conversa, deixei claro no README as versões necessárias para o Node(7.0.4) e NPM(4.0.5). O que eu não contava, era que o link para instalação dessa versão sumiria dos repositórios oficiais do NodeJS! (Sério, saca isso.).
A ingenuidade continuou com o uso da Angular CLI em sua vesão Beta (1.0.0-beta-31) - não confundir com a
versão do Angular em si, que já era o 2.4. Embora ainda seja possível usar esta versão em configurações de um
projeto, o Angular fez questão de trazer uma mudancinha ou outra de projeto. O arquivo de configuração
angular-cli.json, por exemplo, passou a ser um arquivo oculto nas versões mais recentes.
De início pensei que a solução seria montar um Docker com as configurações "legadas" que usei em meu projeto. Não tinha como fazer um docker com Node 7.0.4? Tudo bem, eu usaria a versão mais próxima! E assim o fiz. Logo ao tentar compilar, porém, uma das bibliotecas de terceiros que usei já não estava mais disponível no NPM registry.
Aí o tamanho do trampo começou a ficar claro.
No projeto VerSalic utilizei diversas bibliotecas de terceiros, e na época estive bem satisfeito com elas porque, afinal, uma das mágicas do Angular é te permitir criar e reutilizar componentes e diretivas, o que de fato fez com que muita gente criasse ferramentas incríveis. Dentre essas posso citar um componente de calendar-picker, um componente de botões de compartilhamento, um module para tratar de meta-tags do site, etc.
A questão é que muitas dessas bibliotecas, junto com o Angular, estavam sofrendo constantes mudanças. Algumas
tinham acabado de sair da traumática migração do Angular 1 para o Angular 2 e outras estavam encarando novas mudanças
quebrantes (como a chegada do Webpack e da compilação Ahead of Time). Nisso, algumas acabaram por retirar do NPM
registry versões antigas, que estavam causando dor de cabeça por quebrar o código dos usuários. Algumas até
mudaram o nome do projeto (como aconteceu com a de Meta-tags), de modo que ao executar npm install,
choviam erros no meu console avisando que não foi possível encontrar tal pacote. A coisa vai ficando pior quando
você começa a tentar ajustar as versões, para usar a compatível com seu ambiente. A calendar-picker, por exemplo,
depende de uma do Bootstrap... esta tem suas próprias dependências no Angular...
Retrabalho, mas dessa vez no lugar certo.
Ficou claro pra mim que seria mais seguro migrar para uma versão do Angular mais recente e trabalhar com as versões destas bibliotecas que estavam mais consolidadas. Após alguns testes com o Angular 5, descobri que nem todas as que eu estava usando suportavam ele ainda, por isso fiquei no Angular 4 (4.3.0, para ser mais preciso). E mais, eu deveria fazer este desenvolvimento 100% dentro do Docker, para garantir que o ambiente onde tudo foi criado fosse reproduzível e aproveitável. E sim, eu optei por recriar o projeto do zero com a CLI, pra garantir que nenhuma outra mudança de projeto me aparecesse de surpresa.
O Dockerfile e as instruções de desenvolvimento podem ser encontrados aqui: https://github.com/mateuswetah/docker-angular. As novas configurações de ambiente, são as seguintes:
- Node v9.3.0
- NPM 5.5.1
- Angular CLI 1.6.1
package.json do projeto que você quer contribuir, conferir qual a versão da angular-cli que é exigida,
e colocar a mesma na variável de ambiente do Dockerfile. A imagem é baseada na imagem oficial do NodeJS.
O retrabalho não foi tão exaustivo como parece, muitos arquivos nem precisaram ser tocados, mas enfrentei algumas dores de cabeça com uma certa chamada de função incorreta acusada pelo compilador ao usar Ahead of Time (basicamente essencial para qualquer projeto Angular em modo produção). O problema é que, um dos issues conhecidos da Angular CLI é o de não informar corretamente a linha de erro quando o mesmo foi identificado durante a compilação com AOT. Porque não procurar um bug na base do tira e põe, não é mesmo? Bom, algumas horas de detetive depois, idendifiquei o problema, que graciosamente não causava nenhum warning nas versões anteriores do Angular ¯\_(ツ)_/¯.
Aproveitando para arrumar a casa.
No processo de atualização, fiz alguns pequenos ajustes de CSS, nada de mais. Porém algumas mudanças boas vieram
a versão mais recente da ngx-sharebuttons. Antes, não havia botão de comparilhamento para o Telegram
(eu implementei um na unha e alinhei com o componente da sharebuttons). Agora não só temos esse, como temos um útil
botão de compartilhar via email e copiar link direto da url :)
O módulo bootstrap_salic que carrega a versão customizada do bootstrap com as cores do VerSalic agora não
fica mais na pasta node_modules e sim na src, pois novas instalações do ambiente iriam sobrescrever esta pasta.
Mesmo referenciando o módulo como uma dependência de desenvolvimento, a referência ao arquivo gerava um link que (por razões
que ainda não compreendo), não era carregado ao se compilar o código.
Uma requisição antiga já era a mudança da ordenação padrão de Projetos para PRONAC:desc, ao invés de PRONAC:asc. Isso está feito agora, evitando que a página inicial de projetos esteja sempre mostrando os mesmos projetos mais antigos da API.
Por fim, durante meus testes descobri um bug seríssimo na paginação. O issue já foi reportado aqui: https://github.com/mateuswetah/Projeto-Salic/issues/23. Enquanto este problema não é solucionado, mantive as navegações para os limites (primeira página e última página) desabilitadas.
Conclusão.
Pull-request feita, agora o pessoal vai ter um tempinho até poder atualizar o ambiente do servidor e ver se podemos lançar oficialmente. Enquanto isso, o que concluir dessa sina?
O VerSalic foi meu primeiro grande projeto com Angular e certamente tem suas falhas. Depois de oito meses sem olhar pra cara do código, voltar a analisar a coisa me mostrou que tenho muito o que aprender ainda. Certamente aprendi muito daqui pra lá, mas ainda preciso entender como funcionam algumas coisas (pra evitar inclusive esse tipo de retrabalho que tive). Talvez houvessem caminhos mais simples pra resolver o problema das versões em questão, mas como não sou expert, acabei optando pelo caminho das pedras. Hoje, estudando outras frameworks, linguagens, bibliotecas, posso confirmar que o Angular tem sim um calcanhar de aquiles, que é esta questão de "mudanças quebrantes".
Mesmo assim, acredito que agora temos uma boa "base" para futuras contribuições. Muito ainda poderia ser melhorado em termos de documentação para que outras pessoas possam adicionar features sem depender tanto do contato comigo. A própria criação deste blog é uma tentativa de abertura para isso. Embora sejamos extremamente dependes de melhorias também no projeto da API, acho que este site ainda tem sim muito a crescer, se claro, voltarmos a ter esta oportunidade, então...