General frontend FAQ. Part 2⁠⁠

Первая часть тут

Ну что настало время второй части, продолжения. Самое интересное. Этот пост отличается от оригинала тем, что все ссылки актуализированы.

JavaScript

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

Шутка (отчасти). На самом деле, все довольно хорошо, и есть устоявшийся мейнстримовый набор:

- ES6+, TS

- Фреймворк на выбор

- Инструменты для работы с ЦСС на выбор (препроцессоры + бэм, цсс модули, css-in-js, либо свои корпоративные велосипеды)

- Webpack

Помните, что ньюфага никто (адекватный) не посадит, например, писать / править конфиги под SSR, поэтому учить наизуть webpack internals нинужно.

Обновляемый роадмап frontend-разработчика. Не стоит пугаться большого разнообразия – основное, это то, что отмечено фиолетовым. Дойдя до react/redux уже можно искать работу.

Основы

Лучший учебник на JavaScript на русском языке — Кантор . Ультраплатиновая ультрагоднота. У многих с нее пригорает, поэтому палим фишку: читаем про сам язык, скипаем особенности работы всякого дрянья в IE6, задачи делаем избирательно. И будем вам щастье. А еще лучше - читать англ.версию (см ниже)

NOTE!

Английская версия поддерживается автором в более актуальном состоянии. Сразу дается ES6, убрано всякое говно мамонта, пугающее ньюфагов.

Кантора нужно разнообразить видосами и другими сайтами. Одна и та же вещь, объясненная много раз разными словами, становится понятнее:

- Канал Code Dojo (рус) – относительно неплохие видео по ЕС6+, хотя все это есть и у Кантора. Есть немного реакта, редакса и ангуляра

- Канал JS - очень неплохое объяснение ES6+ (смотреть после прохождения основ).

- DKA-DEVELOP  - вот тут как раз основы, все подробно, самая суть, но этого будет однозначно мало.

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

- WebDev - очень много полезные уроков, как для начального уровня, так и повыше.

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

Основной справочник по JS — Mozilla Developer Network. Хотите почитать про промисы — пишите в гугле promises mdn.

Продолжение

- Продолжаем читать Кантора: заканчиваем первую часть, читаем DOM, события. Материалы касательно работы с графикой можно опустить.

- Курс "JavaScript Algorithms and Data Structures" на freecodecamp – практическое дополнение к Кантору. На задачах в разделах "Basic/Intermediate Algorithm Scripting" можно применить прочитанное в учебнике. Плюс – эти задачи часто попадаются на собеседованиях.

- Codewars – тоже про решение задач. Для саморазвития можно смотреть решение на других языках.

- Канал Sorax (рус) – очень клевый канал по "олдскульной ванилле" (ES5, прототипы и прочие прелести жизни). Алярм: может закипеть мозг, объясняет очень быстро и четко, никаких вам "переменная это коробочка с данными"

- Алгоритмы в JS - интро в алгоритмы

- Coursera – неплохой ресурс, но почти все платно, нуждающиеся могут поискать конкретные курсы на торрентах (они есть).

- JS the Right Way (есть версия на русском) – невообразимо объемный гайд: книги и статьи для изучения, описание фреймворков, стайлгайды и т.п. Рекомендуем ознакомиться

- Редит JS – реддит, для любителей  и без вот этого вот нытья под каждым подобным постом - "ооо, ну вот, очередной менеджер пошел в разработчики!"

А... книжки?

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

ES5

- Выразительный JavaScript - годнота, есть перевод и на русский, можно ограничиться только этой книгой. Книжка огонь! Атеншн, в русском переводе переменные названы привязками.

- Speaking JavaScript

- JavaScript Design Patterns

ES6

- Exploring ES6

- You Don't Know JS Воистину легендарная книга, тут ее русский ломанный перевод. На самом деле хватит, наверное, ее одной для начала, учитывая, что это серия книг, в которых все ну ооочень подробно все разжевано с простыми и понятными примерами.

Что нужно уметь на этом уровне?

Писать рабочий, хорошо структурированный, модульный код ОБЯЗАТЕЛЬНО на ES6 (лучше всего сразу привыкать к TypeScript). Для практики стоит придумать задачу - неважно, насколько шаблонной / скучной / избитой она будет. Легендарный тудулист вполне подойдет для оттачивания навыков: здесь вам и события, и работа с ДОМ, и обработка форм, можно прикрутить хранилище данных (localStorage, firebase) или даже "полноценный" бэкенд. К тому же, кода вполне достаточно для того, чтобы, например, написать приложение, используя MVC.

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

Будут вопросы - задавайте в комментах, никогда и никому не отказываю в помощи.