Усе про роль Front-end Developer: чим займається, як стати, переваги і недоліки

Усі статті, обговорення, новини про Front-end — в одному місці. Підписуйтеся на телеграм-канал!

Спеціальність Front-end розробника викликає величезний інтерес у фахівців-початківців. Насамперед через те, що до кінця незрозуміло, чим займається цей фахівець, які завдання входять до його обов’язків, як потрапити в цю професію. Мене звати Іван Риженко, я — Senior Front-end розробник у компанії AB Soft та хочу допомогти початківцям розібратися, про що ця професія.

Чим займається Front-end Developer

IT-індустрія дуже різноманітна, і якщо ви тільки починаєте розбиратися в тонкощах професій, то буде корисно знати, що Front-end — це те, з чим користувач взаємодіє на сайті.

Умовно, у будь-якої вебсторінки в браузері є дві складові:

• те, що користувач бачить (оформлення, текст, інтерактивні елементи);
• те, що користувач не бачить (взаємодія із сервером, персоналізація, performance-аналітика).

За своєю суттю, Front-end — це відображення для користувача контенту/даних, отриманих від сервера, обробка взаємодії користувача з цим контентом та передача даних від користувача назад на сервер.

Таким чином, Front-end розробник відповідальний за:

• доставлення даних (як і в який момент часу це має відбуватися, формат і структура даних);
• оформлення контенту на сторінці (позиціювання елементів відносно одне одного, їхній розмір, колір);
• відгук елементів сторінки на різні дії користувача (кліки, рухи мишею, скрол тощо).

Тобто ми говоримо про реалізацію UI/UX у web. Важливою частиною роботи Front-end розробника є оптимізація цих усіх процесів з користю для кінцевого користувача: забезпечити швидкість й плавність взаємодії зі сторінкою, трекінг дій, безпеку.

Як знайти першу роботу Front-end розробника і чому обирають цю професію

Мій шлях до Front-end був тернистим, я за фахом економічний кібернетик. Ця професія пов’язана як з економікою, так і з комп’ютерними технологіями.

Профільним для мене була побудова комп’ютерних моделей економічної системи підприємств, блок-схем взаємодії окремих частин підприємства.

Як людині з такими знаннями десь влаштуватися з хорошою оплатою? Тоді я вважав це практично нереальним. У той момент я зрозумів, що вибрав не ту спеціальність.

Ще до закінчення університету я відчував гостру потребу в грошах, тож я почав шукати, як їх можна заробити в Інтернеті. Ось тоді я й почав цікавитися створенням сайтів. У мене було багато спроб і помилок, але з часом я зрозумів, що Front-end — це моє.

Першу роботу я отримав не завдяки своїм знанням Front-end, а завдяки моїй скрупульозності.

Надсилаючи своє перше резюме, я додав до нього інформацію щодо того, що потрібно виправити на корпоративному сайті компанії. Я провів аналіз, вказав на помилки. І мене запросили в проєкт. На той момент у мене був досвід тільки в розробці сайту для моєї кафедри, але цей сайт так і не побачив світ. Після отримання листа зі мною поспілкувалися. Ось так я потрапив у світ IT.

Це було в далекому 2011-му. Зараз такий кейс уявити складно. Має бути достатньо теоретичних знань, мінімум — підготовчі курси за плечима. Багато компаній відкривають позиції trainee для навчання найрозумніших. Це найшвидший шлях «увійти в IT». Наявність практики — козир у рукаві під час співбесіди на Junior-розробника. На сьогодні Front-end залишається напрямком із найнижчим порогом входу в розробку.

Плюси та мінуси Front-end

Немає однозначної відповіді на це питання. Те, що мені здається плюсом, може бути мінусом для іншої людини. Але я спробую озвучити ті особливості, які можуть бути важливими при виборі професії.

Front-end розробники потрібні скрізь

Це дуже великий плюс.Front-end не закінчується на Front-end, як би це парадоксально не звучало. Використовуючи один і той самий технологічний стек, можна займатися створенням односторінкових сайтів, динамічних SPA, мобільних застосунків на React Native, десктоп-застосунків на Electron, автоматизованим тестуванням на Cypress тощо. JavaScript вийшов за межі Front-end. Багато компаній переходять на Back-end архітектуру, основану на Node.js: Netflix перейшов на JavaScript, Uber теж вибрав Node.js.

Є поняття «FullStack-розробник». Раніше до нього ставилися вкрай скептично. Лише одиниці могли добре засвоїти JavaScript, HTML, CSS, і досконало знати Java, Python або PHP на Back-end. Як правило, це не вкладалося в одну голову.

Зараз FullStack-розробники сприймаються інакше. Саме поняття трансформувалося. Розробник, який володіє JavaScript, може реалізувати як Front-end, так і Back-end. Нам є куди зростати.

У нас немає скляної стелі

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

Навіть якщо не йти в Back-end на JavaScript, Front-end розробник зобов’язаний знати, як влаштований Back-end його програми/сервісу. Він має щонайменше знати його структуру, розбиратися в тонкощах отримання/обробки/зберігання даних на Back-end, елементарно розуміти синтаксис мови, якою написана серверна частина застосунку. Наприклад, у мене на проєкті у більшості Front-end-фахівців прямо сверблять руки, щоб поправити/дописати Java-код. Дуже цінним є розробник, який мислить масштабами системи в цілому.

Front-end — це про постійне навчання

Front-end розробник повинен знати відразу кілька мов, оновлення стандартів у яких — постійний процес. Браузери впроваджують підтримку нових фіч незалежно одне від одного. Вихід нових стандартів запускає черговий конвеєр апдейтів популярних бібліотек і фреймворків. У цьому випадку і виникає потреба в постійному навчанні. Дуже часто трапляється ситуація, що фахівці починають вчити щось нове, але на момент, коли все довчили, інформація вже застаріла.

Front-end дуже динамічний

Якщо специфікації мов програмування в Back-end можуть бути актуальними кілька років, то у Front-end рахунок йде на місяці або навіть тижні. Постійно оновлюються бібліотеки, фреймворки. Спільнота генерує сотні модулів і пакетів. Тут опанував React з його екосистемою модулів, там розібрався в Angular — потрібно йти далі, вчити щось нове. Не встиг Node.js стати в якомусь роді стандартом Back-end розробки на JavaScript, як з’явився і набирає обертів Deno. У зв’язку з цим Front-end розробник повинен заглиблюватися в питання версійності додатка і його модулів, управління залежностями, framework agnostic архітектури. Це коло обертається неймовірно швидко.

Front-end — це величезна кількість різнопланових інструментів.

Головне завдання — навчитися розбиратися в тому, коли і який інструмент краще використовувати.

До мене часто приходять на співбесіду і кажуть: «У проєкті нам сказали писати на React».

Я відповідаю: «Добре, а це потрібно було для проєкту? Чи дійсно було зручно використовувати React у розробці або підтримці? Який business value застосування цього інструменту?».

Багато хто засвоює той чи інший інструмент без попереднього аналізу його ефективності та доцільності на конкретному проєкті. Знаю любителів брати участь у холіварах на тему: «Який фреймворк кращий». Це все «від лукавого». Певний фреймворк кращий для того завдання, для якого його створили. У всіх інших проєктах це — компроміс.

Front-end багатогранний. Це — мінус. Але найчастіше ті, хто працюють у сфері довго, вміють швидко обирати інструменти й ухвалювати рішення виходячи з поточного завдання.

Soft-skills, якими потрібно володіти

Гнучкість. Front-end розробник — наполовину дизайнер і наполовину програміст. У таких фахівців має бути й креативне мислення, й структурне. Важливо мати смак та вміти трансформувати його в певний алгоритм, щоб усе було виважено, чітко і по пунктах.

Код — це завжди жорстка послідовність дій. Він має певну структуру. Розробнику необхідно забезпечити відповідність коду вимогам дизайну, бізнес-логіки тощо. Водночас у коді має бути абстрактна складова, що дає змогу бути гнучким у виборі того чи іншого інструменту розроблення, масштабуватися й адаптуватися під зміни в проєкті.

У характері Front-end розробника має бути педантичність. Прискіпливість до деталей, уважність до них. Часто для дизайнера, який віддає в розробку макет, критично важливо дотримати товщину обведення кнопки з товщиною ліній символів шрифту. Потрібно вміти приймати виклик замість «і так зійде».

Front-end розробник — це трудоголік, який помічає всі деталі, відточує всі стани застосунку, з одного боку, а з іншого — ледар, який прагне автоматизувати процеси.

Тому для нього простіше застосувати скрипт або програму, яка виправлятиме похибки за нього. Less, PostCSS, ESLint — це все історія про лінь.

Дуже важливою є навичка комунікації в команді. Front-end розробник перебуває між усіх вогнів. З дизайнером необхідно обговорити деталі макета, з PM-ом визначитися з термінами, поставити питання з бізнес-логіки. З’ясувати у Back-end розробника, які параметри запитів передавати, яка структура даних буде використовуватися. Уточнити у QA, яким чином вони відтворили баг під час масштабування на мобільному девайсі. Запросити в аналітика дані за версіями браузерів. Дізнатися думку performance-інженера, чому сталася просадка TTI метрики. Важливо бути комунікабельним.

У людини має бути внутрішнє бажання постійно навчатися, цікавитися новими специфікаціями/інструментами, вести на коліні draft-проєкти й застосовувати нові фічі. Інакше кар’єрний розвиток неможливий, та й просто робота не буде нормально організована — не встиг за оновленнями, став неактуальним фахівцем.

І, звісно, потрібна посидючість, щоб фахівцеві вистачило терпіння зануритися в надра проблеми й знайти її рішення.

Hard-skills: що потрібно знати та вчити Front-end розробнику

Є хороший ресурс, який допоможе не загубитися.

Front-end розробник має розуміти, як працює web, що таке http, що таке сервер, як іде на нього запит із браузера і як він повертається до користувача. Хмари, CDN, кешування тощо.

Знання JavaScript. Якщо ще 5 років тому новачки, що закінчили базовий курс Front-end і знають CSS і HTML, могли знайти собі роботу, то зараз цього недостатньо. Дуже жорстка конкуренція, тому людина має приходити як уже сформований фахівець. Без JavaScript тут ніяк. Далі TypeScript, фреймворки React, Vue та інші для побудови застосунків; фреймворки Mocha, Jest для тестування застосунків тощо.

Розуміння системи контролю версій. Як мінімум, потрібно показати свій код команді, провести code review іншим розробникам, дотримуватися практик реліз-менеджменту, щоб мінімізувати ризики доставлення користувачеві продукту з дефектами. Найчастіше йдеться про Git, але можуть знадобитися і SVN, Mercurial тощо.

Важливо володіти інструментами пакування додатків. TypeScript (типізована версія JavaScript), React, інші фреймворки не можуть працювати в браузері з коробки, їм необхідна попередня збірка/компіляція в чистий JavaScript-код. Також на сьогодні в проєктах рідко використовується чистий CSS. Для зручності розробки застосовуються LESS/SASS препроцесори, які на етапі збірки трансформують особливий синтаксис зі змінними в зрозумілі браузеру CSS стилі. Обробка зображень, лінтинг (пошук і виправлення синтаксичних помилок у коді), запуск тестів та інших скриптів — усе це робить життя ледачого Front-End розробника легшим.

Що почитати

Зараз є нескінченна кількість Telegram-каналів. Хлопці, які багато років у Front-end, агрегують в одну купу корисну інформацію з різних ресурсів, пишуть свої авторські статті.

Є Mozilla Developer Network, де публікують специфікації з JavaScript у доступній формі.

Багато розробників Google та інших компаній ведуть власні блоги, де діляться безцінним досвідом розробки: Addy Osmani, David Walsh, Jake Archibald, Brad Frost, Lea Verou та інші.

Читати канали в Telegram — найзручніше. З сьогоднішньою динамікою та інформаційним шумом неможливо встигати відвідувати сайти з добірок. А ось почитати всі вершки, які вже зібрані в Telegram-каналах, — це те, що треба. І завжди є можливість відфільтрувати тільки ту інфу, яка потрібна конкретно тобі.

Перелік ресурсів для саморозвитку від мене:

• t.me/forwebdev
• t.me/HowProgrammingWorks
• t.me/front_end_first
• t.me/web_overflow
• developer.mozilla.org/...​the_web/JavaScript_basics
• t.me/frontend_info
• t.me/jabascript
• youtube.com/c/TimurShemsedinov
• https://uk.javascript.info

Рекомендації тим, хто стартує

Не губитися. Багато з тих, хто зараз починає, хочуть (трохи) більше грошей, тому вони перестрибують базові речі одразу до конкретних фреймворків й бібліотек. Це зручно, не сперечаюся, хтось уже постарався і зробив за тебе інструменти, які вже працюють.

Людина запам’ятовує 50 певних методів та що вони роблять, але рідко хто ставить собі питання, чому ці методи працюють саме так. Він знає, чого очікувати від цього методу, але на цьому сила джедая закінчується.

Це на кшталт як бути столяром та не розбиратися в породах деревини. Тому я кажу, що спочатку потрібно вчити базовий JavaScript, розробити на JavaScript невеликий застосунок, спіткнутися об усі підводні камені, написати на тому самому JavaScript тести, що покривають основний функціонал застосунку, копнути в профілювальнику у Chrome, і тоді буде більш-менш зрозуміло, як усе працює. Таким чином легше структурувати знання.

Після глибокого вивчення базового JavaScript будь-який фреймворк — це лише черговий інструмент для обробки деревини. Достатньо кілька днів, а іноді й годин, щоб розібратися в принципах його роботи. Він сприймається інакше — як розширення базових можливостей JavaScript.

Обов’язково вчіть англійську мову. Front-end розробники — люди творчі, нам доводиться вигадувати назви змінних/функцій, називати елементи розмітки зрозумілими іменами. Це важливо розуміти перед тим, як іти влаштовуватися на роботу. Суржик на латиниці не спрацює.

Складно підтримувати код, у якому ідентифікатори в JavaScript або класи в HTML розмітці написані транскрипцією з китайської на латиницю колегою з Азії. Зустрічав і таке.

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

І не здавайтеся. Багато хто, оцінивши обсяги теоретичних знань, просто опускає руки. Дуже складно новачкові придумати, де йому потрібно реалізувати замикання, або зберегти дані в Local Storage.

Найкраще — відразу придумайте собі мінімальний проєкт і на ньому тренуйтеся. Це дуже ефективна практика. Чого хочеться? Чого не вистачає під рукою?

Наприклад, купуєте каву та чекаєте поки бариста записує у свій блокнот, що продала два латте? Створіть на коліні апку, в якій зі списку доступних напоїв формуватиметься замовлення та облік за різними типами витратних матеріалів (кава певного сорту, молоко, стаканчик певного розміру тощо). Збережіть дані в зручну базу в хмарі, типу Firebase. Додайте авторизацію. Спочатку це повинен бути чистісінький JavaScript. І лише після того, як досягнете стабільної роботи застосунку, можна створити копію проєкту та планувати його апгрейд, використовуючи React, Vue тощо. І це буде робота з чимось суттєвим.

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

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