Плюсы и минусы платформ React Native и Real Native: сравниваем приложения

Статья создана в соавторстве с Шармин Хаят, Data Specialist, и с помощью Андрея Горобца, Front-end Developer.

Если вы занимаетесь разработкой мобильных приложений, название React Native вам давно знакомо. В последнее время этот термин довольно быстро распространяется в мире технологий. Поскольку Facebook официально запустил React как платформу с открытым исходным кодом, многие компании уже интегрировали его в процесс своей работы.

Очевидно, что React Native имеет свои плюсы и минусы. Несмотря на то, что профессиональные веб-разработчики по-прежнему предпочитают работать с нативными инструментами, существует огромное количество начинающих разработчиков, которые рассматривают React Native как основу для своих проектов. Хотя не стоит рассматривать React Native как промежуточную ступень в развитии.

Этот пост предназначен для освещения как теоретических, так и практических аспектов использования React Native в сравнении со Swift. Для теста, мы взяли два почти идентичных приложения в обеих структурах: React Native App, Swift App.

Мы постарались максимально упростить эти приложения, чтобы было легче сравнивать между важными аспектами обеих платформ. Ниже вы найдете подробный анализ приложений, разработанных на Swift и React Native, разницу в нагрузке процессора, графического процессора и памяти. Давайте исследовать!

Приложение включает в себя вход в систему Facebook, получение его профиля, а также Tab Bar контроллер. Мы написали подобное приложение на Swift и React Native и будем использовать реальное устройство для оценки производительности. Путем точного анализа мы сможем понять, какая платформа покажет себя лучше.

Swift vs React Native

Swift

В отличие от других языков, Swift достаточно приятен в работе, особенно если сравнить его с предшественником Objective C. XCode, безусловно, является отличной IDE, и значительно упрощает разработку в сочетании со Swift.

React Native

По правде говоря, изучить JavaScript намного проще, чем Swift. В отличие от iOS, где вам приходится настраивать все самостоятельно, React Native позаботился об удобстве своих пользователей. Мы запустили приложение почти на всех версиях iPhone и знаете что? Никаких проблем с разметкой и расположением элементов — все четко :)

Полезно будет узнать о производительности React Native изолированно. Обратите внимание на официальную статью от Facebook.

Пришло время сопоставить наши приложения, чтобы выяснить, кто же все-таки круче :) Как уже упоминалось ранее, для тестирования приложений мы будем использовать реальное устройство и профайлер в xCode. Три категории, на которых мы сосредоточимся: нагрузка на процессор, графический процессор и объем потребляемой памяти.

Когда мы перемещали позицию на карте и выполняли ее масштабирование, приложение на React Native лагало больше, чем соперник на Swift. По данным Energy Usage Log, приложение на Swift расходовало меньше энергии в течение всего теста по-сравнению с React Native. В общем, в моем приложении есть всего 4 вкладки — страница логина Facebook, просмотр страницы, Page view и Карта.

CPU

CPU Profiler на экране карты

CPU Profiler на to-do list

Давайте рассмотрим каждую категорию отдельно.

1. Профиль пользователя Facebook

С точки зрения использования ЦП, React Native оказался более эффективен (на 1,21%), чем Swift.

2. To-do list

Во второй вкладке React Native снова стал победителем с эффективностью 0,66%. Выполняя задачу, пики потребления ЦП были записаны в то время, когда мы включили/удалили элемент из списка.

3. Просмотр страницы

На этот раз Swift определенно стал победителем (на 5,55% эффективнее, чем React Native). Выполняя эту задачу, мы отмечали падение производительности и пик потребления ЦП во время перехода на другую страницу в режиме просмотра.

4. Карты

Swift снова побеждает в этой категории, более рационально загружая CPU (на 9,7%). Следует отметить, что при выполнении этой задачи скачок в потреблении процессора появляется именно во время перехода на вкладку «Карты».

Своего рода ничья.

GPU

Следующий анализ, который мы проведем, это измерения GPU. Вертикальная ось достигает 60 кадров в секунду. Для оценки результатов мы будем использовать инструмент «Core Animation».

Пройдемся по каждой категории и проанализируем результаты.

1. Профиль пользователя Facebook

С разницей в 1,08 фрейм/сек, Swift едва ощутимо лидирует. Результаты были зафиксированы при нажатии на вкладку «Войти в Facebook».

2. To-do List

Здесь React Native практически подтверждает свое превосходство, работая на 6 фреймов/сек выше, чем Swift. Замеры были произведены точно в момент добавления/удаления элементов из списка.

3. Просмотр страницы

Swift превосходит React Native на 1,37 фрейм/сек на вкладке просмотра страницы. Наблюдая за цифрами, мы обнаружили, что фрейм/сек увеличиваются до 50, если быстро перемещаться по страницам.

4. Карты

Swift здесь явный лидер, так как работает на 3,6 фрейма/сек быстрее, чем React Native. Данные получены во время нажатия на кнопку «Карты».

Что ж, с результатом 3-1побеждает Swift!

Memory Usage

Теперь сравним Swift и React Native по количеству используемой памяти. Мы выполнили по одной задаче на вкладку и построили график с памятью (%) по оси y.

1. Профиль пользователя Facebook

В этой категории Swift является победителем, потребляя памяти на 0,07% меньше. Хотя таким отклонением можно даже пренебречь. Скачок по памяти был записан в момент нажатия на кнопку «Войти в Facebook».

2. To-do List

В этой категории React Native превосходит Swift, используя на 0,35% памяти меньше. Пики потребления памяти были записаны при включении элемента в список. При удалении элемента произошел спад в использовании памяти.

3. Page view

Вновь React Native обошел Swift, затрачивая на 0,07% памяти меньше. При переключении между страницами всплесков памяти не наблюдалось.

4. Карты

React Native здесь твердый лидер, оставил Swift позади с массовым использованием памяти в 36,02% для этой категории. Всплеск памяти записан в момент нажатия на кнопку «Карты».

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

Выбор платформы

Тестируемые приложения на React Native и Swift очень схожи между собой. Из этого эксперимента мы можем заключить, что хотя React Native показал себя лучше в категории памяти, Swift эффективно использует процессор и графический процессор. В заключение можно сказать, что React Native довольно близок к Swift, и это радует. Однако со счетом 2-1наряду с высоким потенциалом по памяти Swift по праву становится победителем. К слову, тестировали на iPhone 7.

Популярность React Native меня совсем не удивляет, поскольку с его помощью мы сможем создавать приложения для нескольких платформ параллельно (повторно используя практически весь код приложения). Да, именно так :) Поскольку React Native напрямую зависит от JavaScript, вам почти не нужно разбираться в каких-либо других языках, в большинстве случаев, для создания приложений на iOS и Android отдельно. Кому интересны внутренние процессы выполнения Javascript кода на мобильных устройствах и как работает React Native, обратите внимание на статьи Bridging in React Native, JavaScript Environment.

Но возникает вопрос, так ли эта система подходит для всех видов проектов? Конечно, нет. Перед окончательным решением необходимо принять во внимание множество факторов: ваши текущие навыки программирования, объем вашего приложения и продолжительность проекта — все это нужно учитывать, прежде чем делать выбор.

React Native: плюсы

Повторное использование кода

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

Платформа: «Все включено»

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

Это как готовить целое блюдо из одного ингредиента. Невозможно создать целое приложение, используя только React. Определенно, вам понадобится webpack для сборки кода, подобие CSS для стилизации, что-то похожее на Firebase для обслуживания данных и много чего другого.

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

Что предлагает React Native

• React :)
• Вспомогательные средства для Android и iOS;
• Flexbox для стилизации пользовательского интерфейса;
• Различные виджеты и анимации.

И многое другое...

import React, { Component } from 'react';
import propTypes from 'prop-types';
import { View, Text } from 'react-native';
import { infoMessageStyles } from './styles';

export default class InfoMessage extends Component {
  static propTypes = {
    text: propTypes.string.isRequired,
  }

  render() {
    return (
      <View style={infoMessageStyles.wrapper}><Text
          allowFontScaling={false}
          style={infoMessageStyles.text}>
          {this.props.text}</Text></View>
    );
  }
}

Интегрируемые нативные компоненты

Вы когда-нибудь задумывались, почему в React Native добавлено слово Native? Такие вещи, как ускорение прокрутки, анимация и предпочтения клавиатуры, значат очень много для конечного пользователя, и с этим невозможно поспорить. Приложения React Native позволяют использовать нативные элементы интерфейсов из операционной системы, одновременно поддерживая парадигму React в JavaScript.

React Native предлагает ряд интегрированных компонентов, что позволяет разработчикам быстро и эффективно выполнять основные задачи. Некоторые из них включают:

• Текст: используется для отображения текста

import React, { Component } from 'react';
import { AppRegistry, Text, StyleSheet } from 'react-native';

export default class TextInANest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      titleText: 'Nest',
      bodyText: 'This looks like a birds nest.',
    };
  }
  
  render() {
    return (
      <Text style={styles.baseText}><Text style={styles.titleText} onPress={this.onPressTitle}>
          {this.state.titleText}{'\n'}{'\n'}</Text><Text numberOfLines={5}>
          {this.state.bodyText}</Text></Text>
    );
  }
}
const styles = StyleSheet.create({
  baseText: {
    fontFamily: 'Cochin',
  },
  titleText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

• Вид: используется для проектирования пользовательского интерфейса

class ViewColoredBoxesWithText extends Component {
  render() {
    return (<View style={{flexDirection: 'row', height: 300, padding: 300}}><View style={{backgroundColor: 'green', flex: 0.3}} /><View style={{backgroundColor: 'blue', flex: 0.5}} /><Text>Greetings !</Text></View>
    );
  }
}

• Текстовый ввод: позволяет пользователям вводить текст

import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';

export default class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
    return (
      <View style={{padding: 10}}><TextInput
          style={{height: 40}}
          onChangeText={(text) => this.setState({text})}
        /><Text style={{padding: 10, fontSize: 43}}>
          {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}</Text></View>
    );
  }
}

• Кнопка

<Button
  onPress={onPressLearnMore}
  title='A Basic Button'
  color='#841589'
  accessabilitylevel='A beautiful button'
/>

Например, вы можете создать простую кнопку в базе Native, используя исходный код.

React Native: минусы

Ограниченный API

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

Различия платформ

Android и iOS используют различные принципы проектирования. Это означает, что с помощью React Native придется включить множество if-statements вместе с отдельным кодом, чтобы укладываться в рамки размещения графических элементов. В дополнение к этому, создание высококачественного пользовательского интерфейса также исключает парадигму React, и мы были вынуждены писать Swift библиотеки при разработке этого приложения. И мы уже не говорим о том, что нужно сопровождать сразу несколько конфигурационных групп.

Относительно низкая производительность

Если вы планируете разрабатывать сложное приложение, такое как редактор изображений или видео, React Native вам не подойдет.

Real Native: плюсы

Нет API ограничений

То, что делает native действительно функциональным, — тот факт, что вы можете получить доступ ко всем API через родную среду. Вам не требуется дополнительное сопоставление слоев, которое необходимо обновлять.

Разнообразие ресурсов для выбора

Разработка в native среде дает доступ к большому количеству сторонних библиотек. Благодаря этому вы сможете создавать более функциональные приложения.

Real Native: минусы

Требование к разработке двух отдельных приложений

Специфичность платформы, — безусловно, самый большой недостаток native. Придется разработать отдельные коды для Android и iOS, и ни один из них совместно использовать не получится.

Сравнение React Native и Real Native Apps

Создание приложения на React Native

Если вы создаете приложение для iOS или Android, вам следует знать три важные вещи:

• предпочтительный язык программирования;
• подходящие инструменты;
• интерфейс программирования (API).

Что касается разработки на React Native, вы вынуждены использовать JavaScript или его суперсет JSX. К счастью, у вас сходу будет отличный набор инструментов. А вот что касается API — будет немного в новинку. Конечно, с помощью React Native вы не сможете сделать все.

Создание Native Android / iOS приложения

Objective-C и Swift — необходимые языки для создания native приложения в iOS. Для Android вам понадобится знание Java. Что касается инструментов, можно использовать IDE для отдельной платформы, а также представить, как IDE и соответствующий debugger помогут вам создать систему.

Что проще выучить

Конечно, JavaScript намного легче изучить, а также отладить, чем Swift, Objective-C и Java. Javascript — это чуть ли не единственный язык, на котором начинают писать еще до того момента, как изучат его, — вследствие его гибкости. Но имейте в виду, всему есть цена. Поскольку JavaScript — довольно простой язык, всегда есть большой риск ошибок в вашем коде.

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

Таким образом, React Native более легкий в изучении, но он приходит с проблемами JavaScript. Более того, как и с любой другой кросс-платформенной парадигмой, вам нужно принять парадокс «написать один раз, развернуть под каждую платформу отдельно».

Выводы

Отлично! В этой статье мы рассмотрели немало важных вещей. Выбор React Native или Swift зависит от ваших личных предпочтений и требований. Мы бы сказали, что если ваше приложение не сложно и не включает в себя сравнительно последние функции, такие как сложные анимации или редактирование видео, остановите свой выбор на React Native, хотя вы всегда можете написать часть кода на нативном языке.

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