Цель данной статьи показать большинство концептуальных различий между Ionic и React Native(RN). Это, мы надеемся, даст вам необходимую информацию, для того, чтобы сделать осознанный выбор в стеке технологий наиболее подходящих для вашего проекта.
Гибридные и нативные приложения
Перед погружением в сравнение Ionic и RN, давайте кратко напомним себе что такое гибридные и нативные приложения. Гибрридные приложения это по сути вебсайты встроенный в мобильное приложение, через так называемые webview. Они создаются с использованием HTML, CSS, и JavaScript, и выполняют один и тот же код, независимо от платформы на которой они работают. Также, при помощи таких фреймворков как: PhoneGap и Crodova, использовать нативные функции устройств, таких как камера или GPS.
Нативные приложения создаются на языке необходимом для платформы назначения. Objective-C или Swift для iOS, Java для Android и т.д. написанный код не будет кроссплатформенным и для разных платформ разный. эти приложения имеют прямой доступ ко всем функциям устройства, которые прелдлагает соотвествующая платформа без каких либо ограничений.
Кликните на изображение, чтобы увидеть инфографику по различиям нативных и гибридных приложений. Нажмите сюда чтобы получить детальную информацию о различии между гибридными и нативными приложении.
Нативные или гибридные?
Ionic
Ionic это типичный гибридный фреймворк. Он использует веб технологии для написания и отображения приложения, и требует PhoneGap/Cordova мостика для доступа к нативным функциям приложения. Тогда он пробует повторить нативное поведение платформы, для наилучшего взаимодействия с пользователем данной OS.
Что насчет Ionic Native? - спросите вы. Не заблуждайтесь делая вывод по имени. Iconic Native это новое название, для того, что раньше называлось ngCrodova. Это просто новый Ionic способ, использовать существующие Cordova и Phonegap плагины. Ionic Native не делает ваше приложение нативным.
React Native
Программирование React Native это преимущественно JavaScript, что означает что большая часть кода, которая вам нужна может быть использовано кроссплатформенно. Однако, там где гибридные приложения отображают интерфейс используя HTML и CSS, RN, будет использовать для рендера нативные компоненты. это означает, что пользовательский интерфейс будет ближе к другим приложениям платформы, которые используют определенные шаблоны заданные самой платформой. Часто это еще дает лучшую производительность и более гладкую анимацию.
Проблема в том, что это работает только когда нужный компонент уже написан для RN. Со старта, RN предлагает приличный набор компонентов, но если вы программист нативных приложений, не надейтесь найти все необходимые вам компоненты.
Вердикт
Приложение написанное на RN, будет нативным, родным, но требует связующие компоненты, написанные для каждой платформы в которых оно будет использовано. И делает его ближе к гибридным приложениям.
Пишешь однажды, работает везде
Ionic
В типичном гибридном приложеним один и тот же код, будет работать везде, несмотря на платформу, и это то, что Ionic способен делать. Однако, для того, чтобы чувствовать себя более "родным"(нативным), Ionic будет адаптировать некоторые свои функции под платформу. Если вы используете табы, они будут отображены только так, как рекомендует платформа - внизу экрана для iOS, и вверху для Android.
React Native
Цель RN это не возможность "написал один раз, работает везде". Скорее, RN дает разработчикам использовать компоненты, которые наиболее хорошо подходят используемую платформу. Для примера, Андроид имеет более кастомизируемые тулбар; iOS нет. Вы можите используете тулбар для Android, но вам придется использовать что-то другое для iOS. Не волнуйтесь, множество компонентов имеют эквиваленты; и если они не эквиваленты, то можно достаточно легко отделить часть логики для отдельной платформы.
Вердикт
С Ionic, вам определенно не придеться беспокоится насчет платформо-зависимого поведения. Но с RN, вы можете предложить более привычный интерфейс для пользователей определенной платформы.
Стек языков
Ionic
Ionic - это фреймворк основанный на Angular, JavaScript фреймворке. Он использует HTML шаблоны для вида. В соответствии с паттерном MVC, вид и логика максимально разделены.
React Native
React Native базируется на JavaScript фреймворке React и и таким образом использует JavaScript который манипулирует HTML шаблонами, однако эти шаблоны вшиты в сам JS и он больше JS чем HTML. Ему даже дали определение JSX. Поэтому, логика приложения, тесно переплетена с отображением. Но в конечном счете, это не проблема и большинство разработчиков будут чувствовать себя весьма комфортно с JSX. Но, если вы работаете в команде с дизайнерами, сотрудничать с ними, будет не также просто как при работе с HTML+CSS. Это не значит, что изучение JSX займет много времени, однако надо понимать что JSX это не HTML. Его снитаксис немного отличен от обычного HTML и набор CSS правил несколько ограничен.
Вердикт
С Ionic вы будете в своей тарелке: классический HTML и CSS. С React Native вам придется изучить как стилизовать и создавать ваш интерфейс HTML подобными компонентами. Это не сложно, но это что-то новое.
Рис. 1: Кусок React JSX кода слева, Ionic 2 шаблон справа.
Тестировании в процессе разработки
Ionic
Когда создается приложение, очень важно сразу получать результат его работы. Очень плохо, когда вы ждете пока прилоежение пересоберется, чтобы посмотреть что лучше 2 пиксела или 3 в отступе слева. С Ionic в можете немедленно увидеть превью вашего приложение прямо в браузере и мобильном устройстве. Оно будет напрямую обновлено как только вы измените что-либо в вашем приложении.
React Native
Забудьте о тестировании в вашем браузере, RN делает собственный рендеринг. Это не проблема, с React native в видите результат ваших модификаций как только сделаете их. Не нужно делать перекомпиляцию, персборку и т.д. Результат мгновенно отображается в эмуляторе или реальном устройстве. Невероятно классно!
Вердикт
Обе технологии великолепны - но немного разные. Вы хотите немедленный результат; Вы получаете его.
С чем еще идут эти технологии
Ionic
Работая с Ionic, это немного похоже на работу с CSS фреймворками тиа Bootstrap. Он идет со множеством уже созданных и уже стилизованных компонентов. Вы хотите отобразить список элементов и для каждого вам нужен аватар, небольшое описание и дата? Готово, есть специальный компонент для этого.
React Native
React Native полагается на нативное компоненты, он обычно не пробует повторить их поведение. Стилизацую вы можете сделать сами. Большую часть времени, только компоненты которые уже существуют в целефой платформе и доступны, и редко не нативные. Тем не менее, если вы захотите написать "правильный" нативный компонент и использовать его в вашем приложении, то вы можете сделать это с React Native.
Вердикт
Ionic дает вам полный старт с самого начала, весь нужный стек технологий и компонентов. Не беспокойтесь о стилизации, добавьте несколько классов и это будет работать.
Плагины и сообщество
Когда я выбирал Open Source проект для использования, я нашел важным наличие яркого комьюнити вокруг него. Это напрямую влияет на то, как просто вы можете найти информацию в сети, ответы на вопросы и получить исправление ошибок.
Ionic
PhoneGap и Cordova существовует гораздо ранее и высок шанс того, что нужный вам плагин уже существует и вы сможете применить нативный компонент в вашем WebView.
React Native
Большое количтество плагинов уже существуют на NPM для React Native. Там есть даже плагины использующие Phone/Gap плагины, что значит, что вы сразу же наследуете возможность использовать сотни плаинов из других сообществ.
Вердикт
На сегодняшний день, React Native имеет больше звезд на GitHub чем Ionic, около 36000 против 25000, соотвественно. Хотя, Ionic имет большее число вопросов на StackOverFlow чем React Native. Обе технологии также наследуют сообщества базирующиеся на Angular и React. Поэтому, мы можем спокойно сказать что они обе имеют очень большое и развивающееся сообщество.
Поддерживаемые платформы
И Ionic и React Native поддерживают Android и iOS. И бонусом, Windows Universal Platform, официально поддерживается начиная с версии Ionic 2, и на данный момент эта платформа поддерживается как отдельный плагин для React Native.
React Native против Ionic: Какой лучше?
Я не могу сказать вам какая технология лучше. Я твердо верю что это определяется множеством факторов: вами, вашим проектом, требованиями пользователей, опытом вашей команды, и т.п. Они обы делают разные вещи, и оба делают этого хорошо. Это как сравнивать XBox и PlayStation, MacOS и Windows, машину и мотоцикл. Ни один не лучше чем другой.
Тем не менее, я могу сказать вам, какую технологию предпочитаю я. Это React Native. Я больше ценю втроенный рендер, нежели все остальное. Для меня, приложение должно быть очень быстрым и адаптивным, и в react Native я нашел хороший компромисс, между написанием чистых нативных приложений и чистыми гибридными приложениями.
Сейчас, мой лучший совет для вас, это попробовать их обе, выбрать одну и сделать что-то крутой на ней.
PS Если вам интересно сравнение кода, я написал очень просто todo приложение для обеих технологий Ionic и React Native на GitHub
Комментарии