Подальший розвиток фронтенд-розробника: що потрібно знати, крім фронтенду

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

Ті, хто лише готується стати фронтенд-розробником чи вже є Junior або Middle-фахівцем, часто починають вдаватися в питання, що робити далі, що вчити та як дорости до Senior-позиції з поточного рівня. Перехід на новий рівень не обмежується лише фундаментальним знанням JavaScript/TypeScript або вивченням нового фреймворку, а передбачає глобальнішу супервізію процесу, а отже нові завдання, більше комунікації, вміння розв’язувати складніші задачі. Велику роль відіграє саме «зростання в ширину» — вивчення екосистеми, в якій ви працюєте, знайомство із засобами автоматизації та занурення в суміжні технології.

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

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

CI/CD, GitHub/GitLab actions, etc

На всіх проєктах, де я працював і продовжую, були пайплайни для автоматизації різних процесів: від лінтингу коду та тестів до деплою на різні оточення та релізів. Автоматизовані процеси стали невіддільною частиною розробки та певною гарантією, що код, який йде в продакшн, працюватиме як треба. В багатьох проєктах налаштуванням CI/CD і пайплайнів займається DevOps або System Engineer, але зі мною траплялися такі ситуації, коли структура проєкту змінилася і потрібно переробити частину процесів. Бувало і так, що девопси налаштували всю інфраструктуру, а розробники самі мають на її основі побудувати пайплайни під потрібний репозиторій. Будь-який досвідчений інженер має розбиратися в побудові пайплайнів на проєкті та вміти адаптувати їх під свої задачі — зазвичай під час сетапу нових репозиторіїв.

Більше про пайплайни можна прочитати тут:

• Quickstart for GitHub Actions
• Github Actions— Everything You Need to Know to Get Started
• GitHub Actions Tutorial — Basic Concepts and CI/CD Pipeline with Docker
• Building the perfect GitHub CI workflow for your frontend team

Cloud-інфраструктура (Amazon Web Services, Google Cloud Platform, Azure)

Час минає, застосунки стають складнішими, тоді як все більше компаній хочуть зробити інфраструктуру простішою, але масштабованою, із додатковими сервісами для зберігання паролів, оброблення подій, сповіщень тощо. Компанії як Google, Amazon і Microsoft подбали про це і створили свої платформи для підтримки застосунків будь-якого типу.

І кожен досвідчений фронтенд-розробник має вміти базово працювати з cloud-based платформами та розуміти, як працює внутрішня частина його проєкту в інтеграції з cloud-провайдерами. Вчити все не обов’язково. Можна взяти за основу, наприклад. AWS, а в решті платформ все буде більш-менш схожим. А щоб попрактикуватися, можна створити безкоштовний акаунт і написати невеликий full-stack застосунок, інтегрувавши в нього якомога більше сервісів від певного cloud-провайдера.

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

P. S. Для розробників Google, Amazon і Microsoft надають сертифікації різного рівня, які ви, можливо, захочете пройти. Я сам вивчав і сертифікувався за AWS, тож поділюся корисними матеріалами по ньому:

• Ultimate AWS Certified Developer Associate 2023 NEW DVA-C02
• Practice Exams | AWS Certified Developer Associate 2023
• AWS Certified Developer Associate Practice Exam Questions
• Build a Full-Stack React Application

Англійська мова

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

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

Мої поради, як покращити рівень англійської мови:

• Споживайте якомога більше англомовного контенту. Так ви не тільки підтримаєте рівень мови, але й відкриєте багато цікавих і корисних матеріалів
• Ходіть у Speaking-clubs. У містах, особливо великих, їх багато офлайн і онлайн. І ваша компанія, імовірно, зможе надати компенсацію уроків англійської.
• За бажання й можливості здайте IELTS. Я сам зараз до нього готуюся і за останні місяці сильно розширив свій словниковий запас, а також підтягнув граматику.

Опанувати патерни проєктування

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

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

Матеріали, що стануть в пригоді:

• 4 Design Patterns You Should Know for Web Development: Observer, Singleton, Strategy, and Decorator
• Most common design patterns for Front-End with JavaScript (Real-world examples)
• A Tour of JavaScript & React Patterns

Архітектура фронтенд-застосунків

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

Досвідчений фронтенд-розробник має розуміти, за якими правилами має будуватися фронтенд-застосунок, щоб він максимально задовольняв критеріям як:

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

Розглянувши декілька підходів, як-то Domain-Driven Design, Feature Sliced Design та інших, ви матимете варіативність вибору при підтримці та сетапі конкретного проєкту, що, безумовно, відобразиться на якості та швидкості роботи та покаже вас як сильного фахівця.

Корисні матеріали:

• Feature-Sliced Design
• How to structure frontend application
• Clean Architecture on Frontend
• Архитектура современных Front-end приложений. 5 видов. Преимущества и недостатки
• Web Application Architecture in 2023: Moving in the Right Direction

Навички ментора та інтерв’юера

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

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

Декілька порад від мене:

• Станьте ментором для когось із вашої компанії. Вивчіть, до чого людина прагне, постарайтеся їй допомогти та стежте за результатом.
• Поступово починайте брати участь в інтерв’ю. Можете попросити про це рекрутерів у вашій компанії, попросіть поради у тих, хто вже проводив співбесіди. Вони підкажуть головні моменти, на які потрібно звернути увагу

Висновок

Я перерахував всі основні навички, які розвиваю в собі як фронтенд-розробник. Насамкінець хотів би підкреслити, що все вищесказане варто розвивати безпосередньо із професійними навичками. Так, досвідчений frontend-розробник має знати HTML, CSS, JS, що таке доступність, оптимізація тощо, стежити за новинами своєї галузі та впроваджувати нові практики в життя та роботу.