Изоморфные приложения простым языком

▼

С самого зарождения интернета для получения статической разметки на странице использовался Server Side Rendering (SSR), при использовании серверных языков программирования, таких как PHP, Ruby, Python и других.

Страницы полностью формировались на стороне сервера, и каждое действие пользователя - переход на другую страницу, отправка формы обратной связи, добавление товара в корзину или добавление события в календаре - требовало от сервера создание и обслуживание новой страницы. Такой подход является традиционным, при запросе сервер отвечает клиентам полным HTML-кодом страницы, которую необходимо отобразить.

Благодаря JavaScript стало возможным делать страницы более динамичными, но сделать что-то сложнее красивой анимации, слайдеров или всплывающих окон было невозможно.

Однако с появлением технологии AJAX началась революция. Веб-разработчики получили возможность связываться с сервером для отправки и получения данных без перезагрузки страницы, интерфейсы веб-сайтов становились удобнее и приятнее для пользователя - добавление товара в корзину больше не сопровождалось перезагрузкой страницы, можно бесконечно листать товары на странице категории без использования пагинации и так далее. И вроде бы все хорошо, но традиционный способ имеет ряд недостатков:

1. Сервер создаёт новую страницу при каждом запросе/переходе. Затем эта страница должна загрузить необходимые для нее стили и скрипты. Такое поведение может значительно увеличить время загрузки, привести к отсутствию отклика и увеличению количества запросов на сервер.
2. Страница отображается быстро, но пользователь не может взаимодействовать с контентом до загрузки нужного JavaScript.
3. Пропускная способность вашего сервера значительно меньше пропускной способности при CSR, который мы рассмотрим далее.

 Давайте представим интернет-магазин, использующий традиционный SSR подход, в реальной жизни - это обычный торговый центр. Доменом для него является адрес торгового центра, а бутики в нем являются категориями. Чтобы что-то купить в этом магазине, вам необходимо ходить от бутика к бутику (перезагрузка страницы), где вы каждый раз будете видеть новые витрины с товарами (загрузка стилей, логики добавления товаров в корзину и данные о самих товарах). И чтобы увидеть другие товары в том же отделе, вам также нужно будет пройтись по самому бутику (пагинация на странице).

SPA

Cпустя несколько лет экспериментов, обязанности кода, выполняемого в браузере пользователя, значительно выросли. Появились JavaScript фреймворки и библиотеки для нового типа приложений – одностраничных (SPA, single-page application). Одностраничные приложения состоят из одной HTML-страницы и подключаются к серверу только один раз. Затем они динамически подгружают и обновляют данные, при этом ключевые элементы интерфейса остаются неизменными, обновляются только необходимые блоки. Главным преимуществом одностраничных приложений является возможность обновления контента без полной перезагрузки страницы, что позволяет увеличить скорость загрузки и улучшить взаимодействие с продуктом (UX).

Чтобы понять принцип работы SPA, можно взять в качестве примера свой почтовый ящик. Независимо от того, используете вы Gmail, Mail или Yandex, это является популярным примером одностраничного приложения. Внутри приложения вы можете писать письма, искать старые электронные письма или чистить папку "Спам". При этом боковая панель с папками, шапка страницы и логотип сайта остаются неизменными. Вот именно это и есть SPA!

Главным преимуществом одностраничных приложений является их быстродействие. Благодаря тому, что SPA не требует полной перезагрузки страницы, обновление контента происходит очень быстро. Приложению достаточно установить первоначальное соединение с сервером, а затем подгружать отдельные компоненты по мере необходимости для пользователя. Именно поэтому такой подход прекрасно подходит для реализации приложений внутреннего пользования, таких как документооборот, логистика, корпоративная закрытая социальная сеть или системы управления ресурсами и взаимоотношениями с клиентами.

Однако у одностраничных приложений есть несколько критических недостатков, которые не позволяют использовать их для витрин электронной коммерции.

• Во-первых, проблема с SEO. Приложение, работающее только на клиенте, не может эффективно взаимодействовать с поисковыми роботами, что усложняет SEO-оптимизацию. Поисковые роботы создают запросы к веб-серверу и интерпретируют полученные результаты, но если сервер возвращает только пустую страницу, это мало полезно. Существуют, конечно, обходные пути, но лучше использовать изоморфные приложения.
• Во-вторых, проблема с производительностью. Если сервер не генерирует страницу, а клиенту приходится ждать загрузки JavaScript для ее отображения, пользователи видят пустую страницу или значок загрузки в течение нескольких критических секунд. Это может привести к разочарованию пользователей и потере дохода.

В реальной жизни такой подход к приложениям можно представить следующим образом: у вас есть здание с вывеской магазина. Когда вы входите внутрь, вы видите только голые стены и голограмму загрузки, не видите ни продавцов за кассами, ни отделов с товарами. Но в момент, когда вы смотрите на голограмму, вам без вашего ведома одевают на голову шлем виртуальной реальности JavaScript, и перед вашими глазами появляются отделы, витрины, кассы, которые вы можете менять местами силой виртуального мира. Перезагрузок страниц не происходит, данные обновляются по вашему желанию, например, при переходе на страницу категории или заполнении формы поиска. Однако стоит понимать, что если в магазин придет проверка от поисковых роботов, она увидит только голые стены и голограмму загрузки, так как роботы не умеют работать с очками виртуальной реальности.

Isomorphic

Для начала, стоит разобраться с определением, что же такое изоморфное приложение.

В 2011 году Charlie Robbins - инженер компании Nodejitsu – написал статью под названием: “Scaling Isomorphic Javascript Code”. В статье он сформулировал понятие изоморфизма:

By isomorphic we mean that any given line of code (with notable exceptions) can execute both on the client and the server.
- Charlie Robbins
Под изоморфностью мы подразумеваем, что любая данная строка кода (с заметными исключениями) может выполняться как на клиенте, так и на сервере.

Изоморфные приложения - это приложения, в которых код может выполняться как на клиентской стороне (в браузере), так и на серверной стороне. Этот подход позволяет использовать общий код для обоих частей приложения, что приносит ряд преимуществ.

Одним из основных преимуществ изоморфных приложений является то, что при рендеринге страницы на сервере элиминируется проблема "пустой страницы", что положительно сказывается на показателях SEO. Кроме того, на клиентской стороне пользователю сразу доступен загруженный контент, что улучшает пользовательский опыт. На серверной стороне также можно инициализировать приложение данными, что позволяет сократить количество запросов на клиенте. После первоначальной загрузки в режиме SSR приложение переходит в режим CSR и работает без необходимости перезагрузки страницы, что обеспечивает скорость и гибкость одностраничного приложения.

Изоморфный подход к разработке приложений сочетает в себе преимущества и скорости загрузки CSR и удобства обслуживания и поисковой оптимизации SSR. Это позволяет использовать JavaScript как на сервере, так и на клиенте, что повышает скорость загрузки и позволяет пользователям видеть информацию на странице быстрее при подгрузке дополнительных элементов на стороне клиента. Такой подход также открывает множество возможностей для оптимизации производительности, улучшения удобства обслуживания, поисковой оптимизации и создания единой языковой среды с максимальной переиспользуемостью кода.

Примером из жизни может являться сочетание традиционного SSR подхода и SPA с использованием JavaScript виртуальной реальности. В таком случае, при посещении магазина, вы можете перемещаться между отделами, видеть витрины и мгновенно телепортироваться к кассе. Для удобства использования вам одевают на голову шлем виртуальной реальности, и вы можете наслаждаться интерактивным опытом. Однако для поисковых роботов доступна только физическая версия магазина, без виртуального шлема.

Таким образом, изоморфный подход к разработке веб-приложений предоставляет нам уникальную возможность сочетать преимущества CSR и SSR, повышая скорость загрузки, улучшая пользовательский опыт и упрощая оптимизацию и обслуживание приложения.

Progressive Web Application (PWA)