Фронтенд, возможное, лучшее и самое приветливое направление, чтобы войти в ИТ. Но с ним не все так просто — во фронтенде легко начать и трудно стать мастером. В нем не будет мук выбора языка программирования, но будет борьба с его недостатками. В этой сфере есть очень много инструментов, изучение каждого из которых тянет на освоение отдельной профессии.
О том, как правильно учиться, как не набить шишек и двигаться по карьере, мы расспросили у Олега Шикова, декана факультета веб-разработки в 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 learn.javascript.ru
- Сайт по изучению паттернов refactoring.guru/ru
- Очень удобная песочница JS и HTML/CSS прямо в браузере с возможностью делиться результатами своей работы — jsfiddle.net
Книги непосредственно про JS и HTML/CSS:
- You Don't Know JS (есть перевод на русский „Вы не знаете JS“)
- »HTML5. Недостающее руководство". Мэтью Макдональд
- «Большая книга CSS3». Дэвид Сойер Макфарланд
- «JavaScript. Подробное руководство». Флэнаган Дэвид
- «JavaScript. Шаблоны». Стефанов Стоян
- «JavaScript. Оптимизация производительности». Закас Николас.
Книги по программированию:
- «Объектно-ориентированное мышление». Мэтт Вайсфельд
- «Совершенный код». Стив Макконнелл
- «Изучаем SQL. Линн Бейли или MySQL 5». Игорь Симдянов, Максим Кузнецов
- «Регулярные выражения». Фридл Джеффри
- «Приемы объектно-ориентированного проектирования. Паттерны проектирования». Эрих Гамма, Ричард Хелм, Ральф Джонсон, Джон Влиссидес
- «Чистый код». Роберт Мартин
- «Компьютерные сети». Эндрю Таненбаум, Дэвид Уэзеролл
- «Современные операционные системы». Эндрю Таненбаум, Херберт Бос
- «Алгоритмы. Построение и анализ». Томас Х. Кормен, Чарльз И. Лейзерсон, Рональд Л. Ривест, Клиффорд Штайн.
