Якщо ви подивилися десятки відео на Youtube, читали статті, послухали друга програміста front end, але так нічого й не зрозуміли — ця стаття точно для вас. У ній ви дізнаєтеся, що потрібно вивчати у 2022 році, щоб розробляти сайти та мобільні додатки. При цьому розуміти свою компетенцію, вектор розвитку та освоювати тільки потрібну інформацію.
А якщо ви ще не знаєте, хто такий фронтенд – ось невелика ілюстрація.
Ви ще не втомилися? Чи є бажання писати круті сайти за допомогою коду і отримувати річну ставку лікаря за місяць? Тоді розпочнемо!
HTML и CSS — з чого обов’язково починати front end розробнику
Будь-який веб-сайт або мобільний додаток складається з тексту, картинок, кнопок та інших елементів. Вони допомагають відрізнити: де розміщується контент, а де елемент взаємодії. Ми бачимо у дизайні продукту.
Кожна картинка чи текст — набір символів програміста. Він бачить це інакше. Наприклад:
Для середньостатистичного користувача — це просто текст. А для front end розробника – речення, закладене в параграф. Значки та перемінні показують, що це та як розміщується для аудиторії. А робиться це за допомогою HTML та CSS.
HTML (Hypertext Markup Language) — це код, за допомогою якого розробник створює блоки, параграфи, таблиці, вставляє на сайт банери та зображення.
Відображення простої математичної формули через HTML код
Розробник повинен знати розмітку HTML, щоб усі елементи органічно з'єднувалися на сайті та виконували поставлені завдання. А також щоб цей код сприйняв браузер та правильно відобразив користувачу.
Якщо в чистому HTML ми робили блок, то в CSS додаємо йому різноманітності. Наприклад, змінюємо форму чи колір. Подивіться, як CSS змінює представлення сайту користувачеві.
Зміна параметрів тексту через CSS
Завдання front end — перенести заготовлений дизайнером макет (малюнок) у програму або веб-сайт. Налаштувати форми, кольори та зчитування роботами. Цей процес називається версткою. Без знань HTML та CSS ви цього зробити не зможете.
Наступна сходинка — вчимо Javascript
Для сайту або мобільного додатка важливий як дизайн HTML і CSS, так і доступні для користувача дії. Наприклад, подивитися як рухається годинникова стрілка, побачити спливаючу кнопку або анімацію, при натисканні на яку відкриється вкладка з іншою сторінкою.
За дії відповідає окрема мова програмування Javascript.
У роботі front end це ще одна з базових навичок. Бо завдання розробника не зверстати (перенести дизайн із програми на веб-платформу), а й адаптувати продукт під цільові дії. Налаштувати інтерактивні елементи так, щоб вони працювали.
Натисніть кнопку — зміниться текст другого рядка. За це в коді відповідає Javascript
Чому обирають Javascript, якщо є інші мови програмування? Наприклад, CC або Python. Все просто.
Javascript підтримує усі популярні браузери. У frontend для сайту (презентаційній частині) мову застосовують для створення інтерактиву, так як він пов'язаний з HTML і CSS і може налаштовувати параметри всередині цих кодувань.
Мови програмування вам доведеться читати: як розробник впровадив інтерактивний елемент, чому можна повчитися, а чого не варто робити. Якраз Javascript — мова, яку легко читати як новачку, так і професіоналу.
Хочу вчитися далі — зупиніться на одному або кількох фреймворках
Уявіть, що ви навчалися в університеті на юриста. Отримали диплом і хочете після бакалавра здобути магістра. А у магістратурі вибираєте конкретну нішу. Наприклад, цивільне право та договори.
З JavaScript схема ідентична. Є головний напрямок — основна мова, якою ви будете робити сайти та програми. А є нішеві – фреймворки.
Особливість фреймворку в тому, що це не чиста мова, а набір готових сценаріїв (шаблонів) для завантаження коду у проєкти. Кодування цілком можливе без їх використання, але правильно підібране середовище може значно полегшити роботу.
На фреймворку зробити той же сайт із блоками швидше, ніж писати його з нуля на JS і додавати HTML та CSS параметри.
Але без знань JavaScript, як основної мови програмування, користуватися фреймворками і читати заготовки у вас не вийде. Буде каша: набір символів, які не зрозуміло, куди вставляти і як змінювати.
Кожен фреймворк відрізняється своїми параметрами та шаблонами. Ось що можна вивчати для front end:
- React – набір готових компонентів, які можна збирати у вигляді Lego. Наприклад, відразу вставити шапку для сайту, а потім її урізноманітнити своїм дизайном та кольорами.
- Angular — орієнтований під розробку односторінкових сайтів (Landing Page) та додатків. Просто тому, що в цьому середовищі він працює швидше.
- Vue.js — база для креативників. Фреймворк також налаштований під адаптивний дизайн (правильне перенесення блоків із великого екрана на мобільні пристрої). Такі компанії, як Stackoverflow, PlayStation і т.д., використовують Vue для своїх сайтів.
Це далеко не повний перелік фреймворків, які слід знати хоча б в основах. З ними ви робите роботу швидше. Та й це цікавіше, ніж зупинитись на базових навичках.
На онлайн-курсах в Комп'ютерній IT Академії STEP ми вчимо, як правильно користуватися фреймворками, щоб кодити швидше, брати більше проектів та прокачувати навички для високої зарплати. Дізнайтесь все про курс front end за посиланням.
Тестування, налагодження — перевіряємо завдання перед здачею клієнту
Крутий фахівець не той, хто знає лише один фреймворк та працює з ним постійно. Але й той, хто самостійно може протестувати продукт. Особливо це важливо на фрілансі — клієнт платить більше тим, що може самостійно зробити більше роботи, не підключаючи інших фахівців. Аналогічна практика у компаніях.
Перед тим, як дати аудиторії користуватися продуктом, його слід протестувати на помилки. Наприклад, якщо кнопка не відкриває панель відправки замовлення в магазині, це вже помилка в коді, написаному front end розробником.
Щоб презентувати клієнту готовий продукт, а не сире рішення, розробник використовує тестування та налаштування.
На схемі — життєвий цикл програми. І на кожному етапі тестування та налагодження допомагає розробнику виявити недоліки. І не схибити перед клієнтом.
Налагодження та тестування — схожі поняття. Тільки якщо в тестуванні ви проходите весь сценарій (потрапив на сайт, подивився, клацнув на кнопки, зробив замовлення), то у налагодженні ви шукаєте саме помилки та виправляєте.
Front end developer — не лише пише, а й перевіряє свою роботу. Особливо коли в команді немає окремого фахівця для цих завдань — тестувальника.
Вашою роботою користуватимуться з різних браузерів
Одна з проблем – зробити так, щоб розроблений продукт відображався однаково круто і на Google, і на Safari та на іншому популярному браузері. Аудиторію легко втратити, якщо не зробити версію під усі браузери (кросбраузерна система).
Чому не можна зробити універсальне рішення? Програмісти компаній роблять власний продукт. І не думають про корисну дії саме вашого сайту чи додатку. Тому браузери по-різному відображають ті чи інші HTML елементи та властивості CSS.
Догодити треба всім, щоб не втратити частину аудиторії. Для цього клієнти і замовляють кросбраузерні системи
Завдання фронтенд розробника — зробити так, щоб продукт його компанії відображався однаково на всіх платформах.
Що потрібно, щоб робити кросбраузерні версії сайтів:
- Знати особливості стилів CSS для основних браузерів. Під яку платформу ви пишете код – це дізнається маркетолог та аналітик при дослідженні цільової аудиторії.
- Вміти адаптувати код під ці стилі.
- Тестувати продукт на браузерах, усувати помилки.
Це здається неможливим. Але все не так складно. При постійному навчанні та практикою від крутих викладачів вже через рік ви знатимете все, про що ми розповідаємо у статті.
Що вчити front end після фундаментальних знань
Без цих навичок розвиватися та отримати престижну роботу не вийде. Просто тому, що ви не знатимете поведінку вашого продукту у світі іншої людини: дизайнера, оптимізаторів та керівництва. Додаток вийде відірваним від реальності, доведеться багато виправляти та витрачати час.
1. Дизайн, який легко адаптувати під продукт
Якщо ви освоїли HTML і CSS, то працювати з Web-дизайнером і впроваджувати його рішення вам точно вдасться. Важливо навчитися підказувати дизайнеру які рішення підходять для проекту. А на які потрібно більше часу та грошей.
Особливо ці поради важливі, коли клієнт має конкретний бюджет, і вийти за його рамки не вийде. А рішення дизайнера — дорожче за фінансування. Front end порадами спрощує роботу. Створюється дизайн, адаптований під час та вкладений бюджет.
Клієнт задоволений, а спеціалісти витрачають менше ресурсів на реалізацію.
2. Вміння вирішувати проблеми
Відразу скажемо: Якщо ви не терпите довгих посиденьок за ПК, то програмування може бути не вдалим рішенням. І проблема номер №1 — час.
Чим складніший проект, тим більше над ним потрібно клопіткої праці та часу. Нарощуючи досвід і знання ви менше витрачатимете на реалізацію рішення. Але спочатку доведеться пожертвувати активністю, щоб виконати дійсно круту роботу.
Проблема №2 – спілкування з керівництвом. Розробник, який може презентувати товар клієнту, отримує +1 до авторитету. А якщо ви можете закрити проблемні питання від клієнта, то вас запам'ятають. А потім звернуться ще раз, порекомендують та забезпечать проектами надовго.
3. Аналіз продуктивності
Уявіть, що ви зробили свій сайт. Наприклад — блог для комерційної компанії. Все добре, сторінки швидко завантажуються. Клієнт задоволений.
Потім чим більше статей (сторінок) з'являється на сайті, тим сильніше навантажується сервер. І тим повільніше код, написаний front end-а, зчитується машинами. Сайт відкривається довго, клієнт втрачає клієнтів, яким не хочеться чекати.
Щоб такого не сталось, розробник повинен знати основи аналізу продуктивності проєктів. Знайти помилку, замінити код, підправити важкі елементи або спростити перенесення дизайну.
Під час аналізу ви познайомитеся з такими поняттями, як скрипти, що блокують відображення контенту. Це головні вороги сайтів — код Javascript та стилі CSS з помилками. Їх треба вміти знаходити та переписувати.
Приклад аналізу продуктивності сайту. Цим також може займатися front end, збільшивши чек за роботу
Плюс, навчитеся працювати з сервісами перевірки продуктивності. Такими як KeyCDN Speed Test (слідкує за впливом коду на завантаження сайту), Google PageSpeed Insights та іншими.
А головне — читати проблему та пропонувати рішення клієнтам, які звернуться ще не раз, як до професіонала.
4. Пошукова оптимізація продукту
SEO — Search Engine Optimization, тобто це оптимізація сайту під пошукові системи, на кшталт Google. При грамотному SEO, людина пише в пошуку цікаві для нього слова, а на перших сторінках відображається сайт клієнта. Чим вище цей сайт, тим краще він оптимізований. І тим більше людей зацікавиться та перейде за посиланням.
У SEO фронтенду потрібно зробити такий сайт, щоб пошуковий робот зрозумів структуру та блоки на сторінку. А також швидше обробити інформацію, щоб сайт не втратив швидкість завантаження.
Наприклад, від розробника потрібно:
- Семантична та структурована верстка. Так робот визначає, що ви написали в кожному шарі HTML коду.
- Правильне використання заголовків на сторінках. Кожна сторінка має мати один і єдиний тег , який вважається основним заголовком. Він розповідає, що буде сторінка. А робот показує сторінку цільової аудиторії.
- Писати код для зображення, таблиці. Щоб той самий робот міг зрозуміти: ось це картинка котика, а тут котика немає, але є автомобіль.
- Оптимізувати продуктивність сайту зменшенням коду HTML, CSS та інше.
Чим крутіше ви знаєте SEO, тим краще продукти ви створюєте. Як для клієнта, так і його аудиторії.
5. Досвід користувача
Фронтенд-розробник повинен дбати про те, як аудиторія пройде через його продукт: чи побачить кнопку замовлення, форму передплати та інші елементи. Все це вирішує UX (user experience) — досвід користувача.
Сила впливу розробника на UX часто залежить від компанії. Десь це яскраво виражено, десь менше. Розробник відповідає не за код, а за товар. Тобто він дивиться, як продукт розвивається, наскільки легко вносити зміни чи щось додавати до нього.
Працювати в команді, підказувати дизайнерам та менеджерам найкраще рішення продукту — підвищити свої можливості серед оточуючих, здобути більше авторитету. Тепер ви не тільки кодувальник, а й фахівець, який працює на продукт та для продукту. І вирішує потреби аудиторії.
Приклад вакансії на front end
Плюс від обов'язків у компанії залежить і необхідний обсяг навичок. На картинці вище потрібно як знання front end, так і досвіду користувача. І це не виняток. Ви повинні бути гнучкими: знати круто front end і трохи суміжні обов'язки IT-фахівців.
Резюме
Тепер у вас має скластися пазл: хто це front-end developer і які навички необхідні для розробки продуктів. Але погодьтеся, каші в голові не поменшало. Що почитати? Який курс переглянути і в кого запитати поради?
У Комп'ютерній Академії STEP ми вчимо всьому, що зараз вимагають у вакансіях та на фрілансі від front end developer. Розкладаємо знання з поличок і робимо так, щоб вчитися було не лише цікаво, а й цінно. Створити своє портфоліо та піти працювати після випуску — реальність, а не проблема.
Перейдіть за посиланням, щоб вчитися на front end і кодити, доки інші не розвиваються і не відкривають нові можливості.
