Trabalho como desenvolvedor front-end há cerca de dois anos e participei da criação de diversos projetos. Uma das lições que aprendi é que a colaboração entre diferentes equipes de desenvolvedores que compartilham o mesmo objetivo, mas têm tarefas e responsabilidades diferentes, não é fácil.
Em consulta com outros membros da equipe, designers e desenvolvedores, criei um ciclo de criação de sites projetado para equipes pequenas (5 a 15 pessoas). Inclui ferramentas como Confluence, Jira, Airtable e Abstract. Neste artigo vou compartilhar os recursos de organização do fluxo de trabalho.
A Skillbox recomenda: Curso prático de dois anos .
Lembramos: para todos os leitores de "Habr" - um desconto de 10 rublos ao se inscrever em qualquer curso Skillbox usando o código promocional "Habr".
Por que tudo isso é necessário?
A equipe mínima necessária para criar um site do zero é designer, programador e gerente de projeto. No meu caso, a equipe foi formada. Mas depois do lançamento de alguns sites, tive a sensação de que algo estava errado com eles. Às vezes simplesmente não entendíamos totalmente as nossas responsabilidades e a comunicação com o cliente deixava muito a desejar. Tudo isso retardou o processo e perturbou a todos.
Comecei a trabalhar para resolver o problema.
Uma pesquisa no Google dá bons resultados sobre o nosso problema.
Para tornar o trabalho mais visual, criei um diagrama de fluxo de trabalho que dá uma ideia de como o trabalho é feito aqui.
Clique na imagem para abrir em resolução máxima.
Metas e objetivos
Uma das primeiras técnicas que resolvi testar foi o “modelo em cascata” (Cachoeira). Usei-o para destacar problemas e entender como resolvê-los.
Problema: Na maioria das vezes, o cliente não avalia o processo de criação do site de forma modular, como fazem os desenvolvedores. Ele o percebe como um site normal, ou seja, pensa em termos de páginas individuais. Na sua opinião, designers e programadores criam páginas individuais, uma após a outra. Como resultado, o cliente simplesmente não entende o que se segue durante o processo real.
Tarefa: Não adianta convencer o cliente do contrário, a melhor opção é desenvolver um processo modular de criação de site dentro da empresa baseado no modelo página por página.
Os tokens e componentes de design universal são gerenciados por desenvolvedores e designers.
Problema: Esta é uma situação comum que muitas estratégias abordam. Existem muitas soluções interessantes, na maioria dos casos propõe-se a criação de um sistema de design que seja controlado por um guia de estilo/geradores de biblioteca. Mas na nossa situação, adicionar outro componente ao processo de desenvolvimento que nos permitisse gerenciar os níveis de acesso dos designers simplesmente não era possível.
Tarefa: construir um sistema universal no qual designers, desenvolvedores e gerentes possam trabalhar de forma síncrona, sem interferir uns nos outros.
Acompanhamento preciso do desenvolvimento
Problema: Embora existam muitas ferramentas úteis disponíveis para acompanhar problemas e medir o progresso geral, a maioria não é flexível ou ideal. A ferramenta pode ser útil ao economizar o tempo da equipe que normalmente seria gasto com dúvidas e esclarecimentos sobre tarefas específicas. Também facilita a vida dos gerentes, proporcionando-lhes uma compreensão mais precisa de todo o projeto.
Tarefa: crie um painel para acompanhar o andamento das tarefas executadas por diferentes membros da equipe.
Jogo de ferramentas
Depois de experimentar diferentes ferramentas, optei pelo seguinte conjunto: Confluence, Jira, Airtable e Abstract. Abaixo vou revelar os benefícios de cada um.
Confluence
Papel da ferramenta: centro de informações e recursos.
O espaço de trabalho do Confluence é relativamente fácil de configurar, possui muitos recursos, integrações com diferentes aplicativos e possui modelos individuais e personalizáveis. Não é uma solução única, mas é ideal como centro de informações e recursos. Isso significa que qualquer referência ou detalhe técnico relacionado ao projeto deverá ser inserido no banco de dados.
A ferramenta permite documentar adequadamente cada componente e quaisquer outros detalhes do projeto.
A principal vantagem do Confluence é a customização de modelos de documentos. Além disso, pode ser utilizado para implementar um único repositório de especificações e diversas documentações de projetos, separando os níveis de acesso dos participantes. Agora você não precisa se preocupar em ter em mãos uma versão antiga da especificação, como acontece quando você envia documentos por e-mail.
Mais informações sobre a ferramenta .
Jira
Papel da ferramenta: monitoramento de problemas e gerenciamento de tarefas.
Jira é uma ferramenta muito poderosa de planejamento e gerenciamento de projetos. A parte principal da funcionalidade é a criação de fluxos de trabalho personalizáveis. Para gerenciar eficazmente os problemas (que é o que precisamos), vale a pena prestar atenção especial ao uso correto do tipo de solicitação e do tipo de problema (tipo de problema).
Portanto, para garantir que os desenvolvedores estejam construindo componentes com base no design correto, eles precisam ser notificados sempre que algo mudar no design. Assim que o componente for atualizado, o designer precisa abrir um issue, atribuir um desenvolvedor responsável, atribuindo a ele o tipo de issue correto.
Com o Jira, você pode ter certeza de que absolutamente todos os participantes do processo (deixe-me lembrá-lo, no nosso caso são de 5 a 15) recebem tarefas corretas que não se perdem e encontram seu executor.
Saiba mais sobre Jira .
Airtable
Função da ferramenta: gerenciamento de componentes e quadro de progresso.
Airtable é uma mistura de planilhas e bancos de dados. Tudo isso permite customizar o funcionamento de todas as ferramentas discutidas acima.
Exemplo 1: Gerenciamento de Componentes
Quanto ao gerador de guia de estilo, nem sempre é conveniente usá-lo - o problema é que os designers não conseguem editá-lo. Além disso, não seria uma boa decisão utilizar a biblioteca de componentes Sketch, pois ela possui muitas limitações. Muito provavelmente, você simplesmente não conseguirá usar esta biblioteca fora do programa.
Airtable também não é perfeito, mas é melhor do que muitas outras soluções semelhantes. Aqui está uma demonstração do modelo Tabela de gerenciamento de componentes:
Quando um desenvolvedor aceita um componente de design, ele avalia o ABEM resultante registrando o componente em uma tabela. Existem 9 colunas no total:
- Nome - o nome do componente de acordo com o princípio ABEM.
- Pré-visualização - É aqui que é colocada uma captura de tela ou uma imagem do componente baixado de outra fonte.
- Uma página vinculada é um link para a página de um componente.
- Componente filho - um link para componentes filhos.
- Modificador - verifica a presença de opções de estilo e as define (por exemplo, ativo, vermelho, etc.).
- A categoria do componente é uma categoria geral (texto, imagem promocional, barra lateral).
- Situação de desenvolvimento - o progresso real do desenvolvimento e sua definição (concluído, em andamento, etc.).
- Responsável - o desenvolvedor responsável por este componente.
- O nível atômico é a categoria atômica deste componente (de acordo com o conceito de desenho atômico).
- Os dados podem ser referenciados na mesma tabela ou em tabelas diferentes. Conectar os pontos evitará confusão durante o dimensionamento. Além disso, os dados podem ser filtrados, classificados e alterados sem problemas.
Exemplo 2: progresso no desenvolvimento da página
Para avaliar o progresso do desenvolvimento da página, você precisa de um modelo criado especificamente para essa finalidade. A mesa pode atender tanto às necessidades da própria equipe quanto do cliente.
Qualquer informação sobre a página pode ser anotada aqui. Este é um prazo, um link para o protótipo InVision, um destino, um componente filho. Torna-se imediatamente perceptível que as operações são muito convenientes de realizar, tanto no que diz respeito à documentação e atualização do design, como ao estado do desenvolvimento front-end e back-end. Além disso, estas operações são realizadas simultaneamente.
Sumário
Função da ferramenta: uma fonte única de controle de versão para ativos de design.
Abstract pode ser chamado de GitHub para ativos no Sketch e evita que os designers tenham que copiar e colar arquivos. A principal vantagem da ferramenta é que ela fornece um repositório de design que atua como uma “fonte única de verdade”. Os designers devem atualizar o branch master para a versão mais recente do layout aprovado. Depois disso, eles deverão notificar os desenvolvedores. Esses, por sua vez, deverão funcionar apenas com assets de designer da filial principal.
Como uma conclusão
Depois de implementarmos o novo processo de desenvolvimento e todas as ferramentas mencionadas acima, a velocidade do nosso trabalho aumentou pelo menos duas vezes. Não é uma solução perfeita, mas é muito boa. É verdade que para que funcione é preciso muito esforço - é necessário “trabalho manual” para atualizar e manter tudo em condições de funcionamento.
A Skillbox recomenda:
- curso prático .
- Curso online .
- curso de ano prático .
Fonte: habr.com