Как стать фронтенд-разработчиком: детальный роадмап для начинающих

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

Предисловие

Обычно подобные инструкции и роадмапы начинаются с такого обширного понятия, как интернет, а от него отходят в разные стороны ветви с вопросами: «Что такое HTTP?», «Как работает интернет?», «Что такое доменное имя?», «Что такое браузер и как он работает?»…

Но давайте начистоту: если вы задумываетесь о том, чтобы стать фронтенд-разработчиком, то вы 100% имеете представление о браузерах и их назначении, а вникать в технические особенности DNS-серверов на ранних этапах необязательно. Поэтому в этом роадмапе будет меньше теории и больше практики.

И еще момент. В этой статье предполагается, что вы умеете создавать файлы в текстовом редакторе и знаете английский на уровне B2. Придется много читать на иностранных ресурсах и работать с программами в духе Sublime Text или VS Code.

Этап 1: Верстка HTML 

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

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

Наличие сверстанной страницы частично решает эту проблему, позволяя работать с «реальными» объектами разработки, а не просто решать логические задачки и общаться с голой математикой (оставьте это бэкендерам). 

Заодно вы освоите навыки по созданию классов и правильному оформлению HTML в соответствии с правилами валидаторов. Это будет полезно и при стилизации сайта, и при добавлении логики в приложение.

Так что учим семантику HTML, запоминаем базовые теги и принципы оформления блоков с текстом, изображениями и другим контентом. Учимся подключать внешние документы (с программным кодом и стилями) и т.п. 

Используемые технологии:

• HTML в чистом виде

• Текстовый редактор для работы с HTML

Ссылки:

• MDN Web Docs HTML Basics
• MDN Web Docs HTML Guidelines
• W3C Validator 

Этап 2: Стилизация при помощи CSS

Следующим этапом станет освоение CSS – каскадной таблицы стилей, отвечающей за расположение объектов на странице и их внешнее оформление. 

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

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

Используемые технологии:

• HTML с классами и ID

• Базовый CSS

Полезные ссылки:

• Подробный гайд по Flexbox и лучший гайд по Grid

• @media-запросы

• MDN Web Docs CSS guidelines

Этап 3: Базовые аспекты JavaScript

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

Сначала придется учить JavaScript в отрыве от HTML и CSS, чтобы понять, как работает программирование в целом и JavaScript в частности. Надо ознакомиться с типами данных, понять, что такое консоль, редакторы кода, переменные, операторы и т.д.

Обучение может проходить параллельно в двух направлениях:

1. Чтение учебников, изучение алгоритмов и проверка своих навыков в сервисах наподобие Codewars. Тут вам поможет ресурс Javascript.info и куча полезных книжек в духе «Грокаем алгоритмы».

2. Работа над собственным сайтом. Надо придумать какой-нибудь алгоритм. Пусть это будет даже простенький калькулятор, главное, чтобы это было нечто свое, что можно «пилить» по ходу самообразования. Тут вам поможет Google и Stack Overflow.

Используемые технологии:

• JavaScript в чистом виде (так называемый VanillaJS)

• CSS в JavaScript

• HTML в JavaScript (DOM)

Полезные ссылки:

• JavaScript.info

• Codewars

• Python Tutor

• Книга «Грокаем алгоритмы»

• Курсы и сервисы для обучения

• ООП

Этап 4: GitHub и пакетные менеджеры

Во многих школах по изучению JavaScript и программирования в целом этот этап становится первым. Но на онлайн-курсах в этом есть необходимость (нужно проверять задания и где-то хранить код). Я же решил перенести этот этап сюда, потому что работать с git трудно. Он запутанный, и пока в нем не освоишься, все дико раздражает. Если начать с git, то может и вовсе пропасть желание работать с кодом. 

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

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

Так что наберитесь терпения и вперед читать git-how-to.

Используемые технологии:

• git

• git-клиенты

• Хранилища репозиториев

• Менеджер пакетов npm (или yarn)

Полезные ссылки:

• Git How To

• npm: инструкция для начинающих

Этап 5: Вспомогательные инструменты

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

• Бандлер – это программа, собирающая несколько частей программы в единый проект, попутно обрабатывая код, добавляя в него какие-то свойства и минимизируя его.

• Prettier – утилита, которая автоматически корректирует форматирование страницы, чтобы код выглядел симпатично и аккуратно. 

• ESLint – плагин, заставляющий программиста писать код в соответствии с определенными правилами (например, используя только современный синтаксис). 

• TypeScript – позволяет обозначать тип используемых в коде данных, чтобы избегать ошибок типизации и сделать код гораздо более надежным. 

• DevTools – браузерные инструменты, которые упростят верстку и позволят проверять гипотезы в отношении CSS, не покидая браузер. 

Используемые технологии:

• Webpack или RollUp

• ESLint

• Prettier

• TypeScript

• Chrome DevTools

Полезные ссылки:

• Статья «How to set up Webpack with ES6»

• Конфигурация ESLint от компании Airbnb

Этап 6: CSS-препроцессоры и фреймворки

Знать базовый синтаксис CSS, разбираться в переменных CSS, уметь красиво стилизовать код и непосредственно приложение – это круто. Но, скорее всего, вам придется изучить какой-нибудь препроцессор. 

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

Также есть полноценные CSS-фреймворки, меняющие подход к стилизации документов и позволяющие вносить изменения в дизайн сайта, не используя CSS-файлы вовсе. Чтобы разобраться в том, как они работают, надо внимательно почитать про PostCSS, LESS, SASS и TailwindCSS.

Используемые технологии:

• CSS

• PostCSS

• Stylus

• LESS

• SASS

• TailwindCSS

• DaisyUI

Полезные ссылки:

• О CSS-препроцессорах

Этап 7: JavaScript-фреймворки

Здесь работает та же схема, что и в случае с CSS-препроцессорами. Нужно выбрать какую-то технологию, которая ближе всего лежит к сердцу, и начать ее углубленно изучать. Все фреймворки дополняют JavaScript, добавляя в него новые возможности. 

Выбирать желательно из четырех наиболее перспективных – Angular, React, Vue или Svelte.

• React – наиболее востребованный, с ним проще всего найти работу. 
• Vue – довольно специфичный, используется реже. 
• Angular задействован в корпоративной разработке. 
• Svelte – слишком молодой, но амбициозный. 

Используемые технологии:

• React

• Vue

• Angular

• Svelte

Полезные ссылки:

• 7 популярных фреймворков (статья старовата, но ситуация не особо поменялась)

• Критерии выбора фреймворка

Этап 8: Тестирование кода

Важная часть работы с кодом – тестирование. По-хорошему, в компании должен быть специальный человек для решения этих задач. Но есть два «но».

• Иногда компании экономят и взвешивают эту задачу на разработчиков. Это «иногда» происходит достаточно часто, поэтому лучше уметь самому писать тесты и проверять свой код на работоспособность. 

• Уметь самостоятельно тестировать код – это быть уверенным в том, что он работает как следует, и не упрощать работу других отделов компании. 

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

Используемые технологии:

• Jest

• react-testing-library

• Cypress

• Enzyme

Полезные ссылки:

• Как тестировать svelte-компоненты

• Зачем вообще нужны тесты и как их писать

Этап 9: Progressive Web Apps

PWA – это особый вид сайтов. Это сайты, которые выглядят и ведут себя, как приложения. Они могут запрашивать у пользователя его местоположение, присылать уведомления, хранить файлы и другие данные в офлайн-режиме. Делать все то, что вы привыкли видеть в программах для Windows, macOS, iOS или Android, но в пределах браузера.

Для пользователя такие приложения безопаснее, быстрее, симпатичнее и эффективнее с точки зрения энергозатрат. Сплошные плюсы.

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

Используемые технологии:

• Вебсокеты

• Service Worker API

• Storage API

Полезные ссылки:

• Как добавить уведомления на свой сайт

• Как определить геопозицию пользователя через браузер

Этап 10: Деплой сайта/приложения

Если уже научились писать код и даже создали какой-то сайт, то пора отправить его в интернет (задеплоить). 

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

• Статичный сайт можно опубликовать на GitHub. Это бесплатно. Нужно просто запушить его в репозиторий и настроить gh-pages.

• Небольшой проект для проверки гипотез и демонстрации потенциальному заказчику можно опубликовать бесплатно через сервис Netlify. 

• Если у вас проект посерьезнее и требуется размещение на собственном сервере, то придется изучить принципы работы хостингов и регистрации доменных имен (то, от чего мы отказались в начале пути).

Используемые технологии:

• GitHub

• Netlify

Полезные ссылки:

• Как разместить сайт в Timeweb

• Как настроить gh-pages

• Как разместить сайт на Netlify

Этап 11: Безопасность 

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

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

Для общего ознакомления стоит почитать про топ-10 самых распространенных угроз для веб-сайтов на OWASP.org.

Используемые технологии:

• HTTPS

• CORS

• Content Security Policy

• OWASP Security Risks 

Полезные ссылки:

• Как обойти ограничения CORS на загрузку файлов

Дополнение: мобильная и десктопная разработка

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

Например, Instagram, Twitter, Pinterest, Spotify и десятки других популярных программ создавались с использованием JavaScript-кода. 

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

В этой области популярны технологии:

• React Native

• NativeScript

• Flutter

• Ionic

• Electron (для Windows, macOS и Linux)

React Native самый быстрый, он лучше всех продвинулся в области создания нативных приложений. Взгляните на Discord – он написан на React + Electron для компьютеров + React Native для мобильных систем. Выглядит и работает отлично. 

Flutter тоже хорош. Довольно популярен и приближен к нативному коду по ощущениям со стороны пользователя. 

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

Используемые технологии:

• React Native

• NativeScript

• Flutter

• Ionic

• Electron

• Framework7

Полезные ссылки:

• Анализ фреймворков для разработки мобильных приложений при помощи JavaScript

Вместо заключения 

А что дальше? Дальше учиться. Фреймворков и технологий куда больше, чем описано в этой статье.

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

Хотя нет, это еще не все. Я совсем забыл рассказать о soft skills (гибких навыках) в IT-сфере, а без них сейчас никуда. О значимости и типах софт-скиллов вы можете почитать в статье «Что такое soft skills и как их развить» – изложенная в ней информация обязательно пригодится вам при первом трудоустройстве в IT-компанию.