Existem dois tipos principais de perguntas de design de sistema de front end: (1) Aplicações e (2) Componentes de interface do usuário.
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.
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:
| Aplicação | Exemplos | Áreas importantes |
|---|---|---|
| Fonte de Notícias | Facebook, Twitter | Interações de feed, abordagens de paginação de feed, compositor de mensagens/postagens |
| Mensagem/Chat | Messenger, Slack, Discord | Sincronização de mensagens, chat em tempo real, lista de mensagens, lista de chat |
| Marketplaces de comércio eletrônico | Amazon, eBay | Páginas de listagem de produtos, páginas de detalhes do produto, carrinho, checkout |
| Compartilhamento de Fotos | Instagram, Flickr, Google Fotos | Navegação de fotos, Edição de fotos, Envio de fotos |
| Reserva de Viagem | Airbnb, Skyscanner | Interface de busca, Resultados da busca, Interface de reserva |
| Cliente de Email | Outlook, Apple Mail, Gmail | Sincronização de caixa de entrada, Interface de caixa de entrada, Compositor de e-mail, |
| Streaming de Vídeo | YouTube, Netflix, TikTok | Reprodutor de vídeo, Streaming de vídeo, Página de detalhes do vídeo, Vídeos recomendados |
| Aplicativos Colaborativos | Google Docs, Google Sheets, Google Slides, Notion | Colaboração em tempo real, Sincronização de Estado |
| Desenho | Figma, Lucidchart | Abordagem de renderização, Modelo de estado/dados do cliente |
| Mapas | Google/Apple Maps, Foursquare City Guide | Renderização do mapa, Exibindo Localizações |
| Armazenamento de Arquivos | Google Drive, Dropbox | Envio de arquivos, Download de arquivos, Explorador de arquivos |
| Videoconferência | Zoom, Google Meet | Streaming de vídeo, Modos de visualização variados |
| Caronas | Uber, Lyft | Reserva de percurso, local do motorista |
| Streaming de Música | Spotify, Apple Music | Interface do reprodutor de música, Interface de listas de reprodução |
| Jogos | Tetris, Snake | Estado do jogo, Loop do jogo, Lógica do jogo |
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:
<ImageCarouselimages={...}onPrev={...}onNext={...}layout="horizontal"><ImageCarouselImage style={...} /><ImageThumbnail onClick={...} /></ImageCarousel>
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 de componentes de interface do usuário frequentemente solicitados durante entrevistas de design de sistemas front-end:
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.