Um dia na pele de

O frontend de uma farmácia online

Você é desenvolvedora frontend sênior numa farmácia online: o site e o app por onde 2 milhões de pessoas compram remédio, mandam a foto da receita e acompanham a entrega. A base é em Angular, de 2018. Nesta terça-feira, um dia depois do release, quatro coisas pedem você ao mesmo tempo, e você decide a ordem.

Tela não se resolve só no editor: a usuária está na sala do produto, o suporte está na central, o tech lead está na reunião. Andar pelo escritório leva tempo, e esse tempo entra no relógio do seu dia.

Fazer a tela funcionar para todo mundo, inclusive para quem ninguém testou.

Profissões com um dia assim: Frontend Engineer · Desenvolvedor Angular · Desenvolvedor React · Engenheiro de Performance Web · +2

Ler o dia inteiro (contém os desfechos)

O frontend de uma farmácia online: o dia por escrito

Sua mesa: As telas que ficaram lentas

O release de ontem trouxe o calendário novo de agendamento de entrega. Hoje cedo, o painel de monitoramento mostra o tempo de carregamento de cada tela no 4G, antes e depois do release.

O time combinou que piorar mais de um segundo numa tela é motivo para reverter a parte do release que pesa nela. Tela que já era lenta e continua lenta é outro problema, para outro dia.

Ache as telas que pioraram mais de 1 segundo com o release. São essas três. Busca, checkout e envio de receita: as três carregam o calendário novo logo de início, mesmo quando ninguém vai usá-lo. Ofertas é a mais lenta, mas piorou menos de um segundo; o Perfil piorou exatamente um. O checkout mais lento é onde a farmácia perde a compra. Cada tentativa errada custa 5 minutos.

O que acontece conforme a hora em que você chega

Antes das 11h: Você achou as telas antes das 11h. O ajuste subiu antes do pico do almoço, quando metade das compras do dia acontece. O checkout voltou ao tempo de antes com a fila cheia.
Entre 11h e 15h: Você achou as telas depois das 11h. O pico do almoço passou com o checkout um segundo e meio mais lento. O time de dados mandou, às 14h, o gráfico das compras abandonadas.
Depois das 15h: O painel ficou para depois das 15h. O dia inteiro de compras passou com as três telas lentas. O que quer que tenha sido corrigido depois, o relatório de quarta vai mostrar a terça como o pior dia do mês.

Sala de reunião: Trocar de framework ou não

O tech lead reuniu o time: metade dos devs quer começar a migrar de Angular para React, porque é onde estão as vagas e as bibliotecas novas. A outra metade quer só atualizar o Angular, que está quatro versões atrás.

Ele quer a sua opinião hoje, para levar à diretoria na quinta. Você é quem está há mais tempo na base.

Defender migrar aos poucos para React. Você propõe migrar tela por tela, começando pelas menos críticas, com as duas bases lado a lado. O tech lead anota. Metade do time comemora; a outra metade pergunta quem vai cuidar do Angular enquanto isso. Você sabe a resposta: você.
Defender atualizar o Angular primeiro. Você mostra que quatro versões atrás é o problema de hoje, e que migrar com a base desatualizada é migrar o atraso junto. O tech lead concorda em parte. Dois devs saem da sala calados, e um deles abre o LinkedIn na mesa.

O que acontece conforme a hora em que você chega

Antes das 10h30: Você entrou antes das 10h30. A discussão ainda estava começando, e o tech lead ainda não tinha montado os slides para a diretoria. A sua opinião entrou na proposta, não numa nota de rodapé.
Entre 10h30 e 14h: Você entrou depois das 10h30. Cada lado já tinha falado duas vezes e o clima já estava quente. Você entrou numa sala dividida, e qualquer coisa que dissesse ia escolher um lado.
Depois das 14h: A reunião ficou para depois das 14h. O tech lead fechou os slides sem você e mandou para comentar por mensagem. O que quer que você tenha dito, foi como comentário num documento pronto.

Ilha do produto: O modal que não fecha

A designer trouxe para uma sessão de teste a Marina, que é cega e compra remédio pelo app com o leitor de tela. Na primeira tela, o aviso de cookies abre e ela não consegue sair dele: o leitor fica preso dentro do modal, repetindo o mesmo botão.

O app tem seis modais feitos do mesmo jeito. A sprint acaba na sexta.

Corrigir o modal de cookies hoje. Você corrige o foco do aviso de cookies e sobe à tarde. A Marina consegue entrar no app. Os outros cinco modais, incluindo o de confirmar o endereço no checkout, continuam prendendo o leitor de tela do mesmo jeito.
Parar a sprint e revisar os seis. Você propõe ao time um componente de modal único, revisado com a Marina, para os seis. O PM aceita tirar duas tarefas da sprint. Até sexta, os seis modais funcionam com leitor de tela; até lá, nenhum deles foi corrigido.

O que acontece conforme a hora em que você chega

Antes das 10h: Você foi à ilha do produto antes das 10h. A sessão ainda estava no começo. Você viu, ao lado da Marina, o leitor de tela repetindo o botão, em vez de ouvir a história depois.
Entre 10h e 12h30: Você foi à ilha do produto depois das 10h. A Marina já tinha ido embora. Você assistiu à gravação da sessão, com o som do leitor de tela repetindo o mesmo botão por quatro minutos.
Depois das 12h30: A ilha do produto ficou para depois das 12h30. A designer passou a manhã esperando e abriu um chamado com o vídeo. O que quer que tenha sido decidido depois, foi decidido sobre um chamado na fila, não sobre a Marina.

Central de atendimento: O botão que não aparece

A supervisora do atendimento mostra as ligações da semana: clientes dizendo que o botão "Pagar" não aparece. Todos usam celulares Android antigos, com um navegador que não entende um recurso de layout que o time usa desde março. São 3 por cento dos clientes, quase todos com mais de 60 anos.

Dá para acrescentar um código de compatibilidade, que deixa o site um pouco mais pesado para todo mundo, ou mostrar um aviso pedindo para atualizar o navegador.

Acrescentar o código de compatibilidade. Você acrescenta o código e testa num Android de 2016 que o suporte guarda na gaveta. O botão aparece. O site inteiro fica 40 KB mais pesado, para os 97 por cento que não precisavam.
Mostrar um aviso para atualizar o navegador. Você sobe o aviso com um passo a passo. A supervisora agradece e diz que a maioria dos clientes que ligam não sabe o que é navegador. Parte deles vai atualizar; parte vai comprar na farmácia da esquina.

O que acontece conforme a hora em que você chega

Antes das 11h30: Você foi à central antes das 11h30. A supervisora ainda tinha um cliente na linha. Você ouviu, no viva-voz, uma senhora descrevendo a tela sem o botão.
Entre 11h30 e 16h: Você foi à central depois das 11h30. O almoço trouxe mais doze ligações. A supervisora já tinha mandado os atendentes dizerem para os clientes pedirem pelo telefone.
Depois das 16h: A central ficou para depois das 16h. A supervisora foi embora e deixou a planilha das ligações na sua mesa. O que quer que tenha sido decidido, foi decidido sobre nomes numa planilha, sem a voz de nenhum deles.

Copa: Café, e o frontend visto do backend

Dois devs do backend esquentam marmita no micro-ondas.

“…frontend é mudar cor de botão. A regra de negócio tá toda aqui com a gente.”

O botão de pagar que não aparece para 3 por cento dos clientes é exatamente uma cor de botão, num navegador de 2016. Quinze minutos depois, você volta para a mesa sem responder.

O que se ouve de passagem

Atravessar a empresa não é só deslocamento. No corredor as pessoas continuam falando, e o que elas dizem depende da hora e do que você ainda não resolveu. Nada disso custa tempo nem muda o dia.

…o painel tá vermelho desde cedo. Dizem que é o calendário novo.
…se não migrar pra React, eu vou é migrar de empresa.
…a moça do teste tá presa no aviso de cookies faz dez minutos.
…mais uma senhora ligando que o botão de pagar sumiu.

O que vem depois das escolhas

Se você escolheu “Acrescentar o código de compatibilidade” e “Defender migrar aos poucos para React”: Você acrescentou o código de compatibilidade e defendeu duas bases lado a lado por dois anos. O site vai carregar o Angular, o React e o remendo para o Android antigo ao mesmo tempo, e você vai ser quem mede o peso disso.
Se você escolheu “Mostrar um aviso para atualizar o navegador” e “Corrigir o modal de cookies hoje”: Você pediu aos clientes do Android antigo que atualizassem o navegador e corrigiu só o modal de cookies. Nesta terça, as duas pessoas que mais dependiam de o app funcionar sem ajuda ganharam um caminho a mais para tentar.
Se você escolheu “Parar a sprint e revisar os seis” e “Defender atualizar o Angular primeiro”: Você parou a sprint para refazer os modais e defendeu atualizar o Angular antes de migrar. As duas decisões foram por arrumar a base que existe. O componente de modal novo vai ser escrito em Angular, e vai ter de ser reescrito se um dia a migração vier.
Se você escolheu “Corrigir o modal de cookies hoje” e “Acrescentar o código de compatibilidade”: Você corrigiu o modal de cookies e pôs o código de compatibilidade no mesmo dia. Duas pessoas que não conseguiam usar o app conseguem hoje, e as duas correções são remendos que alguém vai ter de entender daqui a um ano.

Como o dia termina

Você foi para o painel primeiro.

Havia um time dividido sobre framework, uma usuária presa num modal e clientes sem botão de pagar, e você abriu o tempo das telas. Passou 1h10 comparando antes e depois.

Isso não é bom nem ruim. É informação: você foi atrás do que dá para medir para todo mundo. Engenharia frontend é isso também: cada segundo de tela é gente desistindo de comprar.

Você foi para a reunião primeiro.

Você começou pela discussão do framework, com o time dividido e a diretoria na quinta. Passou 50 min decidindo qual base o time vai manter pelos próximos anos.

Quem lidera frontend vive essa sala: a escolha técnica é também sobre quem fica, quem sai e quem cuida do código antigo.

Você foi para a Marina primeiro.

Você começou pela sessão de teste, com o leitor de tela preso num modal. Passou 55 min decidindo entre destravar uma pessoa hoje e consertar o jeito como o time constrói.

Acessibilidade é isso: o problema só aparece quando alguém que ninguém testou tenta usar, e a correção certa quase nunca é a mais rápida.

Você foi para a central primeiro.

Você começou pelas ligações do botão que some. Passou 45 min entre um site mais leve para quase todos e um botão que aparece para todos.

Engenharia frontend vive desse equilíbrio: cada navegador antigo que se atende tem um custo, e alguém do outro lado da tela paga pelo que se escolhe não atender.

As três portas do frontend

Frontend não é uma profissão só, são três, e elas se separam pelo tipo de problema, não pelo framework.

Engenharia frontend. Fazer a tela carregar rápido e funcionar em qualquer aparelho, inclusive no celular de 2016.
Arquitetura e liderança frontend. Decidir a base em que o time vai trabalhar por anos, e cuidar de quem trabalha nela.
Acessibilidade e design system. Construir componentes que todo mundo consegue usar, inclusive quem não enxerga a tela.