Что нужно чтобы стать фронтенд разработчиком
Работать по 12 часов в сутки и не спать по 3 дня кряду, или как я стал frontend-разработчиком
Как парень из города Камешково прокладывает себе путь в IT и доказывает, что было бы желание, а возможности всегда найдутся
Привет! Меня зовут Артем, я frontend-разработчик в аутсорс-продакшене Hawking Bros. Сейчас я уже middle и еще параллельно учусь в колледже по специальности «Программирование в компьютерных системах».
Я родом из Камешково — это под Владимиром. Население — 12 496 человек. Такой маленький незаметный городок на карте, который начинался как поселок для рабочих при ткацкой фабрике. Как вы уже поняли, в моем родном городе не сильно развито IT, хотя следует отметить — местной молодежи интересны технические учебные заведения.
Это Камешково. Привет, малая родина
В этой статье я расскажу, как выглядел мой путь попадания в IT. Может быть, ее прочтет кто-то еще из маленьких региональных городков и поселков и поймет, что для работы в нашей индустрии не нужны связи или деньги, нужно лишь желание хорошо и много работать.
Первый компьютер, игры и отсутствие интереса к веб-разработке
Лет в 13 у меня появился первый компьютер, и я уже тогда начал изучать, как он устроен. Собственно, это можно считать точкой отсчета моего пути в IT. Я занимался этим самостоятельно и было трудно — у меня не было специализированной литературы, а мой уровень английского оставлял желать лучшего. Поэтому часто я «бил наугад» и таким образом учился. Спустя некоторое время я пошел в школьный кружок программирования. Спасибо ему за то, что у меня хотя бы появились материалы для более глубокого изучения предмета. И тогда же я уже точно решил, что хочу связать с IT жизнь.
В то время я уже более-менее освоил C++: делал на нем небольшие калькуляторы для себя и друзей, которые, например, считали проценты в играх. Это было классное чувство: придумывать какие-то приложения и пытаться их реализовывать своими силами, думать над логикой работы, исправлять какие-то ошибки с учетом того, что тебе никто не давал готовых решений и уж тем более не подсказывал.
В то время я и представить себе не мог, что стану именно веб-разработчиком. Классе в 9 нам преподавали HTML и немного JavaScript, я тогда вообще подумал, что это слишком «изи» для меня. Но спустя несколько лет, углубившись в веб-разработку, я изменил свое мнение…
Я узнал, что есть большие веб-приложения и как они разрабатываются и понял, что это круто и в эту сторону следует двигаться. Кроме того, в 2016-2017 годах веб-разработка выстрелила — появилось множество технологий, стала расти популярность существующих решений за счет выпуска новых версий. Заговорили о ботах, motion UI, многом другом.
Примерно в это же время, когда я был на 2 курсе колледжа, нас приглашали участвовать в чемпионате молодых профессионалов «WorldSkills Russia» (Владимирская область). Мне предложили попробовать поучаствовать в компетенции «Веб-дизайн и разработка». Я согласился, но в тот раз пролетел: моих знаний не хватило и место участника ушло другому человеку. Как ни странно, это меня не расстроило. Совсем наоборот, у меня появилась цель — принять участие в чемпионате в следующем году, и всем показать, на что я способен.
Мое развитие стали замечать наставники в колледже. И вдруг в один день мне заявляют, что участник, который должен был выступать на чемпионате, снят, и на его место берут меня. Как бы цинично это ни звучало, но я был рад. Осталось лишь выиграть и открыть двери в новую жизнь. Так чего же я жду? Вперед!
План — работать больше, работать лучше. Сон для слабаков
А теперь ложка дегтя: когда я узнал об этом, до чемпионата оставалась всего пара месяцев, и мне нужно было срочно подтягивать свои навыки и знания. Я понимал, что при текущем уровне развития вряд ли добьюсь хороших результатов, так как чемпионат подразумевал знания по backend, frontend и при этом еще по дизайну. Если в дизайне и фронтенде у меня еще что-то получалось — был опыт работы с Photoshop, с версткой, то backend давался очень сложно.
Я пересмотрел свой график. План был прост: упороться и вкалывать каждый день, но победить. Никакого work-life balance, только хардкор. Для этого я стал заниматься в среднем по 12 часов в день. Иногда мог несколько суток без сна готовиться (мой рекорд — 3 дня, но повторять никому не советую. И лучше не спрашивайте, как я выжил).
Вообще, эти несколько месяцев выглядели так: я приезжал после бессонных ночей на очередную тренировку в колледже, которая длилась почти 12 часов, сидел с огромными синяками под глазами, потом тратил час на дорогу в электричке, где тоже сидел, уткнувшись в ноутбук. Дома мог разве что минут 20 передохнуть, и дальше опять за работу. Не знаю, сколько бы я так еще выдержал. Но меня поддерживало то, что я занимался делом, которое мне действительно нравилось и нравится. И я понимал, что победа в этом конкурсе сильно поспособствует моему дальнейшему развитию.
К чемпионату я буквально заново изучил верстку, JavaScript. В школе я работал на нем, но использовал старый синтаксис. В 2016 синтаксис полностью переработали, сделали его более human-oriented. Это было здорово, но мне в итоге пришлось учить язык заново. Еще я прокачивался в PHP и WordPress. С таким стеком технологий я и вышел на чемпионат.
Сосредоточено иду к победе на чемпионате под номером 4
Мои усилия оправдались: по итогу 3 чемпионатных дней я занял первое место с сильным отрывом от остальных участников. Так что синяки под глазами и ненормированный день были оправданы.
После чемпионата я решил не тратить свои навыки впустую. Понемногу стал фрилансить. Выполнял небольшие заказы на WordPress или верстку на Bootstrap. До нормального трудоустройства приходилось непросто: я переехал в общежитие во Владимире из Камешково. Особой поддержки в своих начинаниях я не нашел. На первые деньги было тяжело жить, приходилось во многом себя урезать. Но бросать задуманное не хотелось. Может, сейчас тяжело. Может, чего-то не хватает. Это нормально, когда ты в начале пути. Да и в профессию я шел в первую очередь не за «золотыми горами», а потому, что хотелось.
Будни джуна, а затем уже миддла
После фриланса я устроился в диджитал-агентство junior backend-разработчиком. На этой работе в основном занимался бэком лендингов и интернет-магазинов на Битриксе. В целом, мне все нравилось, но в какой-то момент я стал перерастать в full-stack разработчика. Это был первый тревожный звонок. Но на самом деле это распространенная история в регионе: сильных команд не так уж много, да и об оттоке специалистов в столицу и города-миллионники не стоит забывать. К тому же, через 8 месяцев работы я понял, что backend мне в принципе и не нравится. Терять время на этой работе и дальше не было смысла.
Я начал поиски и вскоре уволился. К этому моменту я хорошо знал backend, сдал экзамен и стал аттестованным разработчиком Битрикса. Думаю, я мог бы продолжать работу с бэком. Но все-таки фронтенд привлекает меня сильнее. Это ни с чем несравнимые ощущения: круто, когда ты видишь свой продукт, можешь им воспользоваться. Чистый кайф: видеть внедренные тобой фичи — анимации, какую-то сложную фронтовую бизнес-логику, калькуляторы.
Так что я стал искать вакансии frontend-разработчика. На hh я наткнулся на Hawking Bros, где работаю уже почти год. Первый раз меня собеседовал наш техдир. Он проверял меня на общую адекватность и оценивал уровень знаний. Второе собеседование проходило с тимлидом frontend-отдела, его вопросы были уже более предметными — об общем понимании JavaScript, знании его новых стандартов и узких мест. По итогам меня взяли.
Где я сейчас?
Я думал, что сначала буду работать на мелких проектах и задачах. Ничего подобного. Как только я вышел в Hawking Bros, я стал работать на крупном проекте, где применялся React. Только тогда я почти ничего не знал о React и пришлось срочно изучать его. Мне частично пригодилось и знание Vue.
Здесь я работаю уже почти год. Мой рабочий день начинается с того, что я открываю наш таск-менеджер, смотрю свои задачи и начинаю их выполнять. Чаще всего я занимаюсь React-разработкой, поддержкой на разных проектах, разработкой новых интерфейсов. С недавнего времени выполняю и некоторые задачи по бэку. Сейчас уже даже помогаю нашим джунам, которые только-только пришли в профессию.
Сегодня frontend — действительно крутая ниша, в которой можно развиваться как горизонтально, так и вертикально. Благодаря тимлиду мы сильно расширяем наш стек технологий, в дальнейшем, я думаю, количество крутых проектов, с которыми мы работаем, будет только увеличиваться.
Я более-менее быстро выучил React, до сих пор продолжаю углубляться в него. Уже могу взять практически любой фреймворк, разобраться за несколько часов и сделать неплохую фичу. Стараюсь развиваться именно в этом и дальше, больше вникать в архитектуру сайтов и приложений.
И напоследок
Мне интересна моя работа, и я получаю от нее удовольствие. Становиться веб-разработчиком нужно, только если ты реально горишь этим, но тут я ничего нового не скажу. В любой сфере так. Не стоит идти в профессию из-за хайпа или золотой IT-лихорадки. Иначе выгорание настигнет вас через полгода-год.
Я стараюсь придерживаться и всем советую следовать мотивационным словам, написанным на плакате в нашем офисе — «ДЕЛАЙ ХОРОШО, ***ВО И САМО ПОЛУЧИТСЯ».
В общем, если вы решили встать на усыпанный гвоздями и алмазами путь веб-разработчика, нужно иметь огромную силу воли, самодисциплину и постоянно прокачиваться в проф. плане. Еще лучше, если вы посвящаете обучению хотя бы пару часов в день.
Как научиться фронтенд-разработке, найти первую работу и не набить шишек
Фронтенд, возможное, лучшее и самое приветливое направление, чтобы войти в ИТ. Но с ним не все так просто — во фронтенде легко начать и трудно стать мастером. В нем не будет мук выбора языка программирования, но будет борьба с его недостатками. В этой сфере есть очень много инструментов, изучение каждого из которых тянет на освоение отдельной профессии.
О том, как правильно учиться, как не набить шишек и двигаться по карьере, мы расспросили у Олега Шикова, декана факультета веб-разработки в GeekBrains и у Дарьи Дьячковой, начинающей веб-разработчицы.
В 2015 году Дарья Дьячкова поступила в НИУ ВШЭ на факультет Мировой экономики и мировой политики потому что в школе больше всего любила языки — учила английский и немецкий, постоянно выигрывала олимпиады. Ей нравилась эта сфера, но не до блеска в глазах, поэтому Дарья продолжала искать будущую профессию. В 2018 году она пришла на день карьеры в одно из HR-агентств, после которого сменила направление в неожиданном направлении.
«Я прошла длинный психологический тест, где мне посчитали тип личности-склад ума и прочее. Не в обиду психологам, но я к таким тестам отношусь скептически. После теста мне сказали, «эх, программист пропадает» и предложили послушать выступление про переход в мир ИТ. Я пожала плечами, пошла — и зажглась».
Дома она начала гуглить, смотреть обзоры профессий. Раньше Дарья мастерила веб-странички на Tilda и Wix, вела свой блог-обзор международных новостей, поэтому подумала о фронтенде в первую очередь. Тем не менее она просмотрела все вводные вебинары профессий и языков программирования, попробовала написать маленький кусочек кода на нескольких языках программирования и выбрала JS, как самый близкий по духу.
Что делают фронтендеры
«Если вы открываете любую страницу в браузере, все, что вы видите перед собой на странице — это делают фронтендеры. Но на самом деле их работа намного сложнее одного внешнего вида», — рассказывает Олег Шиков, декан факультета веб-разработки в GeekBrains.
Олег писал код с детства. Первые эксперименты были на языке С, а в 2011 году он перешел на Javascript. Многое из того, что есть в технологии сейчас, тогда только зарождалось. HTML и CSS не имели больших возможностей, а в индустрии преобладал Flash. Профессия в целом была намного проще — всего лишь HTML-верстка и несложное оформление. Достаточно было писать теги и красиво их оформлять на CSS. Пользователи нажимали кнопку, и страница полностью обновлялась. Уходил запрос на сервер, сервер отдавал новую верстку. Но такой подход не позволял делать отзывчивый интерфейс.
«Задача фронтендера в наши дни — строить логику сайтов на стороне браузера», — говорит Олег, «Эта логика разрабатывается на языке программирования JavaScript. Современные сайты могут полностью работать на стороне клиента, делая запросы серверу лишь изредка, например, чтобы сохранить данные пользователя или загрузить необходимую информацию. То есть сейчас мы запрашиваем не полностью обновленную страницу, а только необходимую информацию, и грамотно ее отрисовываем в браузере. Благодаря такому поведению, сайты становятся отзывчивее и экономят часть трафика пользователя».
Учить фронтенд — это учить JavaScript?
Определившись с направлением, Дарья поступила на факультет веб-разработки в GeekBrains. В представлении многих обучение фронтенду слилось с изучением языка Javascript, но, как считает Олег Шиков — это не совсем верно.
«Первое с чего надо начать — это конечно HTML. Он предельно прост, с ним очень легко справиться, очень легко написать свой первый сайт. Конечно, он не будет отзывчивым, но он будет работать, и его уже можно будет выложить в интернет. Далее необходимо добавить этому сайту красивый внешний вид, чтобы это было не просто полотно текста, а удобная и красивая страница с визуальными элементами. В этом поможет CSS – каскадные таблицы стилей. Пары недель хватит, чтобы освоить и HTML, и CSS. А сразу после надо приступать к JavaScript, потому что он — основа основ для того, чтобы делать отзывчивый интерфейс».
Но когда к технологии приходит популярность, следом за ней идет море критики. Многие опытные разработчики один за другим вскрывают в своих докладах, выступлениях и статьях проблемы и языка и предлагают альтернативы. Новичка эти обсуждения могут только сбить с пути. Как считает Олег, начинать изучение фронтенда с других языков только потому, что их больше хвалят профессионалы, будет ошибкой.
«Несколько лет назад все дружно ругали PHP, сейчас все дружно ругают JavaScript, это такой мейнстрим. Конечно, JavaScript не без проблем, с этим никто не спорит. Но например, TypeScript (другой популярный язык от Microsoft, являющийся расширением возможностей JS) не выполняется в браузере сам — он переводится (компилируется) в JavaScript. Если мы что-то напишем на TypeScript, то все равно получим JavaScript, который уже выполнится в браузере. Чтобы грамотно отлаживать код необходимо знать JavaScript и уметь работать с браузером».
Но Дарья находит время, чтобы учить вещи, которые и не входят в программу.
«Я привыкла много учить и разбираться до конца, я из тех людей, кто читает все дополнительные материалы к статьям и делает доп.задания, потому что им просто интересно. Нахожу время осваивать, например, Nuxt.js, Typescript, Vue.js, Webpack и Stylus».
Что такое React, Vue и Angular и как их выбирать
Помимо Javascript и других языков от фронтендеров требуют знание различных инструментов для работы. На чистом JavaScript довольно сложно разрабатывать интерактивные отзывчивые интерфейсы веб-страниц без использования сторонних библиотек.
Библиотека — это тоже JavaScript код, уже написанный другими разработчиками. Он предоставляет удобный набор решений, чтобы выполнять заготовленные действия, которые регулярно требуются в работе. В вебе есть большое разнообразие таких библиотек, которые упрощают написание отзывчивых интерфейсов для веб-сайтов. В их числе самые известные — это React, Vue и Angular.
«Выбор между ними — сложный вопрос. Можно выучить все три. Это не сверхсложная задача, потому что когда поймешь, как работать с одним, каждый последующий будет учить проще. Но по моим наблюдениям, они используются немного в разных сферах. Angular — один из самых старых. Он чаще используется в корпоративном сегменте, на больших проектах, с поддержкой легаси кода, который был написан несколько лет назад. React используется повсеместно. Он первый в списке, когда пишут новые интерфейсы и веб-сервисы. Про Vue можно сказать, что он простой, молодой, крутой и мейнстримный.
Я бы советовал попробовать написать простую логику на всех трех фреймворках — условно говоря todo лист — на основании своих ощущений понять, какой нравится больше, и учить его. Либо посмотреть вакансии в своем городе, и выбирать, например, React, потому что большинство вакансий на фронтенд-разработчиков требуют знания именно React. Но переучиваться потом будет не сложно».
Дарья пишет приключенческие романы и разрабатывает на Nuxt.js справочник по вселенной своей книги. Еще она делает проекты и лендинги для своих друзей, поэтому выучила адаптивную верстку, медиа-запросы и прочее. «Я начала React.js, придумала проект на будущее, который хочу воплотить на React Native. Пока планирую архитектуру, рисую блок-схемами, и читаю про технологии, которые можно использовать».
Как проходит учеба
«Когда началось обучение, преподаватели все отлично объясняли – для меня важно выстроить полученные знания в систему. Домашние задания помогали закрепить навык, бонусом давали наводку где и что ещё поучить. Много читала и осваивала сама, смотрела руководства и мини уроки на YouTube. На GeekBrains всегда можно написать преподавателю или наставнику курса или своей группе в чат. Все помогут, объяснят. Если нашел интересную статью – тоже есть с кем поделиться и обсудить.
Думаю, ощущения, когда видишь свой первый Hello world, не забудет никто. Да и в целом, ощущения, когда сделал по макету красивый UI, а он ещё и работает – это драйв».
Учеба длится полтора года. Олег Шиков считает, что просто учить синтаксис — это скучно, поэтому учеба сразу строится вокруг проектов. «Мы даем базовые вещи, синтаксис, и сразу пытаемся применить их на практике, пишем простые веб-страницы. После этого мы даем PHP, тем самым обучая студентов бекенд (серверной) разработке. Некоторым начинающим разработчикам кажется, что достаточно выучить HTML с JavaScript, и этого хватит, чтобы стать востребованным на рынке. На деле не совсем так. Нужно знать архитектуру, алгоритмы, паттерны и фреймворки — и не просто знать. Необходима еще практика, надо написать свой продукт, поучаствовать в коллективной разработке».
В начале обучения студенты пишут код по отдельности, проверяя его с преподавателем, а к середине обучения начинают разрабатывать продукт вместе со своими одногруппниками, благодаря чему получают опыт командной разработки.
Помимо учебы Дарья любит заниматься на платформе Kodiri.com, где проходят международные соревнования по JS. «Там можно тренироваться и одному, решать задания на время, точность и красоту кода. Я познакомилась с основателем платформы Рикардо — он классный парень. Теперь пишу для них задачки. К каждому заданию я прикладываю эталонное решение и тесты (так я, кстати, начала писать юнит тесты). Мне забавно соревноваться с другими игроками, когда вероятность, что хотя бы одно из пяти заданий будет твоего авторства ≈0.94. Да, я посчитала, мне было любопытно, почему я так часто их встречаю. Свои честно решаю и в ответы не смотрю. Захватывает элемент геймификации, я уже получила высшие погоны (Императорское Величество), теперь осталось подвинуть Юраша как лучшего игрока месяца. Этого элемента игры и духа соревнования в обучении мне недоставало, в целом, думаю, стоит добавлять подобные возможности в образовательные платформы. Несколько дней задачек Kodiri на скорость, и я во сне напишу arr.map(e =>».
Поиски первой работы
На каком этапе начинать поиски работы — очень спорный вопрос в индустрии. Одни убеждены, что только годы обучения и проработки теории на практике в безопасных условиях дают человеку право просить деньги за разработку. Другие наоборот — что учиться надо работая на настоящей работе. По словам преподавателя многие студенты идут по второму пути.
«Я знаю студентов, которые получали первые заказы или устраивались в фирмы на третей четверти. Они продолжали обучение, совмещая его уже с работой. Все зависит от человека и его способности учиться. Начинающему разработчику проще устроиться в маленькую компанию, чем в большую. В компаниях вроде Mail.ru или «Яндекс» строгий отбор. Далеко не каждый опытный разработчик сможет туда устроиться. Но попытать счастья, конечно, может каждый».
Когда у Дарьи за плечами было полгода обучения и резюме-портфолио в форме сайта, она прошла несколько собеседований, но навыков устроиться фронтенд разработчиком ей не хватило.
«На первом собеседовании было страшно. Я откликнулась на вакансию фронтенд разработчик Vue. Готовилась тщательно, повторила весь материал JS и Vue, и все что выучила за полгода GeekUniversity, разобрала tricky questions и всякие мелочи, где JS ведёт себя непредсказуемо. Собеседование проходило по Skype. Небольшая компания, сразу техническое интервью, минуя HR. Я бодро отвечала на вопросы, мы говорили целый час… а потом оказалось, что они всё-таки искали фулстек разработчика. Бывает».
На Хабр Карьере вы можете посмотреть свежие вакансии для фронтендеров и подписаться на рассылку новых.
«Джуниор-разработчикам задают простые вопросы, чтобы убедиться, что они знают основы», считает Олег, — «Я бы спросил про адаптивную и семантическую верстку, про то, как работать с чистым JavaScript. Сейчас тренд на фреймворки и библиотеки, те же React, Vue и Angular, а «ванильный» JavaScript без дополнительных библиотек — его не все знают. Я бы хотел убедиться, что разработчик знает, как с ним работать, а не сразу кинулся в лагерь условного React.
В любом случае вам придется потратить какое-то время, чтобы откликаться на разные вакансии, проходить разные собеседования. Проходить их — это тоже определенный опыт и навык. Отказы — это нормальная ситуация, бояться вообще не нужно»
«Спустя ещё два собеседования мне порекомендовали продолжить обучение и попробовать снова позже. Нужны были и общие знания — протоколы, архитектурные решения и прочее. Я и сама понимала, устраиваться было рано. Поэтому нашла классную смежную работу с ИТ — устроилась инженером технической поддержки в Букмейт. В обязанностях отвечать читателям на вопросы по работе приложения и сайта, что-то мелкое советовать как чинить, на проблемы покрупнее оформлять баги в JIRA и Confluence. Плюс, теперь отлично представляю, как обычные пользователи юзают UI/UX нашего приложения. Подсказка, «это не баг, это фича». Или когда разработчики хотели как лучше, а пользователи не поняли, как это и зачем.
Хороший шанс посмотреть на обе стороны — как пользователи юзают приложение, и как разработчики его развивают и чинят».
Как развиваться в профессии
— Я бы советовал развиваться в фулстек-разработчика, знать и бекенд, и фронтенд. Если же говорить только про фронтенд, то — хоть и необходимо хорошо знать JavaScript — без фреймворков никуда. Их надо учить.
На TypeScript стоит посмотреть, хоть его и не требуют во всех вакансиях. На самом деле он интересный, и JavaScript-разработчику выучить его очень просто. По факту это тот же самый язык с дополнительными фичами, которые позволяют писать более надежные системы. TypeScript добавляет в язык явную систему типов, которая позволяет сказать, что эта переменная будет числовая, а эта переменная — строковая.
В чистом JavaScript такого нет, там переменная может иметь любой тип, и это иногда приводит к ошибкам. Вы ожидаете число в переменной, а получаете, например, строку или объект, и у вас из-за этого ломается логика работы программы. TypeScript помогает избежать такой ошибки.
Сейчас многие смотрят в сторону PWA. Дело в том, что, как я уже говорил, рынок смартфонов огромный. Большинство пользователей, которые заходят к вам на сайт, с большой вероятностью делают это с телефона.
PWA (Progressive Web Applications) — это сайты, которые имеют дополнительные возможности, позволяющие удобно работать с ними в том числе со смартфона. Например, на андроиде PWA-сайт можно добавить себе на на стартовый экран и запускать, просто нажимая иконку. Есть возможности, которые позволяют улучшить сайт так, что он будет работать, даже когда на смартфоне нет интернета. То есть, это практически нативное приложение. Недавно Google выпустил обновление Google Play, благодаря которому вы можете добавить свой PWA-сайт в магазин, и пользователи смогут его скачивать и обновлять как обычное нативное приложение, которое почти неотличимо от обычного, написанного, например, на Java. А на самом деле оно написано на JavaScript и сверстано с помощью HTML.
Зарплаты
Медиана зарплаты фронтендера-стажёра находится на уровне 35 тысяч рублей. Специалист младшего уровня может рассчитывать на 50 тыс., миддл — уже на 97 тыс. Синьор и лид получают в среднем 170-190 тысяч рублей.
По данным калькулятора зарплат Хабр Карьеры средняя зарплата фронтенд-разработчика составляет чуть менее 110 000 рублей (диаграмма кликабельна).
Что почитать и посмотреть для самостоятельного изучения
Книги непосредственно про JS и HTML/CSS:
Книги по программированию: