Single Page Application (SPA) Одностраничное веб приложение

• Single Page Application (SPA) Одностраничное веб приложение
  • Зачем
  • Плюсы и минусы
  • Паттерны
  • Технологии
  • Reference Architecture

Зачем

• В приложении требуется полнофункциональный пользовательский интерфейс.

Плюсы и минусы

Критерии

Плюсы:

• Поддержка работы оффлайн, без подключения к Интернету и серверу
• Возможность переиспользовать код
• Скорость работы и отзывчивость приложения and use less bandwidth
• Улучшенный пользовательский опыт
• we needed to further separate out our SPA code based on function
• Well Defined API
  • If your organization does not have a strong API or SDK, you will want to start planning that out before you begin transitioning to a single page architecture. It can be helpful to involve your frontend engineers in the process of creating these APIs.
• The presentation logic resides in the client, and server transactions can be data-only, depending on your preference for data rendering. При традиционном подходе к SPA на фронтенде находится не только UI, но и логика интерфейса
• возможна реализация прогрессивных веб приложений (PWA)

Минусы:

• Более длительное время начальной загрузки
• Безопасность данных
• Плохая SEO-оптимизация
  • решение - SSR
• Кнопка «Назад»

Паттерны

• 4 layers SPA
  • View
    • Separated Presentation
    • Presentation Component
    • Container Component
  • Application Service
  • Store
    • Состояние (vuex) клиента между браузерами, нодами backend?
    • Один клиент с разных браузеров (параллельные экземпляры) как шарится, балансируется состояние между браузерами, нодами?
  • Domain
    • Domain Service
• Define a Container / Component Structure
• Производительность
  • Web Vitals Metric
  • Кеширование, lazy load component UI?
  • SSR (Server Side Rendering)
  • Testing tools Selenium, Cypress and Puppeteer can also be used to measure app performance.
  • WebPageTest is an online tool that’s easier to use
  • Application performance on the client side can be monitored via Navigation Timing API and Resource Timing API
    • But these fail to capture JavaScript execution times. To address this, User Timing API can be used. LinkedIn took this approach.
• Валидация данных
  • Дублирование клиент+сервер из за уязвимости браузера? Разные языки двойная кодовая база?
  • Бизнес правила
    • с сервера обновления?
• Сквозная функциональность
  • Локализация
    • Безопасность
      • Критичная логика на сервере, риски взлома на клиенте.
      • Auth with Single Sign-on and Identity Service (IAM)
  • observability
    • Мониторинг
      • Sentry
    • Логирование
      • Стратегия логирования (исключений), аудита на клиенте - передача через АПИ на сервер (Sentry например)
      • Мерж логов на сервере+с Х клиентов-браузеров 1 юзера-сеанса
      • Errbit SaaS (Loggly, New Relic)

Технологии

• Vue.JS
• React
  • Next.js

Reference Architecture

См ms arch

• AWS