Tipos de perguntas de design de sistema front-end

Existem dois tipos principais de perguntas de design de sistema de front end: (1) Aplicações e (2) Componentes de interface do usuário.

Aplicações

Conforme mencionado acima, projetar aplicações para entrevistas de design de sistema de front end será semelhante às entrevistas gerais de design de sistema de Engenharia de Software e, de fato, as perguntas são muito parecidas. No entanto, em vez de falar sobre sistemas distribuídos, você deve se concentrar no lado do cliente e discutir sobre a arquitetura da aplicação e os detalhes de implementação no lado do cliente.

Nos dias de hoje, muitos sites são interativos e aplicativos ricos que podem realizar virtualmente o que muitos aplicativos de desktop são capazes. Se você já usou o Gmail, Facebook, YouTube ou Google Calendar na web, você já utilizou um aplicativo web. Os aplicativos web geralmente são dinâmicos e as navegações em um aplicativo web geralmente não exigem uma atualização completa da página. Em vez disso, eles usam JavaScript para buscar dados remotos para a próxima página e alterar dinamicamente o conteúdo e o URL. Como os aplicativos web são softwares complexos que envolvem vários módulos, as arquiteturas comuns de aplicativos que aprendemos nas aulas de Engenharia de Software, como o Model-View-Controller (MVC) e o Model-View-ViewModel (MVVM), também são aplicáveis na construção de aplicativos web. O React é uma das bibliotecas JavaScript mais populares do Facebook para criar aplicativos da Web interativos e muitos aplicativos da Web do React adotam uma arquitetura baseada em Flux/Redux unidirecional.

Diferentes aplicativos têm seus próprios aspectos únicos e pontos de discussão. É imperativo que você se concentre nas partes que são únicas para o aplicativo e não gaste muito tempo falando sobre coisas gerais que são aplicáveis a todas as perguntas. Primeiramente, projete a arquitetura de alto nível, identifique os componentes no sistema e a API entre os componentes. Em seguida, aprofunde-se em algumas áreas que são interessantes para o problema e discuta como implementá-las ou otimizá-las.

Exemplos

Aqui está uma lista de perguntas comumente feitas durante entrevistas de design de sistema de front end e as áreas nas quais você deve se concentrar:

Componente de UI

No desenvolvimento front-end moderno, é comum usar bibliotecas de componentes para construir aplicativos. Alguns dos componentes populares que eu poderia ter utilizado anteriormente incluem jQuery UI (um tanto antigo!), Bootstrap, Material UI, Chakra UI, entre outros.

É uma expectativa dos Engenheiros Front-End serem capazes de construir os vários componentes de interface de usuário necessários para uma aplicação. Alguns componentes de interface de usuário podem ser fáceis de construir (como texto, botão, insígnia, etc.), enquanto outros podem ser muito mais complexos (como autocompletar, menu suspenso, modal, etc.). Na maioria das vezes, quando solicitado a projetar um componente de interface de usuário, geralmente será da categoria mais complexa mencionada anteriormente.

Primeiramente, determine os subcomponentes do componente (por exemplo, para um carrossel de imagens, temos a imagem, os botões de paginação, miniaturas), defina a API externa do componente (quais opções/props o componente deve aceitar), descreva o estado interno do componente, a API entre os subcomponentes (se relevante), e então mergulhe nas otimizações e considerações de desempenho, acessibilidade, experiência do usuário, segurança, etc., quando aplicável.

Você pode ter que escrever um pequeno trecho de código para um ou mais dos seguintes propósitos:

1. Descreva a hierarquia de componentes.
2. Descreva a forma do estado do componente.
3. Explique alguma lógica não trivial dentro do componente.

<ImageCarousel
  images={...}
  onPrev={...}
  onNext={...}
  layout="horizontal">
  <ImageCarouselImage style={...} />
  <ImageThumbnail onClick={...} />
</ImageCarousel>

Personalização do tema

Certamente será esperado que você projete uma forma para os usuários do componente (desenvolvedores) personalizarem a aparência do componente. Consulte Seção de Princípios de API no Design de Componentes de UI do Front End Guidebook para uma visão geral e comparação das diferentes abordagens.

Exemplos

Exemplos de componentes de interface do usuário frequentemente solicitados durante entrevistas de design de sistemas front-end:

• Projete um componente de preenchimento automático
• Projete um componente menu suspenso
• Projete um widget de enquetes incorporável
• Projete um carrossel de imagens
• Projete um componente modal
• Projete uma tabela de dados com classificação e paginação
• Crie um datepicker
• Projete um componente multiselect

O que fazer durante as entrevistas?

Agora que você tem uma compreensão do tipo de perguntas que podem ser feitas durante as entrevistas de Design de Sistemas Front-End, como você procede para respondê-las? Nós criamos o RADIO framework uma abordagem estruturada fácil de lembrar que você pode utilizar para se destacar em perguntas de entrevistas de design de sistemas.