React-Nature – это гибридная мобильная каркас, которая позволяет создавать приложения, используя только JavaScript. Однако, в отличие от других гибридных мобильных технологий, вы не создаете «мобильное веб-приложение» (веб-приложение, завернутый в нативный контейнер). В конце концов, вы получаете реальную вещь. Ваш код JavaScript CodeBASE скомпилирован в мобильное приложение, неотличимое от приложения iOS, созданного приложению IOS, построенным с использованием приложения Objective-C или Android, используя Java. Это означает, что React – Nature предоставляет преимущества как нативных, так и гибридных мобильных приложений без каких-либо недостатков.
Моя цель – выяснить, могут ли они доставить именно то, что они обещают. Для достижения этого мне нужно будет построить одно и то же приложение как в Swift, так и в реактивном уровне; Это должно быть достаточно простым, чтобы я мог узнать оба языка и завершеть приложения во времени, но достаточно сложным, чтобы он позволяет мне сравнить CPU, GPU, использование памяти и использование энергии каждого приложения. Приложение будет иметь четыре вкладка. Первый будет назван «профилем» и подскажет пользователю войти в Facebook, чтобы получить фото, имя, имя и электронное значение пользователя и отобразить их на странице. Вторая вкладка будет называться «Делать список» и будет простым, чтобы сделать список, используя NSUSERDefaults (IPhone Внутренняя память). Он будет иметь «Добавить элемент и функции« Удалить элемент ». Третья вкладка будет названа« Page Viewer »и будет состоять из контроллера просмотра страниц. Контроллер просмотра страницы будет иметь три экрана, которые пользователь может пролить через (« зеленый » , «Красные» и «синие» экраны). Окончательная вкладка будет названа «карты» и будет состоять из представления карты, которая увеличивает текущее местоположение пользователя, с синей точкой на карте, представляющему местоположение пользователя.
Свифтный процесс
Во-первых, был IOS и SWIFT. Узнать Swift было относительно легко, так как он похож на многие языки, которые я уже знаю (Java, C ++). Обучение какао Touch (IOS Framework), однако, была гораздо сложнее. Я наблюдал, как видео серии Rob Percival на Udemy.com, который пробежал меня от введения Swift через завершение нескольких приложений. Даже после вступительных видео у меня все еще были проблемы с пониманием Cocoa Touch. Большая часть «обучения» в этих видео вовлечена кода копирования/вставки, но мы не совсем уверены, что это делало. Я получил чувство, даже учитель не знал и просто запомнил его. Я не люблю знать, что делает каждую строку моего кода.
IDE Apple (Xcode) без сомнения, очень продвинутый и удобный для пользователя. Вы можете нажать на то, что называется раскадровкой и настроить экраны приложений в нужном завершении, помещая стрелку на экран, где приложение должно начаться. На первой вкладке («Профиль») я смог перетащить вид изображения, имени этикетку и метку электронной почты, где я хотел. Затем я вытащил его в код и сделал соединение, создавая новую переменную в коде в процессе. Затем, программно, как только пользователь вошел в систему через Facebook, я бы установил эти имена переменной с соответствующими значениями Facebook. Это потребовалось 3 недели, чтобы сделать его через видео серии и получить комфортное кодирование в SWIFT/IOS.
Вы можете просмотреть свой код для SWIFT версии этого приложения в GitHub по этой ссылке: https://github.com/jcalderaio/swift-honors-app
Реагирующий процесс
Второй был реагирован на родных. Обучение JavaScript было немного сложнее, чем стремительно, но все еще не сложно. Я попробовал кодировать приложение от битов и кусочков реагирования, я узнал из Интернета, но этого было недостаточно. Мне нужны несколько видео лекций. Возвращаясь к Udemy.com, я смотрел впечатляющий введение Стивена Градера к реагированию. Сначала я был невероятно ошеломлен. Структура реагирования натурала не имеет смысла мне вообще, но через неделю наблюдения лекций Стивена я смог начать кодировать самостоятельно.
Что мне очень нравится в реакциональном, в отличие от iOS, каждая строка кода, которую вы пишете, имеет смысл – вы знаете, что делает каждую строку кода. Кроме того, в отличие от iOS (где вам пришлось настроить настройки для каждой страницы, чтобы хорошо выглядеть в ландшафте и портрете для разных размеров экрана), в реактивный нарядный настроек сделан для вас. Без какой-либо установки, вообще, я использовал приложение, которое я сделал в ландшафте, и он выглядел идеально в порядке. Я провел приложение в ряде различных размеров iPhone, и они тоже выглядели хорошо. Поскольку React-Native использует Flexbox (аналогично CSS для HTML), он отзывчивый к размеру экрана, на котором отображается приложение.
Вы можете просмотреть мой код для реакции нативную версию этого приложения в GitHub по этой ссылке: https://github.com/jcalderaio/react-native-honors-app
* Обновление: этот исходный код не работал раньше, из-за обновления до iOS 10. Я исправил проблему, и теперь она должна работать
Данные
Теперь приходит время для ямы приложения друг против друга, чтобы увидеть, какой из них лучше выполняет. Я буду использовать Apple Instruments (инструмент, упакованный в Xcode, IDE Apple) для проверки двух приложений в трех основных категориях: CPU (инструмент «PROFILER TIME»), GPU («Инструмент« Core Animation ») и использование памяти (« распределения » Инструмент”). Apple Instruments позволяет мне подключить свой телефон, выбрать любое приложение на моем телефоне, выберите инструмент измерения, который я хочу использовать, затем начните запись (M, Igor).
В каждом приложении есть 4 вкладка, и каждая вкладка имеет «задачу», которую я буду выполнять, чтобы измерить в каждой категории. Функция первого («профиля» вкладка будет войти через Facebook. В коде представляет собой запрос на график для изображения, электронной почты и имени, который будет возвращен в приложение с сервера Facebook. Задача «Второе (« Список ») приложения будет добавлять и удалить« Детать элемент »из списка. Третий (задача «View Page») – это задача просмотра через 3 экрана просмотра страниц. Задача в Thouth («MAPS») – просто нажмите на вкладку, а код приведет к тому, что GPS увеличивает на карте на мое текущее местоположение и положить синий, излучающий на меня.
Измерения ЦП
Пойдем за каждую категорию:
Профиль: React – Nare выигрывает эту вкладку слегка с 1,86% более эффективным использованием CPU. При выполнении задачи и записи измерений в точке наблюдалось всплеск использования CPU, я нажал кнопку «Войти в Facebook». Чтобы сделать список: React-Nature также едва выигрывает в эту вкладку с 1,53% более эффективным использованием CPU. При выполнении задачи и записи измерений, шипы в использовании ЦП наблюдались в данный момент, я добавил элемент в «Список», и когда я его удалил.
Вид страницы: На этот раз Свифт выбил реагированную реакцию с 8,82% более эффективным использованием процессора. При выполнении задачи и записи измерений, шипы в использовании CPU наблюдались в точке, когда я пронзил на другую страницу на просмотре страницы. После того, как я останавливался на странице, использование ЦП уменьшилось, но если я снова положил страницу, используя процессорное использование CPU.
Карты: Свифт выигрывает эту категорию снова с 13,68% более эффективным использованием ЦП. Выполняя задачу и запись измерений, в точке наблюдалось всплеск в использовании CPU, я нажал вкладку «Карты», которая запросила MapView, чтобы найти мое текущее местоположение и выделите его с синим, пульсирующим точкой. Да, Swift выиграл две вкладки и реагированные – родные выиграли две вкладки, но все более эффективно использовал CPU 17,58% CPU. Результаты, возможно, были отличаться, если я позволил себе больше времени в каждом приложении вместо того, чтобы просто сосредоточиться на одной задаче и остановке. Я заметил, что CPU вообще не использовался при изменении с вкладки на вкладку.
Измерения GPU
Второй набор данных, которые мы будем графическими измерениями GPU. Я выполню одну задачу на вкладку, для каждого SWIFT и реагировать на родных и записывать измерения. Ось Y идет до 60 кадров в секунду. Каждую секунду в течение времени я выполняю задачу вкладки, измерение будет записано инструментом «Core Animation». Я возьму в среднем из них и построю его в следующем графике.
Пойдем за каждую категорию:
Профиль: SWIFT выигрывает эту вкладку слегка, работая на 1,7 кадра/секунды выше, чем реактированная. При выполнении задачи и записи измерений, в точке наблюдался всплеск в кадрах/секундах, когда я нажал кнопку «Войти в Facebook».
Чтобы сделать список: React – родные выигрывает эту категорию, работая на 6,25 кадров в секунду выше, чем SWIFT. Выполняя задачу и запись измерений, в точке наблюдалось всплеск в кадрах/с, которые я добавил элемент в «Список», и когда я его удалил.
Вид страницы: Swift Beat React – родные на этой вкладке, работая на 3,6 кадра/вторые выше. При выполнении задачи и записи измерений я заметил, что рамы/второй выстрелил до высоких 50-х годов, если я быстро пронзил страницы. Как только я останавливался на странице, кадры уменьшались, но если я снова пронзил страницу, кадры снова стреляли.
Карты : React – родные выигрывает эту категорию, потому что она работает 3 кадра/с выше, чем SWIFT. Выполняя задачу и запись измерений, в точке наблюдалось всплеск в кадрах/с.
Еще раз, Swift выигрывает две вкладки и реагирующие, выигрывает две вкладки. Тем не менее, React – родные выигрывают эту категорию в целом на 0,95 кадров/с. Удивительно, насколько сок Facebook смогла выжать из кода реагирования – до сих пор, как будто он держится против родного IOS (SWIFT).
Измерения памяти
Третий набор данных, которые мы будем графическими измерениями памяти. Я выполню одну задачу на вкладку, для каждого SWIFT и реагировать на родных и записывать измерения. Ось Y (память) будет идти максимально моему высшему измерению. Мой интервал образца для использования CPU составляет 1 мс. Каждая MS, в то время как я выполняю задачу, измерение будет записано инструментом «ассигнования». Я возьму среднее и построю его в следующем графике.
Пойдем за каждую категорию:
Профиль: Swift выигрывает эту вкладку слегка, используя 0,02 MIB меньше памяти. При выполнении задачи и записи измерений в точке наблюдалось всплеск в использовании памяти в точке, когда я нажал кнопку «Войти в Facebook».
Чтобы сделать список: React – родные выигрывает эту вкладку, используя 0,83 MIB меньше памяти, чем его Swift Counterpart. При выполнении задачи и записи измерений, шипы в использовании памяти наблюдались в данный момент, я добавил элемент в «Список», и использование памяти уменьшилось, когда я удалял элемент из списка.
Вид страницы: На этой вкладке React-around выбивают SWIFT с помощью 0,04 MIB меньше памяти. При выполнении задачи и записи измерений я не заметил показ памяти при переключении между страницами на странице просмотра. Буквально ничего не изменилось.
Карты: React – родные выигрывают эту категорию огромной маржой, используя колоссы 61,11 миб меньше памяти, чем Swift. Выполняя задачу и запись измерений, в точке наблюдалось всплеск в использовании памяти, когда я нажал вкладку «Карты», которая запросила MAPView, чтобы найти мое текущее местоположение и выделить его с синим, пульсирующим точкой. В обоих приложениях память продолжала увеличить по ходу задачи, но в конечном итоге достигла стазиса.
React – родные выиграли три вкладки, и Свифт выиграл один. В целом, React-Native использовали 61,96 MIB меньше памяти и выиграли категорию памяти. Результаты, возможно, были отличаться, если я позволил себе больше времени в каждом приложении вместо того, чтобы просто сосредоточиться на одной задаче и остановке. Я заметил на вкладке «Карты» (в обоих приложениях), что когда я вырвался из карты или переместил карту вокруг, память использовалась экспоненциально. «Карты», используемые большую часть памяти в каждом случае.
Заключение
Мобильные приложения, которые я сделал для Swift и React – Nature, практически идентичны в их внешнем виде. Как вы можете видеть из данных, которые я собрал через измерение процессора приложения, GPU и памяти во время задач в каждой из четырех вкладок, приложения также практически идентичны в том, как они выполняют. Свифт выиграл в целом в категории процессора, React – Nature выиграл категорию GPU (едва), и React – Nature выиграл большое время в категории памяти. Я могу сделать вывод из этих данных, которые Swift использует ЦП iPhone более эффективно, чем реагировать реагировать, реагирутивные использует графический процессор iPhone немного более эффективно, чем Swift, и что реагирутивные находятся как-то используют память iPhone гораздо более эффективно, чем Свифт делает. React – родные, выигрывая два из трех категорий, наступают в первую очередь, как лучшая платформа для выполнения.
То, что я не учитывал, был родной Android. IOS – моя предпочтительная платформа выбора, так что это то, что я заботился больше всего. Тем не менее, я могу скоро попробовать тот же эксперимент на Android для завершения ради завершения. Мне было бы любопытно посмотреть, какие результаты были, но я был бы готов поспорить, что если реагированные могут избить собственную производительность IOS, чем он может выбить собственную производительность Android.
Сейчас я более убежден, чем когда-либо, находящийся в реактивных рамках будущего – это так много преимуществ и столько немногих недостатков. JavaScript – rac ractious можно записать в JavaScript (язык, настолько многие разработчики уже знают), его кодовая база может быть развернута как на iOS, так и на платформах Android, это быстрее и дешевле для создания приложений, а разработчики могут напрямую нажимать пользователей, чтобы пользователи могли напрямую Не нужно беспокоиться о загрузке обновлений. Лучше всего, только в год, rac raction-arrage уже превзойдет родное outs Swift.
Рекомендации
Абед, Робби. «Hybrid VS родные мобильные приложения – ответ ясен». Y Media Labs, 10 ноября 2016 года, www.ymedialabs.com/hybrid-vs-native-mobile-apps-the-answer- lefle/. Доступ 5 декабря 2016 года.
М, Игорь. «Производительность приложения iOS: инструменты и усилители; за пределами». Medium, 2 февраля 2016 года, Medium.com/@mandrigin/ios-app-performance-instruments-beyend- 48fe7b7cdf2 # .6knqxp1gd. Доступ 4 декабря 2016 года.
«React Nature | Рамки для строительства нативных приложений с использованием реагирования». React Nature, Facebook.github.io/reaCt-Native/release/next/. Доступ 5 дек 2016 года.