js Гайд Роудмап для новичка JS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Бандлер – это программа, собирающая несколько частей программы в единый проект, попутно обрабатывая код, добавляя в него какие-то свойства и минимизируя его.
• Prettier – утилита, которая автоматически корректирует форматирование страницы, чтобы код выглядел симпатично и аккуратно.
• ESLint – плагин, заставляющий программиста писать код в соответствии с определенными правилами (например, используя только современный синтаксис).
• TypeScript – позволяет обозначать тип используемых в коде данных, чтобы избегать ошибок типизации и сделать код гораздо более надежным.
• DevTools – браузерные инструменты, которые упростят верстку и позволят проверять гипотезы в отношении CSS, не покидая браузер.

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

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

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

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

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

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

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

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

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

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

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

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

Этап 9: Progressive Web Apps​

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

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

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

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

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

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

• Статичный сайт можно опубликовать на GitHub. Это бесплатно. Нужно просто запушить его в репозиторий и настроить gh-pages.
• Небольшой проект для проверки гипотез и демонстрации потенциальному заказчику можно опубликовать бесплатно через сервис Netlify.
• Если у вас проект посерьезнее и требуется размещение на собственном сервере, то придется изучить принципы работы хостингов и регистрации доменных имен (то, от чего мы отказались в начале пути).

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

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

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

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

Лайка не будет , просто копипаст с timeweb.com

А ещё подобное есть?

спасибо за информацию, полезно

Очень информативно, узнал кое-что новое!

Thank for the good work

Занятное чтиво на пару часиков

Я в этом абсолютный ноль, но после прочтения захотелось освоить

Очень полезная информация, понимаю что нужно время для обучение всему этому, но это даст в будущем результат!!!

Для новичков нормально и хорошо прикольно вообще

Очень обще(
Не хватает углубления в технологии (SCSS, React и др.), хотя бы тут чуть-чуть расписать и норм будет