Великий ґайд, як стартувати та розвиватися у професії Frontend: радить Frontend Engineer в Amazon

ITExpert team19.12.2023

Frontend розробник — це той, хто створює сторінки сайту та вебдодатки, а також усе, що допомагає користувачам керувати девайсами та програмами за допомогою голосу, натискань, жестів або через командний рядок. І у тому числі саме завдяки frontend-розробнику ви зараз читаєте цей текст 🙂

За даними Stackoverflow, frontend-розробка входить до трійки IT-спеціальностей, попит на які найбільший. Про те, хто такий фронтенд розробник, що потрібно знати фронтенд розробнику, як правильно вчитися, щоб не набити шишок, і рухатися карʼєрою впевнено, а також на які ресурси звернути увагу, якщо хочете спробувати себе в професії frontend розробника, запитали у Frontend Engineer в Amazon, Антона Худякова.

Він працював в Ubisoft і Ciklum. Також був викладачем та ментором на курсі React в IT-школі «Лектрум», де навчав групи до 30 студентів і проводив індивідуальне менторство та code review.

А Tech Recruiter в ITExpert Анна Василенко поділилася, де шукають фронтенд-розробників, як перевіряють soft skills кандидатів та які запитання ставлять, під час «хантингу» скілового фахівця в команду.

До початку: різниця між бекендом та фронтендом

Фронтенд розробник: хто це? Чим займається frontend розробник? У чому різниця між ним і бекендером? Бекенд — це все, що приховано від користувача та знаходиться на сервері. Тобто код «всередині», завдяки якому коректно працюють кнопки та функції сайту чи вебдодатку. Ідентифікація даних, зʼєднання з платіжним шлюзом, передача інформації — результати роботи backend-розробника.

Окей, Google: а хто такий frontend розробник? Фронтенд, навпаки, — те, що бачить і з чим взаємодіє користувач. Розглянемо один із прикладів роботи фронтендерів — сайт сервісу бронювання житла Airbnb. Вікна, де ви вибираєте дати, а також країну та місце, де зупинятиметеся, а також фільтри, за якими можете визначити параметри житла, — це фронтенд.

Чим займається фронтенд розробник

Головне завдання фронтенд-розробника — перевести дизайн-макет в код, а також зробити так, щоб все на сайті або в додатку працювало швидко й зручно для користувача.

Must-have скіли та знання Frontend developer

Розберімо, що повинен знати Frontend розробник. JavaScript — головна мова фронтенд-розробника. Фронтендерам також часто доводиться займатися версткою сайтів: написанням HTML-коду та CSS-стилів, щоб подати інформацію у вигляді, який відповідає дизайну та зрозумілий всім браузерам.

Зібрали технології, інструменти й навички, якими має володіти Frontend developer залежно від рівня.

Навички для Frontend Developer по грейдам

Дивитись детальніше

«Також незалежно від рівня важливі soft skills. Тут варто додати, що вимоги до них можуть відрізнятися залежно від специфіки компанії/проєкту. Наприклад, людей, які отримують підвищення в Amazon, обʼєднує одне: кожен думає про бізнес і дбає про клієнта.

Наша компанія — це не про те, щоб перепробувати всі новинки в технологіях asap. Наприклад, вийшла нова версія Next JS і ви вирішуєте спробувати серверні компоненти. Все переписуєте, додаєте серверні компоненти та опісля розповідаєте всім із команди, який ви крутий і сучасний. Це так не працює.

Завдання фахівця в Amazon — забезпечити value для клієнта, зрозуміти, що йому потрібно, а також як закрити цю потребу швидко та якісно. І, звичайно, потрібно виконувати свою роботу так, щоб із вами було приємно працювати іншим учасникам команди». Антон Худяков

Зв’яжіться з нами вже зараз

«Залежно від вимог проєкту (технічний стек, етап розробки, домен, необхідний рівень фахівця), вимоги й запитання для перевірки скілів відрізнятимуться. Якими можуть бути загальні запитання для фахівця на етапі первинного скринінгу:

Скільки років досвіду в JS-розробці ви маєте? З якими JS-фреймворками ви працювали?

Чи покриваєте ви код unit-тестами? Якщо так, які фреймворки для unit-тестування використовували?

Чи є у вас досвід архітектурних рішень? Розкажіть детальніше.

Крім того, роботодавці звертають увагу на soft skills. Особливо важливі для вакансії Frontend-розробника вміння організувати свою роботу (здатність керувати своїм часом, навички самоорганізації, планування й пріоритезації завдань), навички комунікації (сюди входять скіли колаборації, розвʼязання проблем і конфліктів), прагнення постійного професійного розвитку (швидке вивчення нових технологій, гнучкість, регулярне вдосконалення навичок, пошук можливостей для здобуття нового досвіду).

На інтервʼю ці навички можуть перевіряти наступними запитаннями:

Можете поділитися прикладом, коли ви оптимізували свою роботу для підвищення продуктивності?

Як ви визначаєте пріоритети в роботі для досягнення результату?

Як ви реагуєте, коли хтось із колег критикує ваше рішення чи підхід до виконання завдання?

Як ви зазвичай вдосконалюєте свої навички та прокачуєте знання?»

Анна Василенко

Анна зазначає, що через велику кількість фахівців на вакансію, підвищуються і очікування до них (і кількість відмов). Найчастіше кандидатів «фільтрують» за сумісністю навичок з вимогами посади, кількість років досвіду (та його глибиною), комунікацію під час інтерв’ю або мотивацію. Однак у кожній компанії вимоги відрізняються, тому не варто думати, що відмова на одному місці говорить про те, що не вийде досягти успіху у цій професії. Продовжуйте пошуки та вірте в себе!

Топ фреймворків для фронтенд-розробників

Зараз важко знайти людину, яка пише код на «чистому» JavaScript. Натомість розробники дедалі частіше використовують фреймворки — каркас, який полегшує написання коду та поєднує окремі компоненти інтерфейсу. Вони містять набір готових рішень, які часто використовують у веброзробці. Серед таких рішень, наприклад, кешування, взаємодія з базою даних, маршрутизація та інші.

Серед фронтендерів особливо популярні React.js, Angular.js та Vue.js. За даними щорічного опитування Stack Overflow Developer Survey, у 2022 році фреймворк React.js використовували 44% досвідчених розробників та майже 43% тих, хто тільки починає працювати з кодом. Наступний у рейтингу Vue.js: серед опитаних його обирають 20% розробників із досвідом та 13,5% початківців. Майже 10% скілових devʼів та 5% новачків віддають перевагу Angular.js.

Антон Худяков рекомендує починати саме з React. Він найближчий до звичайного JavaScript і найпростіший у вивченні. Також для початківців доступна велика база рішень. Angular найскладніший з цієї трійки, тому що вимагає знання Typescript та RxJS. До нього краще переходити після вивчення React та/або Vue.

Зв’яжіться з нами вже зараз

З чого почати карʼєру у Frontend development: покроковий план дій

Що потрібно знати frontend розробнику для старту в карʼєрі? Ось ключові кроки, щоб стати фронтенд розробником з нуля:

Крок 1: складіть план вивчення фронтенду

Як стати frontend розробником? Спочатку визначтеся зі списком того, що потрібно вивчити, а також скільки годин виділити на навчання щодня.

«Значною перевагою перед іншими кандидатами стануть також професійні сертифікації — наприклад, з AWS. Це показник того, що ви володієте хмарними рішеннями та знаєте, як їх використовувати, а також серйозно налаштовані та маєте прокачаний скіл навчання. Ось, наприклад, AWS-програма для українців». Антон Худяков

Крок 2: регулярно практикуйтеся

Згідно з кривою забування, люди втрачають 50% отриманої інформації вже впродовж першої години, 70% — протягом доби, а 90% — у період 7 днів після вивчення. Вихід один: закріплювати нові знання в процесі виконання робочих завдань. Крім того, так ви отримаєте реальні навички, зможете впевненіше виконувати тестові та проходити технічні інтервʼю. Для цього підійдуть:

«Фронтендеру, особливо якщо ви хочете отримати офер від FAANG-компанії, критично важливо практикуватися й уміти розвʼязувати алгоритмічні завдання рівнів easy та medium. Завдання рівня hard не так критичні, але бажані». Антон Худяков

Ще один ефективний спосіб навчитися фронтенду — допомагати Open Source проєктам на Github. Оскільки сучасний фронтенд — це безліч сторонніх бібліотек, які потрібно розвивати та підтримувати, у розділі цих бібліотек на Github часто просять про допомогу. Ваш код перевірять і дадуть фідбек. За посиланням ви знайдете список issues в популярних репозиторіях для новачків.

Github репозиторії для JavaScript розробників

Дивитись детальніше

Крок 3: прокачайте англійську

Frontend Developer має володіти англійською на рівні не нижче B1 (Intermediate). Це потрібно для роботи з кодом, читання документації та професійних ресурсів. Якщо плануєте влаштуватися в іноземну компанію, орієнтуйтеся на рівень B2 (Upper-Intermediate) чи С1 (Advanced).

Крок 4: знайдіть ментора

Ментор може підказати, як будувати карʼєру, що саме вивчити, а також порекомендувати курси чи зайнятися навчанням фронтенду в індивідуальному форматі. В інтернеті доступні майданчики для пошуку IT-ментора: наприклад, Stack Overflow, Ментори в тилу або Projector Mentorship Program. Більше про менторинг в IT-компаніях читайте в нашому блозі.

Крок 5: пройдіть стажування або шукайте вакансії для Trainee Frontend Developer

Як знайти роботу розробнику, якщо ви новачок? Перш за все, шукайте програми стажування або вакансії для Trainee, щоб отримати перший реальний досвід та повчитися в досвідчених розробників. Приблизно 70% компаній час від часу пропонують роботу для стажистів — наприклад, можна відстежувати пропозиції на кар’єрних сайтах напряму або шукати на job boards.

Приклад джоб борду з вакансіями для Frontend розробника

Дивитись детальніше

«Погана стратегія, як на мене, — стартувати з фрилансу. Потрібно пройти навчання, а потім якнайшвидше потрапити на реальний проєкт із досвідченими людьми та здобувати практичний досвід. Один зі способів його отримати — знайти програму стажування чи влаштуватися на роботу інтерном.

Наприклад, я ще навчаючись в університеті пройшов тренінг-програму з фронтенду в Epam. Стажування не гарантує, що вас швидко візьмуть на роботу в цю ж компанію (і що взагалі візьмуть), це займає час (6–12 місяців), проте так ви здобудете практичний досвід і буде легше шукати роботу в майбутньому.

В Amazon теж є програми стажування, проте потрапити на них вкрай важко. Наприклад, до нас у команду часто беруть випускників ETH Zürich, де навчався Айнштайн та інші лауреати Нобелівської премії. ETH Zürich входить до топ-20 найкращих університетів світу. Зараз потрапити в Amazon ще важче з огляду на світову кризу в IT, але це точно можливо». Антон Худяков

Читайте в блозі ITExpert, як написати лист рекрутеру, щоб вас помітили серед сотні кандидатів, а також як відповідати на специфічні питання, щоб показати свою вмотивованість щодо зміни роботи.

«Для пошуку фронтенд-розробника компанії часто використовують такі ресурси:

Job-сайти, що спеціалізуються на IT: Djinni, DOU, Jobs Dev, No Fluff Jobs, Wellfound (ex. AngelList) та інші;

Професійні мітапи/вебінари/лекції: участь у технічних конференціях, мітапах та інших заходах може бути ефективним способом зустріти потенційних роботодавців та встановити з ними контакт.

Університети й навчальні заклади: цей канал здебільшого використовують для пошуку Frontend розробника рівня Junior.

Рекомендації: компанії запитують знайомих, колег та інших кандидатів, чи вони не знають IT-фахівців, які можуть бути зацікавлені в пошуку роботи. Або пропонують бонус за рекомендацію: наприклад, $400–1500 в залежності від грейду. Ви можете повідомити знайомим, що шукаєте роботу, і попросити вас рекомендувати на вакансії Trainee/Junior фронтенд-розробника у їх компанії.

Рідше, однак рекрутери використовують і спеціалізовані IT-ресурси для пошуку айтівців. Серед них можуть бути GitHub, Stack Overflow, CodePen (платформа, на якій розробники створюють, тестують та публікують свій код) і HackerRank (тут айтівці проходять тестування на знання мов програмування та алгоритмів). Тому ви можете приділити час на оформлення профілів там». Анна Василенко

Крок 6: проявіть себе на інтерв’ю

Антон Худяков радить здійснювати «інвентаризацію» досягнень за технікою STAR:

Situation — якою була ситуація у компанії, коли ви почали працювати?
Task/target — яким було ваше завдання чи ціль?
Action taken — якими були ваші дії для досягнення мети?
Results achieved — яких результатів вдалося досягти?

Наприклад: «У кастомера була проблема X, я запропонував додати End-to-End тести, після впровадження яких кількість багів на проді зменшилася на Y%». Або: «Ми в команді думали, які фічі імплементувати, щоб вони підвищили conversion rate. Я запропонував запровадити A/B-тестування. Зараз нові фічі ми спочатку викочуємо для 30% користувачів. Якщо бачимо, що вони мають попит — відкриваємо доступ до нових фіч для всіх користувачів сервісу. Після цього рішення conversion rate виріс на 45%».

Робіть фокус на тому, що запропонували чи розробили саме ви. Що більше деталей та цифр ви використовуватимете, то краще.

Для підготовки до інтервʼю також Антон рекомендує прочитати такі книги:

System Design Interview — An insider’s guide;

Designing Data-Intensive Applications: The Big Ideas Behind Reliable, Scalable, and Maintainable Systems;

System Design Interview – An Insider’s Guide: Volume 2.

👀 Бонус: що читати та слухати фронтенд-розробнику

Зібрали книги, блоги та профілі Frontend Devʼів у соцмережах, які варто додати в закладки.

📖 Книги

Learning JavaScript: JavaScript Essentials for Modern Application Development, Ітан Браун. Автор книги пояснює стандартні теми для початківців (змінні, потік керування, масиви), а також охоплює такі складні концепції, як функціональне та асинхронне програмування. Ви дізнаєтеся, як створювати потужні вебдодатки, що швидко реагують, на клієнті або за допомогою Node.js на сервері.

Secrets of the JavaScript Ninja, Джон Резіг. Невелика книга про JavaScript і принципи роботи браузера. Підійде для початківців і тих, хто працює давно й хоче впорядкувати знання. Важливо: обирайте друге видання.

Серія книг You don’t know JS, Кайл Сімпсон. Серія із шести книг — від основ JS до розбору складних завдань та особливостей роботи з JavaScript.

✍🏻 Блоги

Netanel Basal. Статті про управління станом програми, тестування й створення форм від opensource-контриб’ютора.

Angulararchitects. Блог автора книги Enterprise Angular Манфреда Стеєра. У ньому він ділиться останніми новинами та дає поради щодо роботи з Angular.

Minko Gechev. Блог інженера Google, який спеціалізується на Angular. Автор ділиться найкращими, на його думку, практиками та підходами в розробці.

Overreacted. Блог про React одного з його основних розробників — Дена Абрамова. Він розповідає про чистий код, про те, як працює режим розробки в React, а також про карʼєрний розвиток.

📺 YouTube

Programming with Mosh. Автор каналу — розробник з 20-річним досвідом та викладач на платформі Udemy. Тут є туторіали з фронтенду, JS, а також фреймворків React та Angular.

📱 Twitter

Addy Osmani. Профіль розробника з Google, який працює над Chrome. Нещодавно Едді Османі виклав у вільний доступ свою книгу про патерни та React.

Mathias Bynens. Автор також працює над інструментами для Chrome і V8 — двигуном для JS. У профілі публікує посилання на свої лекції, а також розповідає про нові можливості JS та CSS.

V8. Сторінка про V8 — найпопулярніший двигун для JavaScript. Тут ви знайдете інформацію про те, що нового в останніх версіях та як усе працює під капотом. Наприклад, про Sparkplug (неоптимізований компілятор байт-коду в машинний) і заховані класи (метод оптимізації продуктивності) тощо.

«Майже все, що стосується технічних речей та трендів, я дізнаюся з Twitter. Я підписаний тут на профілі dan_abramov, Alex Xu, Satya Nadella, Kevin Scott, Adam Selipsky, Clement Mihailescu та Illya Klymov». Антон Худяков

🤓 Що ще?

Для того, щоб знати, як розвиваються інструменти, з якими ви працюєте, які новинки з’являються, важливо стежити за офіційними блогами бібліотек/фреймворків. Наприклад, у React.js є блог у Twitter.

І головне: попри всі труднощі, кожна вакансія знаходить свого кандидата, а фахівець — цікаву компанію. Вірте в себе!

FAQ

У чому різниця між backend і frontend-розробником?

Фронтенд і бекенд — це як сцена та залаштунки сайту чи вебдодатку. Фронтендери розробляють інтерфейси, враховуючи досвід користувача (UX), а бекенд-розробники — створюють внутрішню сторону («внутряк») сервісу, що працює без участі користувача.

Які основні мови програмування використовують для розробки на Frontend?

Для реалізації фронтенду використовують HTML (потрібен для розмітки документа, тобто сторінки в браузері), CSS (мова відповідає за зовнішній вигляд сторінки, з її допомогою ви працюєте з кольорами, шрифтами та розташуванням різних блоків) та JavaScript (реалізує виконання різних дій на сторінці, тобто додається анімація та відгук на запити користувача). Також фрондендери активно використовують фреймворки: React.js, Angular.js та Vue.js.

Які навички потрібні, щоб стати успішним Frontend-розробником?

Технічна база must skills, яку вам слід освоїти, виглядає так:

HTML(HTML5);
CSS (CSS3);
JavaScript.

Інші важливі навички:

основи JS DOM (Document Object Model);
розуміння основ роботи з подіями (вішати елементарні обробники, знати про модель поширення подій, вміти їх перехопити, обробити та скасувати);
базові поняття синтаксису ES6 (fetch, async/await, promise). CSS препроцесор (SASS/LESS) — вкладеності та створення змінних;
CSS фреймворк (Bootstrap/Foundation) — достатньо розуміти архітектуру та як вона використовується;
основи JS-фреймворка/фреймворків (React/Angular/Vue);
розуміння, як працювати в Git;
знання систем для збірки застосунків: Webpack, Vite.

Софт скіли (їхнє освоєння необхідне як для роботи в команді, так і для особистісного зростання):

навички самоорганізації;
навички розвʼязання проблем;
командна робота;
прокачані навички комунікації;
англійська мова не нижче рівня B1 (причому важливе як вміння говорити, а й читати документацію англійською).