Angular, React и Vue упрощают разработку внешнего интерфейса. Вот несколько идей, как сделать это проще.

1. Определите состояние вашего приложения

Например, список дел может иметь следующие состояния:

{

дела: [],

Счет: {},

уведомления: [],

}

2 Платформа внешнего интерфейса сопоставит это состояние с представлением

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

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

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

Так что нам нужно только изменить состояние, правильно.

Для изменения состояния мы используем чистые функции.

4 Взаимодействуйте с миром

Мир может быть API, действиями пользователя, indexedDB и т. д.

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

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

Сложная логика может относиться к некоторым службам;

5. Склейте все вместе

Используйте шаблон Redux для управления состоянием приложения, у каждого фреймворка есть своя реализация;

Разделите приложение с помощью маршрутизации, разделите большие компоненты на более мелкие;

Использовать сервисы для взаимодействия с API;

Используйте компоненты контейнера для подписки на состояние приложения и использования сервисов для взаимодействия с API;