CC BY
17
УДК 004.42
Мамбетов Р.А. студент 2 курса факультет «Прикладная информатика» Крымский инженерно-педагогический университет научный руководитель: Москалева Ю.П., к.ф.-м.н.
доцент
Россия, г. Симферополь ТЕХНОЛОГИЯ РАЗРАБОТКИ ИЗОМОРФНОГО REACT
ПРИЛОЖЕНИЯ
Аннотация. Приведены особенности разработки изоморфных приложений с помощью библиотеки React. Рассмотрен и проведен сравнительный анализ особенностей серверного рендеринга. В частности, рассмотрена необходимость использования, его преимущества и недостатки.
Ключевые слова: react приложение, изоморфное приложение, универсальное приложение, серверный рендеринг, SPA.
Mambetov R.A. - 2nd year student, Faculty of Applied Informatics Crimean Engineering and Pedagogical University
Russia, Simferopol Scientific adviser: Moscaleva Y.P.
senior teacher
TECHNOLOGY OF DEVELOPING ISOMORPHIC REACT APPLICATIONS
Annotation. The features of the development of isomorphic applications using the React library are given. Considered and carried out a comparative analysis of existing server rendering. In particular, the need for use, its advantages and disadvantages are considered.
Постановка проблемы. В настоящее время сложно представить человека, который не пользовался бы интернетом. Каждый день мы посещаем различные веб сайты. Одним из главных требований к веб сайту является скорость загрузки (независимо от скорости Интернет-соединения). В этом нам помогут изоморфные приложения. Изоморфное (так же встречается универсальное) приложение предполагает, что JavaScript код приложения может выполнен как на серверной части, так и на клиентской. С помощью этого механизма пользователь получает доступ к контенту гораздо быстрее, так как даже несколько секунд ожидания в наше время может быть критично.
Раньше типичный сайт выглядел как набор HTML-страниц и работало это так, что браузеру приходилось запрашивать каждую страницу сайта отдельно, заставляя сервер генерировать HTML страницы, соответственно каждый новый запрос на сервер сопровождался бесконечной перезагрузкой
страниц [1]. С развитием технологий все серверные операции стали выполняться на лету, а страницы сайта в веб-браузере стали обновляться мгновенно. В популярность вошли одностраничные приложения, состоящие из одной HTML-страницы-оболочки с динамически подгружаемым контентом. Отличным примером одностраничного приложения может быть Gmail или страницы соц.сетей, где переключение между вкладками происходит практически моментально, без перезагрузки страницы.
Как и любой другой сайт, одностраничное приложение состоит из серверной и клиентской части. Клиентская часть пишется на JavaScript, серверная — на PHP, Node.js, Python, Java или другом подходящем серверном языке. Вся логика одностраничных приложений (представления, шаблоны, контроллеры, модели, и пр.) находится на стороне клиента, и когда пользователь загружает сайт — он видит клиентскую часть приложения. При переходе на другую вкладку или страницу клиентская часть обращается к серверу через API, сервер отдает данные и пользователь видит отрисовавшуюся новую часть HTML страницы [2].
И в этом есть прямая выгода как для пользователя, так и для разработчика. Пользователь может быстро переключаться между вкладками или страницам без перезагрузки и даже работать с приложением в режиме оффлайн. А разработчики имеют возможность создавать приложение с четким разграничением задач на клиентские и серверные, что позволяет не дублировать слишком много логики между двумя средами, написанными на разных языках.
Цель исследования - описать и проанализировать технологию разработки изоморфного react приложения с выделением его основных преимуществ и недостатков.
Изложение основного материала. В современных условиях развития ИТ-технологий преимущества использования изоморфных приложений как для пользователя, так и для разработчика неоспоримы. Ведь на заре появления веб-технологий типичный сайт выглядел как набор статичных HTML-страниц и старый веб работал таким образом, что браузеру нужно было запрашивать каждую страницу сайта отдельно, заставляя сервер генерировать HTML страницы и отсылать их обратно. Поэтому каждый новый запрос на сервер сопровождался бесконечной перезагрузкой страниц. Однако позже свою популярность получили одностраничные приложения или SPA (single page application). Плюсы разработки одностраничных приложений, как в любом клиент-серверном приложении, в том, что есть разделение на клиентскую и серверную часть, которые могут разрабатываться, при необходимости, отдельными командами. А в случае, если нужно поменять интерфейс приложения, не нужно затрагивать бизнес-логику, или наоборот.
Еще одним достоинством одностраничных приложений является высокая скорость загрузки: мы получаем красивое, ультрасовременное и супербыстрое веб-приложение, где все обновляется без перезагрузки.
Однако есть у одностраничных приложений и недостатки: seo -оптимизация под поисковые системы, невысокая производительность (скорость загрузки).
Что бы адаптировать одностраничные сайты под нужды SEO и обеспечить его быструю загрузку и индексацию поисковиками, парадигма разработки сместилась в направлении изоморфного JavaScript. Изоморфный код — это код, который может выполняться и на клиентской, и на серверной стороне[3].
Что это значит в контексте одностраничных приложений?
При первом обращении к сайту все операции выполняются на сервере и в браузер передается HTML со всей информацией, как на обычных веб-сайтах со статическими страницами, которые поисковики могут проиндексировать. После загрузки JS сайт превращается в «одностраничное приложение», и работает соответственно^].
Самые наглядные изоморфные приложения — это всем известные Facebook, Instagram, Flickr, Airbnb, и др.
Для разработки изоморфных приложений применяются различные библиотеки, например, Meteor, Derby или React JS. Мы рассмотрим React JS.
Изоморфность React JS дает вам и пользователю вашего одностраничного приложения два основных преимущества:
- поисковым ботам проще просматривать и индексировать страницы
сайта;
- улучшенный user experience при взаимодействии с вашим сайтом на
React;
Изоморфное приложение на React — это одностраничное приложение, которое может рендериться на сервере (SSR). Смысл SSR (server-side-rendering) или серверного рендеринга в том, что для клиентов, которые не поддерживают или ограниченно поддерживают JavaScript (например, поисковым ботам) можно отдавать статичные файлы типа index.html, page1.html, page2.html, и т.д.
Кроме того, изоморфность React повышает скорость загрузки приложений и дает пользователям возможность видеть информацию на странице быстрее по мере того, как происходит ее подгрузка.
Когда сайт быстро загружается, улучшаются факторы пользовательского опыта: говоря простыми словами, пользователи лояльнее относятся к этому ресурсу и дольше находятся на сайте. На сегодняшний день поведенческие факторы — это одни из важнейших факторов ранжирования сайта гуглом, важнее традиционных, к примеру, таких как плотность ключевых слов[5].
Преимуществом же для разработчика является, то что React — библиотека, которая может рендерить компоненты сайта как на серверной, так и на клиентской стороне. React хорошо подходит для создания изоморфных приложений, так как позволяет переиспользовать почти весь клиентский код
для рендеринга на сервере, в зависимости от масштаба приложения. Именно эта особенность React так нравится многим разработчикам.
В неизморфных приложениях это невозможно из-за архитектуры построения. Т.к., если клиентская часть такого приложения написана на JavaScript, а бэкенд на PHP, мы не можем переиспользовать код, написанный для сервера на клиенте, и наоборот. В случае с JavaScript, клиентская часть кода часто полагается на DOM браузера, которого нет на серверной стороне. React же дает нам абстракцию браузерного DOMа в виде виртуального DOMа. Это дает два основных преимущества:
- код, который работает с виртуальным DOM в реакте не зависит от браузера и может выполняться на сервере;
- React может оптимизировать операции над документами и снизить количество обращений к браузерному DOM и за счет этого значительно ускорить работу фронтенда.
Конечно, не стоит забывать и о недостатках ведь при разработке изоморфного react приложения может возникнуть проблема с индексацией, так как не все данные хранятся в браузере, да и модель одностраничных приложений с использованием серверного рендеринга не подходит под особенности всех приложений.
Выводы. В данной статье были рассмотрены технологии разработки изоморфных react приложении их преимущества и недостатки.
Сравнительный анализ показал, что использование изоморфных приложений дает преимущества как пользователю, так и разработчику. Основные преимущества - повышение скорости загрузки страницы и seo-оптимизация и индексация страниц приложения.
Поскольку в современном информационном обществе постоянно наблюдается спрос на качественные технологии отображения интерфейсов, подобные технологии постоянно развиваются и появляются новые.
Использованные источники:
1. React и SEO: преимущества изоморфности React для одностраничных приложений // Xbsoftware. - [Электронный ресурс]: URL: https://xbsoftware.ra/blog/react-seo-izomorphnost-react-odnostrannoe-prilozhenie/.
2. Demystifying server-side rendering in React // freecodecamp. - [Электронный ресурс]: URL: https://medium.freecodecamp.org/demystifying-reacts-server-side-render-de3 35d408fe4 .
3. Стефанов С.Г., React.js. Быстрый старт: Книга. - М.: O'Reilly - Питер, 2017. - 304 с.
4. React.js: собираем с нуля изоморфное / универсальное приложение. // habr -[Электронный ресурс]: URL: https://habr.com/ru/post/309958/.
5. Бэнкс А.В., Порселло Е.А., React и Redux. Функциональная веб-разработка: Книга. - М.: O'Reilly - Питер, 2018. - 336 с.
