Если вы занимаетесь разработкой мобильных приложений, название React Native не должно быть для вас новым. Этот термин уже довольно давно стал популярным в мире технологий. С тех пор, как Facebook официально запустил ее как платформу с открытым исходным кодом, многие компании уже включили ее в свой процесс.
Как и любой другой продукт, React Native имеет свои плюсы и минусы. Несмотря на то, что профессиональные веб-разработчики по-прежнему предпочитают работать с нативными инструментами, есть много начинающих разработчиков, которые рассматривают React Native для своих проектов.
Этот пост направлен на то, чтобы осветить теоретические, а также практические аспекты использования React Native по сравнению со Swift. Для этого сравнения у нас есть два почти идентичных приложения в обоих фреймворках (подробности см. На странице https://github.com/weblab-technology/swift-honors-app
Https://github.com/weblab-technology/react-native-honors-app)
Моя цель состояла в том, чтобы сделать эти приложения как можно более простыми, чтобы было легче проводить справедливое сравнение между важными аспектами обеих платформ. Ниже вы найдете подробный анализ приложений, разработанных как на Swift, так и на React Native, с точки зрения потребления ресурсов ЦП, графического процессора и памяти. Итак, давайте изучим!
Swift против React Native
Итак, это приложение включает в себя вход в Facebook, восстановление профиля Facebook, восстановление базы данных и контроллер панели вкладок. Я кодифицировал подобное приложение в Swift, а также в React Native и буду использовать реальное устройство для оценки производительности этих приложений. Моя цель - уравнять их друг с другом, чтобы определить, какая из платформ работает лучше.
Быстрый
В отличие от других языков, со Swift сравнительно легко работать, особенно если сравнить его с тем, что у нас было раньше с Objective C. Свифт.
React Native
Говоря о React Native, изучение JavaScript сравнительно проще, чем изучение Swift. Лучшее? В отличие от iOS, где вам нужно все настраивать самостоятельно, React Native очень удобен для своих пользователей. Я запускал приложение для iPhone разных размеров и знаете что? Там они выглядели идеально.
Сравнение производительности
Пришло время сопоставить эти приложения друг с другом, чтобы решить, какое из них лучше. Как упоминалось ранее, я буду использовать реальное устройство в сочетании с XCode для тестирования этих приложений. Я сосредоточусь на трех категориях: ЦП, графический процессор и потребление памяти.
Приложение React Native отставало более чем быстро, когда я изменял размер и перетаскивал карту.
Согласно журналу Energy Usage Log, приложение Swift в целом потребляло меньше энергии во время того же тестирования, чем приложение React Native.
Всего в моем приложении 4 вкладки - вход в Facebook, список дел, контроллер просмотра страниц и карты.
Измерения ЦП
Swift vs React Native - загрузка ЦП
Давайте рассмотрим каждую категорию индивидуально…
- Профиль Facebook
С разницей в 1,21% в измерении ЦП React Native немного эффективнее Swift с точки зрения использования ЦП.
2. Список дел
Для второй вкладки снова выигрывает React Native с эффективностью 0,66%. Во время выполнения задачи всплески потребления ЦП регистрировались в тот момент, когда я добавлял / удалял элемент в / из списка.
3. Просмотр страницы
Swift - явный победитель в этой вкладке с эффективностью на 5,55% выше, чем React Native. Выполняя эту задачу и записывая измерения, были зафиксированы всплески потребления ЦП в то время, когда я перешел на другую страницу в просмотре страницы.
4. Карты
Благодаря более эффективному использованию ЦП на 9,7% Swift снова побеждает в этой категории. Примечательно, что при выполнении этой задачи всплеск потребления ЦП был зафиксирован именно в тот момент, когда я нажимал кнопку «Карты».
Итак, у нас есть 50–50 результатов для Swift и React Native. В целом Swift был немного эффективнее React Native с точки зрения использования ЦП. Результаты могли быть иными, если бы я дал себе достаточно времени, чтобы протестировать каждое приложение. Интересно, что при переходе от вкладки к вкладке процессор ни разу не использовался.
Использование графического процессора
Итак, следующий анализ, который мы проведем, будет касаться измерений графического процессора. Я сделаю по одной задаче для каждой кнопки для каждой парадигмы и запишу результаты. Вертикальная ось идет до 60 кадров в секунду, и я буду использовать инструмент «Базовая анимация» для оценки результатов.
Давайте пройдемся по каждой категории, чтобы проверить результаты
- Профиль Facebook
С разницей в измерениях 1,08 кадра / с Swift незначительно выигрывает на этой вкладке. Результаты наблюдались именно тогда, когда я нажал на вкладку «Войти через Facebook».
2. Список дел
React Native едва ли выигрывает на этой вкладке, работая на 6 кадров в секунду выше, чем Swift. Измерения наблюдались именно в момент добавления / удаления элементов в / из списка.
3. Просмотр страницы
Swift превосходит React Native с 1,37% кадров в секунду для вкладки просмотра страницы. Выполняя задание и записывая измерения, я заметил, что количество кадров в секунду увеличилось до 50, когда я пытаюсь быстро перемещаться по страницам.
4. Карты
Swift здесь победитель, поскольку он работает на 3,6 кадра в секунду выше, чем React Native. Измерения были записаны в то время, когда я нажал кнопку «Карты».
С результатом 3–1, Swift здесь явно победитель.
Использование памяти
Пришло время сравнить Swift и React Native с точки зрения измерения памяти. Я выполнил отдельную задачу для каждой вкладки и построил график с объемом памяти (MiB) по оси ординат. Интервал выборки для использования ЦП составляет 1 мс.
- Профиль Facebook
Swift - победитель в этой категории с меньшим потреблением памяти на 0,07% MiB. Всплеск памяти был зафиксирован в тот момент, когда я нажал кнопку «Войти в Facebook».
2. Список дел
React Native превосходит Swift в этой категории с уменьшением использования памяти на 0,35%. Всплески потребления памяти были зафиксированы в то время, когда я включал элемент в список. Когда я удалил элемент из списка, произошло снижение использования памяти.
3. Просмотр страницы
React Native снова превосходит Swift на этот раз, показывая на 0,07% меньше использования памяти. При переключении между страницами всплесков памяти не наблюдалось.
4. Карты
React Native снова стал победителем, обогнав Swift с массивным использованием памяти 36,02 для этой категории. При выполнении этой задачи всплеск памяти был зафиксирован именно в тот момент, когда я нажал кнопку «Карты».
Я бы сказал здесь, что даже если Swift в среднем использует больше памяти, что верно, память будет управляться лучше, когда приложение будет расти. Вдобавок к этому результаты могли бы быть совершенно разными, если бы я уделял себе достаточно времени в каждом приложении, а не просто концентрировался на одной задаче за раз.
Моя предпочтительная платформа
Что ж, приложения, которые я разработал для React Native и Swift, почти похожи по своему физическому представлению. Более того, совершенно очевидно, что оба эти приложения в некоторой степени работают идентичным образом. Из этого эксперимента я могу сделать вывод, что, хотя React Native лучше работает в категории памяти, Swift довольно эффективно использует CPU и GPU iPhone. В заключение можно сказать, что React Native довольно близок к Swift, и это здорово. Однако с соотношением выигрышей 2–1 и высоким потенциалом памяти Swift здесь явный победитель.
Что делает React Native таким популярным?
Популярность этого фреймворка меня совсем не удивляет, поскольку он обещает создавать приложения для разных платформ одновременно. Да, вы все правильно поняли. Поскольку React Native зависит исключительно от JavaScript, вам не нужно разбираться в других нативных языках, чтобы создавать приложения для iOS и Android отдельно. Большой! Не правда ли? Но тут возникает вопрос, подходит ли этот мобильный фреймворк для любых проектов? Ну конечно нет. Перед принятием окончательного решения необходимо учесть множество факторов: ваш текущий уровень владения кодом, масштаб вашего приложения и продолжительность вашего проекта - вот вопросы, на которые необходимо ответить, прежде чем сделать выбор.
React Native - плюсы и минусы
Плюсы:
Общее основное преимущество
Говоря о веб-приложениях, React удается установить парадигму React вместе с обновлением DOM браузера. Однако когда дело доходит до мобильных приложений, требования становятся более сложными, когда неизбежно управление несколькими древовидными моделями на разных платформах. Что ж, если вы продолжите добавлять все больше и больше ответственности на плечи React, вы не можете ожидать ничего, кроме катастрофы в конце.
Комплексная платформа
Если мы более подробно рассмотрим формальное определение React, это, по сути, библиотека JavaScript для создания пользовательских интерфейсов. Хорошо, он отлично подходит для создания пользовательского интерфейса, но в то же время не включает ничего другого.
Вы когда-нибудь думали о приготовлении целого рецепта из одного ингредиента? Точно так же невозможно создать целое приложение, используя только React. Определенно, вам понадобится веб-пакет для разработки кода, CSS для стилизации, Firebase для обслуживания данных и многое другое.
Что ж, если ваша сфера деятельности ограничивается только веб-разработкой, одного React может быть достаточно для достижения цели. Однако, если вы также занимаетесь проектированием мобильных приложений, становится несущественным добавлять полный набор инструментов, которые можно использовать для работы аналогично React. Вот почему React - это библиотека, а React Native - это фреймворк.
Что предлагает React Native?
- Новый React
- Авторы для Android и iOS
- Flexbox для стилизации пользовательского интерфейса
- Различные виджеты и анимации
- И многое другое
Таким образом, React Native - это исчерпывающая платформа, поскольку она включает в себя все, что вам нужно для создания полнофункционального приложения. В то время как исходный React заботится только о веб-интерфейсе, и вам потребуется добавить другие соответствующие части самостоятельно, чтобы создать полноценное веб-приложение.
Собственный интерфейс
Вы когда-нибудь задумывались, почему React Native называется «Native»? Это потому, что пользовательский интерфейс, созданный с помощью React Native, состоит из собственных виджетов, которые не только работают безупречно, но и кажутся последовательными.
Такие вещи, как ускорение прокрутки, анимация и поведение клавиатуры так сильно улучшают взаимодействие с пользователем, что вы не можете рискнуть избежать их. Именно здесь приложения React Native превосходят настоящие нативные приложения, поскольку позволяют создавать действительно нативные приложения, поддерживающие парадигму React в JavaScript.
Интегрированные компоненты
React Native предлагает ряд интегрированных компонентов, которые позволяют разработчикам быстро и эффективно выполнять основные задачи. Некоторые из них включают:
- Текст: используется для отображения текста.
- Представление: используется для разработки пользовательского интерфейса.
- Ввод текста: позволяет пользователям вводить текст
- Кнопка
Например, вы можете создать базовую кнопку в Native base, используя следующий исходный код.
Минусы:
Ограничение API
Хотя React Native поддерживает огромное количество API-интерфейсов, по-прежнему существует требование использовать другие API-интерфейсы через собственные модули. Эти модули в основном представляют собой сегменты кодов, написанных на родном языке и затем включенных в оставшийся код. Несомненно, это отличный способ решить проблему, но для этого необходимо, чтобы вы владели родным языком и его инструментами в достаточной степени.
Сложный дизайн
Android и iOS используют разные рекомендации по дизайну, что, по-видимому, означает, что при использовании React Native вы должны включать множество операторов if вместе с отдельным кодом, чтобы противостоять размещению графических элементов. В дополнение к этому создание высококачественного пользовательского интерфейса также утомительно в парадигме React, и я был вынужден писать и включать быстрые библиотеки при разработке этого приложения.
Более низкая производительность
Для меня это самая большая неудача. Если вы планируете разработать сложное приложение, такое как редактор изображений / видео, React Native вам не подойдет. Однако, если ваш проект относительно невелик, вы можете сэкономить время, поделившись частями своего кода (да, только частями! Код нельзя полностью повторно использовать, и вы можете использовать только 60% кода для Android. Однако он лучше работает с iOS ….)
Нативный - плюсы и минусы
Плюсы:
Нет ограничений API
Что делает native действительно функциональным, так это то, что вы можете получить доступ ко всем API через родную среду. Вам также не требуется дополнительное сопоставление слоев, которое необходимо обновлять.
Разнообразие ресурсов на выбор
Разработка в нативной среде дает вам возможность получить доступ к большому количеству сторонних библиотек. Это поможет вам создавать более функциональные приложения с улучшенным опытом разработки.
Долгосрочные выгоды
При работе с парадигмой React всегда присутствует фактор неопределенности. С другой стороны, Real Native - самый безопасный выбор для разработчиков в долгосрочной перспективе.
Минусы:
Требование разработки двух отдельных приложений
Специфика платформы, безусловно, является самым большим недостатком нативной платформы. Вам необходимо разработать отдельные коды для Android и iOS, и они не могут использовать общий код.
Сравнение React Native с настоящими нативными приложениями
Как создать приложение React Native
Независимо от того, создаете ли вы приложение для iOS или Android, вам нужно иметь представление о трех важных вещах.
- Предпочтительный язык программирования
- Подходящие инструменты
- Интерфейс прикладного программирования (API)
Что касается языка программирования для React Native, вам потребуется JavaScript или немного необычный вариант JavaScript под названием JSX. К счастью, вам не понадобится сложный набор инструментов, поскольку в основном текстовый редактор и отладчик Chrome достаточно для создания и тестирования приложений. Однако часть API немного сложна. Конечно, у вас не может быть подхода React Native для всего.
Хотя вы можете начать работу без какого-либо веб-контакта, вам все равно могут потребоваться некоторые знания веб-разработки, чтобы создавать идеальные приложения React Native. (Как насчет того, чтобы потратить деньги на профессиональные курсы JavaScript, HTML и CSS, чтобы отточить свои навыки?)
Создание собственного приложения для Android / iOS
Objective-C и Swift - необходимые языки для создания собственного приложения в iOS. Однако для Android вам необходимо овладеть Java. Что касается инструментов, вам потребуется использовать IDE отдельной платформы, а также понять, как эта IDE и соответствующий отладчик могут помочь вам построить систему.
Хотя веб-разработка составляет основу React Native, в разработке для Android или iOS нет конкретной системы отсчета. Не забывайте, что это настоящие собственные платформы, и вы должны знать предварительные условия, связанные с этими платформами.
С другой стороны, фреймворки тоже не исключение. Вам необходимо знать, как все можно сделать программно. Короче говоря, вам нужно быть настоящим программистом, чтобы работать с нативной средой для создания приложений.
Кому легче научиться?
Несомненно, JavaScript намного проще в изучении и отладке по сравнению со Swift, Objective-C и Java. Но имейте в виду, что за простоту приходится платить. Поскольку JavaScript - в некоторой степени простой язык, всегда есть риск ошибок внутри вашего кода.
С другой стороны, все другие языки имеют концепцию анализа времени компиляции, которая устраняет многие возможные ошибки.
Swift, безусловно, довольно современный, но оба других языка продолжают улучшаться и на самом деле не имеют недостатков с точки зрения производительности и функциональности. Однако в JavaScript есть различные недостатки, которые могут быть причиной непоследовательности и несовершенства (сделайте Google своим лучшим другом, а все остальное вы узнаете).
Таким образом, React Native может быть проще в освоении, но он связан с проблемами JavaScript. Более того, как и в любой другой кроссплатформенной парадигме, вам нужно справиться с парадоксом «напиши один раз, разверни повсюду».
Реагировать на нативные и настоящие нативные приложения - заключение
Большой! До сих пор мы рассмотрели довольно много важных вещей. Выбор React Native вместо Swift зависит от ваших личных предпочтений и требований. Я бы сказал, что если ваше приложение не является сложным и не требует включения сравнительно новейших функций, таких как сложная анимация или iMessage, вам следует изначально выбрать React Native.
И даже если ваши требования сложны, но вы являетесь экспертом по iOS или Android, а также имеете некоторый опыт веб-разработки, React Native может сделать хороший выбор, поскольку вы, возможно, исправите все, что вам нужно.
Однако, если вы только начинаете заниматься разработкой, я бы порекомендовал запустить ее на единой платформе, используя ее родной язык вначале. Понаблюдайте, как это работает. Затем подойдите к другим платформам.
Вы действительно думаете, что React Native - это будущее разработки гибридных приложений? Какая платформа, по вашему мнению, более практична? Пожалуйста, оставьте свой отзыв в разделе комментариев ниже, и давайте обсудим!
Александр Кныга, инженер-программист
Шармин Хаят, автор и специалист по данным
с помощью Андрея Горобца, Front-end разработчика
✉️ Подпишитесь на рассылку еженедельно Email Blast 🐦 Подпишитесь на Codeburst на Twitter и 🕸️ Изучите полную веб-разработку .
