SPA — вебзастосунок, у якому переходи між екранами можуть оновлювати потрібні частини інтерфейсу без повного завантаження документа. Такий підхід корисний для складної взаємодії, але сам по собі не робить продукт швидким. Спочатку визначають задачі користувача, а вже потім спосіб побудови екранів.
Коли SPA допомагає
Умовний приклад — кабінет диспетчера з фільтрами, списком заявок і деталями обраної заявки. Користувач часто перемикає контекст, а не читає окремі незалежні сторінки. Корисно зберігати введення та стан фільтрів і явно показувати, які дані ще завантажуються.
Для звичайного інформаційного сайту серверні сторінки також можуть бути вдалим рішенням. Блог ALL IT Agency використовує серверний HTML і спільні компоненти: для його читання не потрібна складна клієнтська архітектура. Вибір обґрунтовуємо поведінкою продукту й ресурсами підтримки.
Посилання мають працювати окремо
Кожному потрібному екрану надаємо зрозумілу адресу. Перевіряємо пряме відкриття, оновлення вкладки, кнопки назад і вперед. Посилання на заявку повинне відкрити саме її після перевірки доступу, а не вимагати повторити весь шлях через головний екран.
Недоступний об’єкт, закінчена сесія та відсутній маршрут потребують різних повідомлень. Сервер перевіряє право на кожну операцію; приховування кнопки цього не замінює. Довільний ідентифікатор у посиланні не повинен відкривати чужі дані.
Мережа та швидкість — частина інтерфейсу
Визначаємо стани завантаження, порожнього результату, помилки й повторної спроби. При повільному запиті користувач має розуміти, чи дія вже виконалася. Повторне натискання не повинне непомітно створювати дублікати замовлень або платежів.
Вимірюємо початкове завантаження та потрібні переходи на погоджених пристроях. Поділ коду й кеш розглядаємо за результатами вимірювань. Великий JavaScript-пакет може нівелювати виграш від переходів без перезавантаження.
Публічний вміст потребує окремої перевірки
Для відкритих сторінок перевіряємо доступний пошуковому роботу вміст, заголовки, канонічні адреси й справжні посилання. Серверний рендеринг або попередня генерація можуть допомогти, якщо це відповідає архітектурі. Сам факт роботи SPA у браузері не доводить коректної індексації.
Під час приймання перевіряємо також фокус, клавіатуру та сповіщення про зміну екрана. Передаємо карту маршрутів, правила доступу й сценарії відновлення після помилки. Це робить подальші зміни контрольованими.
Джерела та подальше читання
