React Native исправляет основные проблемы с производительностью и становится равным Flutter

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

Как и для любого другого фреймворка или технологического стека, мы задаем себе один и тот же вопрос. Что лучше? — Flutter или React Native. Некоторые разработчики могут голосовать за Flutter, из-за его почти нативной производительности и богатого набора виджетов. Между тем, некоторым разработчикам нравится React Native из-за его дружелюбности к разработчику и поддержки компонентов для конкретной платформы.

Приложения Flutter демонстрируют значительное повышение производительности по сравнению с приложениями React Native благодаря молниеносной связи Dart-to-Native. React Native взаимодействует с собственным API через мост JavaScript. Концепция моста JavaScript не работает хорошо для всех требований в разработке.

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

Как Flutter решал проблемы производительности лучше, чем React Native

Flutter становится все более популярным с каждым днем по двум основным причинам: производительность и гибкость. Элементы управления пользовательским интерфейсом, специфичные для платформы, ограничены для современных сценариев использования и удобства использования. Например, реализация бокового меню в iOS трудна без сторонней библиотеки, так как боковое меню не является частью рекомендаций Apple UX. Flutter не использует собственные элементы пользовательского интерфейса, специфичные для платформы, но предлагает свой собственный набор инструментов пользовательского интерфейса. Так Flutter поставляется со встроенной библиотекой 2D-рендеринга (Skia).

React Native отображает нативные элементы пользовательского интерфейса, специфичные для платформы, на основе компонентов React. Код React Native работает внутри движка JavaScript, а контекст JavaScript взаимодействует с нативным кодом (нативным хост-приложением) через мост. Мост JavaScript использует асинхронный коммуникационный подход на основе JSON. Если вы не используете Hermes, среда выполнения React Native интерпретирует пакет JavaScript с помощью JavaScriptCore (JSC). В результате приложения работают медленно и снижают удобство использования, когда вы так часто используете нативные API и добавляете больше JavaScript кода.

Flutter не использует JavaScript-мост и JIT-компикцию для приложений. Связь Flutter engine Dart-to-Native использует более быстрые двоичные буферы памяти.

Области, где React Native работает лучше, чем Flutter

Когда вы делаете кроссплатформенное приложение с помощью Flutter, оно становится приложением Flutter, а не нативным приложением для конкретной платформы. Приложения Flutter поставляются с различными спецификациями пользовательского интерфейса и предоставляют пользователям различный UX. С другой стороны, React Native предлагает способ использования нативных элементов пользовательского интерфейса для конкретной платформы через кроссплатформенный интерфейс разработчика (React). В большинстве сценариев мы используем кроссплатформенные фреймворки, так как разработка нативных приложений занимает много времени для конкретной платформы. Но Flutter дает нам приложения Flutter, а не нативные приложения, такие как React Native.

(прим. ред.) По своей сути приложение на Flutter является канвасом

Разработка приложений становится проще, когда есть кроссплатформенная система компоновки. Вот почему Electron стал выбором номер один для создания кроссплатформенных десктопных приложений. Он использует HTML в качестве кроссплатформенной системы компоновки. Аналогичным образом, React Native также предоставляет кроссплатформенную систему компоновки на основе Flexbox для рендеринга элементов UI, специфичных для платформы. С другой стороны, Flutter не имеет удобной для фронтенд-разработчика системы компоновки, и он предлагает новый макет на основе дерева виджетов, который иногда сбивает с толку современных разработчиков, которые пришли из мира веб-разработки.

Кроме того, Hermes подобный поддержке браузерного API JavaScript, и среда разработки на основе React повышают производительность разработчиков React Native по сравнению с Flutter.

Как новая архитектура React Native решает проблемы с производительностью

Основным недостатком React Native было отсутствие производительности на мобильных устройствах среднего и низкого класса. Ранее приложения на основе React-Native имели медленное время запуска, потому что среда выполнения JavaScriptCore интерпретировала пакет JavaScript при запуске приложения. Позже команда React Native создала Hermes и ускорила время запуска приложения, представив компиляцию AOT (с опережением времени) для пакета JavaScript. Концепция AOP Hermes помогла приложениям React Native снизить потребление батареи за счет сокращения использования ресурсов. React Native скоро будет использовать Hermes в качестве движка JavaScript по умолчанию для всех новых проектов из-за этих улучшений производительности.

Но мост JavaScript не работает хорошо во всех случаях разработки, так как он использует асинхронную связь на основе JSON путем сериализации JavaScript/нативных объектов. React Native обновила свою текущую архитектуру для решения этих проблем с производительностью. Теперь новый компонент под названием JSI (JavaScript Interface) заменяет текущий модуль моста. JSI позволяет контексту JavaScript вызывать нативные методы непосредственно без моста, удерживая нативные ссылки в контексте JavaScript. Кроме того, он позволяет нативному контексту React Native напрямую манипулировать объектами JavaScript.

Коммуникация событий пользовательского интерфейса новой архитектуры (также известная как Fabric) использует JSI. Новая архитектура также предлагает новую концепцию ленивой загрузки нативных модулей через TurboModules. TurboModules еще больше ускорит время запуска приложения.

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

Вывод: что лучше?

Нет ничего под названием «Лучший кроссплатформенный фреймворк» — каждый фреймворк хорош в конкретных сценариях использования. Однако ранее многие разработчики согласились с тем, что Flutter является самым мощным кроссплатформенным фреймворком, когда-либо созданным из-за его производительности и гибкости. Я объяснил, почему Flutter лучше, чем React Native, в этой статье.

Новая архитектура будет приравниваться как к показателям React Native, так и к показателям Flutter. Наконец, мы можем рассмотреть React Native против Flutter как просто JavaScript/React против Dart/MaterialUI. Возможно, речь идет только об опыте разработчиков. Теперь мы можем игнорировать коэффициент сравнения производительности и сосредоточиться исключительно на том, что мы разрабатываем, чтобы выбрать лучшую структуру.

Другими словами, если вам нужен готовый UI, используйте Flutter. Если вам нужен собственный UI, используйте React Native. В противном случае, если вам нравится Dart, используйте Flutter, иначе используйте React Native.

Спасибо, что прочитали.

Перевод статьи "You Don’t Have to Compare Flutter and React Native Anymore", ссылка на оригинальный пост

Перевод выполнен для телеграм канала ReactNative - info