Веб-разработка на React: практическое руководство для технических директоров

Практическое руководство по веб-разработке React для CTO и тимлидов.

Поскольку React является одним из самых популярных решений для фронтенд-разработки, CTO часто задаются вопросом, равна ли его популярность качеству и какую именно пользу проект может извлечь из React.

Настоящая сила React заключается в том, как он заставляет вас писать код. Код React дает вам уверенность и надежность. Библиотека не навязывает какие-либо шаблоны кода или решения технического стека. Но, конечно, это не идеально подходит для каждого проекта и каждой команды. Тем не менее, эта статья должна дать вам ответ, идеально ли это для вас.

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

Что нужно знать о веб-разработке на React

React.js — это библиотека JavaScript, используемая для обработки уровня представления веб-приложений. Это дает полную гибкость с точки зрения инструментов и архитектуры. Отличное сообщество и поддержка крупных игроков делают React надежным. Frontend-разработчикам легко изучить React и работать с ним.

Код React написан на JavaScript и JSX. Но важно то, что код написан декларативно. То есть вы описываете результат, а не способ его достижения. Основным строительным блоком в React является компонент. Это то, что позволяет разработчикам повторно использовать код, упрощает тестирование, масштабирование и поддержку приложения. Соответственно, декларативный код и компоненты — это самое главное в React.

Безопасность, масштабируемость, обслуживание и производительность React

Масштабируемость и ремонтопригодность являются одними из наиболее важных бизнес-аспектов при выборе технологии. Конечно, React подходит для сложных приложений, что было протестировано крупнейшими игроками, такими как Bloomberg, Airbnb или Codecademy. Благодаря компонентной архитектуре разработчики могут легко вносить изменения и обновления, которые повлияют не на все приложение, а только на один модуль.

Теперь расскажем немного подробнее об архитектуре React

Основные строительные блоки = компоненты React

Создатели React сделали компоненты React основными строительными блоками и основным способом повторного использования кода в приложениях. Обязанности разделены компонентами, видимыми на экране, а не такими технологиями, как HTML, CSS и JavaScript. React предполагает, что вещи, которые меняются вместе, должны храниться вместе. Разметка, данные, логика и иногда стили обычно хранятся вместе в одном файле, потому что они изменяются вместе. Сама разметка представляет собой не только HTML, но и JSX, синтаксический сахар, построенный поверх API React, который значительно улучшает HTML и позволяет разработчикам использовать JavaScript вместо другого языка шаблонов. 

Еще одно полезное качество компонентов React — четко определенный интерфейс.

Все компоненты React:

• управляют отдельными участками кода,
• принимают данные и состояние от других компонентов в свойствах или контексте,
• передают данные и состояние вниз, используя реквизиты других компонентов,
• передают данные и состояние с помощью обработчиков событий.

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

Еще с React удобно знакомить новых разработчиков с командой. Благодаря модульности разработчики могут просто извлечь отдельный модуль и делегировать рабочую нагрузку новому члену команды. Кроме того, React очень быстр благодаря Virtual DOM. В отличие от реального DOM, он полностью существует в памяти, разумно определяя, какие изменения нужно внести. Библиотека также легкая, что еще больше повышает производительность.

Вторичные строительные блоки React

Независимо от выбранной вами технологии пользовательского интерфейса разработчикам может потребоваться отделить часть логики для ее повторного использования. Именно здесь React представляет вторичные строительные блоки и другие способы повторного использования кода. В React разработчики могут использовать компоненты высшего порядка (HoC), хуки, реквизиты рендеринга или контекст, чтобы перемещать общие или повторно используемые части кода в отдельное место. Например, HoC хорошо работает с такими вещами, как регистратор для всего приложения, интеграция с Google Maps API может быть реализована как хук или реквизит рендеринга, а глобальное состояние, необходимое для совместного использования между различными компонентами, может быть перемещено в значение глобального контекста.

Масштабируемость и обслуживание

В Brainhub мы рассматриваем фреймворки и библиотеки как инструменты, которые мы можем использовать для решения бизнес-задач. То же самое и с React. Одним из наиболее важных аспектов для многих предприятий является масштабируемость и ремонтопригодность.

Здесь мы думаем о таких вещах, как:

• легкость добавления нового кода, изменения старого и исправления ошибок,
• насколько легко добавлять в проект новых людей (даже если они не знают React),
• и, наконец, подходит ли React для больших и сложных приложений.

На последний вопрос ответить проще всего.  У нас есть несколько примеров больших приложений, которые используют React и работают очень хорошо — Facebook, Instagram и Netflix. Asana перешла с Luna на React, когда у них начались проблемы, особенно с масштабированием. Среди компаний, использующих React, вы также найдете:

• Khan Academy,
• Yahoo Mail,
• Paypal,
• Atlassian,
• New York Times.

Для каких приложений лучше всего подходит React?

В SPA (это одностраничные приложения) по умолчанию применяется React, но при использовании внешних библиотек, React становится идеальным и для других решений.

• Крупномасштабные приложения

Поскольку React состоит из компонентов, библиотека позволяет легко и удобно создавать крупномасштабные приложения. Правильное составление и объединение компонентов позволяет разработчикам контролировать даже самую сложную архитектуру. Кроме того, библиотека стабильна и поддерживается крупными игроками, так что это безопасное решение.

• Приложения Real-Time 

Для приложений реального времени нам нужен высокореактивный пользовательский интерфейс, потому что изменения должны отображаться быстро. React и Redux — идеальная команда для этого. React отлично работает с событийно-ориентированной архитектурой, когда события отправляются через веб-сокеты. Redux управляет состоянием элементов, обновляет представление, когда что-то меняется, и позволяет нам декларативно описать произошедшее.

Чем React отличается от других альтернатив?

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

• Angular или React

Angular и React похожи больше, чем вы думаете. Это потому, что команда Angular отлично справилась с модернизацией фреймворка и уменьшением количества пакетов кода. Их отличает то, что Angular — это большая экосистема, которая реализует шаблоны кода и использование определенных инструментов, а React — это библиотека для создания пользовательских интерфейсов, поддерживающих гибкость с точки зрения инструментов и шаблонов кода. У Angular другая модель мышления, которая ближе к backend-языкам. Вот почему бэкенд-разработчикам легко понять его и написать с ним код. Кривая обучения React более пологая для фронтенд-разработчиков.

• Vue или React

Обе платформы являются современными, беспристрастными и поддерживают создание приложений с помощью компонентов. Они также используют виртуальный DOM, который повышает производительность. Что отличает React и Vue, так это то, что у React есть отличное сообщество, которое поддерживает разработчиков. Участники React уже создали множество полезных решений, ускоряющих и облегчающих разработку. Так как Vue еще довольно новый, сообщество небольшое и готовых решений не так много.

React и React Native — как они связаны?

React Native — это фреймворк на основе React.js для написания мультиплатформенных приложений для Android и iOS. Приложения написаны с использованием JavaScript и JSX. Затем под капотом мост вызывает собственный API рендеринга в Objective-C и Java. Таким образом, приложение отображается с использованием реальных компонентов мобильного пользовательского интерфейса, а не веб-представлений. Благодаря этому оно выглядит и ощущается как любое другое мобильное приложение. Если вы планируете разрабатывать веб-приложение и мобильное приложение, использование React и React Native — идеальное решение. Большая часть кода может быть разделена между этими двумя, и разработчики React быстро догонят React Native.

React веб-разработка с различными бэкендами

React является гибким с точки зрения внутреннего стека. Вы можете выбрать технологию, которая подходит вашему проекту или, например, местоположению (возможно, в вашем регионе много разработчиков Node.js и нет разработчиков Golang). Node.js кажется наиболее удобным выбором для серверной разработки, потому что ваша команда может поделиться некоторым кодом JavaScript. Тогда может быть достаточно нанять полноценных разработчиков JavaScript, которые позаботятся о внешнем и внутреннем интерфейсе.

Фронтенды React можно сочетать с такими бэкендами, как:

• Node.js
• Laravel
• Ruby on Rails
• Django

Переход на React с других технологий

Когда устаревшее приложение становится проблемой, React — это решение. Он современный, он постоянно совершенствуется и может сочетаться с любым набором технологий. Процесс миграции прост, и благодаря компонентам его можно выполнять постепенно. Поэтому даже масштабные приложения можно легко перенести на React. Единственная загвоздка безболезненной миграции заключается в том, чтобы выполнять ее шаг за шагом, по одному компоненту за раз. Тщательное планирование и стратегия делают процесс проще, эффективнее и предотвращают сбои в работе вашего приложения.

Технологии, которые компании часто выбирают для перехода на React, включают:

• PHP
• Python
• Angular

Как справиться с распространенными проблемами React JS

• Реагировать на проблемы с производительностью

Начнем с того, что Virtual DOM уже решает многие распространенные проблемы с производительностью. Однако повторяющаяся проблема с производительностью в ReactJS связана со сложным длинным списком элементов. К счастью, это довольно легко исправить — с помощью виртуализированных списков. Однако, прежде чем выбрать React, вы должны знать, что добавление его поверх существующего приложения не сделает его быстрее или легче. Наоборот. Вашей команде необходимо заменить часть кодовой базы внешнего интерфейса на React — тогда вы увидите ожидаемые результаты. 

• Проблемы с индексацией поисковыми системами

Типичные приложения React, одностраничные приложения работают гладко, но не оптимизированы для SEO. Если мы хотим, чтобы наше приложение индексировалось Google, нам нужен рендеринг на стороне сервера. Лучший инструмент для этого — Next.js. При рендеринге на стороне сервера мы предварительно рендерим HTML на нашем сервере. Затем сканирующий бот правильно индексирует наш сайт, а мы сохраняем скорость и быструю загрузку для наших посетителей.

Расширение приложений React

Большим преимуществом React является то, что вы можете начать с малого и добавлять к нему дополнительные инструменты, когда они вам понадобятся. React безболезненно расширяется и не заставляет разработчиков использовать какие-то конкретные решения. Кроме того, сообщество React создало множество решений, которые подходят для типичных вариантов использования, таких как стилизация, маршрутизация или управление состоянием.

Сторонние инструменты, которые идеально подходят для React:

• Redux для управления состоянием
• Socket.io для использования веб-сокетов
• Next.js для рендеринга на стороне сервера
• Gatsby для создания статических веб-сайтов

Библиотеки React

Эти библиотеки помогут вам расширить ваше приложение React.

• Create React App — интерфейс командной строки для простого создания проекта React.
• Material UI — пакет пользовательского интерфейса.
• Styled Components — помогают создавать небольшие повторно используемые компоненты, отвечающие за внешний вид приложения.
• MobX — библиотека для управления состоянием.
• Enzyme — библиотека для тестирования компонентов React, созданная AirBnB.
• React Virtualized — помогает повысить эффективность рендеринга больших списков и табличных данных.

6 причин всё-таки выбрать React

Давайте выделим 6 основных причин, по которым команды разработчиков выбирают React для фронтенд-разработки:

• легко научиться, особенно для фронтенд-разработчиков,
• можно создавать богатые, высококачественные пользовательские интерфейсы,
• React повышает продуктивность разработчиков и ускоряет разработку,
• React поддерживают многие крупные компании, такие как Facebook и Uber,
• React популярен, поэтому его сообщество большое и активное.