JS: Архитектура фронтенда

Включено в курс

Чему вы научитесь

• Создавать модульные и легко расширяемые фронтенд-приложения
• Правильно разделять приложения на слои и строить зависимости между ними
• Структурировать состояние приложения оптимальным способом
• Использовать теорию автоматов для описания происходящих процессов в коде

Описание

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

Для прохождения курса требуются знания JS и понимание работы DOM API. рекомендуем пройти курсы JS: DOM API, JS: Функции

Программа курса

• 1

  Введение

  Знакомимся с курсом и его целями

  теория
• 2

  Состояние приложения

  Знакомимся с концепцией отделения данных программы от представления (внешнего вида страницы)

  теория

  упражнение

• 3

  Комплексное состояние

  Изучаем лучшие практики по организации структуры сложного состояния

  теория

  тесты

  упражнение

• 4

  Отрисовка (рендеринг) состояния

  Рассматриваем разные стратегии обновления представления на основе данных

  теория

  упражнение

• 5

  Состояние отображения (UI State)

  Знакомимся с UI-состоянием и учимся правильно его организовывать, не смешивая с данными приложения

  теория

  упражнение

• 6

  Процессы и автоматы, их описывающие

  Учимся видеть корневые процессы и строить состояние на их основе

  теория

  тесты

  упражнение

• 7

  Нормализация данных

  Знакомимся с базовыми принципами нормализации данных

  теория

  упражнение

• 8

  MVC

  Знакомимся с архитектурой Model-View-Controller

  теория

  тесты

  упражнение

• 9

  Состояние форм

  Знакомимся с разными способами контроля состояния формы

  теория

  тесты

  упражнение

• 10

  Организация текстов интерфейса

  Учимся правильно хранить, обрабатывать и выводить надписи и тексты на сайте

  теория

  тесты

  упражнение

• 11

  Инициализация приложения

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

  теория

  тесты

  упражнение

• 12

  Дополнительные материалы

  Статьи и видео, подобранные командой Хекслета. Помогут глубже погрузиться в тему курса

Формат обучения

Испытания

Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже

Отзывы

Yurii Sudarskii 09 апреля 2020

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

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

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

Чего не хватало? - Больше теории о том, как правильно подходить к организации state, потому что всё остальное уже много раз практиковалось.

https://ru.hexlet.io/code_reviews/245227 (если возможно получить обратную связь или указание на самые проблемные места, буду крайне благодарен).

А теперь нужно внимательно изучить решение учителя :)

Евгений Панин 06 апреля 2020

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

Дарья Литвинова 03 октября 2024

Крутое упражнение) Прокачивает в плане понимания, как работать с DOM элементами. Для меня, как для совсем новичка, эта тема была сложной в части упражнений, но сейчас чувствуется, что начинает постепенно укладываться в голове. Медленно, спокойненько решала упражнение и тесты прошла с первого раза. Как же приятно)))

Игорь Шипилов 31 января 2024

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

Alex_ustus Генелёв 14 октября 2023

Спасибо, интересное задание