Современный Frontend

Что такое современный Frontend?

Frontend- это процесс разработки пользовательского интерфейса. То есть того с чем пользователь взаимодействует и что пользователь видит в первую очередь. Преуменьшить значимость Frontend разработки в современных реалиях нельзя. По моим наблюдениям пользователь скорее согласится чтобы функционал не был реализован на сервере и у него появлялось красивое сообщение об ошибке, чем иметь ужасный и не работающий интерфейс, но полностью рабочий сервер.

Из чего состоит разработка пользовательского интерфейса?

Многие по старинке думают что Frontend - это форма ввод данных, отображение текста и картинок. Эти люди остались на уровне 00-х - 05-х годов. Современный Frontend ничуть не уступает серверной разработке в сложности. Современный Frontend это валидация данных, динамическое изменение контента в зависимости от действий пользователя, управление запросами, корректное отображение интерфейса на множестве разных устройств, доступность для различных пользователей, отображение сложных аудио и видео форматов контента. Кроме этого Frontend - это уже давно не просто вёрстка со стилями, а полноценное функциональное или объектно-ориентированное программирование со всеми вытекающими.

Как всё усложнилось...

Frontend был достаточно простым в самом начале. Затем он начал постепенно усложнятся. Развивался JavaScript. Появлялись новые способы управления скриптами и их интеграция в вёрстку. И вот настал 2013 год когда появился React. С этого времени и примерно до 2020 года мир Frontend переживал бурное развитие. Появилась даже шутка что каждый день в мире появляется новый фреймворк или библиотека для JavaScript. В итоге к 2020 году стек технологий установился и теперь основа Frontend - это три кита React, Vue, Angular. К этому же времени TypeScript стал стандартом разработки для Frontend. Я помню когда начинал искать работу джуном,а затем мидлом (это был соответственно 2016 и 2018 года), достаточно было знать HTML, CSS, JS, а TypeScript и один из трёх китов Frontend были не обязательными навыками. Сейчас же начинающий Frontend разработчик обязательно должен знать весь набор: JS, TS, React / Vue / Angular, менеджер управления состоянием приложения, HTML, CSS, какой-нибудь препроцессор. В серверной разработке (будь то C# или Java или PHP) тоже шло развитие, но, за исключением PHP, не было такого многообразия и не было такого быстрого, активного развития. А совсем недавно появился новый тренд - микрофронтенды. Вместо стандартного REST API взаимодействия с сервером появились новые способы коммуникаций - GraphQL, WebSocket. В некоторых компаниях практикуют толстый клиент, когда Frontend выполняет часть или даже большую часть серверной логики по обработке и формированию данных. В этом случае разработка Frontend в области управления данными становится неотличимой от серверной разработки. Все эти изменения существенно повысили требования к Frontend разработчикам и сделали саму разработку пользовательских интерфейсов в разы в разы сложнее

Дорожная карта Frontend

Если вы хотите изучить Frontend, то готовьтесь к тому что изучать придётся много. Ниже я перечислю список того что нужно знать Frontend разработчику чтобы уверенно чувствовать себя на большинстве собеседований. Указывать буду те технологии, которые используются чаще всего и уже стали стандартом. Например смысла изучать LESS нет, потому что фактический стандарт - это препроцессор SASS.

• HTML
• CSS
• SCSS
• JavaScript
• TypeScript
• React / Vue / Angular
• Стейтменеджер (Redux / Vuex / etc)
• CSS-in-JS (желательно Styled Components)
• Material-UI (как самый популярные UI фреймворк)
• REST API

Ниже укажу те направления, которые необязательно знать, но знание этих технологий сделает вас более привлекательным для работодателя специалистом.

• Webpack
• GraphQL
• WebSocket
• Микрофронтенды
• Паттерны проектирования
• Архитектура веб-приложений
• Архитектура Frontend приложений
• Jest и Mocha (для автотестов)
• Работа с облачными технологиями (например с облачной нереляционной БД Firebase или с Google хранилищем

Бонус (что нужно знать React разработчику?)

Дополнительно расскажу что нужно знать Frontend разработчику специализирующемуся на React. Помимо всего указанного выше React разработчик должен уметь работать с набором наиболее популярных библиотек.

• React
• Redux
• Redux-thunk
• Redux-saga
• React Router
• React-hook-form
• Yup
• Redux-toolkit
• React-query
• Next.js
• Material-UI
• Styled-Components

Если вы хорошо разбираетесь во всех этих технологиях, то скорее всего вы уровень Senior и приходя на новое место работы вы не узнаете для себя ничего нового. Дополнительными плюсами будет знание React Native, MobX.

Увлекательная Frontend разработка

По моему мнению изучения и работа с Frontend весьма интересна и увлекательна. Вы работаете с графическим интерфейсом, видите результаты своей работы прямо на экране. Frontend разработчик так же выполняет часть работы отдела тестирования, так как может сразу после своих правок сымитировать поведение пользователя в приложении и проверить корректность работы интерфейса. Так же Frontend позволяет делать довольно увлекательные домашние проекты для себя или для резюме. Это могут быть как удивительные и сложные эффекты (например переход между страницами в виде распыления частиц), браузерные игры, просто качественные и удобные приложения. Любое Frontend приложение можно продемонстрировать своим близким или друзьям и им будет намного проще оценить вашу работу, чем если бы вы были серверным разработчиком. Кроме этого если вам всё же понадобится хранение данных или простенький сервер, то вы сможете воспользоваться облачными серверами, без надобности погружаться в серверную разработку.

Бонус для Frontend разработчиков

Важным для поиска и смены работы преимуществом Frontend разработчика является монополистический характер JavaScript и остальных технологий для разработки пользовательских интерфейсов. В отличие от серверной разработки, где разные компании используют разные языки программирования и фреймворки (PHP, C++, C#, Java, Kotlin, Golang, Rust, etc) в мире Frontend есть только JavaScript и его экосистема. Таким образом менять работу легче и количество доступных вакансий в теории больше чем по какой либо специализированной серверной разработке. Хотя не стоит забывать что внутри себя экосистема Frontend разработки на JavaScript гораздо шире и сложнее чем любая экосистема серверной разработки. Но всё-таки если вы работали с Redux а собеседуетесь в компанию где используется MobX - шанс получить оффер намного выше, чем если вы Java разработчик, которые собеседуется на позицию Golang разработчика.