Первая ассоциация, которая приходит в голову — это HTML, CSS и Java Script. Три основные столпа, на которых стоит весь frontend. Звучит просто. Но вот вы начинаете читать статьи, смотреть обзоры, открываете видео-уроки и сталкиваетесь не только с этими языками программирования, но и с огромным количеством технологий и фреймворков, о которых не знали ранее. И начинаете путаться.
В комьюнити также ходит такая страшилка про frontend, что в нем каждый день рождается тысяча новых фреймворков и библиотек. Такая теория еще больше усугубляет и без того неверное отношение к фронтенду на старте профессии.
Виталий Цой, frontend-разработчик в Kolesa Group, поделился с The Tech самыми частыми ошибками фронтендера в начале карьеры. Далее с его слов.
Несколько лет проработав во фронтенде, я предлагаю изменить наше мышление и забыть все те жуткие вещи, которыми пугают студентов и джунов. Вместо этого давайте вернемся к основам.
Основа frontend
Основа frontend — это язык программирования JavaScript, язык гипертекстовой разметки Html и каскадные таблицы стилей CSS. Давайте представим, что продукт frontend-а — это человек. Тогда HTML — это его скелет, органы, конечности, мышцы. CSS — это внешность, то есть цвет волос или глаз, прическа и форма носа. А Java Script — это его душа, высшая сила, способность меняться и двигаться. Это уникальный человек со своим набором характеристик. Или продукт. Кто-то может создать красивый и полезный сайт, а кто-то посредственный и сложный. Фронтендер — это человек, влияющий на опыт, который получит пользователь. Будет ли ему приятно и легко пользоваться сайтом, получит ли он полезность, захочет ли вернуться — все это зависит от frontend-разработчика.
Фронтендер — это человек, который своей работой формирует мнение и вдохновляет пользователей. Он соединяет дизайн и технологии. Создает с их помощью полезные и красивые продукты, которые влияют на жизни многих людей.
Ошибки фронтендера
Первая ошибка — недостаточная практика основ.
Люди, которые приходят во frontend, отвлекаются на новые модные технологии и уходят от изучения основ, синтаксисов, библиотек и фреймворков. Человек, не знающий основ, сможет написать код, который работает. Но рассказать, почему и как это происходит, не сможет.
Совет
Сводите к основам. Библиотеки, как правило, не придумывают ничего нового. Они работают на уже существующих основах ВЕБ. Это инструменты для ускорения и облегчения вашей работы. Вы даже сможете написать свой фреймворк, который может стать популярным.
Библиотеки фреймворков имеют тенденцию устаревать и меняться. Поэтому больше знаний лучше вложить в основы.
Вторая ошибка — механический код
Это происходит из-за того, что когда джуны учат какой-то фреймворк, они учатся писать его автоматически, запоминают код, не понимая, как он работает на самом деле. Но, как я сказал, фреймворк — это просто инструмент для облегчения работы. И когда вы учите фреймворк, нужно в первую очередь разбираться, как определенные фичи работают, чтобы лучше понимать и писать свой код. Результат этой ошибки обычно такой: с плохим пониманием фреймворка или библиотеки невозможно писать хороший производительный код. Это плохо скажется на всем: на сроках задачи, на качестве работы и на ваших коллегах, которые потом будут читать и разбирать то, что вы написали.
Совет
Задавайте себе вопросы:
— как <фича> работает?
— почему <фича> происходит?
— зачем мне использовать <фича>?
Будьте ненасытными. А если не можете ответить, то копайте и изучайте.
Третья ошибка — неосведомленность о рынке технологий и труда
Это ошибка уже не так распространена, как раньше. Потому что frontend-индустрия более-менее «устаканилась». Но более обдуманно подходить все-таки стоит.
Совет
Уделяйте больше времени на изучение рынка труда и индустрии. Держите руку на пульсе новых технологий. Но не прыгайте в них с головой.
Умейте различать стабильные технологии от просто хайповых.
Изучайте тренды, что говорят люди, как меняется frontend по сравнению с прошлым годом. Вы можете это сделать на сайте State of JS. Они каждый год опрашивают веб-разработчиков. строят красивые и понятные графики, которые будут вам полезны.
Изучите рынок вакансий регионально. Что хотят работодатели в том регионе, где вы хотите работать. Запросы могут постоянно меняться.
Найдите вакансию мечты. И стремитесь получать знания, чтобы работать там, где вы желаете.
Четвертая ошибка — неумение выбрать первый фреймворк
Лучше выбрать одну технологию, чтобы получить глубокие знания, чем прыгать с одной библиотеки на другую. Выберите одну технологию и изучайте ее. Они все похожи и ничем почти не отличаются.
Пятая ошибка — стремление к идеальному
Эту ошибку совершал и все еще совершаю я. Частая ошибка – перфекционизм. Когда хочется сделать код самым производительным. Но лучше остановитесь. Пока не поздно. Идеально не бывает. Идеального кода или плана не существует. И с этим нужно смириться. И успевать в дедлайн. Лучше делать полезное, чем идеальное.
Шестая ошибка — библиотечная болезнь
Это непреодолимое желание использовать библиотеку. Это приводит к тому, что страдаете и вы, и пользователи. Тысяча разных библиотек — это сложный код, который мешает всем.
Совет
Взвешивайте пользу. Думайте о том, какую пользу приносит вам сторонний код, есть ли у него рецензия и так далее. Главное, чтобы он сэкономил вам время. И экономил не только в моменте, а каждый день.
Седьмая ошибка — забывать про пользователя
Это когда красота мешает пользователю. Допустим, дизайнер делает красивый минималистичный сайт с маленькими кнопочками. А пользователь с небольшим экраном не может на нее нажать. Красиво — да. Неудобно — тоже да. Ориентируйтесь на пользователя.
Помните: код — для вас, фича — для людей.
Рекомендации для начинающих frontend-разработчиков: https://recommend.kolesa.team/frontend.