курс

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

3858 студентов 3360 сообщений
Последнее обновление: 07 марта 2024
Курс JS: Архитектура фронтенда
3 900 ₽ в месяц
за все курсы Хекслета
Зарегистрироваться
  • Тренажер с практикой
  • Бессрочный доступ к теории
  • Асинхронный формат
    обучения

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

11 уроков (видео и/или текст)
13 упражнений в тренажере
20 проверочных тестов
Помощь в «Обсуждениях»
Доступ к остальным курсам платформы

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

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

Описание

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

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

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

Продолжительность 14 часов

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

Испытания

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

#
Задание
% завершений

Отзывы

Аватар пользователя Yurii Sudarskii
Yurii Sudarskii 09 апреля 2020

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

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

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

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

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

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


Аватар пользователя Евгений Панин
Евгений Панин 06 апреля 2020

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


Аватар пользователя Игорь Шипилов
Игорь Шипилов 31 января 2024

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


Аватар пользователя Alex_ustus Генелёв
Alex_ustus Генелёв 14 октября 2023

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


Аватар пользователя Andrei Trunkin
Andrei Trunkin 09 марта 2023

Задача непростая и интересная. Потратил три дня, причем настройка фильтра заняла большую часть времени. Вспомнил много материала по обходу свойств объектов — хорошая практика. От множества 'if'/'else' осталось чувство, что первый курс по основам программирования только закончил. Решение не супер красивое, как у учителя, получилось. Но зеленые галочки все равно глаз радуют.

Две мои основные трудности: 1) как по результатам двух разных событий получать единый результат — помог контрольный объект, в котором по каждому событию обновлял свойства; 2) как сравнивать объекты, разные по структуре (frequency в одном, frequencyMin и frequencyMax в другом - а вот здесь именно метод every пригодился, выдал нужный результат для .filter).

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

Рекомендуемые программы

профессия
от 6 300 ₽ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 21 марта
профессия
от 9 900 ₽ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 21 марта
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Django
10 месяцев
с нуля
Старт 21 марта
профессия
от 6 183 ₽ в месяц
Ручное тестирование веб-приложений
4 месяца
с нуля
Старт 21 марта
профессия
от 6 300 ₽ в месяц
Разработка приложений на языке Java
10 месяцев
с нуля
Старт 21 марта
профессия
от 5 025 ₽ в месяц
новый
Сбор, анализ и интерпретация данных
9 месяцев
с нуля
Старт 21 марта
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Laravel
10 месяцев
с нуля
Старт 21 марта
профессия
от 5 840 ₽ в месяц
Создание веб-приложений со скоростью света
5 месяцев
c опытом
Старт 21 марта
профессия
от 6 300 ₽ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 21 марта
профессия
новый
Автоматизированное тестирование веб-приложений на JavaScript
8 месяцев
c опытом
в разработке
Старт 21 марта
профессия
Верстка с использованием последних стандартов CSS
5 месяцев
с нуля
Старт в любое время