Жизненный цикл и различные события приложения Stipple

Браузер выполняет запрос к URL-адресу.

Запрос обрабатывается соответствующим route, и выполняется обработчик route.

Готовится первоначальный ответ с полезными данными, то есть формируется HTML-страница и внедряются все необходимые скрипты и файлы JS.

Здесь мы создаем новый экземпляр модели, присоединяем обработчики и вызываем Stipple.init(ModelType) (потому что фактически результатом вызова Stipple.init является файл JS, содержащий версию JS/Vue.js модели).

На этом этапе разработчик может настроить ответ HTML, добавив необходимую условную логику.

Версия JS/Vue.js модели, генерируемая Stipple.init, основана на типе модели Julia, а не на экземпляре, так как ресурсы JS кэшируются и предоставляются из CDN. Поэтому файл модели JS/Vue.js не следует настраивать — он всегда отражает состояние модели Julia по умолчанию и одинаков для всех пользователей.

После выполнения всех этих действий получившийся ответ HTML отправляется в браузер.

Браузер получает ответ HTML и обрабатывает его.

Он загружает все файлы JS, включенные в первоначальный ответ, и выполняет их.

При отображении страницы в браузере выполняется код JS, включенный в ответ HTML.

Загружается Vue.js, и к элементам HTML на странице применяются данные, переданные в модели JS/Vue.js (например, все привязки, такие как @text и @bind; логика, такая как @iif, @recur и т. д., а также все динамические свойства элементов).

Устанавливается обратное соединение с сервером (через протокол WebSocket, если он доступен, или с помощью команд push и pull Ajax в противном случае).

Когда соединение успешно установлено, инициируется событие isready, в результате чего свойство isready модели Julia принимает значение true.

При обмене данными по асинхронному соединению с фронтендом изменяются различные свойства модели Julia, что приводит к срабатыванию соответствующих обработчиков, начиная с автоматически инициируемого события isready.

Разработчик реализует логику в этих обработчиках изменений для реагирования на события и обмена данными с фронтендом.

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

Однако жестким ограничением это не является, так как путем привязки содержимое HTML элемента можно сделать динамическим и обновлять. Более того, мы можем отправлять полезные данные JS для выполнения во фронтенде (что позволяет внедрять логику JS на страницу и выполнять ее из бэкенда Julia).