Що потрібно вчити, щоб стати веброзробником

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

Всім привіт. Мене звати Максим Рудний, і останні 9 років я займаюсь веброзробкою. Спираючись на свій досвід, хочу поділитися планом, що потрібно вивчити, щоб стати хорошим Front-end розробником.

Матеріал буде цікавий початківцям, хто прагне пов’язати своє життя з веброзробкою. Сьогодні навчання програмуванню є неймовірно простим — будь-який матеріал можна загуглити або глянути на YouTube. Найскладніше — визначити, а що ж саме потрібно гуглити. Я впевнений, що стаття дасть відповідь на це запитання та зекономить комусь багато часу.

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

Важливо зауважити, що теми з цього списку не потрібно вчити всі й одразу. Це шлях, який розтягнеться на роки. Освоївши один пункт, можна переходити до наступного. Разом з тим, навіть для junior-спеціалістів важливо знати про існування усіх технологій з цього списку, поверхневого ознайомлення буде достатньо. З ростом вашої експертизи у веброзробці будуть і поглиблюватися знання в кожному з цих пунктів.

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

Рекомендації, побудовані на основі мого досвіду роботи, менторства, викладанні на курсах та YouTube-каналі. Якщо вам є, що додати, залишайте коментарі. Впевнений, що ваш досвід та поради будуть корисними іншим.

Ставимо мету

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

Щоб пройти шлях від точки А до точки Б, було б чудово розуміти, де знаходиться ця точка Б. Ви хочете працювати senior-розробником в Україні та отримувати свої $5000 чи плануєте переїзд за кордон та роботу в міжнародних компаніях?

Базовий Computer Science

Потрібно отримати базові знання про роботу комп’ютера, браузера, вебсайту. Що таке програма та як вона працює. Можна пройти якийсь базовий курс інформатики, те, що вивчають в школі. Освоїти ази будь-якої мови програмування (С, С++, Python) для того, щоб було розуміння, що таке змінна, конструкції мови, функції.

Корисним буде проходження популярного курсу CS50. Переклад українською доступний на Прометеусі — Основи програмування CS50 2019.

Command line (Terminal)

Робота з консоллю або терміналом — невід’ємна частина буденності програміста. Освоюємо базові команди: навігації по каталогах, створення файлів та папок, змін прав, запуск інших програм через консоль. Чим раніше освоїмо цей інструмент, тим легше буде в майбутньому. Можна пройти будь-який курс з Linux та роботи з консоллю. На Udemy легко знайти дуже популярні пропозиції, наприклад, Linux Basics: All You Need To Know To Start.

HTML

HTML — мова розмітки (не програмування). З неї ми розпочинаємо вивчення веброзробки. Освоюємо теги та побудову сторінки — каркас вебсайту. Доступних матеріалів багато, наприклад, той же CS50 від Гарвардського університету, але уже спеціально для вебпрограмування. Переклад українською також доступний на Прометеус. Також можна заглянути сюди. Хоч HTML і не оновлюється часто, зручніше навчатися по курсах або туторіалах на вебсайтах, ніж по книгах — наочніше буде.

CSS

CSS — каскадні таблиці стилів. Якщо HTML — це голий та нудний каркас, то з CSS наші сторінки починають виглядати красиво та стильно. Освоївши ці дві технології, ми вже можемо створювати перші проєкти. Прості «лендінги» або сайти-візитки. Потрібно набивати руку. Можна копіювати інші сайти, головне зробити якомога більше сторінок, щоб запам’ятати назви тегів та правил.

З цікавих ресурсів для вивчення можу порекомендувати цей або безкоштовний курс від Google.

Система контролю версій Git

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

Найкраще в Git — те, що його використовують абсолютно всі. Незалежно від того, ви Back-end, Front-end, mobile-розробник чи взагалі DevOPS, без Git просто нікуди.

Додатково до CS50 курсу, де також згадується GIT, можу порекомендувати свій безкоштовний курс Git for beginenrs на YouTube. Скоро буде ще переклад українською. Також на офіційному сайті можна абсолютно безкоштовно використовувати підручник «Pro Git» від Scott Chacon та Ben Straub.

JavaScript

JS — основна мова програмування у вебі й для front-end розробників в цілому. Її вивчення та практика забере найбільше часу. І разом з цим, освоївши JS core, вивчення будь-яких бібліотек та фреймворків не становитиме суттєвих проблем. Освоївши JS ми можемо додати інтерактивності до наших сайтів: валідації форм, складні анімації та ефекти.

Матеріалів з JS неймовірно багато. На своєму YouTube-каналі я ділюсь своїм досвідом. Також є декілька книг, які обов’язкові для прочитання, але не відразу, лише коли зрозумієте суть мови JavaScript і трішки наб’єте руку. Книги:

• «JavaScript: The Definitive Guide» by David Flanagan.
• «JavaScript: The Good Parts» by Douglas Crockford.
• «You Don’t Know JS» by Kyle Simpson (Безкоштовно на GitHub).

jQuery (для старих проєктів)

Однією з найпопулярніших бібліотек для JS була jQuery. Зараз вона менш популярна, але це не означає, що ми можемо пропустити ознайомлення з нею. Не всім нам працювати з сучасними та топовими технологіями, комусь і підтримувати старий (legacy) код потрібно.

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

Ajax / Fetch API

Цінність нашим проєктам надають актуальні дані та їхнє своєчасне оновлення. За допомогою Ajax ми можемо робити асинхронні запити на сервер для отримання чи відправлення даних. Fetch API — нова реалізація цього підходу.

CSS-препроцесори

Оскільки CSS — це лише таблиці стилів, то ні про які змінні, цикли чи функції ми говорити не можемо. Для цього можна використати препроцесори: Sass, Less або PostCSS. Вони дають нам можливість використовувати змінні та mixins (щось на кшталт функцій). Потім цей коди «компілюється» у звичайний CSS.

CSS-методології

Хто хоч трішки працював з CSS, знає, наскільки може бути складно підтримувати його організацію. Правильне формування селекторів та стилів є складною задачею. Весь цей код потрібно ж підтримувати та модифікувати. Щоб спростити життя, придумали різні методології: BEM, Atomic CSS, OOCSS та багато інших. Це, по суті, набір правил, який описує, як ми називаємо класи та використовуємо селектори.

CSS-фреймворки

На щастя, нам не потрібно все писати самому чи реалізовувати якусь з методологій на проєкті. Можна скористатися готовими рішеннями. Тут приходить час для використання CSS-фреймворку. Вибір великий: Bootstrap, Material, Tailwind, Compass та безліч інших. Готові до використання набори компоненів, глобальни стилі та можливість кастомізації під будь-який проєкт.

Даних знань та технологій уже буде достатньо для створення повноцінних сайтів-візиток, лендінгів та інших простих сайтів на декілька сторінок. Звісно, це за умови, що ми не пишемо Back-end, а всі дані уже для нас підготовлені.

Регулярні вирази

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

Project deploy

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

Найпростіший спосіб — завантаження вихідних файлів через FTP на сервер хостингу.

PHP

Так, вам не здалося. У 2022 році я досі раджу вивчити PHP фронтенд-розробнику. Чому? За допомогою jQuery чи навіть React (Angular, Vue) побудова дійсно складного сайту забере місяці, якщо не роки. А вам потрібен досвід роботи з блогами, інтернет-магазинами, будь-чим, що містить адмін-панель та можливість налаштування віджетів та плагінів. Про це ми поговоримо в розділі 17 CMS.

MySQL

Мова запитів SQL і бази даних MySQL стануть в пригоді в будь-якому разі. Якщо ми вже працюємо з PHP, то без них нікуди, а якщо і ні, то не проблема. Навіть зараз я час від часу використовую SQL, наприклад, перевіряю аналітику в BigQuery.

CMS (WordPress, Joomla, Drupal)

Основна причина, з якої варто вивчити PHP — це WordPress (або будь-яка інша CMS). В жодній іншій мові немає такої кількості простих та функціональних систем управління контентом. Блог чи інтернет-магазин можна зробити за годину. А функціоналу там буде стільки, що самому за все життя стільки не написати. Потрібно вміти перевикористовувати готові рішення.

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

Nginx

Зручний та популярний вебсервер. Тут нам знадобляться наші знання роботи з консоллю, адже це сервер на Linux. Ми не часто з ним працюємо, але розуміння, як він обробляє запити та повертає файли, важливе.

SEO

Нам не потрібно виводити сайти в ТОП-10 пошукової видачі, але розуміти, що таке оптимізація сайту під пошукові сервіси, необхідно. Сюди входить семантична верстка, оптимізація продуктивності сторінок, робота з Lighthouse, Google PageSpeed, WebPageTest та іншими сервісами. Від того, як ви оптимізуєте сайт (розумієте, що це таке та навіщо), залежить, скільки грошей заробить ваш клієнт.

Аналітика (Google Analytics)

Коли наші сайти уже доступні світові, хотілося б дізнатися, хто на них заходить, які сторінки переглядає та яка поведінка користувачів в цілому. Тут нам допоможуть різні аналітики. Найпростішою є Google Analytics. Встановлюємо за допомогою Google Tag Manager та збираємо інформацію. На всіх проєктах та компаніях, де я працював, ми використовували цей сервіс, і я займався його налаштуванням.

Architecture patterns (MVC, MVVM)

Погравшись з різними CMS, пора продовжувати прокачувати свої Hard Skills. Архітектурні патерни MVC, MVVM допоможуть зрозуміти принципи побудови складних додатків. Як розділити логіку, дані та представлення цих даних.

ООП

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

JS-фреймворки та бібліотеки

React, Vue, Angular є зараз найпопулярнішими JS-фреймворками. У більшості вакансій вимагається їхнє знання. Саме їх використовує більшість outsource та продуктових компаній. Оберіть один з них і копайте в цьому напрямку.

Стейт менеджер

В доповнення до фреймворків — стейт менеджери. Їх зараз багато, але найпопулярніші —це Redux, MobX. Спростять (або навпаки) життя при роботі над складними проєктами де багато даних, вони часто оновлюються, і всі ці зміни потрібно показувати користувачу.

Webpack

Найпопулярніший бандлер. Що він робить? Для спрощення роботи ми використовуємо різні бібліотеки, мови програмування (наприклад, TypeScript), безліч ресурсів (зображення, шрифти). Щоб це все оптимально зібрати та створити оптимізований білд проєкту, ми й використовуємо Webpack.

NodeJS

Найкраще в JavaScript — те, що цю мову можна використовувати й на серверах. Серверна версія JS називається NodeJS — це програмна платформа, яка компілює JS в машинний код. Без неї Front-end розробникам нікуди. Хочете чи ні, але якісь основи потрібно знати.

Express

Найпопулярніший фреймворк для NodeJS. Спрощує життя у багатьох випадках. Навіть якщо вам потрібно просто створити простий вебсервер, він стане у пригоді. Офіційна документація за посиланням.

Package managers (npm, yarn)

Оскільки більшість бібліотек запаковані в пакети та зберігаються в спеціальних репозиторіях, знання npm чи yarn будуть обов’язковими. Там нічого складного, просто потрібно знати, як встановити потрібний пакет з npm.

Build tools

До цієї категорії я відніс додаткові інструменти, без яких нам буде важко зробити якісний продукт, наприклад, лінтери або раннери. Код повинен бути чистим і, як мінімум, в одному стилі. На щастя, це можна автоматизувати за допомогою EsLint або Prettier. Також нам потрібно запускати наші додатки з консолі однією командою. Тут на допомогу приходять npm script, Grunt, Gulp або той самий Webpack.

RESTful

Реалізація протоколів обміну даними між клієнтом та сервером. Навіть, якщо ви не пишете Back-end сторону, розуміти. якими методами можуть робитися запити до сервера (GET, POST, DELETE...) та які статуси можуть повертатися (200, 301, 404...), потрібно розуміти. Кожен з них має свої обмеження, про які ми повинні пам’ятати.

MongoDB

Популярна документо-орієнтована база даних. При роботі з NodeJS стане в пригоді. На щастя, дуже сильно розбиратися з нею не потрібно.

Маючи базові знання з Back-end (NodeJS, Express, MongoDB), ми можемо уже створити повноцінний складний проєкт з допомогою одного JavaScript. Досвід показує, що такі знання будь-якому висококваліфікованому Front-end розробнику особливо важливі.

Performance (оптимізація)

Прийшов час покращувати якість наших проєктів. При роботі з SEO ми вже трішки зачепили тему продуктивності наших додатків. Пора копнути глибше. Оптимізація коду, швидкості завантаження сторінок, швидкість відображення контенту. Тут знадобляться знання Webpack, Nginx. Профайлінг — сукупність методів та технік пошуку найповільніших місць ваших додатків.

Логування

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

ElasticSearch

ElasticSearch може бути чудовим вибором для зберігання логів і подальшої їхньої візуалізації. Можна глянути на весь ELK стек. Інструменти корисні та цікаві.

Практики чистого коду

Прочитайте Роберта Мартіна та його книгу «Чистий код». Ця книга дасть відповіді на більшість запитань з написання чистого коду. Ви з майбутнього та ваші колеги будуть неймовірно вдячні вам.

Тестування

Є багато видів тестування, наприклад e2e, unit testing, функціональне, мануально. Найважливішим для програміста є unit-testing (модульне тестування). Без нього ваш код неможливо назвати чистим. Написання тестів зменшує кількість помилок, спрощує модифікацію коду, створює додаткову документацію вашого коду. Найпопулярнішими фреймворками для модульного тестування JS є Jest, Jasmine.

Безпека

Окрім чистоти, ваш код має забезпечувати вимоги безпеки. Гляньте на ТОП-10 правил OWASP. Ну і не забудьте налаштувати HTTPS-протокол та перевірити CORS.

Code review процес

Оскільки робота програміста — це переважно командна робота, вміння проводити code review є необхідним. GitHub дає чудові можливості та інструментарій для проведення code review. Які цілі та призначення цього процесу? Що таке collective code ownership та як він досягається review?

Design and Development принципи

Є кілька принципів написання коду, які вам потрібно освоїти: KISS, SOLID, YAGNI, DRY. Ці принципи часто запитують на співбесідах — покажіть себе з найкращого боку. Кожен з цих принципів також реалізовує практики чистого коду.

CI/CD

Continuous integration — регулярно мержимо наш код в репозиторій, після чого автоматично проганяються тести, лінтінг, білд та будь-які додаткові кроки. Ми впевнені, що наші зміни не зламали проєкт.

Continuous delivery (deployment) — максимально часто деплоїмо код в продакшин.

Найпопулярнішими інструментами є Jenkins та CircleCI. Вам, як Front-end розробнику, не потрібно вміти налаштовувати їх з нуля, але вміти запустити джобу або переглянути логи — просто необхідно. З Jenkins та CI/CD можна переглянути цей курс на YouTube.

Agile

Робота в команді вимагає знання деяких технік та практик. Тут на допомогу приходять Scrum, Kanban та XP.

Cloud

Так уже сталося, що зараз все переносять в хмари. Ознайомтесь з найпопулярнішими рішеннями: AWS, GCP чи Azure.

Docker

Частину роботи Front-end розробника передали дизайнеру, а саме частину верстки. Інструменти Figma та їй подібні генерують CSS компонентів. З одного боку, стало легше, але з іншого — на вільне місце додали іншу технологію — Docker. Фронт ми пишемо у зв’язці з беком, і щоб його підняти, потрібно запускати Docker.

TypeScript

Чудова мова, яка розширює можливості JS для розробників, наприклад, додавши типізацію чи інтерфейси. Активно зараз використовується як на back-end, так і на front-end.

GraphQL

Мова запитів, альтернатива для REST. Дозволяє отримувати лише ті дані, які безпосередньо потрібні для клієнта. Такі реалізації як Apollo додають безліч додаткових можливостей, наприклад, менеджмент стейту. Ми замінили Redux на Apollo, і все працює чудово. Як бонус, завжди актуальна документація для ваших запитів.

Кайдзе́н — «безперервне вдосконалення»

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

Підсумки

В цьому плані та списку технологій я повністю упустив такі речі, як англійська мова та soft skills. Вони не менш важливі, але не є темою цієї статті.

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

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