Когда React рассматривается в контексте возможных альтернатив, то вам пригодится знание о его преимуществах и недостатках, чтобы разобраться в своих нуждах и подобрать оптимальную технологию.
React уже зарекомендовал себя в качестве мощного инструмента для создания пользовательских интерфейсов. Пользовательский интерфейс (UI) — одна из важнейших частей веб-приложения, ведь это то, что пользователь видит, с чем он взаимодействует.
Но перед началом разработки каждого нового сайта необходимо убедиться, что выбранный JavaScript-фреймворк идеально подходит для проекта.
В статье рассмотрим следующие достоинства React:
- Виртуальная объектная модель документа.
- Повторное применение компонентов.
- Нисходящий поток данных.
- Огромное сообщество.
- Браузерные инструменты React-разработчика.
А после достоинств рассмотрим и недостатки React:
- Плохая документация.
- Запутанный синтаксис JSX.
- Сложность поисковой оптимизации.
- Фокусировка на пользовательском интерфейсе.
Пройдемся по каждому из пунктов подробнее.
Достоинства React
Некоторые из плюсов — весьма субъективны, так что составьте свое собственное мнение и поделитесь им в комментариях!
1. Виртуальная объектная модель документа
Объектная модель документа (DOM) определяет древовидную структуру HTML-документа, отсылаемого клиенту сервером после соответствующего запроса. DOM представляет веб-страницу в объектно-ориентированном формате, чтобы языки программирования могли взаимодействовать с ней.
Браузер регулярно проверяет любые изменения в DOM, обновляя ее соответствующим образом. Изменение объектной модели документа провоцируется множеством факторов, например пользовательским вводом данных, HTTP-запросом, получением данных от API и так далее. Браузер обновляет DOM каждый раз, когда страница меняется. Поскольку DOM современных сайтов огромны, обновление занимает много времени, замедляя общую производительность веб-приложения.
Вместо медленных и неудобных взаимодействий непосредственно с реальной объектной моделью документа, React взаимодействует с ее облегченной копией — виртуальной DOM, поэтому реальная DOM обновляется только после взаимодействия с виртуальной DOM.
Следовательно, виртуальный DOM обеспечивает разработчикам два серьезных преимущества. О них сейчас и поговорим.
- Эффективность:
Обновление всего DOM, чтобы сделать веб-страницу “реактивной” — крайне неэффективно, поскольку потребляет слишком много ресурсов. Поэтому, собственно, при изменении веб-страницы (например, в результате запроса или действия пользователя) React обновляет специальный виртуальный DOM.
React хранит в памяти две версии виртуального DOM — обновленный виртуальный DOM и его резервную копию, созданную до обновления. После обновления React сравнивает обе версии между собой, чтобы найти измененные элементы, а затем — обновляет исключительно изменившуюся часть реального DOM.
Подобный процесс на первый вгляд кажется переусложненным и трудоемким, однако он занимает гораздо меньше времени, чем обновление реальной объектной модели документа целиком, следовательно, он оптимизирует работу с DOM.
- Высокая производительность
Одна из жизненно важных целей любого стартапа — написать веб-приложение быстрым и отзывчивым, обеспечить наилучшее обслуживание клиентов. Виртуальная DOM, в отличие от реального DOM, занимает мало места и быстро обновляется, тем самым повышая производительность приложения.
Виртуальная DOM позволяет странице немедленно получать ответы от сервера и отображать обновления. Например, Facebook применяет технологию виртуального DOM для обновления чатов и лент пользователей без перезагрузки страницы.
2. Повторное применение компонентов
При работе с ReactJS создаются многоразовые компоненты: чаще всего, компонент пользовательского интерфейса можно использовать в других частях кода или даже в разных проектах практически без изменений.
Более того, разработчикам React-приложений доступны библиотеки готовых компонентов с открытым исходным кодом. Благодаря им время разработки сокращается, что очень важно для стартапов, которым необходимо экономить не только деньги, но и время.
3. Нисходящий поток данных
Односторонний поток данных в React — еще одна очень полезная функция. Такой поток данных также называют “сверху вниз” или “от родителя к ребенку”.
Объяснение довольно простое — в React-приложении данные между элементами передаются только одним способом. Нисходящий поток данных предотвращает ошибки, облегчает отладку.
4. Огромное сообщество
Facebook приложила много усилий, чтобы сделать React мощным инструментом для улучшения пользовательского интерфейса любых веб-приложений. Более того, корпорация активно продолжает делать React все более приятной и эффективной технологией.
Но не только Facebook создавали React: выпустив его с открытым исходным кодом в 2013 году, Facebook активно поощрял разработчиков улучшать библиотеку. Сегодняшний React — по праву результат совместных усилий людей со всего мира.
Сообщество React предоставляет тонны ценных библиотек, облегчающих процесс разработки, для вас открыты новые способы и возможности улучшить качество кода приложений. Поскольку библиотеками с готовыми компонентами принято делиться через интернет, всегда можно внедрить в проект некоторые из них, тем самым существенно сократив время, затрачиваемое на разработку пользовательских интерфейсов.
5. Браузерные инструменты React-разработчика
React Developer Tools — это бесплатное расширение для Chrome и Firefox, предоставляющее целый набор виджетов проверки. Расширение упрощает отладку, позволяя разработчикам не только искать по списку всех компонентов, но и просматривать глубоко вложенные компоненты прямо в браузере.
Недостатки React
Как и любая другая технология, React характеризуется не только плюсами, но и минусами. Давайте узнаем все об ограничениях React!
1. Плохая документация
ReactJS — относительно новая технология, она продолжает развиваться благодаря разработчикам, которые вносят в нее свой вклад, расширяя ее возможности.
Но документации по React и связанным с ним библиотекам часто не хватает. Более того, разработчики склонны выпускать обновления библиотек без обновления документации, что затрудняет интеграцию библиотек в существующие проекты и знакомство с новыми возможностями.
2. Запутанный синтаксис JSX
В ReactJS используется JSX — специальное расширение синтаксиса для создания объектов JavaScript, но через синтаксис HTML. Такое расширение упрощает модификацию DOM и улучшает читабельность кода.
Однако, синтаксис HTML посреди JavaScript-кода может запутать молодых разработчиков, поэтому им требуется время на формирование привычки. Следовательно, начинающие разработчики часто считают JSX недостатком React.
3. Сложность поисковой оптимизации
Поисковая оптимизация (SEO) крайне важна, ведь веб-приложению нужно получать трафик и привлекать новых клиентов. Для лучшего понимания сложности поисковой оптимизации приложения на React, нужно понять, как Google индексирует веб-страницы.
Веб-страницы индексируются специальными поисковыми ботами Google, эти боты сканируют содержимое веб-страницы и сохраняют информацию в индексе Google. Когда пользователь запрашивает определенную информацию, то Google проверяет данные, хранящиеся в индексе, чтобы предоставить наиболее релевантные источники информации.
Боты Google могут легко индексировать HTML-страницы. Однако с JavaScript-страницами все уже не так гладко, ведь динамические веб-приложения, в том числе созданные на React, проходят усложненную процедуру индексации, в отличии от статических веб-страниц.
Таким образом, страница React-приложения может быть проиндексирована неправильно или индексирование может занять слишком много времени. Что один случай, что другой — оба заставят ботов Google покинуть страницу сайта.
Существует несколько подходов, делающих React-сайт более SEO-дружественным, например предварительный рендеринг или рендеринг на стороне сервера.
4. Фокусировка на пользовательском интерфейсе
ReactJS — это JavaScript-библиотека, содержащая набор инструментов для создания пользовательского интерфейса веб-приложений.
Но ReactJS нельзя назвать полноценным фреймворком, хоть такое его представление и распространено. React — это не инструмент “все в одном” для создания целого приложения. Следовательно, если вы следуете паттерну проектирования “Модель-Представление-Контроллер” (Model-View-Controller или MVC), то React будет отвечать только за представление. Две другие части — модель и контроллер — создаются при помощи дополнительных инструментов. Если вы применяете React в проекте, то вам потребуется интегрировать дополнительные инструменты для маршрутизации, написания интерфейсов прикладного программирования (Application Programming Interface или API) и других частей полноценного веб-приложения.
Поскольку многие другие JavaScript-фреймворки проектировались как универсальные решения и позволяют создавать все элементы паттерна MVC, некоторые разработчики считают недостатком узкую специализацию React на пользовательском интерфейсе.
Выводы
React успешно доказал свою эффективность в создании интерактивных пользовательских интерфейсов, именно поэтому он так широко применяется.
React характеризуется множеством достоинств, вы можете ими воспользоваться, но при создании веб-приложения для развития бизнеса следует также помнить про недостатки каждой из технологий.
Читайте также:
- Создание приложения-планировщика в React с Easy Peasy и Ant Design
- Создаем приложение React с нуля в 2021 году
- Продвинутые React Hooks: подробный разбор useEffect
Читайте нас в Telegram, VK и Яндекс.Дзен
Перевод статьи Saul Gallegos: The Bad Things About React (And Some Good Things Too)
