7 de ago de 2018

O que faz um desenvolvedor front-end no Mercado Livre?

Udacity Brasil

Imagine que você precisa fazer algo por meio de algum aplicativo: pagar uma conta, responder a uma mensagem enviada por um amigo, chamar um carro. Então você pega o celular, abre o app e faz o que precisa fazer sem pensar muito. Se isso é possível, é em parte graças a um bom desenvolvimento front-end.

Desenvolvedores front-end garantem que as interações dos usuários com sistemas digitais – como sites e aplicativos – transcorram sem problemas. Se o trabalho é bem feito, é provável que você nem se dê conta de todo o esforço para que conseguisse fazer o que precisava intuitivamente.

Essa facilidade de interação é justamente o que pode elevar um aplicativo do nível “meramente interessante” para “revolucionário”. Entre apps com fins semelhantes, uma boa combinação de design, interface e programação front-end é o que pode levar as pessoas a optarem por um deles e não pelo outro. Trata-se, portanto, de uma área com grande valor.

No Mercado Livre, o e-commerce em que Gustavo Felizola é desenvolvedor sênior e lidera a equipe de front-end, isso se traduz em números muitos altos: só no quarto trimestre de 2017, foram 81,2 milhões de itens vendidos globalmente. A receita? Mais de 3 bilhões de dólares.

Assista ao webinar: Carreira em front-end: principais tendências

Como é o front-end no Mercado Livre

Gustavo está em uma área grande: ao todo, o Mercado Livre tem mais de mil desenvolvedores. Só de front-end, são mais de 200 entre todos os países em que o site opera.

Ele define o trabalho do time como algo que existe na fronteira entre as demandas da área de negócios e das criações da área de design. “Surge uma necessidade da equipe de produto. Aí o pessoal do design pensa em como seria legal de resolver esse problema dando a melhor experiência para o usuário e a gente conversa para pensar em questões de viabilidade e usabilidade”, conta.

Em outras palavras, o front-end acaba desenvolvendo e implementando as ideias da equipe de design que visam atender a demandas de negócios e oferecer aos usuários a melhor experiência possível.

Design, front-end e UX no dia a dia

O foco de todo o trabalho é sempre a experiência do usuário (UX) em si. Para isso, a empresa tem uma equipe de pesquisa com usuários que é responsável por conversar com quem usa os sistemas do Mercado Livre para saber detalhes de suas experiências: quais áreas funcionam bem, quais são difíceis de usar, quais dúvidas surgem, etc. Essas conversas também podem ser um ponto de partida para novas demandas de front-end.

Outro ponto importante é o contato com o resto da empresa. A área de TI do Mercado Livre no Brasil usa o GitHub para compartilhar código entre si, de maneira que qualquer profissional da área possa ver o que os outros estão fazendo e contribuir para o trabalho se quiser.

Os programadores front-end do Mercado Livre se dividem em times para implementar as ideias de design ou resolver problemas de usabilidade que, no geral, podem ser desde pequenos detalhes numa página até a criação de novas funcionalidades.

Conforme os trabalhos vão sendo concluídos, são encaminhados para um profissional mais sênior (como Gustavo), que revisa o código criado e avalia o resultado.

Nessa etapa, o trabalho também pode ser visto por outras pessoas cujo envolvimento possa beneficiar o projeto. Caso sejam detectados pontos de melhoria, os desenvolvedores incorporam o feedback. Uma vez que tudo esteja resolvido, o novo código pode ser implementado e os desenvolvedores passam para a próxima tarefa.

É uma área bem horizontal e sem muita hierarquia, mas organizada. Num exemplo citado por Gustavo, seis profissionais formam uma equipe chamada de “front-end core”, que é responsável por gerenciar o stack (o conjunto de ferramentas e bibliotecas) usado por toda a área de front-end.

“Eles pegam contribuição e opinião com todo mundo. Sempre comunicam o que tem que fazer, pedem sugestões de funcionalidades e dão updates do que estão fazendo”, conta.

Habilidades de desenvolvedor front-end

Não importa onde esteja, um desenvolvedor front-end precisa ter bons conhecimentos de HTML, CSS e JavaScript, as ferramentas básicas usadas para transformar o que chega na forma de imagens em sistemas interativos que de fato funcionam. Um conhecimento básico de design e comunicação visual é muito importante.

Fora isso, também é importante que ele entenda as boas práticas envolvidas em tornar uma página mais rápida e otimizada para ferramentas de busca. Afinal, se uma página for linda e funcional mas levar tempo demais para carregar, acabará oferencedo uma experiência ruim a seus usuários e pode ser penalizada pelos buscadores.

Front-end na prática 1: pensando na qualidade da conexão

No caso específico do Mercado Livre, um dos desafios é o fato de que a plataforma é usada por perfis diferentes de pessoas: algumas delas querem comprar algo, outras querem vender, ter uma loja do site ou ainda fazer um pouco de cada.

O desafio das equipes de design e front-end é atender às necessidades de todos os perfis de usuários, garantindo que tudo seja reconhecível como parte da mesma plataforma e tudo funcione bem com as outras partes do site e aplicativo.

Além disso, o Mercado Livre funciona em 19 países. Isso significa que a plataforma precisa oferecer a mesma facilidade de uso a usuários de países diferentes, com expectativas diferentes e que falam línguas diferentes.

E há ainda o fato de que ela pode ser acessada tanto por meio de PCs quanto de dispositivos mobile. Além da necessidade de adaptação visual para cada uma dessas plataformas, também é necessário que a plataforma se adeque a diferentes condições de conectividade.

“No Brasil, a gente percebe que a qualidade de conexão com a internet varia bastante. E precisamos atender de uma boa forma mesmo quem estiver acessando do celular com uma conexão que não muito boa”, diz Gustavo.

Isso é feito de duas maneiras:

  • Mostrar uma versão mais leve (com menos imagens e, em alguns casos, menos recursos) a quem não tiver uma conexão muito boa
  • Fazer otimizações que rodam no próprio servidor do Mercado Livre, o que permite que em dispositivos e locais diferentes mantenham um mesmo nível de qualidade

Front-end na prática 2: como otimizar UX com front-end

Um exemplo de otimização que pode melhorar a experiência do usuário é o preenchimento do CEP no endereço. Quando o usuário coloca o CEP no campo de endereço correspondente, os servidores do Mercado Livre já conseguem, a partir daquele número, preencher automaticamente outros campos, como o nome da rua e o bairro.

No Brasil, os Correios oferecem um serviço que pode ser usado por sites para informar o nome da rua a partir do código postal. O Mercado Livre, no entanto, criou sua própria base de dados para tanto buscando mais precisão.

Ns casos em que isso funciona – há municípios brasileiros que tem um único CEP para todo o território –, a otimização cumpre dois propósitos: melhora a experiência do usuário ao acelerar o processo e o protege de erros. Assim, evita-se errar a grafia do nome de rua, gerar um endereço inexistente e causar problemas com a transação.

Front-end na prática 3: um faturador automático

Um dos projetos nos quais Gustavo e sua equipe estão trabalhando no momento é um “faturador”, uma ferramenta que capacita os usuários do Mercado Livre a emitir notas fiscais referentes às vendas de seus produtos. Do ponto de vista do front-end, trata-se de um projeto bem desafiador.

O primeiro motivo para isso é a relativa complexidade de se emitir uma nota fiscal: o processo exige que o vendedor informe uma série de dados que não são comuns ou facilmente acessíveis para pessoas que não estão acostumadas a fazer isso.

A mesma mentalidade do exemplo anterior aparece aqui: fazer o servidor trabalhar pelo usuário ao preencher o endereço automaticamente.

“Estamos tentando fazer o processo ter o mínimo possível de etapas. No nosso projeto, são cinco ou seis etapas até gerar a nota. Nas ferramentas concorrentes, são cerca de vinte”, conta.

E há outras complexidades pelo caminho, como a adaptação da ferramenta para cada país em que o Mercado Livre pretende lançá-la, visto que a geração de notas fiscais varia. Por enquanto, o projeto está sendo tocado apenas no Brasil e será levado para outros países conforme a necessidade surgir.

De acordo com Gustavo, a regra geral da multinacional é já pensar em seus projetos da maneira mais abrangente possível. Assim qualquer novidade pode chegar ao máximo de pessoas possível ao mesmo tempo, não importa o código postal.

Ter criatividade para superar desafios como esse também é um conhecimento fundamental para desenvolvedores front-end. "Não pensamos na concorrência para fazer algo bem feito. Focamos em fazer o melhor, independente do motivo", conclui Gustavo.

Leia também:

Udacity Brasil