Когда нам хочется узнать о сложных вещах, но получить объяснение на простом языке, на помощь приходит научпоп. Можно ли говорить языком научпопа о веб-разработке и в частности о JavaScript-библиотеке React? Ради великой цели научить людей понимать друг друга с полуслова мы попытались сделать это. В этой статье мы быстро и почти без использования понятий Virtual DOM, «иммутабельность», «жизненный цикл компонента» и «детерминированный рендеринг» расскажем, что такое React, как он появился и в чём его плюсы для бизнеса и команды подрядчика.

Что такое React

Reaсt — это библиотека, отвечающая за построение пользовательского интерфейса сайта. Причём такого интерфейса, где есть не только текст, но и интерактивные элементы, динамика, разные события. О чём речь? О возможности поставить лайк, например. Или отправить заполненную контактную форму. Или работать с картами, напичканными инфографикой. Или с административной панелью в интернет-магазине, где у товара, корзины и процесса отправки платежа бывает несколько состояний. Все эти элементы и состояния — это маленькие программы, разрабатываемые на языке JavaScript и исполняемые браузером пользователя.

Итак, если одно действие пользователя на сайте должно приводить к каким-то изменениям, то происходить эти изменения будут по определённым сценариям — тем самым скриптам. Чтобы разработка сайта с большим количеством JavaScript-кода шла быстрее и удобнее для разработчика, используют React.

Чем сложнее сайт, тем призрачнее шанс сделать его без использования React и его основных конкурентов — фреймворков Angular и Vue.js.

Как возник React

React появился в 2013 году. Его придумали в компании Facebook в процессе внедрения чата в свою социальную сеть. Чат должен был работать на всех страницах, но при этом не влиять и не попадать под влияние других элементов интерфейса.

Но до этого была идея о том, что интернет будущего не должен состоять из унылого статичного HTML и CSS, как в середине 1990-х, а стать куда активнее и веселее. Чтобы этого достичь, нужен был язык с простыми правилами, доступными в первую очередь не программистам, а дизайнерам интерфейсов и любопытным пользователям интернета. Что-то похожее на Java, но не такое сложное. Претендентом на такой язык был даже Python, но, после череды переименований и беготне по таймлайнам, под руководством Брендана Айка появился JavaScript.

Как JavaScript взаимодействует с веб-страницами

Любая веб-страница, если уметь читать её код - это объекты, как бы вложенные друг в друга. Например, страница состоит из области head для заголовка, стилей, размера шрифта и прочей технической информации, и области body для основного содержимого. Получается такое ветвящееся дерево из HTML и CSS-объектов, которое называется DOM (Document Object Model). Структура DOM для JavaScript - это интерфейс, посредством которого эти программы и сценарии заставляют неподвижные HTML и CSS-объекты шевелиться.

Но проблема в том, что классический DOM не предусматривает создания динамических интерфейсов, поэтому исполняемый на страницах JavaScript замедляет её отрисовку. Но React предлагает сначала создать более лёгкую по сравнению с DOM имитацию, которую называют Virtual DOM, изменить в этой копии только те объекты, на которые влияют пользовательские действия, и наложить эти изменения на реальный DOM. Например, если на React-сайте есть чат, то браузер не будет обновлять страницу после каждого отправленного сообщения.

В чём преимущества приложений, написанных на React

1. Снижается нагрузка на сервер и время разработки. Повышается производительность сайта: быстрее открываются страницы и отзывается на действия пользователей интерфейс. Если обычное веб-приложение на запрос от браузера возвращает ему HTML-разметку с CSS, чтобы браузер отрисовал страницу, то в случае приложений на React браузер сначала скачивает набор скриптов, которые выполняются на устройстве пользователя. Это снимает нагрузку с сервера и повышает производительность.
2. На React необязательно разрабатывать весь сайт, если динамичные блоки занимают лишь его малую часть. Пока статичные страницы работают как обычно, мы можем сделать на React конкретный блок и вставить скрипты так, чтобы они выполнялись только в нём. Есть компании, которые спустя годы переписывали свой продукт на React. Этот переход не обязательно делать сразу, но с точки зрения разработки это может оказаться удобнее.
3. По сравнению с обычными сайтами у сайтов на React более чистая архитектура, в которой проще обнаруживать и исправлять баги и которую проще поддерживать. Разработчик контролирует потоки данных, разметку и стилизацию и в идеале знаком с паттернами программирования, позволяющими собирать приложения быстрее и гибче.
4. Если команды фронтенд и бэкенд-разработки заранее опишут в документации формат получения и отправки данных между частями приложения, то они могут работать параллельно: пока серверная часть разрабатываются, фронтенд-разработчики на основе документации имитируют данные, которые будут приходить с сервера.

React и одностраничные приложения

Если нагрузка снимается с сервера, то она возрастает на стороне пользователя. Но статистика говорит, что у клиентских машин достаточно оперативной памяти для отрисовки страниц сайта на React в браузере.

Однако, если нужно получить максимально быстрый отклик от интерфейса, то используют подход SPA (Single Page Application). Его суть в том, что весь сайт — это одна страница, которую React постоянно перерисовывает. Но не целиком.

Как обычно происходит переход со страницы на страницу в простом приложении? При переходе на другую страницу пользователь делает к ней запрос на сервер, и сервер возвращает разметку, стили и файлы скриптов (то есть HTML, CSS и JavaScript).

В случае SPA пользователь, переходя между разделами сайта, формально находится на одной и той же странице, но файлы скриптов и стили у него уже есть — остаётся дотянуть то, чего не хватает. Например, если шапка сайта одинаковая на каждой странице, а поменялся только какой-то блок страницы, то не нужно заново отрисовывать шапку. Это экономит ресурсы и даёт более быстрый и отзывчивый интерфейс. Владельцам интернет-магазина нужно дорожить каждым мигом: есть шанс потерять клиента, если он ждёт 5-10 секунд после нажатия кнопки.

Сайт одного из наших клиентов, сервиса для работы с инстаграм-инфлюенсерами Influize — типичный пример SPA с архитектурой headless Drupal.

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

Поисковая оптимизация — слабая часть React-приложений. Вред для бизнеса от плохого SEO понятен: если ваш сайт не видят поисковики, то его не существует.

Поэтому есть подход Server Side Rendering. Объясним его на примере наших разработок — уже упомянутого Influize и сайта сервиса по утилизации автомобилей Scrapi. Часть работы по отрисовке этих сайтов происходит на сервере (да, всё правильно, мы пришли к тому же, от чего пытались уйти), за что отвечает Next.js, фреймворк на базе React. При запросе от браузера сервер отдаёт заранее отрисованную страницу — готовую и как будто собранную. Потом эти элементы начинают вести себя как React-компоненты на стороне клиента.
Таким образом, то, что видит пользователь, частично отрисовано на сервере, а остальное собирается в браузере. Иначе страницы сайта индексировались бы хуже.

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

Какие известные сайты и приложения разработаны на React.js

Миллиарды людей каждый день имеют дело с результатами работы React.js. Среди них:

• новостная лента в Facebook,
• большая часть клиентской стороны Instagram,
• частично WhatsApp,
• Netflix,
• New York Times,
• Yahoo! Mail,
• Dropbox,
• Codecademy.

Заключение

JavaScript делает из простого сайта полезный рабочий инструмент. Но он обойдётся вам дороже, если команда использует классический подход к веб-разработке. Та команда, которая знает React, сэкономит вам деньги. Эта библиотека отлично подходит для приложений с большим количеством интерактивных элементов и позволяет разработчику работать быстрее и полностью контролировать происходящее на стороне клиента. Если на вашем сайте предполагается много динамического контента — выбирайте команду, знающую React. ADCI Solutions как раз из их числа. Ждём заявок на почту hello@adcillc.com.