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

Знание JavaScript и умение работать с DOM — это базовые кирпичики, на которых строится все остальное. Они необходимы, но не достаточны для создания приложений, которые хорошо работают, легко поддерживаются и расширяются. Скорее наоборот. Работа с чистым DOM без глубокого понимания принципов организации кода буквально сразу превратится в кашу.

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

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

Более того, эти подходы практически не меняются от фреймворка к фреймворку. Именно поэтому в этом курсе они даются "сырыми" без привязки к каким-то фреймворкам. Здесь рассказываются и изучаются глубинные подходы, которые являются определяющими в архитектуре.

Основные темы этого курса:

• Управление состоянием и его организация
• Model-View-Controller
• Контролируемые и не контролируемые формы
• Автоматное программирование
• Работа с текстами. Интернационализация, локализация, плюрализация

Чтобы эффективно изучать материалы этого курса, у вас должно быть представление о том, как работает JavaScript в браузере. Вы должны уметь взаимодействовать с DOM понимать как работать с асинхронными запросами:

 document.getElementById("addTaskButton").addEventListener("click", async function() {
    const taskInput = document.getElementById("taskInput")
    const taskText = taskInput.value.trim()

    if (taskText) {
        // Отправка задачи на сервер
        const response = await fetch(apiUrl, {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                title: taskText,
                completed: false
            })
        })

        const newTask = await response.json()
        addTaskToDOM(newTask.title, newTask.id)
        taskInput.value = ""
    }
})