Angular, React и Vue упрощают разработку внешнего интерфейса. Вот несколько идей, как сделать это проще.
1. Определите состояние вашего приложения
Например, список дел может иметь следующие состояния:
{
дела: [],
Счет: {},
уведомления: [],
}
2 Платформа внешнего интерфейса сопоставит это состояние с представлением
Конечно, нам нужно сообщить фреймворку, как должно выглядеть представление в зависимости от состояния приложения.
3 Обновите состояние, чтобы изменить представление
Прелесть фреймворков в том, что каждый раз, когда изменяется состояние, фреймворк будет обновлять представление.
Так что нам нужно только изменить состояние, правильно.
Для изменения состояния мы используем чистые функции.
4 Взаимодействуйте с миром
Мир может быть API, действиями пользователя, indexedDB и т. д.
Мир может делать некоторые сложные вещи, например, изменять статус задачи;
После того, как это сделано, мы используем чистые функции, которые мы определили, для обновления состояния нашего приложения;
Сложная логика может относиться к некоторым службам;
5. Склейте все вместе
Используйте шаблон Redux для управления состоянием приложения, у каждого фреймворка есть своя реализация;
Разделите приложение с помощью маршрутизации, разделите большие компоненты на более мелкие;
Использовать сервисы для взаимодействия с API;
Используйте компоненты контейнера для подписки на состояние приложения и использования сервисов для взаимодействия с API;