Como codificar primeiro com benefícios de design primeiro

A preferência entre começar com o design ou ir direto para a codificação geralmente depende do contexto do projeto, do fluxo de trabalho do desenvolvedor individual ou da equipe e da complexidade da tarefa em questão.

Concentrar-se no design antes de se aprofundar na codificação é amplamente recomendado por vários motivos. Uma estratégia que prioriza o design promove um planejamento cuidadoso e prioriza a perspectiva do usuário, garantindo que todas as partes envolvidas tenham um entendimento unificado dos objetivos do projeto. Por outro lado, priorizar a codificação promove agilidade e rapidez no desenvolvimento e prototipagem, embora ao custo de renunciar a algumas das vantagens de ter um design inicial.

Code-First ou Design-First: uma falsa dicotomia

O problema com essa suposta escolha entre o design primeiro e o código primeiro é que começar com o código não significa pular a fase de design, nem significa implementar totalmente o aplicativo. Em vez disso, trata-se de adotar uma abordagem iterativa em que o design e o desenvolvimento se informam e se complementam desde o início. Ao codificar antecipadamente, podemos validar ideias rapidamente, identificar restrições técnicas e refinar nosso design com base em insights práticos, tudo isso mantendo a visão e os objetivos do projeto em foco.

E se pudéssemos codificar primeiro e também obter os benefícios das abordagens de design primeiro, gerando automaticamente visualizações para complementar nosso código?

Muitos aspectos do desenvolvimento de software envolvem conceitos abstratos ou sistemas complexos. A visualização ajuda a dividir essas complexidades em partes mais digeríveis e compreensíveis. Isto se aplica a todo o espectro de uma equipe de engenharia de software, afetando desenvolvedores, arquitetos, testadores e gerentes de projeto de maneiras distintas, porém interconectadas.

Quando se trata de conceitos abstratos de infraestrutura, as representações visuais concretas fornecem a cada membro da equipe insights que promovem uma compreensão holística do próprio software.

Codifique primeiro e aproveite recursos visuais de design automatizados

Ao codificar primeiro um andaime ou modelo e usar visualizações automatizadas, as equipes obtêm um método de código que não subestima o design; em vez disso, integra o design thinking em todo o processo de desenvolvimento e oferece as seguintes vantagens:

1. Detecção precoce e resolução de problemas de design

Diagramas automatizados podem ajudar a identificar problemas ou gargalos arquitetônicos no início do processo de desenvolvimento. Ao visualizar a estrutura e as dependências do sistema, as equipes podem detectar ineficiências, complexidades desnecessárias ou preocupações de escalabilidade, permitindo ajustes imediatos antes que esses problemas se tornem mais difíceis de resolver.

2. Comunicação aprimorada com as partes interessadas

As representações visuais da arquitetura do sistema facilitam a compreensão do funcionamento do sistema por todas as partes interessadas, incluindo aquelas com formação não técnica, e contribuem significativamente para as discussões de design. Esta abordagem inclusiva à comunicação do projeto garante que as decisões sejam informadas e reflitam uma ampla gama de perspectivas.

3. Documentação ágil e contínua

As equipes podem prototipar e iterar rapidamente seu código, com ferramentas automatizadas gerando diagramas atualizados em cada estágio. Automatizar a geração de diagramas garante que a documentação visual do projeto esteja sempre atualizada. Esse processo de documentação contínua alivia o problema comum de diagramas desatualizados que não refletem mais o estado atual da base de código, mantendo assim uma representação precisa da arquitetura do sistema, dos fluxos de dados e das interações de serviço.

Automatizando visualizações de design a partir de código

A funcionalidade de visualização que descrevi acima é um recurso agora disponível na estrutura de código aberto Nitric, o que me oferece uma maneira fácil de demonstrar como o andaime de código combinado com a visualização automatizada de design pode ajudar as equipes. Usarei um aplicativo de livraria como exemplo, estruturando os principais componentes com Nitric.

Vamos criar uma API para uma biblioteca ou livraria que administre o armazenamento e a recuperação de metainformações sobre livros. Para fazer isso, importaremos os seguintes blocos de construção.

Em seguida, usaremos esses recursos para implementar nossa API Rest usando esses recursos. Aqui está um exemplo do método POST e alguns espaços reservados para outros métodos que precisaremos implementar no futuro.

Com apenas uma pequena quantidade de código parcialmente implementado, estamos prontos para visualizar os requisitos de infraestrutura da nossa aplicação.

Armados com este modelo inicial e visual, podemos agora entrar nas discussões de design. Devido ao aspecto dinâmico da visualização, os ajustes podem ser feitos rapidamente e as suas implicações compreendidas num relance.

Colaboração da equipe no design de aplicativos

Embora tenhamos começado com a codificação, a adição de um diagrama mudou o foco da equipe da análise individual de código para uma discussão colaborativa sobre implementação.

À medida que construímos progressivamente esse aplicativo, uma das próximas perguntas lógicas para a equipe de desenvolvimento pode ser algo como: “Como outras partes do aplicativo saberão que um livro foi criado/excluído/atualizado?”

A equipe pode refinar rapidamente a estrutura do código para incluir mensagens de eventos para ações relacionadas ao livro. Ao criar ou remover um livro, o aplicativo publicará um evento, permitindo assim a assinatura de outros serviços para fornecer funcionalidades futuras, como relatórios, análise de inventário, etc.

Com essas alterações feitas, o visual é atualizado para mostrar o novo design:

Otimizações iniciais de design para maior eficiência

Até agora, não implementamos nenhum código para lidar com a assinatura dos tópicos criados ou removidos do livro. Porém, por meio da análise da visualização já permitimos que nossa equipe começasse a considerar otimizações. Neste exemplo, podemos começar a debater se publicamos temas diferentes para quando um livro for atualizado. Dependendo das circunstâncias, pode ser uma abordagem melhor fundir createde removed para simplesmente updated. Alternativamente, também poderíamos introduzir uma nova variável de estado no corpo da mensagem para capturar se foi uma atualização ou um evento criado. Esta análise pode nos levar à redução de custos e à redução de códigos repetitivos.

Detectando problemas de utilização de recursos

A inspeção da visualização do design também facilita a identificação de recursos não autorizados que foram declarados. Por exemplo, a visualização a seguir reflete uma atualização de código por meio da qual introduzimos buckets que armazenam capas de livros para acesso de leitura e escrita. Nosso plano é encontrar uma solução mais ideal para o manuseio ou recuperação de coberturas no futuro; talvez planejemos usar uma API de terceiros viável.

Uma rápida inspeção da visualização não mostra conexões entre o book-covers balde e o books.ts manipuladores. Podemos ver imediatamente que esse recurso é nocivo e ajustar conforme necessário antes que o código seja totalmente desenvolvido e muito antes de qualquer recurso nocivo caro ser implantado na nuvem.

Experimente você mesmo

Iniciar um projeto com uma estrutura de código aproximada ajuda as equipes a avançar rapidamente, mas muitas vezes pode resultar em lacunas de design se não for acompanhado de discussões de planejamento corretas. Os diagramas de design gerados automaticamente são ferramentas poderosas que as equipes de nível superior usam para agilizar as fases de design, desenvolvimento e manutenção dos projetos.

As equipes que usam scaffolds de código e diagramas de arquitetura automática ganham eficiência e agilidade para que possam prototipar e iterar rapidamente. Eles melhoram a qualidade e a confiabilidade de suas aplicações, identificando antecipadamente falhas e gargalos de projeto. E, finalmente, alinham o desenvolvimento mais estreitamente com os objectivos empresariais através de uma melhor compreensão, comunicação e tomada de decisões em colaboração com as partes interessadas do negócio.

Teste a diagramação automatizada para ter uma ideia de como essa abordagem pode acelerar seu próximo projeto. Você pode experimentar ferramentas como Nitric; com sua CLI simples, você pode gerar diagramas rapidamente codificando um modelo dos recursos necessários para seu aplicativo. A partir daí, você estará no caminho certo para promover um ambiente colaborativo onde todos compartilhem uma visão unificada da arquitetura do seu aplicativo.

A postagem Como codificar primeiro com benefícios de design primeiro apareceu pela primeira vez em The New Stack.