Ionic и React Native: что же лучше?

Многие сталкиваются с выбором: Ionic или React Native. У обоих есть огромная команда преданных разработчиков, оба фреймворка активно используются в крупных проектах, оба могут похвастаться набором популярных среди потребителей приложений. И React Native, и Ionic позволяют разработчикам делать мобильные приложения для iOS и Аndroid. 

Да, оба эти фреймворка хороши: они предоставляют разработчикам возможность быстро моделировать и публиковать приложения на многочисленных ресурсах с одним изначальным кодом. Но что, если перед вами стоит конкретный вопрос: какую же платформу мне выбрать для моего проекта разработки приложения? Эта статья поможет разобраться.

 

Первое, что стоит отметить, так это то, что вы можете писать свои приложения без знания Swift, Objective-C, Java или Kotin. Вместо этого вы будете использовать JavaScript для React Native и Ionic. Это означает, что вы сможете разрабатывать нативные приложения для обеих платформ, задействуя не два языка, а один и сэкономить немало сил на обучении

Это всё хорошо, но чем же две эти технологии отличаются? Какая лучше подойдёт для вашего мобильного проекта? Взглянем поближе.

Что такое Ionic 4? 

Ionic — это open-source SDK для гибридной разработки приложения. Он создан Максом Линчем, Беном Сперри и Адамом Брэдли из Drifty Co. в 2013 году. Ionic предоставляет службы и инструменты для разработки гибридных мобильных приложений с использованием таких веб-технологий, как CSS, HTML5 и Sass. Приложения создаются с помощью вышеперечисленных веб-технологий, а затем могут быть распространены с помощью магазинов нативных приложений с установкой через Cordova.

Другими словами: когда вы создаете нативное приложение для Android, вы пишите на Java. Если для iOS — вы пишите на Objective-C или Swift. Конечно же, оба варианта являются достаточно мощными, но также и сложными языками. С помощью Cordova и Ionic вы можете написать часть кода для вашего приложения и при этом запустить его и на iOS, и на Android (и даже на Windows!). Это также возможно благодаря простоте HTML, CSS и JS.

Что такое React Native?

React Native — это фреймворк JavaScript для разработки нативно рендерящихся приложений для iOS и Android. Он основан на React (JavaScript библиотека Фейсбука), но он нацелен не на браузеры, а на мобильные платформы. Иначе говоря, можно писать приложения, которые выглядят “нативными”. Всё благодаря Javascript библиотеке, которые мы хорошо знаем и любим. К тому же большая часть кода, что вы пишете, поддерживается обеими платформами. Так что React Native дает возможность легко разрабатывать как для Android, так и для iOS.

Аналогично с веб-версией React, приложения RN строятся на смеси JavaScript и разметки XML, известной как JSX. К этому всему у React Native есть мост, открывающий доступ к нативному рендерингу API в Objective-C (iOS) или Java (Android). Таким образом, ваше приложение будет рендериться, применяя мобильные компоненты UI. Оно будет и выглядеть, и ощущаться как любое другое приложение. React Native делает интерфейсы JavaScript доступными для API платформы. Ваши приложения получают доступ к таким функциям платформы, как телефонная камера или местоположение пользователя.

На данный момент React Native поддерживает и iOS, и Android и к тому же имеет потенциал для последующего расширения на будущие платформы. React Native широко используется для разработки готовых к выпуску приложений. Пару примеров: Facebook, Palantir, and TaskRabbit — все они уже применяют его в продакшене для приложений, которым приходится иметь дело с пользователями.

Гибридные VS Нативные приложения

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

Нативные приложения разработаны на определённом языке для определённой платформы. Например, когда вы пишите на Objective-C для iOS или на JavaScript для Android, то такое приложение называется нативным. Его главное преимущество — высокая производительность. В противопоставление этому, гибридные приложения для разработки приложений используют веб-технологии: HTML, CSS и JavaScript. Чтобы обеспечить нативное использования и доступа к нативному функционалу iOS, Android или любой другой платформы, необходимы платформы PhoneGap/Cordova. 

Параметры для сравнения

• Набор языков
• Многофункциональность
• Обширная библиотека шаблонов
• Производительность 
• Интерфейс пользователя
• Экосистема и сторонние библиотеки
• Рынок и сообщество
• Доступ к нативному функционалу девайсов
• Поддерживаемые платформы
• Популярные приложения 
• Расценки
• Возможность поддержки

1. Набор языков

React Native использует JavaScript, который сегодня известен как один из самых популярных, подвижных и высокоуровневых языков программирования. Он сочетает в себе лучшее из JavaScript и React JS. Его поддержкой занимается Facebook.

Положительный аспект React Native - и то, что он позволяет писать некоторые компоненты в Swift, Objective-C или Java, когда разработчикам это необходимо. Используя нативные модули и библиотеки в приложениях React Native, можно иметь дело с операциями, вовлекающими большое количество расчётов, такими как редактирование видео или картинок.

Ionic для разработки и запуска приложений использует HTML5, CSS и JS и также требует Cordova для получения доступа к управлению на нативных платформах. Работая на Ionic, можно пользоваться TypeScript, который повышает качество кода.

Вот в таком рейтинге можно расставить фреймворки, основываясь на преимуществах, которые дают их языки:

1. React Native (React)
2. Ionic Framework (Angular)

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

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

React Native также компилируется под нативные условные настройки, но, тем не менее, предоставляет лишь базовый набор компонентов. Подстраивать их вам уже придётся самому, из чего вытекает куча работы для того, чтобы приложение подходило под стиль обеих платформ. Короче говоря, код можно использовать заново (ведь вы всё равно используете один язык и таким библиотекам как Redux не нужна подгонка).

Вот как можно оценить данные фреймворки по реюзабельности кода:

1. Ionic Framework
2. React Native

3. Обширная библиотека шаблонов

Этот параметр отвечает на следующие вопросы: насколько легко создать красивый UI? Придётся ли создавать многие компоненты UI самому или есть большой набор заранее созданных? Автоматически ли подстраиваются ли эти наборы под необходимую платформу?

Ionic сам по себе является огромным набором заранее созданных и стилизованных компонентов. Компилятор, ответственный за нативное приложение, также является частью набора Ionic (обеспечен CLI), но использует и такие наборы как Cordova или Capacitor. Компоненты, которые даёт Ionic, автоматически адаптируются к платформе, на которой приложение запускается. Так что создание красивого, выглядящего, как нативное, приложения — это одно удовольствие.

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

Вот как можно оценить оба фреймворка по библиотеке готовых компонентов:

1. Ionic Framework
2. React Native

4. Производительность

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

Касаемо производительности Ionic проигрывает. Его производительность не так хороша, как у React Native или Flutter. Причина тому — использование веб-технологий для рендера приложения. Такой подход значительно снижает скорость. К тому же он не использует нативных компонентов и лишь пытается создать нативный вид или ощущение посредством веб-технологий.

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

Среди трёх доступных фреймворков Ionic предоставляет самую низкую производительность в силу использования веб-технологий. Только есть одно “но”. “Хуже” не всегда означает “ужасно” или даже “плохо”. Производительность хуже, только если сравнивать с другими вариантами. На современных девайсах любое приложение будет идти без сучка и задоринки. Если ваш FPS будет 100 вместо 105, то вы вряд ли заметите разницу. Так что не забывайте о Ionic, когда приступите к разработке нового приложения. 

Вот так можно расположить эти фреймворки по производительности:

1. React Native
2. Ionic

5. Пользовательский интерфейс

Юзеры начинают судить о приложении с первых секунд запуска. Поэтому GUI приложения должен сочетать в себе привлекательность и простоту. Давайте посмотрим, что нам предлагают:

Модули React Native связаны с нативными контроллерами UI, что делает их такими же удобными для пользователей, как и нативные приложения. В дополнение он использует библиотеку ReactJS с обширными элементами UI. Это всё вкупе значительно упрощает разработку UI.

Ionic вообще не использует никаких нативных элементов и просто рендерит всё в HTML и CSS. Затем он использует Cordova, чтобы создать ощущение нативности. Компоненты Angular, которые включает фреймворк также позволяют приложениям Ionic выглядеть нативными.

Вот как их можно сортировать по тому, какой UI они предлагают:

1. React Native
2. Ionic

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

Как выглядит их экосистема? Легко ли найти помощь (например, на Stack Overflow) и есть ли сторонние библиотеки, откуда бы можно было добавить желаемые функции?

Ionic использует JavaScript, а значит, вы можете использовать какие угодно фреймворки, которые его используют. Он в особенности хорошо поддерживает Angular. Следовательно, вы можете почерпнуть существенную пользу из этой экосистемы. Да и JavaScript — как и Angular — очень популярен. Тысячи тредов на Stack Overflow и пакетов на npm помогут вам справиться с любой проблемой.

RN строится на JavaScript и React, что уже предоставляет вам экосистему. React Native сам по себе имеет достаточно жизнеспособную систему и комьюнити. Вы запросто сможете отыскать множество тредов на Stack Overflow и такое же множество пакетов для добавления недостающего функционала. Есть и обратная сторона — вам придётся часто полагаться на экосистему (плагины, стартеры и т.д.) так как React Native включает только основные функции. Его экосистема не так хороша, как у других, и зачастую изменчива. Многие сторонние плагины не успевают за React Native.

Вот как можно оценить их по Экосистеме и сторонним библиотекам:

1. Ionic
2. React Native

7. Рынок и сообщество

Динамичная экосистема — это хорошо, но популярность выбранного варианта тоже имеет значимость. Давайте посмотрим:

React Native превосходит всех, когда дело доходит до признания на рынке и среди сообщества. Его сеть разработчиков растёт с каждым днём и насчитывает немало инженеров React Native. Это упрощает запуск проекта на React. Он использует популярную библиотеку React и использует самый весомый язык среди веб-разработчиков (JavaScript) и, более того, предоставляет нативные приложения. Эти качества делают его особенно сильной платформой и лишь подтверждают его славу.

По популярности Ionic идёт сразу после React. Он даёт разработчикам возможность делать нативные мобильные приложения быстрее всего. У Ionic есть сильная поддержка со стороны сообщества и отличный маркетплейс, где можно найти огромное количество стартеров и темплейтов, чтобы начать разработку любого приложения от Uber до Spotify. 

Вот как их можно сортировать по признанию в индустрии и надёжности:

1. React Native
2. Ionic

8. Доступ к нативным функциям девайсов

Вашему приложению обязательно понадобится доступ к таким нативным функциям, как камера или GPS. Насколько просто можно его получить? И настолько же это легко для относительно новых функций типа AR API для Android/iOS?

Для предоставления доступа к нативным функциям у Ionic есть Cordova и Capacitor. Они дают хороший набор пакетов для доступа к такому функционалу, как камера. Можно написать и свои врапперы для какой-либо функции и затем включить их в ваш код. Стоит заметить, что плагины Ionic/Cordova и/или Angular стабильны и обновляются при каждом обновлении платформы.

Благодаря своей популярности React Native обладает огромным набором сторонних пакетов и встроенных API для доступа к функционалу платформы. Излишняя опора на сторонние пакеты имеет свои недостатки, которые разработчики этих пакетов могли оставить. Из-за этого поддержка не стоит на аналогичном уровне, что и у Ionic и NativeScript.

Вот как их можно сортировать по доступности к нативному функционалу девайсов:

1. React Native
2. Ionic

9. Поддерживаемые платформы

React Native: Android 4.1+ , iOS 8+

Ionic: Android 4.4+ , iOS 8+ , Windows 10

10. Популярные приложения

React Native: Facebook, Instagram, UberEats, Airbnb (позже они перестали пользоваться RN)

Ionic: JustWatch, Pacifica, Nationwide и многие другие.

11. Стоимость

React Native: Полностью open-source фреймворк. Разработчики могут использовать эту систему и её библиотеки абсолютно бесплатно. Ionic: Это бесплатный open source фреймворк для разработки кроссплатформенных приложений. Компания вдобавок предлагает платный Pro Development Environment. Они гарантируют, что Ionic Pro ускорит процесс разработки.

12. Возможность поддержки

При работе с React Native любая сторонняя библиотека может устареть и стать несовместимой с обновлённой кодовой базой. Из этого вытекают серьёзные проблемы с поддержкой. 

В Ioniс, в отличие от RN, вам придётся только работать над поддержкой одного единственного приложения (в RN надо отдельно поддерживать билды для iOS и Android).

Но и тут не всё сладко. Самая большая проблема — это постоянные обновления самого фреймворка и частые релизы на Ionic и Cordova.

Вывод

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