Что вы сможете запрограммировать через год, занимаясь по два часа в день: фронтенд

Чтобы изучить любой технологический стек — будь то бэкенд или разработка мобильных приложений — нужно потратить немало времени и сил. Тем, кто только знакомится с программированием, не всегда понятно, стоит ли в это вкладываться. Особенно если у вас уже есть работа в другой сфере, которая сильно ограничивает личный ресурс на обучение новой профессии.

В серии статей «Что вы сможете запрограммировать через год, занимаясь по два часа в день» мы с помощью профессиональных разработчиков показываем, из чего состоит обучение тому или иному стеку и что вы будете уметь, изучив его. В этом материале разбираем фронтенд-разработку.

Алексей Ладейщиков

CTO в aim digital agency

Всем привет! Меня зовут Алексей, свои первые шаги в разработке я начал ещё в 1999 году, а сейчас руковожу командой веб-разработчиков. Не первый год я занимаюсь обучением фронтенд-разработчиков с нуля. Что это за профессия?

Frontend в переводе с английского — передний край. То есть это некая «передовая» часть программного продукта, которая непосредственно взаимодействует с пользователем. Именно с фронтендом мы имеем дело каждый раз, когда кликаем по кнопкам и ссылкам в поисковике, заполняем формы заказа в интернет-магазине, пишем сообщения, слушаем музыку и смотрим видео в социальных сетях и медийных ресурсах, читаем книги, рисуем, играем в мобильных приложениях, снимаем наличные в банкомате, смотрим время на экране умных часов.

Иными словами, фронтенд-разработчик создаёт пользовательский интерфейс, тот набор элементов и правил, который позволяет человеку взаимодействовать с программой и устройством.

Если вы готовы посвящать обучению и практике 2 часа в день, то вполне реально за год дотянуться не только до начального (junior) уровня, но и до среднего (middle) уровня веб-разработчика, собрать хорошее портфолио, что даст вам возможность претендовать на работу с очень приличной по сравнению с многими другими отраслями заработной платой. Вы сможете разработать и запустить онлайн-блог, фотогалерею, каталог товаров, интернет-магазин, видеохранилище и даже социальную сеть.

С чем вы столкнётесь при изучении frontend-разработки

Технологии, с помощью которых создаются интерфейсы для разных устройств и сфер применения, существенно различаются между собой. Но есть универсальный набор технологий, которые позволяют создать интерфейс для большого спектра вариантов использования.

Основные три компонента технологического стека:

• язык разметки гипертекстов HTML;
• язык стилизации CSS;
• язык программирования JavaScript.

Под этими крупными компонентами кроется множество смежных технологий. Освоить их одному человеку бывает сложно, да и не нужно, потому что многие из них дублируют друг друга. И вопрос выбора чаще решается личными предпочтениями разработчика или компании, нежели объективными причинами.

Что вам предстоит изучить, если вы будете придерживаться моего плана:

• основы HTML;
• основы CSS;
• команды и аббревиатуры Emmet;
• основы работы с препроцессором HTML;
• функциональность сборщика проектов gulp;
• основы работы с препроцессором CSS — Sass;
• основы JS;
• углублённый курс чистого (Vanilla) JS;
• библиотека jQuery;
• основы библиотеки React;
• основы фреймворка Vue.

Вам понадобится постоянная практика: оттачивание мастерства путём решения мини-задач и работа над крупным тестовым проектом.

Первый этап: среда разработки, основы HTML, CSS — 2–2,5 месяца

В первую очередь вам необходимо выбрать среду разработки. Не нужно пытаться сразу найти «лучшую», это вопрос вкуса и привычек. Из наиболее популярных среди профессионалов могу посоветовать WebStorm, VSCode, NetBeans. Или, если интересует более «легковесный» вариант, — Atom, Sublime Text.

HTML, Hypertext Markup Language — язык разметки. Он позволяет создавать текстовые документы, дополненные гиперссылками и разнообразными объектами: изображениями, элементами форм, видеороликами, аудиозаписями, холстами для создания виртуальных миров и т.п.

Изучать HTML стоит примерно в таком порядке:

• узнать, что такое тег и атрибут;
• структура HTML-документа;
• теги физического форматирования текста, гиперссылок и якорных ссылок, таблиц, блочных элементов, вывода изображений,
• веб-форм;
• комментирование блоков;
• теги заголовочного раздела документа;
• стандарты HTML.

CSS, Cascading Style Sheets — язык стилизации. Он позволяет управлять размерами элементов, их цветом, формой, положением, видимостью в разных состояниях; создавать простые трансформации и анимации, настраивать типографику, задавать правила адаптации документа к различным устройствам и т.д.

Изучать СSS стоит примерно в таком порядке:

• синтаксис языка;
• способы внедрения в документ;
  селекторы, псевдоклассы и псевдоэлементы;
• основные свойства;
• наследование и группировка свойств;
• свойства для работы с текстами и графикой;
• медиа-запросы;
• работа с анимацией.

Второй этап: надстройки и аббревиатуры Emmet — 1–2 недели

После изучения базовых технологий переходим к изучению надстроек и дополнений к ним, которые помогут вести разработку быстрее. В случае с HTML и CSS создавать документы намного быстрее вам поможет знание так называемых аббревиатур Emmet — сокращений, которые «знает» ваша среда разработки и автоматически преобразует в HTML-код.

Использование аббревиатур Emmet ускоряет первоначальную разработку, но не позволяет быстро править код. Полученный после преобразования код — это всё тот же «обычный» HTML.

Третий этап: препроцессоры HTML и CSS — 5 недель

Препроцессор — программа, которая позволяет принимать данные в одном формате и выдавать их в другом.

Препроцессоры HTML

Наиболее популярные — Pug и Haml. Технология препроцессинга позволяет устранить многие недостатки HTML, ускоряет составление HTML-документа и его последующее редактирование. Используя препроцессор, не нужно повторять ключевые слова class, id; не нужно закрывать контейнерные теги; можно объявлять и использовать переменные, применять условия и циклы; можно разбивать весь документ на блоки и хранить их в разных файлах и т.п.

Побочный эффект этого удобства — формат документа, который браузер «не понимает». Для того, чтобы преобразовать полученный документ в понятный для браузера формат, можно использовать watcher, встраиваемый в IDE. Альтернативный способ — использовать сборщики проектов. Можно начать с gulp и постепенно перейти к более сложным продуктам-бандлерам: например webpack или Parcel.

Препроцессоры CSS

Для CSS также существуют препроцессоры. Они позволяют создавать более компактный код, а также использовать переменные, функции, миксины, вложенности блоков, циклы и условия и т.п. С помощью этих инструментов можно избежать большого количества рутинной работы, а также снизить вероятность дублирования стилей и ошибок. К этой группе относятся: Sass, LESS, Stylus. Базовые возможности у них очень близки друг к другу, существенная разница лишь в деталях.

От себя могу посоветовать разновидность Sass, которая называется SCSS. Основная разница между ними заключается в том, что у второй технологии используются фигурные скобки для выделения блоков и точки с запятыми для обозначения конца текущей инструкции, а у первой блоки создаются при помощи отступов, точки с запятыми не используются. Поэтому вопрос выбора — скорее вопрос вкуса или пристрастия к какому-либо языку программирования. Те, кому нравится C-подобный синтаксис (C++, PHP, Java, JS и т.д.), скорее всего полюбят SCSS. Приверженцы Ruby и Python более привычным найдут Sass.

Конечно же, для преобразования файлов препроцессора в понятный браузеру формат тоже нужен обработчик. В качестве такового удобно использовать те же сборщики проектов: gulp, webpack, Parcel.

Четвёртый этап: Изучение JavaScript — 3–4 месяца

Для большинства самым сложным блоком в изучении фронтенда окажется мир технологий, построенных вокруг JS. Этот мир настолько обширен, что охватить его весь вряд ли удастся.

Набор HTML + CSS даёт возможность создавать красивые веб-страницы, на которых можно и увидеть изображения или видео, и послушать музыку.

Но этот набор не позволяет сделать страницу по-настоящему интерактивной: вовремя подсказывать пользователю, что он вводит недопустимые значения в форму; подгружать новые сообщения в переписку без перезагрузки страницы; добавлять товары в корзину интернет-магазина; настраивать внешний вид личного кабинета и т.д. Эти возможности даёт нам JavaScript.

JavaScript — язык программирования, позволяющий управлять объектами документа, изменять его содержимое, взаимодействовать с пользователем, создавать сложные анимации, отправлять запросы серверам и обрабатывать их ответы и т.д.

Советую для начала погрузиться в язык без каких-либо надстроек: «чистый», так называемый Vanilla JS.

Ключевые этапы базового курса:

• синтаксис языка;
• управляющие конструкции;
• функции и функциональные выражения;
• контекст вызова this;
• области видимости;
• «строгий режим»;
• наследование в функциональном стиле;
• наследование в прототипном стиле;
• классы;
• стандартные объекты JS;
• объекты надстройки браузера;
• DOM;
• механизмы коллбеков;
• отложенное исполнение кода и исполнение через «равные» промежутки времени.

Ключевые этапы углубленного изучения:

• промисы;
• итераторы;
• генераторы;
• асинхронные функции;
• импорт/экспорт;
• подключение модулей;
• делегирование поведения;
• проксирование.

Имейте в виду, что далеко не все эти возможности поддерживаются всеми браузерами, поэтому придётся изучить транспайлеры (или иначе транспиляторы), которые преобразуют код в понятный для браузеров, начиная с выбранных версий. Часто для эмуляции новых возможностей языка транспайлеры используют так называемые полифиллы — блоки кода, создающие для старых браузеров подобие новой функциональности. Устройство базовых полифиллов тоже неплохо было бы изучить.

Пятый этап: Фреймворки JavaScript — 2–4 месяца

После освоения «чистого» JavaScript можно перейти к изучению JS-фреймворков и библиотек. Чем отличается фреймворк от библиотеки?

Библиотека — набор функциональности, который помогает решать отдельные проблемы. Чаще всего библиотека оформляется в виде JS-модуля, который можно подключить при необходимости.

Из наиболее популярных библиотек можно назвать React, jQuery (хотя её популярность быстро падает), D3, lodash, three. React используется для создания пользовательских интерфейсов. jQuery упрощает выбор элементов в документе (в DOM), помогает унифицировать работу с одиночными элементами и группами элементов, упрощает реализацию AJAX-запросов, облегчает работу с анимациями и т.п. D3 — библиотека для визуализации данных при помощи HTML, CSS и SVG.
Lodash позволяет более полно использовать в JS парадигму функционального программирования и даёт дополнительную функциональность по работе с массивами.
Three используется для создания и отображения графики (в том числе и анимированной) в 3D.

Фреймворк — более технически сложная конструкция. Формально это библиотека, в которую уже встроены опредёленные варианты решения стандартных задач. Фреймворк ограничивает свободу и полёт фантазии разработчика, зато делает процесс разработки более быстрым (если хорошо знать фреймворк, конечно) и стандартизированным. Это позволяет работать над проектом нескольким людям одновременно, а также упрощает последующую техническую поддержку.

Сейчас наиболее популярными фреймворками для фронтенд-разработки можно считать Vue, Angular, Ember.

Не нужно пытаться изучать сразу все представленные технологии, достаточно понять, какая из них для чего бывает удобна, определиться с приоритетами и приступить к изучению. Я советую сначала изучить глубоко один фреймворк, а не поверхностно несколько. Когда вы изучили один достаточно глубоко, изучение последующих расширит ваш кругозор и добавит разнообразия во взглядах на решение проблем.

Где и как получать все эти знания?

Сейчас существует огромное количество доступных способов обучения: бумажные, электронные и аудиокниги, видеокурсы, онлайн-курсы, офлайн-курсы. Что же предпочесть, чтобы, работая всего два часа в день на протяжении одного года, достичь профессионального уровня?

Для того, чтобы выбрать подходящий формат обучения, ответьте себе на три вопроса:

1. «Мне достаточно внутренней мотивации для ежедневного последовательного обучения?»
2. «Склонен ли я перепроверять и анализировать информацию, которую получаю?»
3. «Я могу не зацикливаться на решении отдельной узкой задачи и заставлять себя двигаться вперёд?»

Если вы ответили «нет» хотя бы на один из этих вопросов, вам скорее всего понадобится наставник или ментор, который будет направлять вас на верный путь, не давать застревать в «болоте» одной задачи, подсказывать более оптимальные способы решения. В этом случае выбор невелик — онлайн-курсы и офлайн-курсы.

Если вы всё же выбрали путь самостоятельного обучения, это может стать настоящим вызовом. Принимая этот вызов, будьте готовы к самостоятельному поиску и фильтрации информации. Источников очень много, качественных мало. В качестве ресурсов, из которых можно почерпнуть массу полезной информации, рекомендую следующие.

• Ресурс для разработчиков от Mozilla, кладезь информации, изучив которую в полном объёме, можно стать теоретиком уровня «гуру». Многие материалы ресурса доступны на русском языке, но лучше изучать в оригинале.
• Современный учебник JavaScript — русскоязычный информационно-обучающий ресурс по JS. Если прочесть все разделы и выполнить все задания, можно смело называть себя junior frontend разработчиком.
• Официальная документация по веб-стандартам.
• Документация от альтернативной организации по развитию веб.

После освоения базовых вещей можно перейти к просмотру специализированных видеокурсов по выбранной технологии или технологиям. Курсы можно изучать и параллельно с документацией, если они рассчитаны на новичков.

Для точечного изучения отдельных вопросов можно воспользоваться ютуб-каналами популярных программистов, которые делятся знаниями, причём совершенно бесплатно:

• Web Developer Blog;
• канал Владилена Минина;
• JavaScript.Ninja;
• канал Тимура Шемсединова (хардкор для тех, кто хочет по-настоящему глубоких знаний).

Для оттачивания скилов в программировании можно пользоваться специальными онлайн-ресурсами, например:

• CodeWars — задачки, сложность которых возрастает с повышением скила в системе. Можно писать код, тестировать его на корректность, отправлять на автоматическую проверку, искать наиболее оптимальные алгоритмы решения;
• CodeCombat — обучение программированию в игровой форме.

С моей точки зрения не самым удачным способом получения знаний являются книги. Очень часто книги эти переводные. А при переводах случаются ошибки, подходы быстро устаревают. Если вы решили погрузиться в веб-разработку, но плохо знаете английский, то самое время подтянуть его уровень до такого, который позволит вам читать книги с минимальным привлечением словаря.

Что дальше?

Ближе к финалу обучения вам стоит брать более масштабные задачи, на которые может уйти несколько недель или даже месяцев. Если за год вам удастся всё это изучить и отточить на практике, то вы действительно сможете претендовать на хорошую должность.

Лучшим способом дальнейшего развития станет работа над настоящими боевыми задачами в команде профессионалов. Работать можно фултайм или проектно, если вы не готовы сменить род деятельности прямо сейчас.

Более простой вход в профессию для человека без опыта — стажировка. Сейчас многие компании их проводят и даже открывают обучающие курсы в своих офисах.

Не забывайте собирать свои работы в портфолио, оно может стать вашим пропуском в хорошую компанию.