Колонки

Что такое React и почему он может сделать разработку сайта дешевле

Колонки
Александр Кузнецов
Александр Кузнецов

CEO IT-компании ADCI Solutions

Алина Алещенко

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

Что такое 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.

Фото на обложке: pixabay.com

Иллюстрация предоставлена автором.

Нашли опечатку? Выделите текст и нажмите Ctrl + Enter

Материалы по теме

  1. 1 «Это единственный выбор на пути к нормальной жизни»: что малый бизнес говорит сотрудникам о вакцинации
  2. 2 Скоро на экранах: ByteDance готовится вывести TikTok на Smart TV
  3. 3 AMC, GameStop и другие: почему растут «‎акции-мемы»
  4. 4 БФ «Система» проведет круглый стол на тему карьеры в ответственных компаниях
  5. 5 Что нужно, чтобы создать приложение для обучения детей?
AgroCode Hub
Последние новости, актуальные события и нетворкинг в AgroTech-комьюнити — AgroCode Hub
Присоединяйся!