Frontend Developer – pytania rekrutacyjne + odpowiedzi

Do zadań Programisty Frontend należy – w dużym skrócie – przygotowanie tych elementów aplikacji przeglądarkowej czy witryny, którą widzieć, i z której na co dzień będą korzystać końcowi użytkownicy. 

Chodzi tu zatem o ogólny layout strony, wykorzystywanie API wystawianych przez Backend Developera, ale też troska o to, aby aplikacja prezentowała się czytelnie i efektownie, implementacja najlepszych praktyk z zakresu UI i UX oraz dbałość o to, aby aplikacja rysowała poprawnie swój interfejs niezależnie od tego, czy będzie on wyświetlany na desktopie, tablecie czy smartfonie. W odróżnieniu od Backend Developera Frontendowiec odpowiada więc za to, co widzi końcowy użytkownik i za to, w jaki sposób wchodzi w interakcje z aplikacją, a więc de facto na bieżąco może obserwować rezultaty swojej pracy. 

Ważnym elementem pracy Frontend Developera może być także przeprowadzanie testów, np. testów A/B, gdzie „na produkcji” sprawdza się skuteczność dwóch alternatywnych rozwiązań,  dzięki czemu można śledzić zachowania i aktywność użytkowników i to na podstawie ich aktywności podejmować decyzje służące doskonaleniu frontendu.  

Rozmowa kwalifikacyjna

W ogólnym przebiegu rozmowa kwalifikacyjna na stanowisko Frontend Developera może się nieco różnić od innych specjalizacji. Oczywiście spodziewać możemy się tu takich elementów jak pytania ogólne, mające sprawdzić miękkie umiejętności kandydata, pytania o motywacje, podejście do pracy i plany na przyszłość. 

W trakcie pierwszego etapu rekrutujący będzie sprawdzała nie tylko to, co mówi kandydat, ale także w jaki sposób, weryfikując tym samym jego kompetencje komunikacyjne i umiejętność klarownego przekazywania swoich pomysłów. W kolejnych etapach dyskusji na tematy bardziej techniczne, związane już ściśle z projektowaniem frontendu. 

W przypadku Frontend Developera znacznie większą rolę podczas rozmowy odgrywać będzie portfolio. O ile w przypadku innych specjalizacji dostarczenie rekrutującemu zbioru dotychczas opracowanych projektów jest opcjonalne (choć bardzo dobrze świadczące o kandydacie), tak w przypadku frontendu jest to element w zasadzie obowiązkowy. Jest to bodaj jedyny sposób, by rekrutujący mógł sprawdzić tak kluczowe elementy kompetencji frontendowca, jak podejście do wspomnianego już UI i UX, ogólne poczucie estetyki czy umiejętność projektowania czytelnych i responsywnych interfejsów.

A jak najlepiej przygotować portfolio opracowanych już projektów stron i aplikacji? Rzecz jasna w postaci kolejnej witryny, która sama w sobie będzie stanowiła dla kandydata duże pole do popisu. Warto pamiętać, by pochwalić się swoim portfolio w portalach branżowych i społecznościowych, zwłaszcza na LinkedIn. 

Rekrutujący doceniają także samą aktywność w socialach oraz profile, które w sposób możliwie jak najbardziej wyczerpujący informują o znajomości poszczególnych umiejętności kandydatów, języków czy frameworków. Dziś profil na LI to w zasadzie wizytówka kandydata, warto więc zadbać, aby prezentowała się ona odpowiednio.

Kluczowe zagadnienia

Po wstępie i części ogólnej czas na kolejny etap rozmowy kwalifikacyjnej, która będzie sprawdzała już konkretne kompetencje techniczne. Jak się do niego przygotować? Bezsprzecznie wymagana będzie znajomość JavaScript, HTML i CSS. Bez tego trudno sobie dziś wyobrazić pracę Frontend Developera i to zapewne właśnie JS-a, a być może także HTML5 i CSS-a będzie dotyczyła część pytań rekrutacyjnych. Rzecz jasna na tym nie koniec – w rozmowie należy się także wykazać znajomością jednego z najpopularniejszych frontendowych bibliotek i frameworków:

• Angular – wolny i otwarty framework, który powstał jako efekt przepisania od nowa w TypeScripcie frameworka AngularJS. Dziś jest on popularniejszy niż sam pierwowzór i znacząco się od niego różni –  zamiast zasięgów stosuje się tu hierarchię komponentów, Angular pozwala także na większą modularyzację aplikacji. Zalecane jest także pisanie kodu w TypeScripcie, a nie JavaScripcie, a co za tym idzie stosowanie statycznego typowania i adnotacje typów. Framework sprawdzi się w budowaniu SPA, obsłudze RESTful API, oferuje obustronny binding danych czy wstrzykiwanie zależności.   

• React.js – o ile Angular rozwijany jest pod egidą Google, tak React to owoc prac developerów Facebooka. Aktualnie wykorzystywany jest przez wiele największych witryn na świecie, na czele z Netfliksem. Cechą charakterystyczną Reacta jest wirtualny DOM (VDOM), gdzie w pierwszej kolejności developer deklaruje docelowy stan interfejsu, który przechowywany jest w pamięci, a następnie sam framework porównuje DOM z VDOM. Innym wyróżnikiem jest Javascript XML (JSX) – przydatny format, który pozwala umieszczać fragmenty HTML-a i XML-a wewnątrz kodu napisanego w JavaScripcie.

• Vue.js – działający w modelu MVVM framework powstał na bazie AngularJS i miał być jego odchudzoną wersją. W rezultacie nie uświadczymy tutaj funkcji związanych z obsługą stanów czy zarządzania routingiem, ale można je dodać dzięki osobnym bibliotekom. Podobnie jak React, jest często framework ten jest często wybierany do budowania SPA, czyli aplikacji jednostronicowych. Ważną cechą jest renderowanie deklaratywne pozwalające opisywać elementy w HTML-u na podstawie stanu JS oraz mechanizm pozwalający aktualizować DOM na bazie zmian w JavaScripcie.

• Svelte – napisane w TypeScripcie i zyskujące rosnącą popularność narzędzie, które generuje kod manipulujący DOM. Nie stanowi więc samo w sobie frameworku, co może się bezpośrednio przełożyć na krótszy czas ładowania poszczególnych komponentów i zredukować liczbę pobranych z serwera plików niezbędnych do poprawnego wyświetlenia interfejsu aplikacji. Ważną zaletą jest kompilator, który przetwarza kod w przeglądarce użytkownika podczas budowania aplikacji.

• jQuery – biblioteka JS, której popularność co prawda maleje z roku na rok, ale jej znajomość może się okazać przydatna przy pracy ze starszymi projektami. Dzięki dużej liczby wbudowanych funkcji i pokaźnej bibliotece dodatków pozwala na ułatwione manipulowanie elementami w HTML i DOM, wdrożenie na stronie gotowych efektownych animacji oraz uproszczenie pracy z AJAX-em. Mocną stroną jQuery jest nie tylko ułatwienie pracy programiście, ale także szeroka kompatybilność.

Pytania rekrutacyjne

Najczęściej ostatnim etapem rozmowy kwalifikacyjnej są pytania rekrutacyjne. Mogą one wymagać zarówno zwięzłej odpowiedzi, jak i bardziej opisowego objaśnienia problemu. 

Przede wszystkim spodziewać należy się spodziewać sprawdzenia umiejętności w JavaScript. Obszerną listę pytań i odpowiedzi nt. JavaScript publikowaliśmy tutaj. 

Ponadto pytania mogą się różnić także ze względu na specyfikę technologii i podstawowy zestaw może zostać rozszerzony o konkretne kwestie związane np. z Reactem. 

Co to jest DOM?

DOM, czyli Document Object Model, to jedno z kluczowych pojęć w pracy frontendowca. DOM reprezentuje strukturę i hierarchię wszystkich elementów w HTML i XML, jakie składają się na dokument: znaczniki, atrybuty i informacje o ich wzajemnych relacjach. DOM został ustandaryzowany przez organizację W3C, co pozwoliło na zdefiniowanie klas i interfejsów oraz zarządzanie węzłami, do których odnosi się JavaScript. Drzewo DOM odgrywa kluczową rolę w renderowaniu interfejsów przez silniki przeglądarek, o czym więcej poczytać można tutaj.

Czym są eventy server-sent?

Server-sent events to API pozwalające na przekazywanie żądań w relacji serwer-klient, przy czym jako klienta należy rozumieć jako aplikację. API, w odróżnieniu od WebSocketów, pozwala na jednokierunkowe przesyłanie wiadomości, najczęściej komunikatów o konkretnych wydarzeniach, np. zmianach na backendzie lub statusie (końcu) przetwarzania danych elementów.

Czym jest CORS?

CORS to skrót od Cross-Origin Resource Sharing, czyli mechanizmu pozwalającego wysyłać żądania HTTP z jednej strony na drugą z pominięciem mechanizmów bezpieczeństwa w przeglądarkach. CORS wykorzystuje nagłówek, w którym zdefiniować można „bezpieczne” adresy i wysłać żądanie, które nie zostanie zablokowane.

Czym jest XMLHttpRequest?

Jest to żądanie umożliwiająca asynchroniczną komunikację pomiędzy klientem a serwerem. Pozwala na wysyłanie danych do serwera w tle, żądań pobrania danych z serwera i otrzymania danych z serwera oraz na aktualizowanie danych bez konieczności odświeżania całej strony.

Czym jest plik manifestu w HTML5?

Plik manifestu to plik zawierający listy zasobów, które mają być zcachowane. Dzięki temu można świadomie wskazać konkretne elementy w taki sposób, aby przełożyło się to na szybsze ładowanie aplikacji bądź – np. gdy jakiś element musi być często odświeżany – również to zasygnalizować. Wyróżnia się trzy rodzaje (sekcje) obiektów w plikach manifestu: te, które mają być zcachowane (CACHE Manifest), te, które zawsze mają być pobrane (Network), pliki awaryjne, które mają być zcachowane w razie, gdyby aplikacja padła (Fallback).

Jaka jest różnica pomiędzy display: none i visibility: hidden?

Oba atrybuty służą do ukrywania elementów na stronie. W praktyce działają one jednak inaczej. O ile atrybut visibility: hidden faktycznie jedynie ukrywa element i tag jest renderowany i zostanie dla nie niego zarezerwowane widoczne miejsce, tak w przypadku display: none w ogóle nie zostanie on wyświetlony na stronie, ani nie pojawi się na niego miejsce, choć cały czas będzie można z nim wchodzić w interkacje przez DOM.

Jakie są różnice między funkcją strzałkową a normalną w JS?

To funkcje o krótszej składni, wykorzystującej znak => (stąd nazwa). Ponadto w funkcjach strzałkowych nie występuje oddzielnie this, używany jest kontekstu wykonania funkcji.

Jakie są różnice między kodem synchronicznym a asynchronicznym?

W przypadku kodu synchronicznego mamy do czynienia z sytuacją, gdzie zadania są wykonywane po kolei, jedno na raz i jedno po drugim. Przeciwieństwem jest kod asynchroniczny, który pozwala na realizację wielu zadań równolegle. W przypadku frontendu i JavaScript można definiować funkcje asynchroniczne async, jak i używać obietnic, o czym więcej przeczytać można tutaj.

Czym jest CSS Grid?

Siatki w CSS-ie można uznać za duchowe następczynie tabel, jednak oferują one znacznie większe możliwości. Można z ich użyciem podzielić widok na wersy i kolumny, a następnie z pomocą zwykłej numeracji poszczególnych komórek określić zakres rysowania jakiegoś elementu. W praktyce, aby zdefiniować rozmiary i wyrównać obiekty w HTML-u wystarczy wprowadzić DIV-y:

<div class="kontener">
  <div class="one">Jeden</div>
  <div class="two">Dwa</div>
</div>

Zaś w CSS-ie przypisać je do konkretnych komórek siatki:

.kontener {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;

}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;

Jaka jest różnica między CSS Grid i Flexboksem?

Jak już ustaliliśmy, Grid tworzy siatkę, która jest dwuwymiarowa i składa się z kolumn i wersów. Odrębne podejście wykorzystuje się w przypadku Flexboksów, czyli takiemu podejściu do umiejscawiania i wyrównywania obiektów na stronie, gdzie występują one w jednym „wymiarze”: w poziomie lub w pionie.

Czym są preprocesory?

Preprocesory w CSS, takie jak SASS czy LESS, to narzędzia rozszerzające możliwości CSS. CSS zapisywany jest pierwotnie do pliku najczęściej o rozszerzeniu SCSS, a następnie „kompilowany ”do pliku CSS. Preprocesory pozwalają na daleko idącą automatyzację pracy nad stylami, umożliwiają stosowanie dobrych praktyk, automatycznie implementując DRY, a nawet można dzięki nim stosować w CSS-ie logikę. 

Czym jest selektor atrybutu?

To zaprezentowana wraz z premierą CSS 3 możliwość przypisania stylów do selektora nie na podstawie nazwy czy klasy, ale na podstawie jego atrybutów HTML-u. Selektor atrybutu można zatem zastosować do wszystkich obiektów w dokumencie, które mają np. określone wymiary czy też linków prowadzących nawet pod konkretne adresy. 

Jaka jest definicja funkcji wyższego rzędu?

Funkcja wyższego rzędu to funkcja, która przyjmuje inne funkcje jako parametry lub też taka, której wynik również jest funkcją. Przykładowa funkcja wyższego rzędu to map służąca do zwracania listy z wynikami funkcji dla wszystkich elementów z danej listy.

Tradycyjnie do zebranych na temat rozmowy kwalifikacyjnej na stanowisko Frontend Developera dołączamy przydatne linki, z którymi warto zapoznać się w trakcie przygotowań:

• Frontend Developer - praca i zarobki w Polsce,
• Frontend - trendy w 2022,
• JavaScript Developer – rozmowa rekrutacyjna,
• Jaki jest najlepszy Programista React?,
• Dlaczego przeszedłem z Vue.js na React.