Что должен знать FrontEnd разработчик в 2019 году
Верстка сайтов и веб-программирование привлекают большое количество новичков в мир IT. Это связано с достаточно низким порогом вхождения. Количество желающих стать фронтендщиком с каждым годом увеличивается, вследствии чего растут и требования к кандидатам.
Какие технологии необходимо изучить, чтобы стать FrontEnd разработчиком в 2019 году? Давайте разберемся.
HTML5 & CSS3
Хорошее владение HTML и CSS уже позволяет заниматься версткой сайтов и начать зарабатывать деньги. Именно с этих двух базовых технологий начинается путь к профессии FrontEnd разработчика.
Bootstrap 4
JavaScript
Другими словами, JavaScript “оживляет” страницу и добавляет ей функциональности. Хорошее владение данным языком программирования является обязательным для каждого FrontEnd разработчика.
Сергей Росоха, Software Architect с 11-летним опыта во FrontEnd/JS, отмечает важность изучения алгоритмов и структур данных на JavaScript:
“JavaScript давно уже используется не только для разработки динамических интерфейсов пользователя, но и для написания достаточно сложной бизнес-логики. Поэтому знание алгоритмов и структур данных становится критичным для JS-разработчиков. ” (источник)
Тема связана со специальностями:
Однако, вначале необходимо изучить чистый JavaScript и лишь потом вникать в новые стандарты. Как ни крути, а классику надо знать. Благодаря хорошему владению JS можно быстро разобраться в любой версии ES и затем освоить любой фреймворк или библиотеку.
Фреймворки JavaScript
Это инструменты, с помощью которых создаются динамические веб/мобильные/десктопные приложения на языке JavaScript. Они ускоряют разработку веб-приложений и предусматривают четко структурированную организацию кода, повышая его качество и чистоту.
Какой фреймворк все же выбрать? Мнения на этот счет расходятся. Инструментарий выбирается индивидуально под проект и трудно предугадать, какие задачи вам нужно будет решать. Мы рекомендуем Angular.
CSS препроцессоры
Для повышения эффективности написания CSS кода вполне достаточным будет изучение лишь одного препроцессора.
Самая популярная распределенная система управления версиями, которая позволяет вести историю разработки проекта с возможностью доступа к каждой сохраненной версии. Таким образом, если в процессе создания программный продукт стал неправильно функционировать, есть возможность вернуться к предыдущей рабочей версии вместо длительных поисков ошибок.
Также системы управления версиями являются неотъемлемым инструментом командной разработки, который дает возможность девелоперам работать над одним проектом одновременно, сохраняя внесенные изменения. Заодно удобно отслеживать выполнение задач каждым членом команды. Очень важный инструмент для любого IT-разработчика.
jQuery
Небольшая, быстрая и многофункциональная JavaScript-библиотека, для работы с которой необходимо владеть HTML, CSS и JavaScript на базовом уровне. Она призвана упростить программирование на JS. Данная библиотека представляет объемные решения распространенных задач в виде методов, которые вызываются одной строчкой кода.
Какие языки программирования учить?
Чем больше освоишь, тем круче будешь
Довольно популярное мнение среди разработчиков, что уровень квалификации и зарплата зависят от количества языков программирования, которыми разработчик владеет.
Я сам в свое время ходил и думал, что бы такого изучить, чтобы потом писать в резюме много умных слов. Затем однажды на работе познакомился с коллегой, С++ разработчиком, который за всю жизнь освоил только один этот язык и все. А зарплата у него была, как у меня, может даже больше. Помню, как он ходил и с интересом спрашивал, как такие же вещи можно делать на С #. Это меня очень удивило, потому что я увидел, что человек достаточно успешен в IT-карьере, хотя он хорошо выучил всего один язык, а за его пределами почти ничего не знает.
Конечно, это не значит, что надо ограничивать свой кругозор единственным языком. На мой взгляд, секрет успеха в том, чтобы стать профи в чем-то одном, а затем осваивать смежные области, которые будут дополнять друг друга и двигать в направлении одной цели. Например, если вы занимаетесь Web-разработкой, будет плюсом знать какой-то язык для бэкэнда и JavaScript для фронтэнда. Но если я буду учить С++ для бэкэнда, то знания JavaScript для фронтэнда мне ничего не даст, потому что я никогда не буду использовать их вместе.
Обычно, с одного языка пересесть на другой не так сложно из-за схожего синтаксиса и общих принципов. Например, с C # на Java. При этом вокруг каждого языка есть своя большая экосистема: библиотеки, фреймворки, либы. А вот на это уже нужно много времени, и быть достаточно высококвалифицированным специалистом в двух-трех разных областях в программировании очень сложно.
Рынок вакансий диктует условия
Если осваивать программирование с целью карьеры, а не в качестве хобби, ориентироваться надо на рынок вакансий. Идем на HeadHunter и видим такую картину
Зеленым выделены языки с положительной динамикой вакансий. За год Kotlin и Go впервые оказались в этом списке. Красным выделен Ruby — для него число вакансий сокращается, и возможно, скоро из топ-10 его вытеснит какой-нибудь другой перспективный язык.
Может показаться, что если выбрать что-нибудь экзотическое, у вас будет меньше конкурентов, а значит проще найти работу. Это не совсем так. Работодатели тоже идут на hh, смотрят кандидатов и решают, на чем запускать проекты, под которые реально собрать команду. Замкнутый круг. Поэтому мой совет с точки зрения развития карьеры: выбирайте популярный язык, при этом ориентируйтесь на спрос на рынке труда, а не по каким-то другим рейтингам.
Вместо того, чтобы обсуждать актуальность отдельно взятого инструмента — а именно этим являются языки программирования — я рассмотрю их в разрезе 4-х направлений разработки и составлю наборы навыков, необходимых для решения разных задач.
Web-разработка
Здесь больше всего вакансий, но и сильнее конкуренция среди специалистов, т.к. направление развивается уже много лет. Web-разработка состоит из Frontend — визуальная часть сайта, то, с чем взаимодействуют пользователи, и Backend — серверная часть сайта.
Начальный маршрут для фронтендера:
HTML, CSS — языки верстки
JavaScript — для интерактивных элементов
ECMAScript / Typescript — расширения JavaScript, дающие больше возможностей
Опыт работы с одним из фреймворков: React / Angular / Vue
Как правило, выбор фреймворка не столь принципиален: работодатель готов рассмотреть кандидата с опытом в любом из трех, т.к. довольно быстро можно пересесть на нужный специально под проект.
Для бэкендера есть несколько вариантов. Каждый пункт в списке — пара из языка и его фреймворков:
PHP + Laravel / Yii 2 / Symphony
Javascript + NodeJS (Express.JS, Nest.js, TypeScript, GraphQL, Apollo)
Каждый из наборов актуален для написания серверной части сайтов, поэтому можно выбрать на свое усмотрение. В любом случае понадобится овладеть еще и этими знаниями:
HTML & CSS — понимание верстки сайтов
SQL (PostgreSQL / MySql) — работа с базами данных
Архитектуры и паттерны — как писать код, который легко поддерживать и масштабировать
В большинстве случаев это необходимый минимум, джентельменский набор для бэкенд-разработчика, работающего над сайтами. Далее, можно развиться как разработчик в 2 разных направлениях: начать осваивать технологии из списка фронтендера, т.е. стать Fullstack-разработчиком, или углубиться в бекенд и хайлоад. Выбрав второй путь, будет полезно освоить следующие технологии:
NoSql (MongoDB, Reddis, Cassandra)
Брокеры сообщений: RabbitMQ / Kafka
Мобильная разработка
Более молодое направление, в котором меньше вакансий, но пока наблюдается дефицит кадров. Языки программирования выбираются в зависимости от того, под какую платформу вы будете создавать приложения.
Android-разработчик:
В большинстве проектов нужно знать и Java и Kotlin
Новый код чаще пишется на Kotlin, однако очень много кода, который нужно поддерживать, написан на Java
Kotlin молодой, но очень перспективный язык, созданный питерской компанией Jetbrains в 2016 году. Он полностью совместим с Java, но примерно на 40% короче его, что значительно ускоряет разработку. Кроме того, в какой-то момент Google, устал от исков со стороны правообладателей Java за использование кода в Android и назвал Kotlin предпочтительным языком для Android-разработки. Сейчас все чаще приложения пишут на нем. Однако на текущий момент все еще очень много проектов, написанные на Java, которые нуждаются в поддержке и развитии. Поэтому Android-разработчику надо знать оба языка, чтобы уметь читать и вносить изменения в старый код.
iOS-разработчик:
Достаточно знать Swift
Старый код написан на Objective-C
Легкий и простой Swift пришел на смену и значительно потеснил первый iOS-язык Objective-C. Эти языки несовместимы, поэтому новые проекты начинают на Swift и его вполне достаточно для разработки на платформе. А Objective-C остается актуальным только для старых больших проектов, которые не решились переписывать на Swift.
Что касается востребованности, то Java и Kotlin универсальные языки, которые используют не только для мобильной разработки и под различные платформы. А вот Swift подходит исключительно для мобильной разработки под iOS и десктопной разработки под MacOS.
Еще один путь мобильного разработчика — освоить библиотеку ReactNative для JavaScript. Она устроена таким образом, что написанный код работает под все платформы. С одной стороны это очень удобно. Однако нередки случаи, когда появляется необходимость прописать нативный код для каждой платформы, а это значит нужно иметь наготове знания и Kotlin, и Swift.
Серверные приложения
Путь разработчика серверных приложений во многом похож на бэкендера, разрабатывающего сайты. Во-первых, надо выбрать и изучить один из языков. Сейчас в ТОП-е по количеству вакансий на российском рынке:
Во-вторых, как и бэкендеру, для большинства задач вам понадобятся навыки работы с базами данных и умение писать качественный код. Тут вам пригодятся:
SQL (PostgreSQL / MySql)
Архитектуры и паттерны
Дальше можно изучить:
Алгоритмы и структуры данных
NoSql (MongoDB, Reddis, Cassandra)
Брокеры сообщений: RabbitMQ / Kafka
Из этого самый сложный пункт — выбор языка. Я подготовил сравнительную таблицу:
Java, Python и С # между собой очень похожи и довольно универсальны. Java используют для сайтов и мобильной разработки. Python отдают предпочтение стартапы (а также крупные проекты, выросшие из стартапов) из-за его простоты освоения и универсальности. C # популярен и для сайтов, и для написания игр на движке Unity 3D. Я советую выбирать тот, с которым вы уже хоть немного имели дело и на какую сферу больше ориентируетесь. При необходимости быстро пересесть на другой из этой тройки не составит труда.
C++, на мой взгляд, один из самых сложных в освоении язык, подходящий в основном для серверных, десктопных программ и игр, реже — для Data Science. Разработка на нем занимает значительно больше времени, но дает программисту огромные возможности. C++ используют для программ, требовательных к быстродействию, например, Photoshop, или масштабных игр, так как с его помощью можно контролировать и распределять нагрузку на «железо».
Golang (Go) появился как более простая версия С++. Его легко освоить, и он заточен под высокие нагрузки и многоядерные процессоры, но имеет очень ограниченный функционал, например, нет дженериков, исключений и т.д., которыми обладают другие языки программирования. В первую очередь его целесообразно использовать для консольных утилит и highload бэкенда. Вакансии разработчика на Go открывают преимущественно крупные корпорации, хотя в последнее время спрос на разработчиков Go начал появляться и в проектах поменьше.
Разработка игр
Выбор языка во многом определяет платформу, на которой вы сможете писать игры:
C#, Unity 3D — кроссплатформенный, возможность быстро портировать игру с одной платформы на другую
C++, Unreal Engine — PC, обычно используется для масштабных игр, требовательных к быстродействию «железа»
Если по выбору языка какие-то моменты не осветил, задавайте вопросы — отвечу.
Профессия: фронтенд-разработчик
ххх: на чём пишешь фронтенд?
yyy: на костылях и велосипедах
ххх: ммм, хороший фреймворк!
Bash.im
Когда приходит мысль стать программистом, ты вдохновенно открываешь справочник Шилдта по С, заказываешь толстую книгу Страуструпа по С++ и учишься шутить про указатель на указатель на указатель и про рекурсию. Жёсткая романтика первого времени… Но всё меняется, когда в твою жизнь случайно приходит JavaScript. «Какой он простой, понятный, какой классный синтаксис! Всё, решено, буду писать сайты», — думает начинающий программист и решает стать гуру всея веба. Но потом выбранный стек меняет своё дружелюбное лицо, и чем дальше, тем больше. Но ты уже не можешь остановиться, потому что ты один из них — фронтенд-разработчиков. Тех самых, которые «смотрящие за мордой сайта». Ну что, захотелось присоединиться? Тогда для вас 2 серия нашего спецраздела «Профессия:…»
Кто это?
Сперва немного лирики и отступления от темы.
На пороге третьего десятилетия XXI века кажется, что интерес пользователей и разработчиков сместился c веб-интерфейсов в сторону мобильных приложений и IoT. Но это только кажется. Проведём простой мысленный эксперимент. Подумайте, сколько сайтов вы посещаете со всех своих гаджетов в неделю и проанализируйте, какие мобильные приложения у вас установлены. Скорее всего, получится, что все информационные и новостные ресурсы вы просматриваете на полных и мобильных версиях сайтов (в браузере), а мобильные приложения выполняют «специфические» задачи: социальные сети, мессенджеры, планировщики, хобби и т.д. То есть о вымирании веба говорить слишком рано.
Более того, одним из трендов 2019-2020 года (а мне думается, что и до года 2025) стали так называемые PWA (Progressive Web Apps), которые называют будущим мобильного веба. Если говорить максимально просто, то PWA — это не что иное как мобильный сайт здорового человека такой, каким он должен быть. Лучше всего PWA определил один из создателей этой концепции и автор самого термина Алекс Рассел: «Progressive Web Apps are just websites that took all the right vitamins.» («PWA это всего лишь сайт, который принимает все необходимые витамины»).
PWA даёт пользователю набор возможностей, который обычно ассоциирован с нативным мобильным приложением. Например, можно получить мгновенную загрузку при втором заходе, устанавливать значок сайта на экране гаджета для быстрого входа, получать настроенные уведомления, отказаться от навигации браузера и работать в удобном полноэкранном режиме и т.д.
Кстати, если вам интересно познакомиться с PWA поближе, есть классная страница о нём и, конечно, рекомендации Гугла.
Так что, друзья мои, очевидно, что вне зависимости от роста мобильных приложений и технологий, веб ещё долго останется открытым стандартом для взаимодействия пользователей и любых наборов информации (сайтов, блогов, социальных сетей, интернет-магазинов и всего остального).
Что-то меня в бэкенд унесло. Не суть. Суть в том, что при любом бэкенде любого сайта должна быть «морда» сайта и он должен как-то работать. И всё происходит, когда приходят они — фронтенд-разработчики. Они отвечают за разработку внешнего интерфейса сайта, то есть того, как бэкенд и дизайн сайта взаимодействуют с пользователем (если вдруг вы на Хабре случайно, поясню — за каждым сайтом скрывается куча всего: дизайн, различные прослойки и огромный бэкенд, то есть вся логика работы, СУБД и проч). В общем, когда-то истина крылась вот в этой картинке:
Эта эпичная и знакомая всем картинка уже сегодня трансформировалась и действительно, профессия фронтенд-разработчика стала несравнимо сложнее и многокомпонентнее, чем каких-то 7-10 лет назад. Теперь это выглядит так, и 2028 по ощущениям гораздо ближе 🙂
Фронтендеры отвечают за логичную работу всех компонентов сайта, включая контент, кнопки, изображения, навигацию и внутренние ссылки. Нередко именно они проектируют первичную структуру сайта, работают с требованиями пользователей (заказчиков), то есть отвечают за клиентскую сторону пользовательского интерфейса. И если бэкендеры отвечают за программно-аппаратную часть и им скорее важно, как софт взаимодействует с железом, то фронтендеры взаимодействуют с гораздо более сложной «аппаратной частью» — органами зрения, слуха и иногда осязания обычных людей. Задача сделать так, чтобы было удобно, быстро, прозрачно, ожидаемо и т.д. В общем, если косячит фронтендер, это заметят все и сразу.
Вы ещё не напугались от таких перспектив? Тогда едем дальше.
Где нужен?
Если коротко, то везде, где есть веб-разработка, а именно:
Средняя заработная плата
| Уровень специалиста | Средняя заработная плата |
|---|---|
| Младший (Junior) | 53 404 руб. |
| Средний (Middle) | 99 396 руб. |
| Старший (Senior) | 170 535 руб. |
| Ведущий (Lead) | 185 533 руб. |
Разница между уровнями довольно ощутимая, а стек внутри вакансий довольно обширный — так что с одними онлайн-курсами JavaScript делать карьеру фронтендера вряд ли получится.
Базовые требования к профессионалу
В описаниях вакансий фронтенд-разработчика можно встретить различные требования, от базового знания HTML до полного знания всего на свете и PHP в придачу. Мы выделим основные требования.
Наиболее популярные веб-фреймворки по версии отчёта StackOverflow. Очень рекомендую перейти на страницу отчёта и просмотреть его весь, хотя бы по графикам, попереключать вкладки, — так вы получите целостную картину происходящего в мировом IT. Много инсайтов даже для продвинутого, опытного айтишника.
Важные личные качества
Я не сторонник оценивать специалистов по их личностным качествам и требовать сострадания от фронтендера или интроверсии от бэкендера. Однако, имея определённые личностные черты, фронтенд-разработчик справится с работой несколько лучше, чем его конкуренты и коллеги.
Необходимость знания иностранных языков
Для любого программиста крайне желателен английский язык не ниже upper-intermediate с уклоном в технический английский. Так вы сможете читать в оригинале многочисленные рекомендации Google и других компаний для оптимальной разработки (очень много полезной документации!), самообучаться с помощью зарубежных лекций, общаться с коллегами на форумах, задавать вопросы, а также читать книги по юзабилити и дизайну, среди которых очень много крутых англоязычных и пока не переведённых изданий.
Развиваться именно в программировании без знания английского языка крайне затруднительно, особенно в веб-технологиях.
Где учиться
В российских реалиях, как мы уже говорили в первой статье про сисадминов, высшее образование необходимо для успешного трудоустройства. Поэтому желательно иметь хорошую образовательную базу (политех, университет, на край — техническая специальность в каком-нибудь базовом вузе). В принципе, при навыках логического мышления и умении работать с алгоритмами подойдёт любое высшее образование — был бы человек толковый. Сегодня уже есть специальности и направления в вузах, где студенты осваивают основы фронтенд и бэкенд-разработки, это очень хорошо. Но этого категорически мало.
Конечно, первое, с чем вы столкнётесь, выбирая профессию фронтенд-разработчика, это онлайн-школы. Пока я писал эту статью, я погуглил несколько картинок и отчёты площадок по теме фронтенда. У меня весь яндекс и гугл теперь в объявлениях, которые обещают меня сделать гуру JavaScript за 2-3-6-12 месяцев. Соблазнился бы, если бы не знал, что такое JavaScript и как его выучить за 21 день.Брать курс для старта или систематизации знаний или не брать — дело вашего желания, времени и дохода. В любом случае, просто прослушать не получится — придётся сидеть и бить по клавишам, делать тестовые сайты или пилить свой пет-сервис (включая бэкенд, кстати).
Впрочем, к этому обучение фронтенд-разработке и сводится: вы берёте именно проект и на нём учитесь. Если хочется денег, можно попытаться сделать сайт для небольшой компании или устроиться на стажировку (но для этого у вас уже должны быть хоть какие-то навыки разработки или тестирования). Только ежедневный кодинг, поиск оптимальных решений, тщательный анализ работы кода помогут вам прокачаться как разработчику.
Лучшие книги и средства обучения
Список книг и ресурсов зависит от того, какой стек вы выберете. Но есть несколько, которые нужны абсолютно любому фронтендеру (а то и любому программисту в принципе). Сделаю сумбурный список — по мере силы собственных впечатлений.
Будущее фронтендера
У фронтендера три основных пути развития.
Мифы профессии
▍Фронтенд умирает
Главный миф — это то что профессия фронтенд-разработчика умирает. Конечно, нет. Более того, интерфейсы год от года становится всё сложнее, и ИТ-сфера будет нуждаться в продвинутых специалистах, способных разобраться в этих усложнениях. Фронтенд-разработка будет нужна ещё довольно долго, и никакие шаблоны, визивиги, CMS и прочие средства её не заменят. О важности и нужности профессии можно судить по ряду графиков — думаю, всё наглядно и не нужно ещё раз повторяться о том, что не может умереть профессия, которая обеспечивает самое главное — взаимодействие пользователя и интерфейса.
Просто посмотрите на 10 самых популярных языков программирования в проектах GitHub и оцените положение JavaScript на этом графике. В данном случае прямая линия не означает умирание, она означает стабильность и востребованность.
Наиболее популярные языки программирования из отчёта StackOverflow. Кстати, JavaScript здесь удерживает лидерство уже седьмой год.
А вот и тренды Гугла.
Динамика запроса «frontend developer» в мире, 5 лет
Динамика запроса «frontend» (красным) и «фронтенд» (синим) в России, 5 лет
▍Работодатели не очень понимают в видах программистов
А вот второй миф нифига не миф, а чистая правда. Работодатели часто не понимают, кого они нанимают на работу и ищут не того, кто готов решать конкретные задачи и брать на себя ответственность за их решение, а того, кто «должен знать» какой-то им одним ведомый стек технологий. Именно поэтому нужно быть готовым к тому, что вакансия фронтендера будет один раз похожа на вакансию верстальщика, а второй — на вакансию фулстека. Если работодатель выучил аббревиатуру TDD (test driven development), то вакансию можно найти и среди тестировщиков 🙂 На самом деле, такой дичи, как в требованиях к фронтенд-программистам не встречается практически нигде (хуже дела обстоят только у пиарщиков и маркетологов, те вообще должны быть МФУ). Если вам очень хочется в компанию и вы понимаете, что собеседование идёт не туда, постарайтесь перевести разговор на задачи и рассказать, как конкретно вы собираетесь их решать и с помощью какого стека. Впрочем, если не туда пошло уже на собеседовании, может, вы слишком хорошо думаете о компании?
Главный совет
Весь веб меняется очень быстро — появляются новые технологии, новые паттерны взаимодействия, выходят новые утилиты и обновления фреймворков и библиотек. Однако если вы упустите что-то из новинок, завтра сайт, за который вы будете отвечать, не станет более медленным, страшным и не превратится в тыкву. При выборе технологий, смене стека, изменении логики работы интерфейса думайте о своих пользователях, о том, к чему они привыкли, смотрите аналитику, тепловые карты и вносите только действительно необходимые и полезные изменения. Тем временем изучая новое и пробуя его на пет-проектах, потому что опыт приходит только с практикой, а понимание лучших решений — на живых примерах.
А как и почему вы решили стать фронтенд-разработчиком? Что в профессии хорошо, а что нет? Рассказывайте в комментариях, поможем тем, кто стоит на распутье.