Плюсы и минусы платформ 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. Данные получены во время нажатия на кнопку «Карты».
Что ж, с результатом
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, и это радует. Однако со счетом
Популярность 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 && '
Похожие статьи:
П’ять стартапів із України взяли участь у міжнародній конференції SXSW (South by Southwest), яка відбулася 10-19 березня в Остіні, штат Техас. Вони...
Одеський національний політехнічний університет другий рік поспіль отримує одну з найнижчих оцінок у рейтингу вишів. У 2017-му він...
Цей випуск подкасту вийшов зовсім неформальний. І тому він тільки для тих, хто весь рік нас слухав і дивився. Рефлексуємо, яким цей...
Компания Apple все еще крупнейший в мире производитель планшетов, но теперь это сокращающийся рынок. Причем, продукция Apple на фоне...