Как устроен веб-клиент
Angular
Фреймворк Angular разрабатывался Google с 2016 года. На данный момент он является open source проектом. Этот фреймворк используют множество Enterprise проектов.
В фреймворк всё включено. Он позволяет писать логику и визуальные элементы и не уделять внимание таким деталям, как хранение состояния, локализации, поддержка браузеров на низком уровне и другим вещам, не относящимся непосредственно к формированию визуальной части и взаимодействию с пользователем. Разработчики Angular постоянно реализовывают обновления, ускоряя работу фреймворка и предоставляя новые функции для совершенствования работы разработчиков. Не стоит думать, что Angular тяжёлый и сложный, так как Angular постоянно развивается. В 2024 году вышла очередная версия, которая ускоряет производительность. Команда ELMA365 планирует в этом году перейти на новую версию.
Поэтому мы выбрали Angular как способ быстрее совершенствовать и улучшать наш продукт.
Что происходит в браузере
- Грузится базовый минимальный набор JS + CSS.
- Догружаются части JS + CSS по мере надобности.
- Из JS + CSS формируется разметка HTML и отображение в браузере.
- Это кэшируется в браузере пользователя.
- При обновлении версии на сервере происходит обновление версии на клиенте (релоад страницы).
Наше приложение устроено по принципу single page application, что подразумевает под собой при первой загрузке загрузку всех основных элементов интерфейса: скрипты, стили, графика. В дальнейшем, при работе с приложением, подгружаются некоторые недостающие части интерфейса, если их не было смысла загружать в самом начале, так называемая частичная загрузка. Всё это кэшируется в браузере пользователя.
После этого при работе с приложением фронтэнд отправляет на бэкэнд только запросы некоторых кусочков данных для отображения. Это позволяет сильно разгрузить вычислительные ресурсы сервера, сконцентрировать их только на возвращении нужных данных пользователю. Следующая загрузка основных элементов произойдёт при базовом обновлении платформы, так происходит базовое обновление скриптов и стилей.
Взаимодействие Клиент-Сервер
Взаимодействие Фронтэнда и Бэкэнда происходит по стандартному принципу Клиент-Сервер.
Для взаимодействия используются стандартные технологии:
- AJAX запросы (асинхронные HTTP запросы), чтобы получить данные по требованию;
- WebSocket (постоянно открытая сессия для отправки сообщений Сервер-Клиент и обратно), чтобы в реальном времени получать данные с сервера для чатов, для уведомлений;
- Для передачи данных между клиентом и сервером используется формат данных JSON.
Пользовательские виджет и страницы
- Загружается информация о шаблоне отображения.
- Загружается файл клиентских сценариев (TypeScript, JavaScript).
- Грузятся необходимые данные для отрисовки.
- Формируется HTML в браузере.
Отдельно хочется сказать про то, как работают пользовательские виджеты и страницы. Это те самые Low-code виджеты, которые можно создавать в нашей платформе. Сначала загружается небольшая информация о самом шаблоне отображения. Загружается файл клиентских сценариев. То есть у нас есть и серверные скрипты, и клиентские скрипты. Клиентские скрипты попадают напрямую в браузер пользователя. В дальнейшем грузятся остальные необходимые данные, для того чтобы показать пользователю конечный сгенерированный HTML шаблон.
Приложения
У нас есть десктопное и мобильное приложение, и это на самом деле тонкие обёртки над веб-приложениями.
На десктопе мы используем Electron. Для мобильных приложений мы используем Cordova.
Приложения нужны в большей степени для того, чтобы обеспечить пуш-уведомления и дать пользователю более нативный интерфейс взаимодействия.
Последнее редактирование модератором: 20 май 2024