Фронтенд-разработка давно перестала быть просто «вёрсткой сайтов». Сегодня это сложная экосистема: фреймворки, state-менеджмент, TypeScript, оптимизация производительности, работа с API и постоянный поток новых инструментов. Но за всей этой технологической гонкой часто теряется главное: что на самом деле нужно знать начинающему разработчику, где проходит грань между джуном и сеньором, и почему умение проходить собеседования — такой же навык, как и писать код.
Я, Александр, автор телеграм-канала «Shulepov Code», поговорил с Александром Ламковым — фронтенд-разработчиком, основателем YouTube-канала Friendly Frontend (аудитория более 50 000 подписчиков) и телеграм-канала «Friendly Frontend», опытным наставником, который провёл более 200 персональных консультаций с разработчиками, помог прокачать их навыки. Александр успешно прошёл собеседования на позицию сеньора в нескольких крупных IT-компаниях России, а сейчас работает в компании ВК. В этом выпуске узнаем, что такое современная фронтенд-разработка, какие навыки нужны, чтобы войти в профессию, что выбрать (найм или фриланс), и сколько на самом деле зарабатывают фронтенд-разработчики.
Путь во фронтенд
Александр Шулепов:
— Расскажи, как ты попал во фронтенд?
Александр Ламков:
— Я из маленького уральского городка, с детства любил видеоигры. Родители уговаривали идти на программиста, перспективно. Я был с ними солидарен и знал, что за ИТ будущее. Увлечение играми навело на мысль, что программирование может быть связано с геймдевом. В 18 лет сдал ЕГЭ, не очень успешно, но вполне достаточно, чтобы попасть на бюджет в Южно-Уральский государственный университет в город Челябинск.
— Получается, у тебя базовое образование в сфере программирования?
— Да, мое направление называлось «Программная инженерия». Нам давали сухую академическую теорию: базы данных, основы C, C++, C#, Assembler. Все это мне показалось скучным, и я не был к этому готов, играми тут и не пахло, даже не понимал, как тут подступиться. Но во время обучения в вузе у меня не было никакого плана Б, и я решил, что пускай будет как будет, окончу университет, а дальше буду действовать по ситуации. Это затянулось на шесть лет: четыре года бакалавриат, два года магистратура.
— У меня много товарищей учились на этой специальности, но никто не работает в ИТ. Мы сделали вывод, что образование отбивало желание заниматься разработкой. Не знаю, с чем это связано.
— Да, существует стереотип, что ИТ-специалистами становятся вне вуза. Большинство моего окружения, люди без профильного образования. Университет в веб- и фронтенд-разработке играет второстепенную роль. После вуза я понял: знаю все и ничего одновременно. Умею написать «Hello World» на десяти языках программирования, но на этом полномочия заканчиваются. Слов «фронтенд» и «бэкенд» в вузе не слышал. Не рассказывали, как применять навыки на практике, чтобы строить карьеру и зарабатывать. Не пытались заинтересовать ИТ, языками программирования, их назначением и рынком.
— Тогда сфера была новая, и заинтересованных преподавателей еще не появилось, потому что сейчас уже много таких ребят и информации.
— Для контекста: учился в университете с 2014 по 2020 год. ИТ-сфера развивалась, зарплаты росли, бизнес вкладывал деньги, профессия разработчика выгодна. Но у нас не было преподавателей с релевантным опытом рынка. Понимание ИТ ограничивалось автоматизацией каких-то процессов на заводах и в организациях. Какие процессы — непонятно. Не показывали мобильную разработку, веб, приложения. После университета в 2020 году вышел самоуверенным на рынок труда, пробовал все направления ИТ: C#, Java, 1C. Приглашали на собеседования, но технические этапы проваливал, не хватало знаний. На YouTube узнал об актуальных направлениях. Познакомился с фронтендом.
— Тогда это простая верстка?
— Абсолютно. Фронтенд, одно из самых простых направлений. Достаточно изучить базовые знания верстки, чтобы начать работать и получать деньги. Сосредоточился на фронтенд-разработке, изучил рынок, рассылал резюме на подходящие вакансии. Меня приглашали на собеседования. На технических терпел неудачи, но интервьюеры давали шанс, предлагали тестовое задание. Параллельно неудачным собеседованиям я их выполнял. Тогда знал фронтенд полтора месяца: базовую верстку и немного JavaScript для кликов по кнопкам и открытия элементов. Не знал, как разрабатываются серьезные приложения и актуальный набор технологий. Решил, что университетских знаний программирования хватит.
— Такая антиреклама университета.
— Спустя годы я анализирую, почему меня приглашали на собеседования. Связываю это с сопроводительными письмами: акцентировал на знаниях, умениях, целях и желании расти. Осознанно выбрал фронтенд-разработку. Этого хватило, чтобы меня приглашали и я мог проявить себя. Ближе к концу лета 2020 года получил приглашение на первую работу в веб-студию на 15 человек. Зарплата 25 тысяч рублей плюс премии за закрытие проектов. Я радовался: знал, что быстро вырасту, буду менять работу ежегодно и продолжу развиваться. Так я попал во фронтенд. Осознанный выбор направления и желание расти важнее идеального резюме. Почему фронтенд и визуал? В детстве, помимо компьютерных игр, меня увлекал стрит-арт и граффити.
— Ты умеешь рисовать граффити?
— Умею. Это вандализм, не горжусь, но процесс доставлял удовольствие. Объективно оценивал себя: художник посредственный, не учился в художественной школе. Однако мне нравилось творческое самовыражение. Проводя аналогию с ИТ, понимаю: веб-дизайнеры рисуют интерфейсы. Но мне фантазии не хватает придумать что-то с нуля, чтобы понравилось другим. Зато процесс воссоздания приложения по макету напоминает рисование на стенах: удовольствие от результата, проявление творческой натуры.
— Твой труд виден сразу. Мы обсуждали с экспертом по безопасности, что специалисты по информационной безопасности не всегда могут видеть свой труд. Сайты не взламывают годами, а потом случается инцидент, и обвиняют в некомпетентности, хотя три года все работало. Дизайнер и верстальщик видят результат мгновенно.
— Да, фронтенд прост и понятен.
— Сейчас это не так просто. Тогда хватало HTML, CSS, JavaScript, и ты фронтенд-разработчик.
— Базовые технологии остались. Они автоматизируются, фронтенд усложнился, но правила разметки, стилей и JavaScript понятны: пишешь и видишь результат. В бэкенде приходится домысливать вклад и итог. С фронтендом иначе — это мгновенная обратная связь: написал код, сразу видишь его на экране.
— Что ты делал на первой работе?
— Разрабатывал многостраничные сайты для заводов Челябинска и области. Простые приложения с набором технологий для фронтенда: HTML, CSS, JavaScript, jQuery и система управления контентом Drupal.
— Я знаю. Это моя первая система управления контентом, Drupal. Она на PHP, очень сложная.
— Фронтенду с ней трудно: система генерирует массу разметки, ее сложно менять. Приходилось писать много кода, но мне нравилось.
Переходы между компаниями и рост
— Как ты попал в ВК?
— Расскажу кратко свой путь. На первой работе проработал девять месяцев. Возникли сомнения: достиг потолка, предлагал внедрять новые функции, перейти на React, организовать серьезную разработку. Получил сопротивление: компания работает так десять лет и продолжит. Понял: не хочу двигаться с ними дальше. У меня был психологический срок, год на первой работе за зарплату (тогда уже 40 тысяч рублей). Дело не в деньгах: мне предстояло расти.
— Круто, что ты пошел за опытом.
— Да. Изучил ИТ-компании Челябинска, их немного. Искал, где пригодятся мои навыки. В одной меня пригласили. Собеседование с будущим руководителем команды прошло отлично. Мне не хватало знаний JavaScript. Руководитель объяснил правильные ответы. Ожидал отказа. Но ему понравилось, что я искренне заинтересован в работе с JavaScript, хотя пока нет твердого знания. Хорошо верстал, понимал веб, решал задачи, работал в команде с дизайнерами, тестировщиками, бэкенд-разработчиками. JavaScript знал на уровне базовых функций jQuery, тогда популярная библиотека. Несмотря на это, меня пригласили на работу. Продержался чуть больше года. Компания большая, 80 человек. Отделы тестировщиков, фронтенд- и бэкенд-разработчиков, аналитиков, менеджеров. В фронтенд-команде нас было восемь человек, мы взаимодействовали друг с другом. На старте карьеры важнее идти туда, где больше возможностей для роста.
— А там что делали?
— Там были серьезные многостраничные сайты. Основной упор шел на автоматизацию процессов. Использовался индивидуальный сборщик проектов, самописная программная платформа (фреймворк) на webpack с хитрым шаблонизатором разметки EJS. Первый руководитель команды внедрил ряд решений, а мой текущий руководитель их развивал. С фронтендной стороны компания была развитой: вместо адаптации популярных решений мы несколько лет делали свою платформу и применяли ее.
— Нормальная ли идея создавать свою программную платформу, если полно готовых?
— С точки зрения бизнеса это невыгодно, дорого обучать каждого новичка. С точки зрения разработчика это идеальный кейс. За год мои навыки JavaScript выросли от примитивных функций до настройки конфигурации и написания любого кода. Понимал, как работают платформы, хотя с React был на «вы», знал, что он делает, но не участвовал в написании ядра. Мы коллективно работали с этой сборкой: вносили корректировки, согласовывали идеи, разрабатывали библиотеку пользовательских интерфейсов. Видели, как все устроено в реальной разработке. Сборка идеально подходила нашим нуждам, и разработчики наслаждались процессом. Создание собственной платформы дает разработчикам полезные навыки, но обходится бизнесу дорого.
— Видели результаты своих трудов?
— Мы видели эволюцию инструмента, у него появилось множество версий. Юра, золотой человек, привет, если смотришь! Ты лучший руководитель команды из всех, с кем я работал. Мы классно трудились, сделали много проектов. Руководитель в основном направлял развитие, но мы наблюдали, как платформа набирает мощь. В конце добавили JSX и создали свой менеджер состояний на основе Redux. Появилось множество крутых возможностей.
— Он еще существует? Заходил ради ностальгии посмотреть?
— Давно не проверял, но развитие инструмента радует. Выгодно ли это бизнесу, не знаю. Для разработчика это отличный опыт. Благодаря ему меня позвали в ВК. Это была моя вторая работа. Третья – небольшой стартап, где проработал месяц. Меня попросили уволиться, и я понял, что это не мое.
— Как ты туда попал? Искал работу?
— Резюме всегда открыто для предложений. Меня позвали в стартап из 5-6 человек. Платили хорошо, набор технологий был понятен, React и TypeScript. Хотел попробовать себя в маленькой распределенной команде, чтобы понять, подходит ли мне такой формат и хочу ли продолжать в стартапах. Это был скорее аутсорс: группа ребят удаленно работала над проектом, подняла его с нуля.
— Чем это отличается от твоей работы? Те же задачи от руководителя команды, стартап, такая же компания по идее?
— Во-первых, микроменеджмент со стороны директора, который совмещал роли проект-менеджера и разработчика. Он участвовал во всех процессах: обсуждал задачи на уровне кода.
— Микроменеджмент – это лезть туда, куда не надо.
— Когда директор, менеджер и разработчик одно лицо, распределение ответственности отсутствует. Каждый должен понимать свою роль. Человек, который подсказывает по коду, платит зарплату и может считать строки. В стартапах аналогично: не хватает рук, задачи не декомпозируют на роли, один выполняет обязанности нескольких. Несмотря на негатив, руководитель был отличным. За месяц он подтянул мои навыки в TypeScript и React. Мы мирно разошлись без скандалов. С третьей работы я ушел во вторую компанию.
— Это нормально?
— Ушел с целью остыть и оценить рынок. Из-за политических встрясок захотел островок стабильности. На предыдущей работе чувствовал себя отлично: приятные коллеги, офис с редкой удаленкой, обеды в ресторанах, вечера в Left 4 Dead. Дружная команда фронтенд-разработчиков, открытое начальство. Эта работа запомнилась больше всех, хотя зарплата не устраивала полностью. На месячной работе в стартапе освоил TypeScript и React, классные инструменты. Захотел работать глубже с ними. Рынок использует React, Vue, Angular. Проанализировал пробелы в знаниях для крупных технологических компаний. Понял: хочу следующий уровень, компанию на 1000-2000 человек из Москвы или Питера с зарплатами выше челябинских. Прошел собеседования, получил отказы и предложение от Cinemax. Хорошая компания, интересное собеседование: обсуждали задачу, как грамотно построить фронтенд. Тут специалист по работе с персоналом из ВК написала: «Александр, не хотите к нам?» Знал о долгих этапах в крупных технологических компаниях (легенды о 11 этапах собеседования, как в Яндексе). В ВК подтвердили этапы, но провели все за три дня, срочно нужен разработчик. На второй день техническое собеседование с руководителем команды. Обсудили опыт без опросников, просто: что умею, что хочу. Рассказали о работе, нашли совпадение. Задачи интересные, руководитель понравился. ВК крупнее Cinemax (хотя и там классные ребята, но не тот уровень). Предложение пришло через час. Согласился.
— А давно это было?
— Осенью 2022 года.
Почему не стоит бояться менять работу
— Ты менял стабильные компании. Не страшно уходить в неизвестность, особенно в стартап? Для меня смена работы – стресс. А ты относишься легко.
— Менять работу всегда страшно: уходишь из известного в неизвестное. Никогда не переходил на меньшую зарплату, всегда на кратно большую. За пять лет карьеры сменил пять мест с экспоненциальным ростом зарплаты. Обидно менять комфорт на дискомфорт: разбираться в наборе технологий, поднимать проект с нуля, завоевывать репутацию. Хотел стать специалистом, которого зовут на проекты с хорошими условиями. В ВК меня никто не знал, это вызов и стимул роста. Компания другого уровня, процессы другие. Хотел узнать их, чтобы двигаться дальше. Отказаться значит упустить шанс.
— Какой проект запомнился больше всего, которым ты гордишься?
— Такой проект есть. На второй работе мне доверили сайт крупного регионального банка в Челябинске. Несколько коллег боролись за него: заказчик хорошо платил и много требовал. Нужно было с нуля выстроить дизайн-систему и сложную клиентскую часть. Задача стала одной из главных в компании. Я спроектировал дизайн-систему совместно с дизайнером, согласовал с бэкенд-командой сложные модули. Изучали решения конкурентов в других банках и нашли оптимальные. Разработка велась на Битрикс, и клиентская верстка учитывала его требования: удобство для серверных разработчиков и администраторов, чтобы контент легко подставлялся в шаблоны. Среди нестандартных решений – карта на базе Яндекс.Карт, калькуляторы ипотеки и кредитов. Главная цель – бесшовный путь посетителя от просмотра страницы до оформления заявки, без ощущения, что он заполняет документы. При этом сайт работал даже на слабых устройствах. Применяли техники оптимизации, что позже пригодилось.
— Что такое техника оптимизации?
— Техника оптимизации удаляет неиспользуемые сущности, функции и библиотеки из проекта. Код делится на модули, которые подгружаются по необходимости: suspense, lazy loading из React.
— У тебя классный опыт. Был проект, который вынес мозг?
— Таких проектов много. Первые два с половиной года карьеры прошли без проектной разработки: через меня прошло множество проектов с циклом от месяца до полугода. Последние два с половиной года – проектная деятельность. Сложным для меня оказался один из последних проектов в ВК с точки зрения кода: семилетний legacy на React с классовыми компонентами, старым Redux, устаревшими библиотеками в статусе deprecated. Нужно было перенести фронтенд на актуальный набор технологий. Хочу привести аналогию: такой legacy похож на трухлявый кирпичный дом, вытащишь один кирпич, все рухнет. Фронтенд нельзя менять постепенно, шаг за шагом. Миграция одной технологии разваливает весь фронтенд. Нужно воссоздать приложение с нуля по кирпичикам, без внятного технического задания, только старый репозиторий с устаревшим кодом в неприемлемом стиле. Методом проб и ошибок создали красивый, четкий фронтенд, чтобы изменения исходного кода оправдались.
— Переделывать всегда сложнее, чем делать с нуля.
— Почему это бесит? Во-первых, сложно оправдать действия разработчиков перед бизнесом. Рефакторинг для бизнеса – переписывание кода для улучшения. Бизнес думает: вы делали плохо, теперь исправляете. Со стороны это выглядит бесполезным.
— Доработки никто не любит: за кем-то доделывать не ценится. С нуля сделал, круто. За кем-то переделываешь, никому не нравится, заказчик не видит объема работы.
— Разработка проектов с нуля – одно удовольствие. Переделка за кем-то редко приносит удовольствие, не понимаешь, как так можно было. Методологии изменились, сейчас делают иначе. Время не щадит код: даже недельной давности код кажется убогим, особенно в первые годы карьеры в активном развитии.
— Бывало, что фронтенд казался не твоим? Устал, перегорел, не хочешь заниматься?
— Это было в первый месяц поиска работы. Позиционировал себя как фронтенд-разработчика: умею разрабатывать сайты, готов работать, дайте шанс. На собеседованиях говорил, что умею, но меня спускали на землю: знаний недостаточно, теория заучена, но практики мало. Было обидно: считал, что все знаю, дайте работу. Даже думал, может фронтенд не мое, пойти в мобильную разработку. Но хотел доказать: могу, добьюсь результата. Выпрашивал обратную связь.
— Круто, что выпрашивал обратную связь, ее редко дают. У меня на собеседованиях дизайнеры и программисты просят: скажи, что не так. Приходится тратить на это время, но отношусь с уважением. Был ли опыт фриланса?
— Фриланс у меня был: подработки. Но получается, что ты конкурируешь с людьми, которые работают на биржах десятилетия. У них тонна отзывов, работ, демпинг цен, решают задачу за вечер дешево благодаря опыту. А тебе на ту же задачу уйдет три дня, и браться за копейки не хочется. Конкурируешь с ветеранами системы.
Найм или фриланс
— Расскажи, что думаешь: новичкам или людям с небольшим опытом начинать с фриланса, идти в найм или пробовать свой проект?
— Нужно попробовать оба варианта. Найм предпочтительнее: профессиональный рост ускоряется в компании с командой, где можно задавать вопросы и получать поддержку. Не всегда так происходит, слышал истории, когда фронтенд-разработчик один на всю компанию, с кучей задач и без специалистов для консультаций. Это равно фрилансу: дают задачу и ждут решения. Рекомендую идти в найм к команде опытных разработчиков, которые научат. Новичкам лучше начинать с найма в команде – это дает структуру, опыт и обучение у коллег.
— Понятно. Когда человек становится достаточно опытным, что ему выбирать?
— Это вопрос приоритетов. Фриланс – нестабильный доход, но свобода распоряжаться временем и выбирать проекты. Кому-то это комфортно, другим некомфортно. Найм дает стабильную зарплату, но отнимает свободу: работаешь 8-9 часов.
YouTube-канал и создание контента
— Расскажи про канал Friendly Frontend. Как начинал? Что помогло набрать аудиторию?
— Канал существует полтора года. Первое видео вышло в декабре 2023 года. Сейчас около 700 роликов: обучающий контент по JavaScript и React, короткие видео-ответы на вопросы. Зрители задают вопросы, отвечаю видео. Аудитория выросла до 50 тысяч подписчиков. Что помогло набрать? Нет универсального рецепта. Важные факторы: регулярность публикаций, одна ниша, распространение контента.
— Первое – регулярность, последовательность. Второе – одна тема, ты шел по фронтенду, не распыляясь. Третье?
— Третье – распространение контента на все доступные площадки. Один человек может встретить тебя на любой. Нужно официально заявить: я официальное лицо Friendly Frontend, вот первоисточник, подписывайтесь сюда.
— Почему не дублируешь в ВК?
— Сложный вопрос. ВК требует привязки личной страницы, группы или сообщества. Показалось архаизмом, трата лишнего времени. Посмотрел метрики по ИТ-тематикам, мой максимум «дублировать видео в Rutube из YouTube». Не готов к формату сообществ в ВК. Хотел простую площадку для загрузки файлов.
— Выкладываешь в TikTok? Почему выбрал его?
— TikTok – феномен: китайская платформа захватила американский рынок. Знал просмотры и доходы крупных создателей медиапроектов, хотел проверить эффективность для ИТ-тематики. Попробовал, разницы с YouTube не заметил. На YouTube в среднем 10-30 тысяч просмотров, в TikTok примерно столько же. В TikTok выкладываю видео меньше полугода, на YouTube полтора года.
— Добавлю в твою копилку обратной связи. Впервые увидел тебя в TikTok, потом зашел на YouTube и посмотрел стримы. Сам фанат TikTok, сижу там. Instagram не мой формат, TikTok живее.
— Здорово, значит, все не зря.
Тайм-менеджмент и баланс работы
— Расскажи, как ты все успеваешь? Пишешь сценарии, монтируешь видео, настраиваешь звук и свет, плюс основная работа. Где берешь время?
– Слышал фразу: «Работай головой, а не 8 часов». Это мой девиз. Разработчик редко пишет код 8-9 часов, в основном аналитика. На работе делаю задачи качественно и быстро. Руководители знали: не просиживаю время, сдаю работу и занимаюсь своими делами. Поддерживаю баланс работы и жизни. В свободное время гуляю, хожу в зал, плаваю, пишу сценарии, играю в видеоигры. Переключаю деятельность, сохраняю желание работать. Закрываю рабочие задачи, тренируюсь, учусь новому. Работа над каналом, вклад в будущее.
— У тебя расписанный день? В 9 встаю, в 10 делаю то-то?
— Нет четкого расписания. Есть ритм: встаю в 9, завтракаю, с 10 до 12 активная работа, потом гуляю. План минимум выполняю, чтобы день не прошел зря. Когда меня спрашивают, как ты не выгораешь? Да никак, я выгораю, то есть позволяю себе выгореть, а потом неделю-две не делаю ничего полезного. Со стороны выглядит так, что деградирую, но по факту даю себе время остыть, чтобы подготовиться к следующему продуктивному этапу. В этом году, после того как завершил крупные многочасовые мастер-классы, дал себе несколько месяцев отдыха. Выгорание – это нормально. Важно позволить себе отдохнуть и восстановиться перед новым рывком.
Наставничество
— Расскажи про наставничество. Что это такое? Как начал заниматься?
— Наставничество, передача знаний от специалиста с большим стажем менее опытному коллеге. Обычно это частные консультации один-на-один: человек решает конкретную проблему за часовой созвон. Начал после стажера, довел его до результата, зарегистрировался на GetMentor и Solvery. К нему обратились 10 человек с индивидуальными задачами. Работа с людьми заряжала: благодарности, сообщения вроде «Саша, спасибо за разбор резюме, нашел работу». Решать проблемы людей приятно. Но это финансово невыгодно: ограничено свободными часами. В продуктивный месяц после основной работы 2-3 часа консультаций приносили 150-200 тысяч рублей, но убивали личное время.
— Энергию высасывало. Три часа говорить с человеком тяжело.
— Иногда с тремя разными. Переключаешь контекст: у одного проблема с проектом, у другого с резюме, у третьего с карьерой. Вникаешь в каждого, чтобы дать пользу. Включаешься в диалог, додумываешь за человека, наталкиваешь на решение. Это конкретная помощь: с проектом, резюме или планом карьеры. Не психологическая поддержка.
— Если человек ничего не хочет делать? Говорит: «У меня не получается», а ты делал? Нет. Что говоришь? «Не могу помочь, до свидания»?
— Такие случаи бывают. Люди, не знающие, чего хотят, сложны: недостаточно мотивированы, ищут легкое решение в наставнике. Его нет, надо работать. Рассказываю правду: что усилий недостаточно.
Уровни зарплат фронтенд-разработчиков в 2026 году
— Сколько зарабатывает фронтенд-разработчик?
— В найме специалист моего уровня, senior, получает 200-350 тысяч рублей. В Москве такие зарплаты. В регионах меньше, но удаленка сохраняет московские ставки: например, из Смоленска работаешь на московскую фирму.
— Удаленно работаешь в ВК или в офисе? Заставляют приезжать?
— Не заставляют. Можем приезжать в офис сколько хотим. Офис классный: кофейни, фреш-бар, спортзал. Приезжаю раз в неделю или две.
— Заработал первый миллион или идешь к нему?
— Эта сумма уже не впечатляет. Первый миллион заработал на второй работе, во второй год карьеры. Сейчас у разработчиков это 2-4 зарплаты, пара месяцев работы.
— На конференции по управлению коуч говорил: «У меня друзья не миллионеры, а миллиардеры». Даже репостнул это в Telegram: инфляция коснулась и коучей. Скоро секстиллионеры будут.
— О зарплате сениора судил по окружению: знакомые и друзья такого уровня. У мидлов 100-250 тысяч, у джуниоров до 100 тысяч (в Москве). Разница от города и компании. Маленькие фирмы берут пять мидлов вместо сениора. То есть если в вашем городе нет крупных компаний, то скорее всего ваша сениорность там оценится гораздо меньше, если будете зацикливаться на своем городе.
Роль и навыки фронтенд-разработчика
— Сениор не только пишет код, но общается. Больше общения, чем программирования. Кто такой фронтенд-разработчик и чем занимается?
— Фронтенд-разработчик создает интерфейсы, визуал сайта. То, что видит посетитель, работа дизайнера и фронтенд-разработчика. Взаимодействия с интерфейсом тоже фронтенд.
— Чем отличается от бэкенда?
— Бэкенд, внутренняя часть: прием запроса с кнопки «Отправить данные», обращение к базам, формирование ответа. Фронтенд собирает данные у пользователя и передает на сервер. Дальше зона бэкенда.
— Что нужно знать человеку, чтобы стать фронтенд-разработчиком?
— Для разработки фронтенда достаточно трех технологий: HTML, CSS и JavaScript. С их помощью создадут любой интерфейс и взаимодействие с ним. Для работы на рынке требуется знание программной платформы (фреймворка), Angular, Vue или React. Необходимо освоить экосистему платформы, включая библиотеки, которые применяются вместе с ней в базовых сценариях. TypeScript используется повсеместно как надстройка над JavaScript. Каждому разработчику нужны Git для контроля версий и средства автоматизации: сборщики проектов, препроцессоры стилей, плагины, NPM для управления пакетами и оптимизация. Разбираться в инструментах и настройке окружения – задача мидл- и сениор-разработчиков. Фронтенд-специалист должен уметь это, чтобы быть полезным рынку.
— Что такое HTML и какова его роль?
— HTML – первая ступень для фронтенд-разработчиков. Это элементы, описывающие содержимое страницы: кнопки, ссылки, параграфы. HTML важен для цифровой доступности. Не каждый сениор полностью его понимает. HTML описывает контент понятными тегами.
— HTML важен, ребята!
— Следующий слой – CSS. Он стилизует HTML: определяет расположение, цвета, шрифты. CSS отвечает за визуал, анимации и дизайн. JavaScript – язык программирования для браузера. Он реализует пользовательские сценарии: появление окон по клику, валидацию форм. В single-page applications JavaScript генерирует HTML и доминирует над HTML и CSS. Основы HTML, CSS, JavaScript важнее модных платформ. Сначала фундамент, потом надстройки.
— Видел в твоем подкасте, что JavaScript – мозги сайта.
— Да, HTML – тело, CSS – внешний вид, JavaScript – мозги.
— Используешь Bootstrap, Tailwind в работе?
— Это библиотеки CSS, набор классов для разметки, создающих дизайн. Я их не использую, но знаю, как применять.
— Почему не используешь? Это удобно.
— Удобно для тех, кто не работает по дизайн-системам. Подгонка Tailwind под систему сложна. Tailwind – переизобретение CSS без реальных преимуществ. Код на чистом CSS с препроцессорами пишу быстрее, чем с Tailwind. Преимущество в скорости набора классов в HTML сомнительно. Новичкам сначала изучать CSS, а Bootstrap и Tailwind для упрощения, если понимаешь основу.
— Что такое БЭМ?
— БЭМ – методология верстки, разработанная в Яндексе 20 лет назад. Популярна во всем мире. Аббревиатура расшифровывается как блок, элемент, модификатор. Она решает проблему специфичности селекторов и обеспечивает единый подход. Стили контролируются без !important. В современной разработке методологию часто критикуют из-за Tailwind, Styled Components и модульных стилей. Этот подход учит компонентному мышлению: макет делят на независимые блоки для переиспользования. Он также помогает декомпозировать код и избегать дублирования.
— Расскажи о CSS-препроцессорах в 2025 году.
— Препроцессоры становятся менее актуальными. Это инструменты для комфортного написания CSS с дополнительными функциями. Рассмотрим Sass, самый популярный, с которым работал больше всего.
— Sass популярнее Less?
— Да. У него два диалекта: SCSS с фигурными скобками и точками с запятой; SASS (.sass) на отступах без них. В Sass есть миксины и функции. Функции автоматизируют расчеты, например динамический шрифт по формуле. Миксины выделяют повторяющиеся участки кода в единую сущность для вызова одной строкой, принцип DRY (Don’t Repeat Yourself). Препроцессор сокращает объем кода. Его файлы не поддерживаются браузером, поэтому он преобразует их синтаксис в стандартный CSS.
Источники вдохновения
— Откуда черпаешь информацию? Кем вдохновляешься?
— Следил за несколькими людьми всю карьеру. Их вклад сформировал мое видение фронтенда. Первый – Вадим Макеев. Из музыкальной журналистики перешел в разработку интерфейсов. Создал комьюнити, YouTube-канал, выступал на конференциях. Вдохновил любовью к деталям HTML, CSS, стилям. Второй – Андрей Ситник. Разработчик PostCSS. Автор популярных open source продуктов с миллионами скачиваний. PostCSS используют повсеместно наравне с Sass. Третий – Виталий Харисов. Участник создания БЭМ. В 2005-2006 году пришел в Яндекс верстальщиком. Дошел до senior фронтенда, руководил процессами, ушел в руководители команды, вернулся в разработку. Пример пути от нуля до вершин.
JavaScript и его роль
— Что такое JavaScript и зачем нужен?
— JavaScript – монополист веб-разработки. Единственный язык для браузера, решающий сложные задачи.
— Почему JavaScript популярен уже который год?
— Были попытки внедрения Dart и других языков как замены, но JS везде: веб, мобильные приложения. Даже запускали на ракете Илона Маска. Нет инструмента лучше для веба. Принцип «не ломать старый веб» гарантирует его долгую жизнь.
— С чего начать изучение JavaScript?
— Начните с основ языка программирования: циклы, условия, функции, типы данных. Это принципы работы любого языка. Практический совет – курс на CodeBasics от Hexlet. Несколько часов с онлайн-тренажерами дают общее представление о JavaScript. Далее смотрите мои YouTube-курсы по HTML, CSS, JavaScript с нуля. Там практика фронтенда, а не только теория языка.
— Нужно ли изучать классы в JavaScript, если функциональное программирование развито сильнее?
— Классы стоит изучить. Они меняют подход к структуре кода. На второй работе писал модули пользовательских интерфейсов на классах: наследование, расширение, статические методы, модификаторы доступа. Это подготовило к React, классовые компоненты показались простыми. Классы декомпозируют код по зонам ответственности, уменьшают дублирование через наследование.
— Что такое JSON и где используется?
— JSON – JavaScript Object Notation. Формат унифицированного обмена данными между частями приложений. Фронтенд общается с бэкендом через JSON-объекты в запросах. Стандарт для веб-, мобильной и кроссплатформенной разработки.
— Что такое BOM и DOM?
— BOM – Browser Object Model. Функционал браузера: адресная строка, история навигации, данные экрана (ширина, высота, плотность пикселей). DOM – Document Object Model. Древовидное представление HTML-разметки в JavaScript. Браузер формирует DOM из HTML. JS взаимодействует с ним: находит элементы, привязывает обработчики событий.
— Что нравится в JavaScript, что раздражает?
— JavaScript читается как книга. Минимальный boilerplate: Hello World одна строка, как в Python. В C++/Java include, классы, директивы. Синтаксис лаконичный. Браузер управляет памятью, не нужно вручную, если избегать бесконечных циклов/рекурсий. Минус: ошибка останавливает приложение. В браузере у пользователя код падает целиком. Узнаем об ошибках от тестировщиков/пользователей. Компилятор (C++) ловит ошибки на сборке; JS собирается успешно (React + сборщик), но runtime-ошибки (undefined свойства) дают белый экран. Непредсказуемость ошибок.
REST API и React
— Что такое REST API?
— REST API – принципы общения фронтенда и бэкенда. HTTP-методы: GET, POST, PUT, PATCH, DELETE. Фронтенд знает URL, метод, данные запроса, формат ответа. Клиент (браузер) запрашивает данные у сервера.
— Ты много говоришь про React. Почему выбрал именно его?
— На первой работе коллега сказал: «React, билет в высшую лигу». Эта фраза запомнилась. Большинство вакансий требует React. Материалов больше, чем по Vue и Angular. Синтаксис приятный, концепции осваиваются быстро. Переход от JavaScript к React прошел безболезненно. Все, что умел на чистом JS, делал на React с меньшим кодом. React выполняет рутину под капотом.
— Все хотят React, Angular игнорируют, хотя он популярен. У меня есть проект, стартап по теннису (https://43.tennis/), и он на Angular. Изначально программист делал на Angular, он живет в Польше. Я говорю своему программисту, давай тоже учи Angular, чтобы ты мог тоже вести этот проект. Он такой, нет, Angular отстой, вот React учу.
— React, Angular, Vue идут нос к носу, конкурируют, развиваются. Нет монополиста. Новичку стоит рассмотреть альтернативы. React популярен, соответственно и высокая конкуренция среди разработчиков. Angular сложнее (TypeScript обязателен), обучение дольше, но конкуренция ниже, работу найти проще.
— Зарплаты одинаковые?
— Сейчас зарплаты выравниваются. Пять лет назад React-разработчики получали больше Angular-разработчиков, сейчас разницы почти нет.
ИИ и автоматизация
— ChatGPT используешь в работе?
— Каждый день. Использую как справочник Stack Overflow на максималках: описываешь задачу, сразу получаешь решение. Работает на точечных задачах, когда знаешь, что хочешь. Глубокий анализ кода или абстрактные задачи от менеджера не может.
— Сценарий сам пишешь? ChatGPT используешь?
— Сам. ChatGPT использую для общей структуры, но результат никогда не нравится. Поверхностная чушь. Если сказать «YouTube-видео», выдаст банальность с клише, неприемлемыми для образовательного ИТ-контента. Прочитал «Пиши, сокращай»: информация должна быть полезной, без мусора. ChatGPT выдает нарезки из общедоступных источников, логически несвязанные. Новичкам так нельзя. Подключаю свои мысли, дорабатываю. Могу попросить его мнение: «Как бы ты рассказал эту тему?» Выдаст план, сильно корректирую. Никогда не отдаю сценарий полностью. ChatGPT – помощник, не замена.
Путь роста и будущие планы
— Куда думаешь двигаться дальше?
— Ответ очевиден. Развиваю медиапроект как способ уйти из найма. Люблю фронтенд в найме, стабильно, решаю задачи, которые сам бы не выдумал. Это держит в форме, работаю над проектами, которые нравятся. Но потолок зарплатный виден. Прыгнуть выше – значит больше ответственности, нервов и стресса, либо экспоненциально увеличить доход через собственные услуги. Моя услуга – образование, обучение людей. Любой сениор, готовый выйти из зоны комфорта, может пойти в контент-проект и работать с аудиторией. Такой формат растет экспоненциально на дистанции у тех, кто занимается регулярно.
— Твоя цель – следующий шаг онлайн-школы?
— Да, один из крупных шагов. Запустил платный мастер-класс, заработал неплохие деньги. Недавно написал отчет с цифрами в телеграм-канале. Кто хочет, почитайте успехи начинающего создателя контента. Это окупается, несложно. Получилось заработать первую копейку. Это один вариант монетизации. Можно продавать рекламу разного уровня полезности. Реклама – двигатель всего. Делай полезный контент, зрители поймут, что реклама необходима.
— Немного предостерегающих мыслей. У меня есть ребята с онлайн-школами, суперталантливые, но все позакрывали. Ты сейчас преподаешь один, все круто. Но будет потолок. Поймешь: надо нанимать преподавателей, масштабироваться. Когда работаешь в найме, один начальник. Когда на себя, все ученики твои начальники. Будь готов.
— Понимаю, это жизнь. Хочу все попробовать.
— Согласен. Молодец, что пробуешь. У тебя дар преподавания, нравятся все видео. Полезно, понятно. Все получится.
Личное: мечты, хобби и советы
— Если бы не фронтенд, чем бы занимался?
— Удивлю. Стал бы поваром. Нравится готовить, печь торты. Серьезно. Была мечта открыть ресторан. С медиапроектом понял: классно готовить на камеру.
— Суперпопулярный контент. Легко набирать подписчиков. Все смотрят для души.
— Классно. Смотреть приятно, залипаю на видео, как делают торты. Потрясающе, хочется так же. Но пока фронтенд.
— У тебя есть мечта?
— Сейчас мечта – выйти из найма с хорошим доходом, чтобы позволить себе все. Возможно, уйду в другую профессию, заведу кулинарный блог.
— Есть у тебя хобби?
— Да, по-прежнему люблю видеоигры, сейчас играю в VR.
— У меня PlayStation 5, я фанат.
— Сейчас меньше увлекаюсь, люблю сюжетные видеоигры. Прошел Kingdom Come: Deliverance 2. Сейчас в VR Beat Saber прохожу.
— В такие не играешь? Бродилки?
— Сюжетные люблю проходить. Не люблю сессионные игры, нет смысла без завершения истории. Хочу пережить ее с персонажем, это маленькая жизнь.
— Видел: 1С-студия делает игру «Война миров», Сибирь. Русские разработчики, бродилка. Интересный трейлер, 1920-й год, большие монстры, роботы. Наши разработчики прокачиваются.
— Геймдев – моя несбывшаяся мечта.
— Делать игры и играть, другое. В титрах игры больше людей, чем в фильме.
— Это колоссальный труд.
— Какой совет дал бы себе десять лет назад?
— Лет десять назад – это университет. Определись с направлением прямо сейчас. Надо было начинать раньше. Одногруппники на втором-третьем курсе работали фронтендом. Я в 24 года попал во фронтенд, хотел бы в 20 или со школы. Сейчас этот совет бессмысленен. Что касается медиапроекта: начинай раньше. С техническими знаниями можно нести информацию в массы, даже на начальном уровне. Всегда хочется сказать себе: начинай раньше.
— Ты много анализируешь прошлое.
— Люблю анализировать прошлое, но ничего не изменить. Главное – правильные выводы, минимизировать ошибки в будущем.
Глоссарий
Фронтенд (Frontend) – клиентская часть веб-приложения или сайта, которую видит и с которой взаимодействует пользователь.
Бэкенд (Backend) – серверная часть приложения, которая обрабатывает данные и логику. Пользователь ее не видит.
HTML – язык разметки для создания структуры веб-страниц.
CSS – язык стилей для оформления веб-страниц.
JavaScript – язык программирования для создания интерактивности на веб-страницах.
React – популярная библиотека JavaScript для создания пользовательских интерфейсов, разработана Facebook.
Angular – программная платформа для создания веб-приложений, разработана Google.
Vue – прогрессивная программная платформа для создания пользовательских интерфейсов.
TypeScript – язык программирования, надстройка над JavaScript с дополнительной типизацией.
jQuery – библиотека JavaScript, упрощающая работу с HTML-элементами.
Webpack – инструмент для сборки и оптимизации веб-проектов.
EJS – шаблонизатор для JavaScript, позволяющий встраивать код в HTML-разметку.
Redux – библиотека для управления состоянием приложения в JavaScript-проектах.
JSX – расширение синтаксиса JavaScript, позволяющее писать HTML-подобный код внутри JavaScript.
Drupal – система управления контентом для создания и управления сайтами, работает на языке PHP.
WordPress – популярная система управления контентом для создания сайтов и блогов.
Битрикс – российская система управления сайтами и корпоративным порталом.
Программная платформа (фреймворк) – готовая структура для разработки приложений с набором инструментов и правил.
Набор технологий – комплекс инструментов и языков программирования, используемых в проекте.
Junior (джуниор) – начальный уровень разработчика, 0–2 года опыта.
Middle (мидл) – средний уровень разработчика, 2–5 лет опыта.
Senior (сениор) – старший уровень разработчика, 5+ лет опыта.
Руководитель команды – управляет командой разработчиков, распределяет задачи, общается с бизнесом.
Верстка – процесс создания визуальной структуры веб-страницы на основе дизайн-макета с помощью HTML и CSS.
GitHub – платформа для хранения кода и совместной работы разработчиков над проектами.
Наставник – опытный специалист, помогающий начинающим разработчикам расти и развиваться.
Фриланс – свободная занятость, работа на себя с разными заказчиками по проектам.
Git – система контроля версий для отслеживания изменений в коде.
NPM – менеджер пакетов для JavaScript.
БЭМ – методология верстки (Блок, Элемент, Модификатор), разработанная в Яндексе.
Sass/SCSS – препроцессор CSS, добавляющий переменные, миксины и функции.
Tailwind – библиотека CSS-классов для быстрой стилизации элементов.
Bootstrap – популярная библиотека CSS-компонентов для создания адаптивных интерфейсов.
JSON – формат обмена данными между приложениями (JavaScript Object Notation).
REST API – архитектурный стиль для взаимодействия клиента и сервера через HTTP-запросы.
DOM – объектная модель документа, представление HTML-структуры в виде дерева объектов.
BOM – объектная модель браузера, интерфейс для взаимодействия с функциями браузера.
ВК (ВКонтакте) – крупная российская ИТ-компания и социальная сеть.
VR (виртуальная реальность) – технология, создающая иммерсивную среду с помощью специальных очков.
Рефакторинг – процесс улучшения структуры кода без изменения его функциональности.
Legacy-код – устаревший код, написанный на старых технологиях, требующий обновления.
DRY (Don’t Repeat Yourself) – принцип программирования, избегать дублирования кода.
ссылка на оригинал статьи https://habr.com/ru/articles/1045620/