
- Тренажер с практикой
-
Бессрочный доступ к теории
-
Асинхронный формат обучения
Включено в курс
Чему вы научитесь
- Создавать модульные и легко расширяемые фронтенд-приложения
- Правильно разделять приложения на слои и строить зависимости между ними
- Структурировать состояние приложения оптимальным способом
- Использовать теорию автоматов для описания происходящих процессов в коде
Описание
На этом курсе вы изучите фундаментальные принципы, которые используются в разработке фронтенд-приложений. Вы узнаете, как разбивать приложение на слои (MVC), выделять состояние и правильно его организовывать. Вы научитесь работать с текстами, формами и узнаете, как правильно выделять процессы. Курс пригодится, если вы решите научиться создавать легко расширяемые веб-приложения. Знания из этого курса помогут выстроить архитектуру веб-приложения без привязки к конкретным веб-фреймворкам и их особенностям. Курс подойдет для тех, кто приступает к изучению веб-разработки и хочет изучить базовые принципы создания приложений. Для прохождения курса требуются знания JS и понимание работы DOM API.
Программа курса
-
2
Состояние приложения
Знакомимся с концепцией отделения данных программы от представления (внешнего вида страницы)упражнение
-
3
Комплексное состояние
Изучаем лучшие практики по организации структуры сложного состояния -
4
Отрисовка (рендеринг) состояния
Рассматриваем разные стратегии обновления представления на основе данныхупражнение
-
5
Состояние отображения (UI State)
Знакомимся с UI-состоянием и учимся правильно его организовывать, не смешивая с данными приложенияупражнение
-
6
Процессы и автоматы, их описывающие
Учимся видеть корневые процессы и строить состояние на их основе -
10
Организация текстов интерфейса
Учимся правильно хранить, обрабатывать и выводить надписи и тексты на сайте -
11
Инициализация приложения
Обсуждаем, как правильно разделять приложения на различные стадии работы -
12
Дополнительные материалы
Статьи и видео, подобранные командой Хекслета. Помогут глубже погрузиться в тему курса
Формат обучения
Испытания
Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже
Отзывы

В очередной раз пришлось изрядно посидеть, по-перебирать варианты, переписать. Задание в целом показалось проще предыдущего за исключением того, что наибольшая сложность оказалась именно в том, что прежде всего необходимо было понять, что именно необходимо хранить в библиотеке i18next и уже традиционно - как корректно оформить state, чтобы можно было реализовать логику.
С оформлением state видимо необходимо решить множество подобных задач и посмотреть много чужого кода, чтобы понят наилучшие подходы по его организации. Т.к. у меня с этим по прежнему проблемы.
В целом спасибо за курс. Он оказался достаточно требовательным в плане времени и усидчивости и научил - в немного стрессовом режиме искать варианты решения, перечитывать, спрашивать, прокручивать в голове разные варианты, подходы, практики, иногда даже отбрасывать последовательность и логичность и писать любой код "лишь бы просто сработало как нужно")
Чего не хватало? - Больше теории о том, как правильно подходить к организации state, потому что всё остальное уже много раз практиковалось.
https://ru.hexlet.io/code_reviews/245227 (если возможно получить обратную связь или указание на самые проблемные места, буду крайне благодарен).
А теперь нужно внимательно изучить решение учителя :)

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

Задача непростая и интересная. Потратил три дня, причем настройка фильтра заняла большую часть времени. Вспомнил много материала по обходу свойств объектов — хорошая практика. От множества 'if'/'else' осталось чувство, что первый курс по основам программирования только закончил. Решение не супер красивое, как у учителя, получилось. Но зеленые галочки все равно глаз радуют.
Две мои основные трудности: 1) как по результатам двух разных событий получать единый результат — помог контрольный объект, в котором по каждому событию обновлял свойства; 2) как сравнивать объекты, разные по структуре (frequency в одном, frequencyMin и frequencyMax в другом - а вот здесь именно метод every пригодился, выдал нужный результат для .filter).
Кажется, получилось отработать основную идею теории: создал один рендер вне событий, который в нужный момент включался и обновлял DOM.

Потратил почти весь день но всё таки решил. Я сначало совсем отчаялся и думал просто посмотреть решение , но сейчас я очень доволен, я много чего понял по ходу задания. Вот моё решение https://ru.hexlet.io/code_reviews/702003# Я знаю что не очень коректно использовал состояния но я вижу места для разширения и улучшение програмы. Спасибо команде Хекслета за такие упражнения

Это было что-то, так долго я еще не мучился))
Только один вопрос: почему не написали, как в ридми к другим упражнениям, что будет очень много кода .... и он будет похож на программу запуска космического корабля)))
С виду показалось все просто: получил данные, отсортировал, отрисовал грид, получил селектор для прослушки, кликнул для отрисовки новой сортировки и .... (упс!) .... началось самое интересное...
Зато теперь на всю жизнь запомню куда можно ставить лисенер и как рисовать грид, ну и танцы с сортировкой "host" / "hostname" тоже в копилку опыта и знаний.
В общем, круто! Через боль и унижение - к знаниям!)) Спасибо автору за задание, а участникам - за комменты, очень помогли в поиске решения.