Víš, co je metrika FCP (First Contentful Paint)? Představme si, že máme aplikaci v Reactu — sociální síť s server-side renderingem, a je problém: když uživatel přímo vstoupí na něčí profil, dlouho zůstává bílá obrazovka. Můžeš popsat kroky — co se děje od chvíle, kdy uživatel stiskne Enter, až do chvíle, kdy se objeví první obsah?
Frontend
Jak funguje cacheování zdrojů v prohlížeči — jak prohlížeč rozhoduje, zda načíst z cache nebo znovu načíst, a jak s tímto řídit? Jaké jsou způsoby cacheování, včetně Service Worker?
Implementujte nový komponent SignupSuccess. Měl by se zobrazit místo registračního formuláře po úspěšném zaregistrování.
Jak bys implementoval cache na straně klienta?
Pověz mi něco o sobě, čím se v programování zajímáš, tvé poslední zkušenosti, možná jsi dělal nějaké složité věci.
Líbilo se ti pracovat s Reduxem jako správce stavu pro složité formuláře?
Slyšel jsi o helperovi Promise.withResolvers, který se nedávno objevil v JavaScriptu? Místo druhého řádku musíš napsat jeho ekvivalent.
Komplexita práce s memoize: zajistit, aby funkce memoize jako druhý argument přijímala dobu života cache v milisekundách, po jejímž uplynutí je cache neplatná.
console.log(1) setTimeout(() => { console.log(2) }, 10) setTimeout(() => { Promise.resolve().then(() => console.log(3)) }, 0); setTimeout(() => { console.log(4) }, 0); new Promise((_, reject) => { console.log(5) reject(6) console.log(7) }).then(() => console.log(8)) .catch(() => console.log(9)) .then(() => console.log(10)) .catch(() => console.log(11)) .then(() => console.log(12)) .then(console.log) .finally(() => console.log(13)) console.log(14)
Existuje kód — je třeba pochopit, co dělá, provést revizi kódu: jaké jsou problémy a co lze zlepšit.
Můžeš uvést pár výhod a nevýhod Reduxu?
Na stránce je seznam 5000 produktů, stránka se hodně zasekává. Obchod žádá, aby s tím něco udělal. Co navrhuješ?
Jaký máš názor na metodologii FSD (Feature-Sliced Design)?
Na stránce přátel a v messengeru se zobrazují podobné informace o uživatelích. Existují dvě možnosti: ukládat uživatele v lokálních slicech každé funkce nebo v globálním storu. Jaké jsou výhody a nevýhody globálního storu v tomto případě?
Povězte o svých předchozích místech práce — co zajímavého jste dělali?
Co se stane, když nastavíte atribut async na skript v hlavičce? Čím se liší async od defer?
Jaké alternativy k Reduxu znáš a proč nemají jeho výhody? Proč je Redux dobře testován a kontexty ne?
Jak lze získat data z jiného slice funkce (například users slice) na stránce konkrétního uživatele, aniž bychom narušili hranice mezi moduly a bez zbytečných požadavků?
#React registrační formulář 1. Vysvětli, jak funguje StateProvider, sdílej své myšlenky s interviewerem. 2. Podívej se na /src/api/mock, vysvětli, jak to funguje. 3. Zkontroluj barvu tlačítka SubmitButton a oprav ji. 4. Implementuj validaci formuláře na straně klienta v komponentě Signup. (\*\*) Měj na paměti úkol číslo 9. Pravidla: - Pole Uživatelské jméno, Email, Heslo a Opakovat heslo by měla mít alespoň 6 znaků; - Heslo by mělo odpovídat Opakovat heslo; - Validace by měla být provedena po kliknutí na "Sign Up"; - Pole s neplatnými hodnotami by měla být označena (props error a helperText); 6. Odpověď API může obsahovat chybu, která by měla být zobrazena uživateli poblíž příslušného pole. 7. Ujisti se, že komponenta UserName zobrazuje nové uživatelské jméno po úspěšném odeslání. 8. Implementuj nový komponent SignupSuccess. Měl by být zobrazen místo registračního formuláře. 9. Implementuj serverovou validaci pro příslušná pole.
Můžeš stručně povědět o své poslední zkušenosti a co od nové práce očekáváš, čeho hledáš na nové pozici?