De nenhum a um simples padrão no JavaScript, melhoramos nossa vida!

Recentemente participei de um projeto ASP.NET MVC com uma bela arquitetura back-end, Domain-driven design.

Domain-Driven Design

Realmente, não havia do que se queixar em relação a maneira como o back-end estava arquitetado e como foi desenvolvido, tudo de forma extremamente organizada.


Porém, ao longo do desenvolvimento houveram vários problemas devido a diversos fatores (como em qualquer outro projeto), e o que mais gerou retrabalhos, principalmente no início quando a equipe de desenvolvedores ainda não estava integrada, era o front-end.

Éramos uma equipe de 5 desenvolvedores com conhecimento de pleno a sênior com back-end e praticamente júniors com front-end, em um produto com variados comportamentos de interface, que exigia performance e um alto nível de customização em alguns plugins, escolhidos para agregar agilidade no desenvolvimento. A customização destes plugins somente nos trouxe malefícios e mais atrasos, mas este é outro assunto!

O desenvolvimento foi iniciado, os arquivos CSS e JavaScript não possuiam uma estrutura padronizada, não se tinha qualquer preocupação sobre escalabilidade do código ou sobre como a performance ficaria em uma ou duas Sprints. Assim, não demorou para os problemas começarem a surgir. Estávamos criando um código front-end monstro!

Um pouco antes da metade do projeto realizamos uma reunião para discutir sobre isto. Naquela altura, estávamos tendo problemas de escopo em nosso JavaScript, problemas de closure. Nosso projeto possuía uma tela com várias abas, onde os scripts de todas eram carregados ao mesmo tempo e "interferências" estavam ocorrendo entre eles.


E qual padrão definimos?

Como a experiência com front-end era pequena entre praticamente todos os integrantes da equipe e não queríamos algo que fosse gerar retrabalho nos arquivos existentes (para não quebrarmos funcionalidades já que não possuíamos testes automatizados e também, pois não tínhamos tempo hábil), escolhemos simplesmente colocar IIFEs (Immediatelly-Invoked Function Expression) em cada script de aba, para não utilizarmos functions no escopo global e também estas functions não nos "atrapalharem" em outras abas desnecessariamente.

Outro passo foi definir um padrão de nomenclatura destas functions como se fosse um "ciclo de vida", nomes como "init", "recalculate", "save" e etc.


Conclusão

Como citado acima, nossa definição de padrão não foi complexa, mas trouxe um ganho significativo, reconhecido por todos. Ficou muito mais fácil criar o arquivo JavaScript de novas abas e dar manutenção nos existentes. Sabíamos mais facilmente onde "colocar a mão".

Quanto ao nosso CSS, nada foi feito, continuamos com o emaranhado de código, mas, nem tudo é perfeito!