Подписаться
Опубликовано

SPA заказывали?

Автор
  • Имя
    Максим | Системный анализ
    Telegram

SPA заказывали?

Нет, это не про процедуры, а про single page application: сайты-одностраничники

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

Как это работает? Сервер отдает браузеру один пустой HTML-файл (условный <div id="app"></div>) и связку тяжелых JavaScript-файлов JavaScript загружается, "оживляет" страницу и полностью берет на себя управление интерфейсом (это называется CSR: Client-Side Rendering) Когда вы что-то нажимаете, JS отправляет на сервер запрос, но просит не целую HTML-страницу, а только данные Получив данные, JS подставляет их в заранее заготовленные шаблоны и перерисовывает только нужный блок

Особенно активно применяются SPA для сайтов, где есть сообщения: электронная почта, мессенджеры

Противоположность SPA это MPA (multi page application). Они отличаются друг от друга технической реализацией в фронтенд-фреймворках (react, angular, vue, next)

О чем должен подумать аналитик при применении SPA на проекте?

Первый запуск может быть долгим, особенно на слабых телефонах (нужно загрузить очень много JS-кода). Что в это время будет видеть пользователь? На самом деле, тут можно использовать гибридный подход: для первоначальной загрузки сделать SSR - Server Side Rendering, когда HTML полностью генерится на стороне сервера. А когда JS дозагрузился, использовать Client Side Rendering (как описано выше)

Что происходит с данными на экране, пока идет запрос к серверу?

Что видит пользователь, если интернет пропал, а он пытается отправить форму?

Что показывает интерфейс при ошибке 500 или 404? В SPA нельзя просто показать стандартную страницу сервера: нужен попап или заглушка

Если заказчик хочет увидеть на веб-странице "тяжёлую" функциональность, лучше применить lazy loading: загружать только после того, как пользователь нажал соответствующую кнопку. А если писать код неаккуратно, SPA может раздуваться и тормозить, так как страницы работает без перезагрузок месяцами (пока вкладка открыта)

Аутентификация. Об этом - в отдельном посте

Максим | Системный анализ
349 подписчиков
70 постов
Как войти в IT через системный анализ и получить оффер от 270к+. Опыт Senior аналитика из топ-банков. Разборы, практика, собесы, техника мышления аналитика. Бесплатная консультация - в закрепе.

Свежие посты

Опубликовано

SPA заказывали?

SPA заказывали?Нет, это не про процедуры, а про single page application: сайты-одностраничникиГлавная суть: браузер загружает страницу один раз, а...
Опубликовано

Почему вообще возник REST?

Почему вообще возник REST? Из-за прекращающейся наивности RPC-программистов. Как я писал, раньше часто встречались "8 заблуждений разработчика". И...
Опубликовано

Я писал про балансировку, но не упомянул про...

Я писал про балансировку, но не упомянул про один важный инструмент: service mesh. К нему пришли не сразу, была целая эволюция балансировки....
Опубликовано

За что на самом деле 39 млн человек заплатили Rockstar?

За что на самом деле 39 млн человек заплатили Rockstar?25 июня открылись предзаказы на GTA 6. За сутки 39 млн покупок и $3 млрд выручки. Цифры по...
Опубликовано

Как смутить синьора? Спросить про балансировку

Как смутить синьора? Спросить про балансировку Балансировка - это обязательный пункт в любом ТЗ, но многие описывают её формально, не...
Опубликовано

🤯 Странные задачи на собесе

🤯 Странные задачи на собесе Дают задачу: "Спроектируй светофор". И большинство впадает в ступор или начинают 20 минут душнить про то, как...
Опубликовано

Первое правило системного анализа.

Первое правило системного анализа..✍...ладно, забудем. Добро пожаловать в клуб! 🎬 (включай видео)На июнь осталось 1⃣ место на менторство со мной...