React - это фреймворк, разработанный компанией Facebook изначально для поддержки собственных сервисов, но ставший впоследствии самым популярным JavaScript-фреймворком для сторонних разработчиков. Чуть позже - в 2015 году, появились первые версии фреймворка React Native. Он изначально был предназначен для мобильной разработки и, в основном применяется в ней. Однако, так как в последние время большинство сайтов и приложений открывается через мобильные устройства, многие веб-разработчики начинают переходить на React Native, так как он предоставляет больше возможностей для оптимизации конечного продукта.
React и React Native: в чем разница и такая ли она существенная
Оба фреймворка написаны на JavaScript, имеют одинаковую техническую основу и похожую документацию. Однако сферы применения у них разные. Стандартный React разрабатывался еще до того момента, как появился общий тренд на адаптив сайтов к мобильной версии, хотя и в нем есть все необходимое для создания версий страниц под разные разрешения и ориентации экраном. React Native появился в 2015 году - как раз в это время начал активно развиваться тренд на адаптивные сайты и разработку мобильных веб-приложений. Собственно, Native мало чем отличается от стандартного React, за исключением того, что он лучше адаптирован под мобильную разработку.
И простой React, и React Native позволяют создавать сайты и веб-приложения, которые будут корректно работать и на компьютерах, и на смартфонах. Отличия будут лишь в процессе реализации нужного функционала. Так, в React изначально нужно проработать веб-версию и уже на ее основе делать адаптацию к мобильной версии. В случае с Native ситуация выглядит противоположным образом - обычно изначально делается мобильное приложение, а только потом уже версия для десктопов и то, если в ней есть необходимость.
Если говорить о технических отличия фреймворков друг от друга, то у Native вся конструкция приложения строится на flexbox, а не на простых блоках. Такой подход позволяет лучше адаптировать содержимое приложения под разные размеры экранов и разрешения. Технические отличия лучше всего иллюстрируются на примере упрощенной структуры React:
- React app - это само приложение или сайт, состоящий из компонентов, которые образуют собственное древо и группы. Оно является основой как для простого React, так и для Native.
- Virtual DOM - это средний блок, в котором происходит реконсиляция. Присутствует в обоих случаях.
- Render DOM - блок рендера. Тут уже есть существенные отличия: в классическом React здесь рендерятся JavaScript-элементы в HTML-структуру. В Native рендер осуществляется сразу в универсальную обертку вроде View, Text, а не div или span.
Главное структурное различие React и React Native
Как происходит рендер в React Native
Главной проблемой всех SPA-приложений, то есть не требующих загрузки отдельных страниц, является слишком долгий парсинг. При старте нативного приложения запускается отдельный поток JS, который и отвечает за парсинг кода. Однако на весь процесс может уходить много времени, если речь идет о большом веб-приложении, а это негативно влияет на пользовательский опыт.
Для решения этой проблемы в React Native был встроен специальный JavaScript-движок - Hermes. Он производит парсинг JS-файла одновременно со сборкой приложения. Также в процессе используется особый байт-код, который запускается и обрабатывается быстрее, чем стандартный код.
Верстка через флексбоксы
В случае с React Native вся верстка строится на флексбоксах, а это требует некоторой технической адаптации. Например, обязательное наличие layout-механизмов. За их корректную реализацию отвечает еще один движок от Facebook - Yoga layout. Помимо того, что происходит преобразование стандартной верстки в понятный Native layout, происходит и оптимизация кода для более корректного отображения и лучшей загрузки всего приложения.
Оптимизация производится посредствам уменьшения view-блоков. Однако это может нести в себе определенные сложности во время верстки, особенно, если вы уже привыкли работать с классическим React.
Реализация анимации и интерактивности элементов
Функционал React Native позволяет сравнительно просто реализовать на экране приложения интерактивные элементы с анимацией и подгрузкой данных из баз приложения. Дополнительно доступна возможность настройки частоты кадров для сложной анимацией, где требуется запрашивать информацию из баз данных.
В классическом React или на каком-то другом фреймворке вам бы для этого потребовалось запрашивать данные и выводить их вместе с анимацией для каждого кадра по отдельности. Несколько элементов, которые должны плавно отображаться в 60 FPS просто “повесят” все приложение при таком подходе. React Native предлагает два варианта развития событий:
- Использовать сторонние совместимые библиотеки анимаций Reanimated и Gesture handlers. Они могут работать со сложными анимациями, а также жестами пользователей.
- Написать соответствующую функцию на JavaScript внутри функции-ворклета. Они описываются внутри корневого файла React, а при сборке проекта переносятся в отдельный файл. За их работу отвечает JSI. Такой подход более “индивидуален” и позволяет реализовать необычные решения, но требует большого опыта работы с JavaScript.
Схема реализации анимации и интерактивности через JSI
Преимущества React Native
Этот фреймворк имеет хоть и похожую техническую базу на обычный React, все же отличается от него. Далее рассмотрим преимущества этого инструмента.
Расширенные возможности кросс-платформенной разработки
Вы можете разработать веб-приложение для Android-устройств и быстро адаптировать его под iOS-устройства или наоборот. Это достигается благодаря использованию заранее заготовленных и протестированных компонентов, а также наличия библиотек с открытым исходным кодом.
Большое комьюнити разработчиков
Всегда можно найти кого-нибудь, кто поможет решить проблему, в том числе и в русскоязычном сегменте. Также на Stack Overflow и GitHub есть много наработок для проектов, реализованных с помощью React Native.
Быстрое обновление написанных приложений
Приложения, написанные на React Native удобнее запускать, дорабатывать и компилировать. Для внесения даже значительных изменений необязательно “перелопачивать” все приложение - достаточно изменить только нужный модуль. Изменения можно будет проследить в режиме реального времени.
Удобный пользовательский интерфейс
Его как раз React Native позаимствовал у “простого” React. Он отличается меньшим временем загрузки, более плавной работой. Компонентный подход позволяет быстро создавать как приложения с простым, так и очень сложным дизайном.
Высокая скорость отклика
Native имеет более лучшую оптимизацию процессов, благодаря чему повышается скорость отклика. Это актуально для больших веб-приложений, так как позволяет ощутить разницу по сравнению с аналогами.
Недостатки React Native
Несмотря на то, что он постоянно обновляется, данный фреймворк не лишен определенных недостатков.
Меньшая гибкость
React Native подходит в большей степени для разработки веб-приложений. С этим никаких проблем нет. Однако, в отличии от обычного React, он плохо подходит для реализации десктопных версий приложений.
Небольшой выбор пользовательских модулей
Несмотря на то, что React Native существует уже достаточно давно, в нем пока еще плохо реализованы пользовательские модули. Да, это не такая серьезная проблема, если вы создаете приложение с нуля, но вот если требуется детальная переработка существующего, то могут возникнуть некоторые организационные проблемы. Например, может потребоваться запустить несколько отдельных баз кода вместо одной.
Возможны проблемы с совместимостью
Хотя React Native и позиционируется как кросс-платформенное решение, у приложений, написанных с его помощью, тоже бывают проблемы с совместимостью. Время от времени разработчики жалуются на конфликт пакетов или средств отладки внутри фреймворка. Для решения данных проблем потребуется вносить изменения в сам исходный код React Native, что требует определенных навыков разработки.
А что “обычный” React
React.js - сейчас самый популярный фреймворк. По нему много качественных обучающих материалов, в том числе и на русском языке, есть развитое комьюнити, а некоторые проблемы, актуальные для Native, для него не так актуальны. С его помощью обычно верстают веб-сайты, в том числе и адаптивные. Также его функционала должно хватить для создания и веб-приложений для смартфонов, правда, делать их будет не так удобно как в случае с React Native.
Количество скачиваний React (синий график) по сравнению с другими фреймворками
Начинающим веб-разработчикам лучше всего освоить именно “чистый” React, особенно, если в ближайшее время не планируется “переключения” на разработку мобильных приложений. Он сам по себе очень востребован на рынке - по нему больше вакансий, чем по многим другим фреймворкам, а это значит, что без работы вы не останитесь.
К тому же, освоив работу с React.js, вам будет гораздо легче изучить и освоить другие фреймворки, которые имеют в своей основе JavaScript. React Native же не только использует в качестве основе JS, но почти всю структуру и логику работы React.js, хотя и со своими изменениями.
Почему может потребоваться перейти с React на React Native
Приведенные далее причины “перехода” актуальны больше для опытных разработчиков, которые уже успешно завершили несколько проектов и решили посвятить себя работе с мобильными веб-приложениями, а не просто сайтами.
Вот список причин, почему более опытному разработчику будет интересен React Native:
- Попробовать себя в реализации нового пользовательского опыта. Логика взаимодействия пользователя с веб-приложением несколько отличается от логики взаимодействия с сайтом. Так как большинству людей, у которых есть смартфоны гораздо удобнее взаимодействовать с приложением через него, а не через компьютер, вам нужно делать упор именно на мобильную версию. К тому же, с 2021 года идет тенденция, когда некоторые веб-приложения вообще не имеют полноценных аналогов для браузера.
- Большая часть пользователей заходит с мобильных. Этот тренд как раз идет с 2015 года. Так как все больше сайтов адаптируется под мобильные устройства, можно сказать, что тренд не собирается сбавлять обороты.
- React Native позволяет начать легкий старт в мобильной разработке, имея навыки в веб-разработке. Другие варианты для запуска своего первого приложения потребуют от вас изучение технической спецификации Android или iOS, а также хороших знаний других языков программирования, кроме JavaScript.
- Есть возможность написания нативных приложений без необходимости затрагивать встроенные в React Native модули. Такой вариант отлично подойдет JavaScript-разработчикам.
- Можно создать отличное приложение под конкретную платформу, хотя React Native и является кросс-платформенным фреймворком.
Заключение
Не нужно путать React.js и React Native. В первом случае речь идет про фреймворк и библиотеку JavaScript для веб-разработки, а во втором для разработки мобильных приложений. Они оба имеют похожую структуру и техническую реализацию, однако используются в разных ситуациях. Проекты в них тоже создаются и поддерживаются по-разному. Если вы планируете плотно заниматься именно веб-разработкой, то осваивать React Native нет особой необходимости - достаточно будет “классического” React. Если же вас больше привлекает работа с веб-приложениями и мобильной разработкой, то лучше начинать работать сразу с Native, так как в этой сфере используется именно эта среда разработки.
Тем же разработчикам, которые еще не определились, чем хотят заниматься, рекомендуем начать с изучения React. Так вам будет проще найти первую работу и влиться в среду веб-разработки. Потом, если вы посчитаете нужным, то без проблем сможете освоить React Native.
