Frontend-järjestelmäsuunnittelun haastattelut

Senior-tason frontend-haastatteluissa pyydetään suunnittelemaan vaativa käyttöliittymäominaisuus alusta loppuun: uutisvirta, automaattinen täydennys, kuvagalleria tai infinite scroll -koontinäyttö. Arvioinnissa painotetaan arkkitehtuuria, kompromissien ymmärtämistä, suorituskykyajattelua ja viestintää — ei frameworkien nippelitietoa.

Useimmat 45–60 minuutin haastattelut etenevät näin: 1) Vaatimusten täsmentäminen (5 min). 2) Korkean tason arkkitehtuurin hahmottelu (10 min). 3) Komponenttien jakaminen (10 min). 4) Datan haku ja tila (10 min). 5) Suorituskyky ja saavutettavuus (10 min). 6) Syvällinen tarkastelu yhdestä alueesta (haastattelijan valinta).

Älkää aloittako koodaamista. Kysykää: mille laitteille ominaisuus tulee? Kirjautuneille vai anonyymeille käyttäjille? Tarvitaanko offline-tukea? Ovatko päivitykset reaaliaikaisia? Mikä on odotettu mittakaava (10 käyttäjää vai 10 miljoonaa)? Mitkä ovat saavutettavuusvaatimukset? Mitä selaimia tuetaan? Nämä päätökset vaikuttavat koko suunnitteluun.

Piirtäkää laatikot: asiakas (SPA vai SSR?), API-yhdyskäytävä, palvelut, välimuisti ja CDN. Merkitkää käyttäjän toiminnot ja datavirta. Mainitkaa poikkeustilanteet varhain — se osoittaa, että olette rakentaneet oikeita järjestelmiä.

Hahmotelkaa komponenttihierarkia. NewsFeed → Header, Story[], Composer. Story → Avatar, Content, Actions, Comments. Tunnistakaa uudelleenkäytettävät komponentit ja ne, jotka liittyvät vain tiettyyn ominaisuuteen.

Missä kukin tilan osa sijaitsee? Paikallisesti (useState), URL-osoitteessa (router), palvelintilassa (React Query) vai asiakastilassa (Zustand)? Keskustelkaa hakustrategiasta: alustava SSR, infinite scroll, reaaliaikaiset WebSocket-päivitykset ja optimistinen käyttöliittymä.

Koodin jakaminen reittien rajoilla. Virtualisoidut listat pitkille syötteille. Kuvien optimointi (lazy load ja AVIF/WebP). Pääsäikeen estämisen välttäminen. Bundle-kokojen budjetit. Cache-first-SW toistuville käynneille.

Semanttinen HTML. Näppäimistön käyttö. ARIA-roolit ja live-alueet. Värien kontrasti. Testaus ruudunlukijalla. Lisäpisteitä saa mainitsemalla fokuksen hallinnan reitin vaihtuessa.

Keskustelkaa seuraavista: infinite scroll IntersectionObserverilla, virtualisointi muistin säästämiseksi, optimistiset tykkäykset, reaaliaikainen uuden julkaisun ilmaisin, kuvien lazy load sumennettujen paikkamerkkien avulla, SSR hakukoneoptimointia varten sekä ISR- ja edge-välimuisti suosituille aikajanoille.

Keskustelkaa seuraavista: syötteen debouncing, AbortController vanhentuneiden pyyntöjen peruuttamiseen, pyyntöjen deduplikointi, vastausten välimuisti (LRU), näppäimistönavigointi (ylös/alas/enter/escape), ARIA combobox -roolit ja mobiilin virtuaalinäppäimistön käsittely.

Keskustelkaa seuraavista: masonry- ja grid-asettelun vertailu, responsiivinen srcset retina-näytöille, leikkauspisteisiin perustuva lazy load, seuraavan kuvan esilataus, lightbox/modal fokuksen ansalla, pyyhkäisyeleet mobiilissa, nuolinäppäinnavigointi ja deep linking.

Jokaisen valinnan yhteydessä mainitkaa vaihtoehto ja perustelkaa, miksi valitsitte kyseisen ratkaisun. ”Käyttäisin IntersectionObserveria lazy loadingiin, koska se on natiivi ja tehokas. Vaihtoehtona on scroll listener throttle-toiminnolla — se on yksinkertaisempi, mutta hitailla suorittimilla nykivämpi.” Tätä senior-tason haastattelijat arvostavat.

1) Koodiin siirtyminen ennen vaatimusten täsmentämistä. 2) Saavutettavuuden sivuuttaminen. 3) Virhetilanteiden unohtaminen (verkkoyhteyden katkeaminen, tyhjät tulokset). 4) Lataustilojen unohtaminen. 5) Epämääräiset vastaukset (”Käyttäisin Reactia” — mutta millaista arkkitehtuuria?).

Täsmentäkää rajaus ensin. Korkean tason arkkitehtuuri (asiakas, API, välimuisti, CDN). Komponenttipuu. Tilan sijainti (paikallinen tila, URL, palvelinvälimuisti, globaali tila). Datan hakustrategia. Suorituskyky (koodin jakaminen, virtualisointi, kuvien optimointi). Saavutettavuus (näppäimistö, ARIA, kontrasti). Viestikää kompromisseista. Älkää hypätkö suoraan koodiin. Harjoitelkaa klassisia malleja: syöte, automaattinen täydennys, galleria ja koontinäyttö.