2 июл 2021 в 00:06

SPA MVP

Ожидает приглашения

Всем привет! Наверное, уже все, кто в вебе, слышали про SPA.

Я считаю, это прекрасная инновация, возможно дисраптив в мире веб разработки. Так что, пишу первую статью в жизни для тех кто влюбился в эту технологию как я и захотел разобраться в том, как такие модные штуки делать.

Предлагаю начать с определения. Википедия:

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

Оставим основное и получим следующее:

Instead of the default method of a web browser loading entire new pages web application or website interacts with the user by dynamically rewriting the current web page

После инициализации приложения загрузку целых новых страниц клиент может спровоцировать несколькими событиями

Нажатие на next/prev кнопки браузера
Переход по ссылке

В SPA фреймворках обработкой этих событий занимается модуль роутинга. Обычно там срабатывает такой пайплан: перехватить действия браузера по умолчанию (отправку HTTP с URL на сервер), поймать URL на клиенте и выполнить действие помощью JS-а.

Псевдокод

function пайплан (действие) {
	отменить_запрос_с_URL_на_сервер(действие)
  url = поймать_URL(действие)
  выполнить_URL_действие(url)
}

switch(действие) {
  case 'нажатие_на_next_prev_кнопки_браузера':
  	пайплан(действие)
    break

  case 'переход_по_ссылке':
  	пайплан(действие)
  	break
}

Собственно это и есть базовый концепт, достаточно превратить псевдокод в JS и мы получим MVP spa-router который можно использовать для создания простых приложений. Но если остановиться на этом, то наш роутер не будет иметь хоть и второго плана, но очень удобных функций. Например: детектинг динамически добавленных элементов роутинга (ссылок) в DOM дерево, передача данных URL в контроллер, определение действия для случая когда для URL не найден (такой себе 404). Вот так это будет уже хорошей штукой!

Теперь мы знаем когда, что и зачем превращает сайт в SPA. Это уже не плохо. Также ответы на эти вопросы помогут ответить на вопрос "как?". Вопрос "как?" - реализации вопрос, а реализация это вкусовщина и творчество. На этот вопрос каждый в праве ответить по-своему. Мой ответ это https://github.com/goncharov-vlad/spa-router.git.

Как ни странно, но я не нашел ни одного готового автономного SPA роутера в интернете, который бы мне понравился. Поэтому и пришлось со всем этим разбираться. Могу точно сказать, что имея подобную штуку в арсенале, мои приложения станут намного круче.

Спасибо!

Хабы: