O ciclo de vida do desenvolvimento web

Muitos de nós provavelmente já ouviram falar do ciclo de vida de desenvolvimento web. É composto por 6 etapas.

Neste artigo, vamos explorar como cada uma dessas 6 etapas se relaciona especificamente com o processo de desenvolvimento web. Ao final, você deve ter uma melhor compreensão dos vários processos envolvidos na construção de um site.

Pesquisa e Análise

Desenvolvimento Web sempre começa com pesquisa. Quais são as práticas recomendadas para o tipo de site que você está criando? Quem são seus concorrentes (se houver)? Quais tendências atuais são relevantes para o site que você está criando?

Durante esta etapa do processo de desenvolvimento web, simplesmente reunimos algumas informações adicionais que nos ajudarão a nos guiar durante a fase de planejamento. Vale a pena notar que a pesquisa e a análise são tipicamente um processo recorrente ao longo do ciclo de vida de desenvolvimento de qualquer projeto. No entanto, realizar um nível adequado de pesquisa antes de escrever qualquer código é crucial para o sucesso de um projeto a longo prazo.

Algumas ótimas ferramentas para realizar pesquisas e análises são:

Além disso, a pesquisa e a análise não estariam completas sem a documentação adequada de suas descobertas. Minha recomendação para esse processo seria o Google Docs. O Google Docs permite que várias pessoas trabalhem no mesmo documento ao mesmo tempo, o que é perfeito se sua pesquisa for um esforço colaborativo.

Planejamento

Na segunda etapa do processo de desenvolvimento web, começamos a planejar tudo o que estará envolvido no projeto.

Que tipo de site é? Quantos usuários ele atenderá? Que tipos de usuários serão esses? Quais recursos o site terá? Será estático ou dinâmico? Que tecnologias usaremos para construí-lo?

Todas essas perguntas e outras devem ser respondidas o mais cedo possível no projeto para que um roteiro claro possa ser criado para o(s) desenvolvedor(es) seguir(em). Quanto mais tempo você gastar planejando cuidadosamente seu projeto, mais tempo você economizará construindo o projeto.

Não é suficiente simplesmente saber as respostas para essas perguntas em sua cabeça. Todas essas informações devem ser documentadas de forma organizada em um local de fácil acesso para todos os membros do projeto. Existem muitas ferramentas excelentes para isso online, mas uma das minhas favoritas é o Trello.

O Trello permite que você estabeleça de forma rápida e fácil um quadro de gerenciamento de projetos para você e sua equipe. Ele também permite um alto grau de personalização, permitindo que você construa um quadro de gerenciamento de projetos que atenda às suas necessidades específicas. Em sua essência, o Trello é simplesmente um quadro Kanban.

Leia também: O que é Type Erasure no TypeScript?

Projeto

Neste ponto do Ciclo de Vida de Desenvolvimento da Web, você sabe o que deseja construir, sabe quem é seu público-alvo e tem um roteiro definido para o desenvolvimento do próprio site. Se você foi aprofundado com seus estágios de Pesquisa e Análise e Planejamento, também deve ter uma boa ideia de como o site deve ficar em termos de paleta de cores e layout.

Agora é hora de reunir todo esse conhecimento e pintar uma imagem de como o produto final deve ser. Geralmente, o design é um ciclo de 5 etapas:

1. Empatia – Entre no lugar do cliente para entender melhor o que ele quer e espera do seu site.
2. Defina – Estabeleça o que exatamente seus clientes estão procurando.
3. Ideate – Comece a fazer um brainstorming de ideias potenciais sobre como o design pode ficar com base nos dados que você coletou da empatia com seu cliente.
4. Protótipo – Crie algumas das ideias que você debateu.
5. Teste – Realize qualquer teste relevante para garantir que seu projeto atenda às suas necessidades e, em seguida, volte para a etapa 1.

Sinceramente, não sou o maior com o processo de Web Design, e preferiria trabalhar em equipe com alguém dedicado nessa capacidade. No entanto, com base na minha experiência em projetar sites no passado, minhas recomendações para ferramentas seriam Adobe XD ou Figma. Para gerar paletas de cores, recomendo usar Coolors.

Implementação

Depois que terminamos de projetar nosso site e sabemos exatamente como queremos que fique, é hora de quebrar nossos dedos e começar a escrever algum código. Dependendo do tamanho do nosso site, pode ser aqui que as coisas começam a ficar complicadas. Você ainda tem aquele quadro do Trello à mão? Bom, porque será muito útil durante esta fase.

A primeira etapa na implementação do design de um site é estabelecer um repositório para acompanhar as alterações em seu código. Para um pequeno projeto de página única em que você sabe exatamente o que está fazendo, talvez seja possível sair sem usar o controle de versão. Mas para projetos maiores que estão em constante mudança, é uma necessidade absoluta.

Depois de configurar o repositório, está quase na hora de escrever algum código, mas primeiro temos que cuidar do nosso quadro de gerenciamento de projetos. O jeito que eu gosto de ter o meu configurado para projetos de desenvolvimento é ter um cartão para “A Fazer”, outro para “Em Andamento” e outro para “Concluído”. Isso também pode ser expandido para incluir “Revisão de código” e “Teste”.

Seja qual for a sua decisão, é hora de preencher seu quadro do Trello com tarefas que precisam ser concluídas. Feito isso, é hora de pegar um da pilha e fixá-lo na aba “Em Andamento”. Agora é finalmente hora de escrever algum código.

Especialmente para projetos maiores, esses estágios iniciais de desenvolvimento são extremamente importantes. Você quer garantir que aborda o desenvolvimento do seu site de maneira ordenada, caso contrário, corre o risco de ficar preso a uma pilha enorme de código de espaguete que mal funciona.

Minha recomendação é começar com os estilos ao invés do conteúdo. Crie as regras de estilo para seu cabeçalho, rodapé, barra lateral (se aplicável), cores primárias e secundárias, quaisquer CTAs, etc. o site de forma mais eficiente e com menos redundâncias.

Certifique-se de que, enquanto estiver trabalhando no desenvolvimento deste site, também esteja utilizando o git adequadamente, usando ramificações para recursos individuais, confirmando alterações em intervalos regulares em vez de esperar e fazer tudo de uma vez e fechando ramificações quando não é mais necessário. À medida que você for desenvolvendo o site, certifique-se também de atualizar o Trello. Ficar preso em algo que você vai voltar mais tarde? Anote isso no Trello! Não deixe nenhuma TODOmensagem chegar à produção.

É isso! O desenvolvimento do site já está em andamento. O código será salvo através da implementação do controle de versão do git, e o progresso será salvo no seu quadro de gerenciamento de projetos do Trello.

Em termos de recomendações pessoais de ferramentas, você pode usar para ajudar nesse processo, a maioria das que serão benéficas para você eu já listei. Mas uma ferramenta crucial que você precisa para ser eficiente no desenvolvimento de um site é um editor de código decente. Você não precisa obter um IDE completo para o desenvolvimento de sites, mas as ferramentas que permitirem que você seja mais produtivo serão aquelas com as quais você desejará se familiarizar. 

Leia também: O que é um framework scrum? O que é scrum?

Teste e Integração

Esta etapa é crucial para o desenvolvimento bem-sucedido de um site (ou de qualquer aplicativo). Todo o trabalho que você fez até este ponto não terá sentido se não funcionar da maneira que deveria para seus usuários. Este estágio também incorpora alguns aspectos da fase de desenvolvimento, embora geralmente de uma forma mais direcionada. Você moldou a argila, agora é hora de polir as imperfeições.

Existem quatro áreas principais de teste de um aplicativo da web:

1. Testes Funcionais
2. Teste de regressão
3. Teste de desempenho
4. Teste entre navegadores

Cada uma dessas quatro áreas de teste pode ser automatizada e, no final desta seção, fornecerei um exemplo de programa que pode realizar tal tarefa, porém, um desenvolvedor web precisa saber como executar manualmente esses 4 tipos de testes, então entrarei em mais detalhes sobre cada tipo de teste abaixo.

Teste funcional

O teste funcional consiste em garantir que os diversos recursos do seu site estejam funcionando conforme o esperado e que nenhum erro ou bug impeça o usuário de interagir com o site.

Teste de regressão

O teste de regressão é essencialmente um teste funcional repetido. Ele garante que determinados recursos em seu site permaneçam funcionais mesmo após a atualização da base de código.

Teste de performance

O teste de desempenho garante que seu site possa permanecer operacional mesmo em períodos de aumento de tráfego. O teste de estresse determina os limites superiores da capacidade do seu servidor web para lidar com o tráfego, enquanto o teste de carga permite que o desenvolvedor entenda como seu site responderá a uma carga esperada.

Teste entre navegadores

O teste entre navegadores é realizado para garantir que seu site pareça e funcione da mesma maneira em todos os navegadores e tamanhos de tela. Se o seu site parece bom no Firefox, mas algo está quebrado no Chrome, você está fechando automaticamente a porta para uma grande parte de seus visitantes em potencial.

Além do teste do próprio aplicativo da web, esta seção também abrange o “teste” do servidor da web. Se o seu aplicativo da web não for executado em seu servidor da web devido a um conflito com algum outro sistema, então, novamente, todo o seu trabalho terá sido em vão. Permitir que esses vários aplicativos trabalhem juntos é conhecido como *integração*.

Leia também: O que é hacker ético?

Implantar e manter

Vamos recapitular rapidamente. Realizamos pesquisas e análises para nosso projeto de desenvolvimento de sites e descobrimos as melhores práticas para o que estamos tentando construir, bem como quem são nossos concorrentes.

Feito isso, começamos a planejar o design e o desenvolvimento do nosso site. Descobrimos quem era nosso público-alvo, quais tecnologias usaremos para construí-lo e que tipo de site estamos construindo exatamente.

Com um plano em prática e a pesquisa e análise feitas, tivemos informações suficientes para começar a projetar nosso site. Depois de ter empatia com nossos futuros clientes e debater ideias em potencial, finalmente decidimos por um design que atendesse às nossas necessidades.

Com nosso design em mãos, pudemos abrir nosso editor de código e começar a trabalhar. Fizemos questão de abordá-lo metodicamente para que nosso código permanecesse eficiente e livre de redundâncias.

Depois que terminamos de desenvolver nosso site, abrimos o Selenium para começar a realizar testes Funcionais, Regressão, Desempenho e Cross-browser. Uma vez que esses testes foram concluídos, voltamos para a fase de desenvolvimento para limpar quaisquer problemas encontrados. Com o código com boa aparência, realizamos testes de integração para garantir que nosso aplicativo web seria capaz de operar em nosso servidor web sem conflitos.

Portanto, agora temos um aplicativo da Web em funcionamento, projetado e desenvolvido exatamente como desejávamos. O que nos resta fazer? Para começar, nosso aplicativo da Web não fará muito bem sem ser disponibilizado ao público, então vamos em frente e implantar nosso aplicativo. A implantação de aplicativos da Web está além do escopo deste artigo, mas o processo é bastante simples: obtenha um domínio, obtenha hospedagem, envie nosso código para o servidor ativo e pronto!

Uma vez que nosso aplicativo da web é implantado, no entanto, há uma etapa final e crucial. Seria ótimo se, uma vez que desenvolvêssemos um aplicativo, pudéssemos implantá-lo e nunca mais ter que nos preocupar com isso, no entanto, infelizmente não é o caso. Com o tempo as coisas tendem a mudar. As linguagens de programação são atualizadas, os navegadores evoluem e novos recursos são introduzidos. Para garantir que o aplicativo da web *permaneça* acessível, temos que mantê-lo.

A manutenção geralmente envolve aspectos das fases de desenvolvimento e teste do ciclo de vida do desenvolvimento. Quando novos recursos são desenvolvidos, testes de regressão devem ser realizados para garantir a compatibilidade.

Conclusão

Voilá! Agora você conhece os fundamentos do ciclo de vida de desenvolvimento da Web, bem como algumas das várias ferramentas usadas durante esse processo. Há muito mais que pode ser dito sobre cada um desses estágios do processo de desenvolvimento, então eu encorajo você a ir ao Google para ler um pouco mais sobre eles.

Leia também: Livros JavaScript: As 6 Melhores Opções Para Iniciantes