Будь-який сайт або web-додаток складається з серверної і клієнтської частин. Фронтенд-девелопер розробляє частину, з якою взаємодіє користувач. Які саме завдання він виконує і які інструменти йому для цього потрібні розповідаємо у статті.
Завдання Frontend розробки
Створення веб-сторінки починається з її дизайну. Але макет – це ще не веб-сторінка. Для того, щоб перетворити картинку в програму, існують HTML і CSS, а сам процес називається версткою. HTML (HyperText Markup Language) – мова гіпертекстової розмітки, яка використовується для структурування веб-сторінки та її контенту. Інакше кажучи, це код, який повідомляє браузеру, як відображати сторінку. З допомогою html можна прописати заголовки, абзаци, форми, таблиці, посилання і т. ін.
Якщо HTML є каркасом сторінки, то CSS (Cascading Style Sheets) відповідає за її візуальне оформлення: шрифт, колір фону, розташування блоків на сторінці. Без використання стилів html-сторінка виглядає як голий текст, тому html i css застосовуються разом.
Мало зверстати сайт – його потрібно адаптувати під різні пристрої. Незалежно від того, де користувач його відкриє – на телефоні, планшеті чи великому телевізорі – сайт повинен всюди однаково добре відображатись. Взаємодіяти з ним має бути зручно і приємно.
Невід’ємним інструментом веб-розробки є JavaScript. На відміну від HTML i CSS, він є повноцінною мовою програмування. JavaScript-код відповідає за логіку і функціонал. Інакше кажучи, “оживляє” сторінку, надає їй інтерактивності і визначає, як вона реагуватиме на дії користувача.
Від особливостей структури сайту залежить його позиція в результатах пошукової видачі. Чим вище в цих результатах він знаходиться, тим краще. Тож SEO-оптимізація також входить до переліку завдань фронтендера, як і необхідність підтримувати й оновлювати вже створений сайт.
Фронтенд-розробник – зв’язна ланка. Від product manager’а він отримує побажання замовника. Зовнішній вигляд сторінки узгоджує з дизайнером, а все, що стосується серверної частини – з бекенд-програмістом. QA-інженер перевіряє якість готового продукту і може повернути його на доопрацювання. Не зайвим для програміста буде знати основи тестування, адже в багатьох компаніях розробники самі тестують власний код.
Технології Frontend розробки
Крім html, css і javascript, які становлять ядро розробки, фронтендер обов’язково повинен вміти працювати з терміналом і користуватись системою контролю версій Git, а також розуміти, як взаємодіють і обмінюються даними пристрої з мережею Інтернет та що таке інтернет взагалі.
TypeScript виник на основі мови JavaScript і розширює її можливості. За рахунок статичної типізації TypeScript дозволяє усунути помилки і баги, які не так легко виявити в динамічному середовищі JavaScript. Це робить код більш передбачуваним і безпечним. Розробник більше не повинен витрачати робочий час на нескінченні коментарі. Все це разом скорочує час розробки і знижує її вартість, дозволяючи при цьому писати зрозумілий і читабельний код.
Сучасний фронтенд-розробник повинен активно використовувати бібліотеки та фреймворки. “Кодити” можна і без них, але вони суттєво полегшують розробку. Замість того, щоб писати код вручну, можна скористатись вже написаними шаблонами. Різниця між бібліотекою та фреймворком хоч і не очевидна, але вона є. Якщо бібліотека це просто набір готових рішень, то фреймворк контролює архітектуру всього додатку і задає певний стиль програмування. До трійки найпопулярніших входять React, Vue i Angular. Потрібно знати, як мінімум, один з них.
Отже, фронтенд-розробник це універсал, який не просто верстає сторінки і забезпечує взаємодію з користувачем. Він вміє працювати з системою контролю версій, обов’язково знає один або кілька фреймворків і знайомий з основами тестування. Хороші комунікативні навички дозволяють йому працювати в команді й створювати продукт, який відповідає очікуванням замовника.
Хочете стати фронт-енд розробником? Почніть з проходження безкоштовного базового курсу JavaScript, який доступний після подачі заявки на курс Front end developer від Mate academy
