Эта статья отвечает на главные вопросы: почему разработка изоморфных приложений набирает популярность, в чем преимущество SPA (single page application) на React JS перед другими одностраничными приложениями и как изоморфность React помогает создавать SPA, дружественные поисковикам, и почему разработчики отдают предпочтение React.
Старый и новый веб
На заре появления веб-технологий типичный сайт выглядел как набор статичных HTML-страниц и старый веб работал таким образом, что браузеру нужно было запрашивать каждую страницу сайта отдельно, заставляя сервер генерировать HTML страницы и отсылать их обратно. Поэтому каждый новый запрос на сервер сопровождался бесконечной перезагрузкой страниц.
Новый веб и появление одностраничных приложений (SPA)
С развитием технологий все серверные операции стали выполняться на лету, а страницы сайта в веб-браузере стали обновляться мгновенно. В популярность вошли одностраничные приложения, состоящие из одной HTML-страницы-оболочки с динамически подгружаемым контентом. Отличным примером одностраничного приложения может быть Gmail или страницы соц.сетей, где переключение между вкладками происходит практически моментально, без перезагрузки страницы.
Как и любой другой сайт, одностраничное приложение состоит из серверной и клиентской части. Клиентская часть пишется на JavaScript, серверная — на PHP, Node.js, Python, Java или другом подходящем серверном языке. Вся логика одностраничных приложений приложений (представления, шаблоны, контроллеры, модели, и пр.) находится на стороне клиента, и когда пользователь загружает сайт — он видит клиентскую часть приложения. При переходе на другую вкладку или страницу клиентская часть обращается к серверу через API, сервер отдает данные и пользователь видит отрисовавшуюся новую часть HTML страницы.
И в этом есть прямая выгода как для пользователя, так и для разработчика. Пользователь может быстро переключаться между вкладками или страницам без перезагрузки и даже работать с приложением в режиме оффлайн. А разработчики имеют возможность создавать приложение с четким разграничением задач на клиентские и серверные, что позволяет не дублировать слишком много логики между двумя средами, написанными на разных языках.
Одностраничные приложения: плюсы и минусы
Плюсы разработки одностраничных приложений, как в любом клиент-серверном приложении, в том, что есть разделение на клиентскую и серверную часть, которые могут разрабатываться, при необходимости, отдельными командами. А в случае, если нужно поменять интерфейс приложения, не нужно затрагивать бизнес-логику, или наоборот.
Еще одним достоинством одностраничных приложений является высокая скорость загрузки: мы получаем красивое, ультрасовременное и супербыстрое веб-приложение, где все обновляется без перезагрузки.
Но, с другой стороны, все старания могут быть сведены на нет из-за следующих критических недостатков:
SEO-оптимизация одностраничных приложений
SPA изначально не подходит под сео-нужды. Так как одностраничное приложение динамически загружает данные и создает разметку, обычно поисковые роботы не могут увидеть и проиндексировать такой контент. В результате, одностраничное приложение проиндексируется как пустая страница. Поэтому программистам приходится дополнительно создавать отдельные страницы (чаще html страницы) для поисковых ботов, и вместе с веб-мастером продумывать логику построения структуры сайта, чтобы такой контент индексировался. В любом случае, дополнительная оптимизация одностраничного приложения под поисковые системы может значительно увеличить время разработки.
Производительность одностраничных приложений
Так как контент одностраничного приложения создается динамически, то он отрисовывается только после того, как приложение полностью загрузилось и инициализировалось, поэтому пользователи в течение нескольких секунд могут видеть пустую страницу или значок загрузки (в отличие от традиционных HTML страниц, где браузер отрисовывает контент по мере загрузки HTML). Особенно во время первого посещения сайта, когда ресурсы страницы еще не успели закешироваться.
И такой сайт, таким образом, теряет потенциальных клиентов, потому что эти несколько секунд являются критическими при принятии решения уйти или остаться на сайте. Например, Amazon подсчитал, что увеличение времени загрузки на 100 миллисекунд автоматически снижает их прибыль на 1%.
Поддержка одностраничных приложений
Иногда одни и те же действия надо делать и на клиенте, и на сервере. Самый простой пример — это валидация форм. Часто клиент и сервер написаны на разных языках,
поэтому мы получаем два варианта одной и той же функциональности, которые нужно поддерживать параллельно. Это относится не только к одностраничным, но и ко всем веб-приложениям в целом.
Как современные технологии помогают решить эти проблемы?
Гибридный подход в разработке одностраничников, или изоморфность JavaScript
Чтобы адаптировать одностраничные сайты под нужды SEO и обеспечить его быструю загрузку и индексацию поисковиками, парадигма разработки сместилась в направлении изоморфного JavaScript. Изоморфный код — это код, который может выполняться и на клиентской, и на серверной стороне.
Что это значит в контексте одностраничных приложений?
При первом обращении к сайту все операции выполняются на сервере и в браузер передается HTML со всей информацией, как на обычных веб-сайтах со статическими страницами, которые поисковики могут проиндексировать. После загрузки JS сайт превращается в «одностраничное приложение», и работает соответственно.
Самые наглядные изоморфные приложения — это всем известные Facebook, Instagram, Flickr, Airbnb, и др.
Для разработки изоморфных приложений применяются различные библиотеки, например, Meteor, Derby или React JS. Мы рассмотрим React JS.
Преимущества изоморфности React JS для одностраничных приложений
преимущества для SEO и маркетинга
Изоморфность React JS дает вам и пользователю вашего одностраничного приложения два основных преимущества:
- поисковым ботам проще просматривать и индексировать страницы сайта
- улучшенный user experience при взаимодействии с вашим сайтом на React
Изоморфное приложение на React — это одностраничное приложение, которое может рендериться на сервере. Смысл серверного рендеринга в том, что для клиентов, которые не поддерживают или ограниченно поддерживают JavaScript (например, поисковым ботам) можно отдавать статичные файлы типа index.html, page1.html, page2.html, и т.д.
Кроме того, изоморфность React повышает скорость загрузки приложений и дает пользователям возможность видеть информацию на странице быстрее по мере того, как происходит ее подгрузка
Когда сайт быстро загружается, улучшаются факторы пользовательского опыта: говоря простыми словами, пользователи лояльнее относятся к этому ресурсу и дольше находятся на сайте. На сегодняшний день поведенческие факторы — это одни из важнейших факторов ранжирования сайта гуглом, важнее традиционных, к примеру, таких как плотность ключевых слов.
преимущества для разработчиков
React — библиотека, которая может рендерить компоненты сайта как на серверной, так и на клиентской стороне. Реакт хорошо подходит для создания изоморфных приложений, так как позволяет переиспользовать почти весь клиентский код для рендеринга на сервере, в зависимости от масштаба приложения. Именно эта особенность реакта так нравится многим разработчикам.
В неизморфных приложениях это не возможно из-за архитектуры построения. Т.к., если клиентская часть такого приложения написана на JavaScript, а бэкенд на PHP, мы не можем переиспользовать код, написанный для сервера на клиенте, и наоборот. В случае с JavaScript, клиентская часть кода часто полагается на DOM браузера, которого нет на серверной стороне. React же дает нам абстракцию браузерного DOMа в виде виртуального DOMа. Это дает два основных преимущества:
- код, который работает с виртуальным DOM в реакте не зависит от браузера и может выполняться на сервере;
- React может оптимизировать операции над документами и снизить количество обращений к браузерному DOM и за счет этого значительно ускорить работу фронтенда.
Заключение
Стоит ли смотреть в сторону React -приложений? Стоит безусловно, если нужно разработать одностраничное приложение, быстрое, легкое, удобное для пользователей и легко индексируемое поисковиками, и сделать это качественно и в кратчайшие сроки. Изоморфное одностраничное приложение на реакте — отличный вариант и для разработчиков, и для заказчиков, и для пользователей приложения, но не стоит забывать, что React — это не спасение от всех бед и нужно учитывать особенности конкретного проекта, чтобы убедиться в правильности выбранной модели.
