Технологические итоги 2015: React и изоморфный JavaScript

…Был статичный веб

На заре технологий веб работал так: браузер запрашивал каждую страницу отдельно, заставляя сервер генерировать HTML и отсылать обратно. Тогда подход был самое то, ведь браузеры были не особенно мощными, да и HTML-страницы статичными и «легкими». Правда, уже тогда был JavaScript — та самая библиотека, которой сегодня мы обязаны всем, что движется на сайте. Тогда, однако, JS не позволял сделать что-либо более сложное, чем слайд-шоу или виджет подбора даты.

Шло время, веб-технологии прыгнули на следующий уровень. В браузере сегодня можно играть в полноценные 3D-игры, не говоря уже о том, насколько технически сложными стали сайты. А всё это благодаря развитию JavaScript и появлению стандарта HTML5.

Сайт перестал быть набором статичных html-страничек с бесконечной перезагрузкой с каждым новым запросом на сервер. Вспомните, как работает почта Gmail или любая социальная сеть — страница обновляется сама, подкидывая актуальный контент, переключение между вкладками происходит без перезагрузки, все серверные операции делаются «на лету».

Как могут работать сайты сегодня

У любого веб-приложения (а сайт — это тоже веб-приложение) есть две части: серверная и клиентская. Хорошая аналогия с театром: серверная часть — это закулисье, там происходят все приготовления, вычисления и всё, что зрителю-пользователю видеть не обязательно. Клиентская часть — это сцена, «внешняя» сторона сайта. Только у пользователя есть возможность в любой момент спектакль скорректировать: например, поменять артистов, костюмы и декорации.

Серверная часть может быть написана на любом подходящем языке, например, PHP, Ruby или Python, Клиентская часть пишется на JavaScript. Большое количество логики приложения (представления, шаблоны, контроллеры, модели, интернационализация и т.д.) живет на клиенте. Пользователь открыл сайт — загрузилась клиентская часть, нажал на кнопку — клиентская часть через API взывает к серверу, тот отдает данные, отрисовывается оставшаяся часть HTML.

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

Это хорошо и для разработчиков, так как у идеального «одностраничного» приложения есть четкое разделение задач на клиентские и серверные, что обеспечивает прекрасный процесс разработки и предотвращает необходимость дублировать слишком много логики между двумя средами (которые к тому же часто написаны на разных языках).

И всё было бы здорово, если бы не несколько недостатков.

Поисковая оптимизация

Приложение, которое работает только на клиенте, не может нормально взаимодействовать с поисковыми роботами, то есть плохо приспособлено для SEO по умолчанию. Поисковые роботы создают запросы к веб-серверу и интерпретируют полученные результаты, но если всё хранится на клиенте и сервер возвращает пустую страницу — от этого мало пользы. Существуют, конечно, и обходные пути, но это нетривиальная задача не без пляски с бубном.

Производительность

JavaScript тяжеленький, это плата за автономность и обновления без перезагрузок. Пользователям приходится ждать загрузки JavaScript на клиенте, несколько критических важных секунд они видят пустую страницу или значок загрузки. Маркетологи говорят, что это плохо — сайт теряет посетителей. Так Amazon утверждает, что каждое сокращение времени загрузки на 100 миллисекунд увеличивает прибыль на 1%. Twitter потратил год совместных усилий 40 разработчиков, переделывая сайт, чтобы генерировать страницы целиком на сервере вместо клиента, получив 5-кратное улучшение воспринимаемого времени загрузки.

Поддержка

Чем понятнее и «чище» код, тем легче поддерживать сайт. В идеале должен получиться код, четко разделенный на клиентский и серверный. В жизни неизбежно часть логики приложения или логики отображения оказывается продублированной между клиентом и сервером (а мы помним, что они часто пишутся на разных языках). Стандартный пример — форматирование даты или валюты, валидация форм и логика маршрутизации. Все это превращает поддержку в кошмар, особенно в случае сложных приложений.

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

Нужно было что-то делать и так появилось решение.

Гибридный подход

Старый подход с «легким» клиентом и современный с «тяжелым» были беспощадно скрещены. Нужно было сохранить скорость клиентской части и приспособить всё это под нужды SEO и маркетинга (сайт должен индексироваться и быстро загружаться при запуске).

Так появился изоморфный Javascript, который мы так любим использовать в работе.

Принцип работы изоморфного приложения выглядит примерно так:

При первом обращении к сайту все операции выполняются на сервере — и в браузер передается html со всей информацией, скриптами, стилями и т.д. (как на обычных сайтах). Но после загрузки JS включается приложение и сайт превращается в «одностраничное приложение», и работает соответственно. Преимущество такой механики в том, что пользователь до загрузки JS видит всю информацию и может с ней работать. Это дает много возможностей: оптимизация скорости загрузки, лучшая поддержка, SЕО-возможности по умолчанию. В результате приложения получаются более контролируемыми.

C node.js — быстрой, стабильной серверной JavaScript-частью, мы, наконец, можем претворить эту мечту в реальность. Создав необходимые абстракции, мы можем написать логику нашего приложения такой, чтобы она исполнялась и на сервере, и на клиенте — это и есть изоморфный JavaScript.

Чтобы стали окончательно понятны плюсы изоморфного JS:

• поддерживает SEO;
• работает как SPA (single-page application, одностраничное приложение);
• единая языковая среда (JavaScript);
• максимально переиспользуемый код;
• быстрая загрузка сайта.

Наиболее известные изомофрные веб-приложения: Facebook, Instagram, Flickr, Airbnb, 2GIS, Flamp.

Для разработки изоморфных приложений применяются фреймворки — среды разработки. Среди наиболее популярных: Meteor, Derby, Catberry, React и еще несколько других.

Мы выбрали React.

Что такое React? Технические особенности

Если использовать определение с официального сайта, то «React — это JavaScript библиотека, которая используется для создания пользовательских интерфейсов».

React очень быстро стал популярен потому, что он сильно отличается от AngularJS, Backbone.js, Ember, Knockout и других широко известных MV* JavaScript фреймворков, которые появлялись, как грибы после дождя, в последние несколько лет.

Большинство этих фреймворков работает по схеме двойного связывания с DOM и его обновлении в зависимости от событий. DOM — это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML, XHTML и XML-документов, а также изменять содержимое, структуру и оформление таких документов.

Для использования фреймворков наличие DOM обязательно, поэтому, когда вы работаете с одним из этих фреймворков и хотите провести рендеринг разметки на сервере, вам придется использовать дополнительные инструменты.

React же работает с так называемым «виртуальным DOM». Он создает копию DOM дерева браузера и работает с ней. После изменения состояния приложения React определяет места в настоящем DOM, которые изменились, и вносит изменения лишь в них. Виртуальный DOM работает в сотни раз быстрее браузерного. Это дает Реакту скорость работы, недоступную остальным фреймворкам. А значит, и вашему изоморфному сайту.

В этом, собственно, и есть особенность React.

Итого

Веб-архитектура развивается циклами. Сначала рендеринг происходил только на стороне сервера с последующей отправкой данных клиенту. Затем, появился JavaScript, и мы стали использовать его для простых операций на странице. Наконец, JavaScript развился настолько, что стало возможным использовать его для создания больших приложений, которые будут осуществлять рендеринг на стороне клиента и использовать сервер для извлечения данных через API.

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

React — один из первых фреймворков, который реализует такой вид поведения. Будем пользоваться дальше, применять на наших проектах и следить за развитие изоморфного JS.

Кстати, сделали уже несколько крупных проектов с использованием изоморфного JS (один для строительной компании «Новосибирский квартал» и еще один — для международного бренда). А еще сайт, на которым вы всё это читаете, тоже изоморфный. Давайте догоняйте современность.