React Native vs Ionic: выбираем кросс-платформенный фреймворк

Что такое React Native
Что такое Ionic
Плюсы React Native
Плюсы Ionic
Сравнение фреймворков и результат

Что лучше, RN или Ionic? Не все так просто. Начнем с RN.

Короткое введение в React Native

Итак, давай посмотрим, что собой представляет этот фреймворк.

Это платформа с открытыми исходниками, что важно, созданная одной из мейнстримных мировых ИТ-корпораций – компанией “Фейсбук Инкорпорейтед”. Применение платформы (далее коротко называемой RN) – разработка мобильных приложений. Приложения могут быть следующих типов: под обычный Android, Android TV, iOS, MacOS, tvOS, веб-приложения, UWP, и конечно Windows. В целом, это фреймворк, позволяющий собирать очень “разнонаправленные” приложения, орудуя наверное самым универсальным языком программирования в 2021 году – могучим JavaScript.

Поскольку RN стоит на тех же фундаментах что “обычный” React, он позволяет строить приятные глазу интерфейсы при помощи так называемых “декларативных компонентов”, применяя одинакове базовые интерфейсные компоненты, что для iOS, что для Android. Конечный результат (если все собралось корректно), практически неотличим от нативных приложений на Java или Objective C / Swift.

Давай посмотрим внимательнее на “плюсы” RN, пока удерживаясь от сравнений с Ionic.

React Native экономит время (а время это деньги)

Преимущество RN, на которое прежде всего обращается внимание, это полная кроссплатформенность кода, то есть максимальная совместимость между всеми операционками, но главнее всего, разумеется, между монополистами: iOS и Android. С практической точки зрения, это позволяет экономить время и деньги, не переписывая каждое приложение под другую операционку. RN – это неплохая оптимизация по части продуктивности, и регулярное обновление продукта. На другой платформе это делать в разы тяжелее.

Приложения на RN обычно быстрые

Причина, почему они работают быстрее, состоит в том, что JS на платформе хорошо оптимизирован в расчете на мобильные процессоры. Помимо этого, приложения оптимизированы под мобильную графическую подсистему, а часто основной упор в обработке графики в смартфоне ложится именно на графический подпроцессор. Грамотное сочетание указанных оптимизаций позволяет приложениям на React Native работать быстрее, чем приложениям написанным на любой другой гибридной кросс-платформе. Дабы не быть голословными: здесь можешь почитать подробнее о производительности RN.

Очень плавная “кривая обучения” – ведь ты уже знаешь React, да?

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

Код RN: легко переносимый и копируемый

Если RN не понравился, не лежит душа к RN, или назрело время переходить на другой проект, или на другой фреймворк, то совершенно нет проблем. Код, начатый в React Native, очень легко переносится и копируется. Эта гибкость и продуктивность сама по себе огромный плюс, даже если бы не было ничего другого.

Код очень легко корректировать, делая это параллельно

Этот фреймворк имеет фичу, весьма полезную – live reloading, или в других версиях hot reloading. Это отображение вносимых в код изменений в отдельном окне, в реальном времени. Таким образом, RN имеет средство фидбека в реальном времени, и это экстремально полезное средство быстрой разработки.

Давай же теперь посмотрим на минусы RN, которые платформа, безусловно, имеет тоже. Воздерживаясь от сравнений с Ionic – это в конце.

React Native все еще бета!

Это значит, что, работая во многих компаниях из первой десятки мирового ИТ, React Native все еще имеет некоторое количество проблем, в основном с совместимостью пакетов, или в системе отладки. Поэтому, разобраться в этих багах и привыкнуть к ним, научиться их обходить – бывает все еще сложно для разработчиков, особенно незнакомых с React, у них это заберет довольно много времени.

В RN мало кастомных модулей

В принципе, большинство самых популярных и применяемых модулей давно готовы и активно применяются, однако все еще не хватает некоторых хороших и знакомых разработчикам модулей, нужных для важнейших задач. Или, их можно найти где-то, но они в неподобающем качестве, потому что недоделанные, и работать “как надо” все еще не могут. К счастью, “резко недостающих” кастомных модулей не так уж много.

В общем, мы поговорили о плюсах и минусах React Native, идем дальше и поговорим об Ionic.

Кратко об Ionic

Итак, что собой представляет Ionic? Простой ответ: открытая платформа кросс-платформенной мобильной разработки, стартовала в 2013. Основное назначение, как уже сказано, гибридные мобильные приложения. Важно уточнить, на Ionic к этому времени написано более 5 миллионов приложений!

Надо еще добавить, что Ionic работает на Node Package Manager, это его как бы “сердце”, поэтому для его полной, корректной работы нужно доставить Node.js. В целом, Ionic – это часть “большой экосистемы” JavaScript; Ionic может загружать и задействовать библиотеки нативных iOS и Android компонентов. Да, Ionic дает разработчику настроенные под платформу UI-компоненты.

Теперь коснемся минусов Ionic, также воздерживаясь от сравнений с RN.

Ionic не хватает производительности, когда нужны реально мощные приложения

Причина этого заключается в применении пресловутого WebView для рендеринга. Поэтому любые “тяжелые” приложения (вроде Snapchat, в котором есть “дополненная реальность”) и приложения с “намеком на нативность” – могут катастрофически тормозить. В этом фреймворке все “рендерится” в браузере, то есть все графические элементы проходят через WebView, а ведь даже для запуска WebView нужно какое-то время. Далее идет загрузка и отображение контента, и чем больше этого контента, тем медленнее загрузка. Это не считая обратных вызовов (callbacks) в Cordova и CSS-анимаций.

Вместе с тем, со стандартнейшими, простейшими приложениями Ionic управляется вполне себе хорошо. Поэтому если твоему приложению не нужны “тяжелые” компоненты, навороченная графика, то ты с этими проблемами не столкнешься.

Ionic это SDK, зависящий от плагинов

Как уже говорилось, Ionic это часть JavaScript-экосистемы. Это значит, чтобы иметь полную функциональность, ему нужны загруженные плагины, в первую очередь Cordova и Capacitor. Все необходимые плагины давно написаны и выложены в репозиториях, и их много. Есть разработчики, которые не довольствуются имеющимися плагинами, а пишут собственные, возможно и ты когда-то придешь к этой необходимости. Ionic не способен имплементировать нативные плагины, не трансформируя их в JavaScript. Естественно, не может быть “нативной быстроты и свежести” в коде Ionic.

Ionic не имеет никакого “hot reloading”

Хотя эта функция считается уже, в принципе, стандартной в современной разработке, Ionic ею не обладает, что печально. Имплементировать изменения в коде – требует времени, надо обновить вообще все, чтобы поглядеть на внесенные в код правки. Хотя это, может быть, кажется не столь важным, все же замедляет командную работу.

Ionic, возможно, не самая защищенная система

Этот минус, может быть, и не так важен как другие нюансы, но надо его учитывать. Начиная с 4-й версии, Ionic не имеет встроенных обсфукаторов кода; таким образом, самые злостные хакеры на свете смогут легко прочитать твой божественный код. Но эта проблема не так страшна, если твое приложение закрыто от реверс-инжиниринга другим путем, или если ты применяешь Angular CLI, или старую версию Ionic.

Ionic огромен

Этот SDK позволяет писать “приложухи” на HTML, CSS и JavaScript, и это хорошо. Но это значит, что код будет очень объемный, что будут подтягиваться всяческие дополнительные библиотеки, плагины и зависимости, и прочие прелести. Это делает приложения намного больше, чем они были бы нативными. Впрочем, как и всегда, если ты применишь свой ум и опыт, если оптимизируешь приложение, удалишь некоторые необязательные библиотеки, стили, шрифты, рисунки, то приложение будет ощутимо скромнее по размеру.

Далее коротко о плюсах.

Ionic обладает огромным количеством плагинов и интеграций

Всегда есть возможность встроить дополнительные инструменты в Ionic, если видишь, что чего-то не хватает. Если интересно, что там есть и по какому поводу – смотришь на список плагинов на сайте. Скачать их можно даже и там. Однако, надо учесть, что некоторые плагины “видны” только из Enterprise-версии Ionic, и что есть хорошие платные плагины и тулзы в Premier-версии. С другой стороны, есть список Cordova-плагинов, которые доступны, легко встраиваемые, и удобно отсортированные (вот здесь). Или же, если нравится Capacitor и не нравится Cordova, или если плагин упорно не находится, то Capacitor поможет, только вся процедура будет дольше.

Ionic – единая codebase на всех платформах

Angular, Apache Cordova, и связка HTML+CSS+JS – это то на чем стоит Ionic. Поэтому он позволяет писать гибридные “приложухи” даже начинающему разработчику, не контактируя с “нативными” разработчиками. Все люди в индустрии имеют базовое понятие об HTML+CSS+JS, многие также об Angular, поэтому делать приложения, вполне рабочие, на Ionic очень быстро, и очень просто. Разумеется, стоимость разработки и поддержки кода от этого низкая. И этом плюсы единой codebase не исчерпываются. Этот подход ускоряет путь продукта на рынок и на iOS и на Android, упрощает поддержку – даже имеющимися в браузере встроенными инструментами, и улучшает возможности “пересборки” приложения под изменившиеся нужды. В общем, дешевле и проще писать код на единой codebase в Ionic, в сравнении с нативной разработкой, за этом и любят Ionic разработчики.

Кривая обучения плавная

JavaScript, как известно, самый популярный язык, широко применяемый уже наверное во всех сферах ИТ. Ionic очень просто освоить знающим JS. Нанять аутсорсеров на проект в Ionic тоже очень просто, и количество кандидатов всегда очень большое. Вместе с тем, все-таки “нативный” разработчик-аутсорсер как-то “правильнее”, и не помешает в команде, так как Ionic не компилирует все приложение в нативный код, а компилирует только UI-компоненты, задействуя плагины Cordova или Capacitor для всего прочего.

В Ionic много UI-компонентов и тулзов для прототипирования

Создатели Ionic добились многого, пытаясь изобразить “нативно выглядящие” UI-компоненты. Они действительно имеют вид и поведение, практически неотличимые от нативных. Библиотека этих UI-компонентов полна готовыми элементами интерфейса, к тому же с большим простором для кастомизации. Когда добавляешь веб-компоненты в этот (почти) чудесный набор, получаешь на выходе быстрый процесс разработки, и все компоненты неотличимы от нативных, не тормозят, и все это по факту дешевле, чем нативная разработка.

Итак, мы закончили отдельное сравнение платформ. Далее рассмотрим, где какая платформа выигрывает и в чем.

Преимущества React Native над Ionic

Здесь мы обсудим сферы, в которых RN превосходит Ionic, и объясним, почему.

Набор языков

Ionic использует следующий стандартный набор: HTML5, CSS, JS. Также нужна Cordova, для получения доступа к нативным возможностям.

React Native, со своей стороны, работает на JavaScript и позволяет разработчикам писать компоненты на Swift, Objective-C, и конечно Java, если это нужно. Доступ к нативным модулям и библиотекам приложениям RN нужен, чтобы работать, например, с видео или изображениями.

Таким образом, напротив React Native надо поставить “+”, что касается более широкой функциональности – лучшей расширяемости нативными языками.

Быстродействие

Когда мы говорили о “минусах” Ionic, то уже касались самого важного – низкой продуктивности, которая идет от устаревшей концепции рендеринга через WebView. React Native таким не страдает, и похож на нативные фреймворки по продуктивности, так как рендерит все элементы кода через нативные API. RN дает “включать” нативные модули, чем, разумеется, выигрывает кратно, у Ionic.

Хотя Ionic имеет тот явный плюс, что тестирование и дебаг можно проводить прямо в браузере, в целом быстродействие “приложух” на Ionic ощутимо меньше, какие бы оптимизации не проводились, из-за коренного недостатка – веб-технологии WebView в “фундаменте” платформы.

Таким образом, если сравнивать “голую” продуктивность – React Native выигрывает вчистую.

Интерфейс

Пословица говорит: “Встречают по одежке, провожают по уму”. Быть может, не все так буквально, но тут это работает. Интерфейс приложения должен быть приятным глазу, еще лучше – буквально ублажать глаз. Потому что пользователь начинает исподволь оценивать твое приложение, даже когда не запустил его, а лишь смотрит на иконку.

Ionic плох по сравнению с React Native в этом отношении, потому что не имеет нативных компонентов вообще, а просто рендерит все в HTML+CSS, после чего “полирует” полученное в Cordova, на выходе получая нечто похожее на нативность. Похожим образом работают и компоненты Angular.

Теперь глядим на React Native, здесь есть модули, привязанные к нативным UI-контроллерам. Это делает их такими же удобными (для пользователя), как нативные. Кроме того, RN задействует библиотеку ReactJS. Это немного упрощает разработку интерфейсов.

Итак, если смотреть на GUI, React Native выигрывает.

Маркетинг и комьюнити

Хотя это покажется странным, маркетинг тоже имеет значение в нашем сравнении. И здесь React Native тоже выигрывает у Ionic. Но, если честнее, React Native возможно выиграет у любой (!) платформы, с точки зрения узнаваемости разработчиками и поддержке комьюнити. Ionic дает разработчикам возможность делать “похожие на нативные” приложения быстрее любых конкурентов и имеет сильную поддержку комьюнити, а также хорошую узнаваемость и популярность у разработчиков. React Native силен, когда идет речь о проектах с привлечением React-библиотек и JS.

Итак, React Native здесь тоже выигрывает.

Доступ к нативным функциям

Этот момент очень важен, поскольку мы говорим о современной ситуации на рынке мобильных приложений, в которых доступ к нативным функциям может быть важен критически – взять хотя бы камеру или GPS. И если фреймворк дает этот доступ к “нативке” быстро и удобно для разработчика – то он автоматически хороший.

Таким образом, можем уже объявить React Native победителем, так как он имеет огромный набор сторонних пакетов и встроенных API для обращения к “нативке”. Хотя, чрезмерная опора на эти сторонние пакеты может рассматриваться как уязвимость, в целом их количество само по себе перевешивает, прямо скажем, не очень высокое усредненное качество этих пакетов.

Ionic, со своей стороны, “стоит” на Cordova и/или Capacitor, что касается “нативки”. Там тоже много пакетов, и их продуктивность в принципе неплохая, особенно что касается, скажем, камеры (видимо этот аспект по особому оптимизирован). А в целом производительность явно хуже, чем в RN.

Недостатки React Native по сравнению с Ionic

Теперь поговорим о том, c какой точки зрения Ionic лучше чем RN, есть и такие ракурсы.

Мультифункциональность

Когда идет речь о том, что называется “реюзабельностью кода”, Ionic безусловно лучше. Сама концепция “запакованных веб-приложений” предполагает эту “реюзабельность”. Плюс к этому, библиотека адаптируемых компонентов, которые автоматически “приспосабливаются” к платформе где приложение запускается.

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

Поэтому здесь React Native проигрывает Ionic.

Библиотеки шаблонов

RN имеет неплохой набор встроенных компонентов, но время на их, так сказать, “стилизацию под платформу” тоже чего-то стоит. Как и их неидеальная адаптируемость. Поэтому нужно “причесывать” код вручную, подбирать стили и виджеты, с учетом платформы.

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

Экосистема и сторонние библиотеки

RN построен вокруг JavaScript и React, то есть это часть экосистемы JS. RN – это очень живое сообщество, с доброжелательной комьюнити. Но есть и минус, постоянно зависеть от комьюнити, поскольку RN имеет лишь базовые функции. А вообще с точки зрения экосистемы, RN по крайней мере с виду, кажется, проигрывает конкурентам, и не всегда стабильная.

Ionic также работает вокруг JavaScript, то есть можно в принципе “прицепить” любой JS-фреймворк. Особенно хороша связь Ionic с Angular, но также и с Vue неплохо, и конечно же с React. Все эти фреймворки популярны, и в сети полным-полно тредов об Ionic, например на StackOverflow, да и на сайт самого Ionic надо заглядывать, и везде помогут.

Ionic выигрывает эту категорию, так сказать, количеством.

Подводим итоги

Что можно сказать? В целом – “зависит от задачи”. Четкого победителя нет. Если надо сделать приложение, “look’n’feel” которого должен быть нативным – выбирай React Native. Если надо простое хайповое приложение с базовыми функциями, лишь выглядящее как нативное и это неважно – то можно Ionic.

Flatlogic