Na Uber temos centenas de aplicativos web internos usados por desenvolvedores, gerentes de produto e equipes de operações – essencialmente todos na empresa.

Como todos os aplicativos web funcionam de maneira diferente, isso sobrecarrega nossos funcionários para aprenderem a interagir com eles de maneira mais eficiente.

Isso pode levar os engenheiros a gastar muito tempo e esforço reinventando a roda em vez de alavancar um sistema de design universal em toda a empresa.

Para resolver esses problemas, a Uber montou uma equipe dedicada de design e engenharia para criar um sistema universal, que resultou no sistema de design Base Web.

Com seu código aberto em 2018, a Base Web é uma biblioteca de componentes React que implementa a linguagem de design Base, que atua como uma fundação independente de dispositivos para a criação rápida e fácil de aplicativos web.

O que é um sistema de design?

Um sistema de design é um conjunto de componentes reutilizáveis que, em combinação com um conjunto de regras e tokens de design (conhecidos como entidades), armazenam informações de design visual, como cores ou espaçamento, e permitem criar aplicativos consistentes e acessíveis rapidamente.

Um sistema de design serve como uma linguagem comum entre equipes de engenheiros, designers e gerentes de produto, facilitando as coisas para eles trabalharem juntos.

Ele promove a produtividade através dessa compreensão compartilhada de blocos de build.

Os sistemas de design também ajudam a integrar novos engenheiros e designers – eles podem passar rapidamente por todos os componentes e tokens de design possíveis usados por uma determinada organização de engenharia.

Introduzindo a Base Web

Base Web é uma base para iniciar, evoluir e unificar aplicativos web. É um kit de ferramentas open source de componentes e utilitários React que se alinham ao Base Design System – essencialmente, os designs são traduzidos em código. O projeto foi feito para ser confiável, acessível e extensivamente personalizável.

Confiabilidade

Ao contribuir com nosso código publicamente no GitHub, estamos nos mantendo em alto padrão e dedicados a fornecer um canal de comunicação aberto para nossos usuários, onde eles podem sugerir melhorias e contribuições para a Base Web.

Cada componente React é rastreado por serviços de regressão visual em cada commit para garantir um layout pixel-perfect.

Também testamos as atualizações de ponta a ponta usando o Puppeteer, uma ferramenta que fornece alto nível de controle da API sobre o navegador Chrome.

Aproveitando essas duas estratégias de teste, podemos ter certeza de que as alterações de código estão atendendo aos requisitos do produto e não causando bugs.

Acessibilidade

A acessibilidade do usuário é extremamente importante para a Uber, e a Base Web faz muito para garantir que os desenvolvedores recebam as ferramentas para criar produtos que funcionem para todos os visitantes do site.

Por exemplo, arrastar e soltar Lists são notoriamente difíceis de implementar porque os navegadores fornecem pouca ajuda quando os desenvolvedores têm que construir interações de arrastar e soltar.

Os desenvolvedores que usam a Base Web têm a tranquilidade de saber que a navegação pelo teclado é confiável e funciona bem com os leitores de tela.

Para garantir acessibilidade adicional, a Base Web utiliza o Styletron, que gera estilos atômicos para que os aplicativos Web possam baixar o mínimo de conteúdo possível.

O Styletron é fundamental para otimizar a Base Web para usuários em dispositivos móveis e com baixa conectividade de rede.

Personalização

Para dar conta da diversidade de aplicativos web, criamos a Base Web para ser o mais personalizável possível.

De muitas maneiras, você pode pensar no projeto como uma “base” na qual você pode criar facilmente novos sistemas de design.

O projeto fornece um ponto de entrada de nível superior para o tema de todos os tokens de design, incluindo cores, tamanho e tipografia.

Não apenas os desenvolvedores podem editar facilmente os elementos visuais de seus aplicativos web, mas a Base Web também incorpora uma interface para sobrepor a funcionalidade.

O padrão para sobrepor

Com base na experiência anterior de nossa equipe trabalhando com bibliotecas de componentes, um dos nossos principais objetivos com a Base Web era criar um software de desenvolvimento web que facilitasse a reutilização de componentes.

Para conseguir isso, trabalhamos com os engenheiros web da Uber para detectar os principais pontos de dor com os quais eles precisavam lidar em seu trabalho de engenharia do dia a dia. Ficou claro que ter mais controle sobre um componente era o requisito mais desejado.

Com base em nossa pesquisa, determinamos que as principais partes dos componentes React aos quais os engenheiros precisavam frequentemente de acesso eram as personalizações de estilo, a capacidade de passar algumas propriedades personalizadas para qualquer elemento em um componente modulável, como Accessible Rich Internet Applications (ARIA), e a capacidade de modificar a renderização de um componente. Como resultado, introduzimos uma API de substituição unificada nos componentes da Web Base.

Alguns dos benefícios que experimentamos com o padrão de sobreposição proposto, são:

• Nenhuma sobrecarga de API de propriedades de nível superior.
• Nenhuma propriedade extra fazendo proxy inconsistente entre os componentes moduláveis.
• Componentes de apresentação facilmente substituíveis.

Vamos ver em detalhes como é a aparência da API de sobreposição da Base Web:

Como descrito acima, fornecemos um identificador para cada elemento subjacente em um componente para que ele possa ser segmentado por meio da propriedade de sobreposições.

No exemplo acima, há dois elementos renderizados, e eles são expostos como Root e Option na API de sobreposições.

Para cada elemento ou componente, fornecemos uma maneira de passar propriedades e estilos extras ou substituir completamente o componente.

Propriedades extras são transmitidas como um objeto que é distribuído no elemento JSX, tendo precedência sobre outras propriedades aplicadas por padrão.

As sobreposições de estilo podem ser passadas de duas maneiras, como um objeto ou como uma função que aceita $theme e algumas propriedades de estado de componente compartilhadas e retorna um objeto de estilo. As sobreposições de estilo aprovadas são fundidas com os estilos do elemento padrão.

Também fornecemos uma maneira de substituir completamente um elemento ou componente subjacente, passando as substituições como um valor de componente para o identificador de destino (a substituição Option é mostrada no exemplo acima). Isso pode ser útil se você quiser adicionar ou alterar a funcionalidade de um determinado subcomponente.

Internamente, criamos helpers para mesclar as sobreposições no elemento padrão ou personalizado; confira nossa documentação para aprender a usá-los em seus próprios projetos.

Comece a usar a Base Web

Com o código aberto em 2018 para permitir que outras pessoas aproveitem os benefícios dessa solução, a Base Web agora é usado em toda a Uber, garantindo uma experiência de desenvolvimento perfeita em nossos aplicativos web.

Para começar a usar a Base Web, acesse nosso site de documentação e leia a seção Getting Started, que aborda:

• Instalação da Base Web
• Uso e tutoriais da Base Web com aplicativos de exemplo

Teste a Base Web por si próprio e, se tiver alguma dúvida, não hesite em contactar-nos através do nosso canal no Slack.

***

Este artigo é do Uber Engineering. Ele foi escrito por Nadiia Dmytrenko, Chase Starr e Gergely Nemeth. A tradução foi feita pela Redação iMasters com autorização. Você pode conferir o original em: https://eng.uber.com/introducing-base-web/