React native vs ionic what s the best for startup

React Native vs. Ionic: What Cross-Platform Framework is the Best?

20 May 2021 • 10 min read

A brief guide into React Native

We have decided to try our best in putting to rest the question “React Native vs Ionic: which one is a better framework?”. React Native is an open-source mobile application framework created by Facebook, Inc. Its usability lies in the sphere of app development for such operational systems and platforms like Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP. Basically, it is a framework that allows you to build different kinds of apps using nothing more than the ever-universal programming language, known as JavaScript.

And, as it is based on the same design as React, it also makes it possible to compose a rich mobile UI from declarative components by using the same fundamental UI building blocks as regular iOS and Android apps. The end result is hard to distinguish from any apps built with Java or Objective-C.

Now, let’s take a closer look at the advantages that React Native has (not comparing it to Ionic in any way for now).

React Native saves time and money

The justification for this advantage is the fact that, by having its code as cross-platform as it can be, React Native allows maximum compatibility between different operating systems, mainly – Android and iOS. So, in practical meaning, it allows you to save both time and money by not redeveloping the same app to suit the OS. React Native also helps to optimize maintenance and updating of the product, which can be twice as hard when done in other ways.

React Native apps generally perform at a faster rate

The reason for that is the fact that due to the programming language optimization for mobile devices. Also, React Native apps mostly use the power of the graphic processing unit, also known as GPU, instead of using the central processing unit, also known as CPU. The combination of the two upper-mentioned facts allows React Native-built apps to work at a faster rate than the ones built with cross-platform hybrid technologies. To get more in-depth about React Native’s overall performance – follow the link.

React Native has a low learning curve, if you’ve ever used React

We have already touched upon this advantage a little, but let us elaborate. As it has the same design and interface as React, React Native eases the process of acclimatization for developers, who haven’t worked with it before. It also simplifies the work inside the developer team in case one developer forwards the project to his or her colleague.

React Native’s code is movable and copyable

In case React Native is, after all, not your particular cup of tea or it is necessary to move your app to another development framework, there is no problem in doing so. Codes started in React Native, are easily movable and copyable. This fact only increases React Native’s flexibility and usefulness as a tool.

React Native allows for high code changing visibility

This framework has a very useful feature, called “live reloading” / “hot reloading” that allows a developer to see the changes made to the code in a separate window simultaneously with changing it. Thus, React Native creates a real-time feedback tool, which can be extremely useful.

Now, let’s take a look at some disadvantages that React Native has (once again, not comparing it to Ionic. That we will do a little bit later).

React Native is still in beta

Mainly, this means that, despite its popularity, React Native has quite a number of various issues with package compatibility or debugging tools. So, in a way, it can take much more time to use it for developers unfamiliar with this framework, as it will require time for troubleshooting.

React Native lacks a number of custom modules

Although the majority of the most popular and used modules are available and ready-to-use, there is still a possibility that you want to find a custom module, needed for particular tasks. Or, you would find them, but they would be incomplete and unfit for use. Fortunately, such occasions are a rarity.

And now, having discussed the pros and cons of the React Native, let’s move on and do the same honors for its adversary in this pairing – Ionic.

A brief guide into Ionic

So, once again, the first question to answer here is what exactly is Ionic? The answer is ever simple: Ionic is an open-source software development kit created in 2013. Its main purpose is hybrid mobile apps development and more than five million different apps use Ionic. The peculiar thing here is that being, in layman terms, a Node Package Manager module in its heart, Ionic requires installing Node.js to function fully. Basically, it is a part of a grand JavaScript ecosystem, which also means that it’s able to allow the use of a library of native iOS and Android components. Thus, Ionic is able to provide developers with UI elements that are platform-specific.

Check the pros and cons of the Ionic outside of any comparisons. Firstly, to turn the standard order upside down and keep it fresh, let’s start with the disadvantages of this software development kit.

Ionic may lack suitability when it comes to heavy apps performance

The reason for such a con is the fact that Ionic uses WebView to render any applications. This way, when dealing with native apps and heavier apps (here, Snapchat would be a great example, as it uses augmented reality), Ionic would take a hit and your apps would be cordially slower. The major player in this instance is the process of rendering any and all graphic elements via a browser, which takes several steps to start. The more steps to take – the slower the loading time will be. After that, we should also take into consideration Cordova callbacks and CSS animations loading. Nevertheless, Ionic deals with standard programs just fine, so, if your app does not use any heavy-to-render aspects, you might not even come face to face with this con.

Ionic is a software development kit that is dependent on plugins

Ionic is a part of the JavaScript ecosystem. This means that to access the full native functionality of this kit, you would have to use plugins such as Cordova and Capacitor. But there is just no way that all the needed plugins already exist, also the plugin library is quite humongous. So, there might come a day when instead of simply finding the needed plugin, you would have to develop the plugin on your own. The reason is that Ionic is not capable of implementing native plugins without transforming them into JavaScript. So, there is no possibility of native code in its initial appearance.

Ionic does not feature any “hot reloading” possibilities

Although, as of now, such a feature seems standard in software engineering, Ionic simply doesn’t have it. It takes time to implement the changes, refreshing the whole app to show you the changes made. This fact, even though seemingly innocuous, can drastically slow down the speed of development.

Ionic might not be the most secure system

This con is less of a con in itself than a possibility of a pitfall. Since its fourth version, Ionic does not contain any built-in code uglificators, thus making it easy for hackers to read. But, as we’ve already said, this problem might not even be a problem if your app is not possible to reverse engineer or if you use Angular CLI or older versions of Ionic.

Ionic is sizable

This software development kit allows you to write your app using HTML, CSS, and JavaScript, which is nice. It also means that there is a lot of code and additional libraries, plugins, dependencies, and other needed stuff. This makes your apps much heavier than they would be if they were native. But, as always, if you are willing to do a little tinkering around and delete the unnecessary things, such as unused styles, fonts, and images, you would be able to make Ionic smaller in size.

That’s a shortlist of the most important drawbacks Ionic possesses. Now, let’s take a closer look at the pros of this SDK.

Ionic has quite a wide range of plugins and integration capabilities

You can always integrate a number of tools with Ionic if you think that what you gain from it is not enough. If you want to know what type of plugins and technologies could possibly be integrated into the SDK – look no further than its official website. Moreover, the site gives you the ability to access the upper-mentioned editions right from it. Although, there is a little catch to consider: some of the tools can only be accessed with the Enterprise version of Ionic, and that requires payments to use Premier plugins and tools. But, on the other hand, there is a list of the Cordova plugins, that is also integrable and conveniently sorted into the platform availability list (you can find it following this link). Or, if you prefer Capacitor to Cordova or you cannot find the plugin needed, you can also use those. Also, the full procedure can be a little trickier at times.

Ionic is a single codebase across various platforms

Angular framework, Apache Cordova, as well as using HTML 5, CSS, and JavaScript – those are the basis of Ionic’s built. That’s why it allows developers to build mobile apps by themselves, without side help from native devs. Anyone remotely knowledgeable about such things as web technologies and Angular would be able to create fully functional applications with Ionic. Thus, the cost of development and codebase maintenance is reduced. But wait, there is more. Ionic’s nature also quickens the development-to-market gap on both iOS and Android, eases maintenance by having built-in browser instruments and debugging tools, and raises the transformational availability of your app. Considering this particular advantage we conclude: developing apps within a single codebase is cheaper and faster compared to native development.

Ionic’s learning curve is quite low

JavaScript is, no doubt, one of the most widely spread and popular programming languages. Ionic is easy to learn and use if you are already acquainted with JavaScript. Moreover, the process of hiring outsourced devs is simple due to simpler hiring criteria. However, having an outsourced native developer would be a big plus. After all, Ionic doesn’t compile the whole app into a native language, but instead compiles UI elements, using Cordova or Capacitor plugins for the rest of the functionality.

Ionic has a wide range of UI elements and quick prototyping

Ionic is quite successful in mimicking the overall feel, look, and flair of native apps. The reason for this is the UI component library, full of ready-made elements and components to build GUIs or for the purpose of customization. When you add web components to this already awesome brew you get a quickened UI logic development process as well as native look retention with no additional costs.

With this, we finish looking at React Native and Ionic separately. Now we get to the all-out war! Well, there will be no violence involved, but, nonetheless, we would use sheer comparison to declare which framework would emerge victorious, when meeting face-to-face.

Pros of React Native in comparison to Ionic

In this part of the article, we will discuss the spheres, where React Native outshines Ionic and explain why we declared so. Enough introductions, let’s get down to it.

Set of languages

Ionic uses the following set of languages: HTML5, CSS, JS. It also needs Cordova to gain access to management on native platforms.

React Native, on the other hand, uses JavaScript and lets developers write some components on Swift, Objective-C, and Java. By using some native modules and libraries in React Native apps, we can deal with operations such as visual or video editing.

Thus, we can speak of the broader functionality of React Native before Ionic and a better overall language set.

Performance and productivity

When discussing the cons of Ionic, we’ve already touched upon this one – slow productivity resulting from rendering applications using WebView. React Native does not have such a flaw. In fact, it’s quite similar to native frameworks in that regard, as it renders all the elements of the code into a native API. It also allows using native modules that, also unable to be used between different platforms, provide high performance.

And although Ionic makes the testing process in the browser faster, Ionic has much lower performance overall due to using web technologies. Ionic is only slow in comparison to React Native, though. It is perfectly adequate for most use cases.

If we compare the productivity of both frameworks, React Native will win with ease.

Graphic User Interface

There is a saying that goes: “greeted by clothes – escorted by the mind”. And, no matter how unjust it might seem, this is also true to our discussion. GUI of the app should be easy to use and eye-pleasing, as users start judging as soon as they click on the app’s icon.

Ionic loses pretty hard to React Native in that regard, as it doesn’t use any native elements at all and just renders everything into HTML and CSS, using Cordova after that to polish the feel of the nativity. Angular components should also be mentioned in that regard.

React Native, on the other hand, has modules tied to the native UI controllers. That makes them just as convenient for the users, as native applications do. In addition to that this framework uses ReactJS’ library. And that marginally simplifies the UI development process.

So, when it comes to GUI, React Native gets the cake and eats it too.

Marketability and community

Even though it can be hard to imagine, marketing also concerns our theme. And, in that regard, React Native once again topples Ionic.

But, to be honest, React Native, probably, topples each and every opponent when it comes to market recognition and community. And Ionic comes in strong second place. Although Ionic lets developers make native mobile apps fast and has strong community support and a great marketplace, React Native marginally eases launching React projects. It also uses the ever-popular React library and JavaScript programming language.

These facts allow React Native to take the top spot in this category.

Access to native device functions

This category is an important one if we talk about our current world because most modern apps use a ton of native functions, such as a camera or GPS. And if your framework allows for easier and more convenient access to native functions – you have a leading spot.

Thus, we can declare React Native a winner in this category. Its huge set of third-party packages and built-in APIs and the overreliance on those third parties can be a drawback. And yet the sheer quantity unexpectedly outweighs the quality in this aspect.

Ionic, on the other hand, relies heavily on Cordova and Capacitor for native functions’ access. They do give a great number of packages and they do allow access to, for example, the phone’s camera. But the functionality might be somewhat lacking.

In conclusion to this point, sometimes the more – the merrier.

Popular apps on the framework’s basis

Nice and simple category. Facebook, Instagram, UberEats, AirBNB at the beginning, and many more use React Native. Ionic is used by JustWatch, Pacifica, Nationwide, etc.

And, also subjective, we cannot but give this category to React Native, as brand-wise they win.

Cons of React Native in comparison to Ionic

Now let’s talk about the points, where Ionic takes the crown, compared to React Native

Multifunctionality

When it comes to code reusability, Ionic is a beast. The whole idea of the packed web applications provides the upper-mentioned reusability. And that’s not mentioning the library of adaptable components. Those automatically adjust to the platform on which the app is launched at the time.

React Native provides only a basic set of components, although also compiling for native conditional settings. But it is only a basic set, which means that there would be a lot of additional work adjusting the app for the style of both platforms.

That’s why React Native loses this round to Ionic.

Template libraries

React Native has plenty of embedded components, but time to stylize them manually should also be added to the mix. And that’s not mentioning their non-adaptability. This fact constitutes the need to fit into your code, where you already have to choose styles and widgets according to the conditions.

Ionic wins in this aspect by being a huge set of pre-created and pre-styled components by itself. We should also mention that the compiler, responsible for the native apps, is a part of the Ionic set.

One more point into the Ionic’s pocket.

Ecosystem and Third Party Libraries

React Native takes root in JavaScript and React and that’s an ecosystem by itself. It also has quite a viable system and community. But there is a downside – you would be reliable from the system as React Native only includes basic functions. Its ecosystem is not as good as others and tends to be volatile.

Ionic also uses JavaScript, which means you can use any framework that also uses it. It is especially visible in comparison to Angular. However, it does just as well, if not better, in connection with Vue and React. As all of them are quite popular, you can find thousands of threads on StackOverflow or Ionic’s site that will help deal with any problem.

Ionic takes this category by storm.

Summarizing the pros and cons and conclusions to have

What we conclude with might be considered cliché. But all and all, there is no clear winner between React Native and Ionic. It all depends on the functionality of your product. If you need to create an app that looks and feels native, but really isn’t – React Native is probably the best option. If you need to create a maximum productivity app that only looks native – Ionic is here for you.

React Native против Ionic: наглядное сравнение

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

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

Перед погружением в сравнение Ionic и RN, давайте кратко напомним себе что такое гибридные и нативные приложения. Гибрридные приложения это по сути вебсайты встроенный в мобильное приложение, через так называемые webview. Они создаются с использованием HTML, CSS, и JavaScript, и выполняют один и тот же код, независимо от платформы на которой они работают. Также, при помощи таких фреймворков как: PhoneGap и Crodova, использовать нативные функции устройств, таких как камера или GPS.

Нативные приложения создаются на языке необходимом для платформы назначения. Objective-C или Swift для iOS, Java для Android и т.д. написанный код не будет кроссплатформенным и для разных платформ разный. эти приложения имеют прямой доступ ко всем функциям устройства, которые прелдлагает соотвествующая платформа без каких либо ограничений.

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

Нативные или гибридные?

Ionic

Ionic это типичный гибридный фреймворк. Он использует веб технологии для написания и отображения приложения, и требует PhoneGap/Cordova мостика для доступа к нативным функциям приложения. Тогда он пробует повторить нативное поведение платформы, для наилучшего взаимодействия с пользователем данной OS.

React Native

Программирование React Native это преимущественно JavaScript, что означает что большая часть кода, которая вам нужна может быть использовано кроссплатформенно. Однако, там где гибридные приложения отображают интерфейс используя HTML и CSS, RN, будет использовать для рендера нативные компоненты. это означает, что пользовательский интерфейс будет ближе к другим приложениям платформы, которые используют определенные шаблоны заданные самой платформой. Часто это еще дает лучшую производительность и более гладкую анимацию.

Проблема в том, что это работает только когда нужный компонент уже написан для RN. Со старта, RN предлагает приличный набор компонентов, но если вы программист нативных приложений, не надейтесь найти все необходимые вам компоненты.

Вердикт

Приложение написанное на RN, будет нативным, родным, но требует связующие компоненты, написанные для каждой платформы в которых оно будет использовано. И делает его ближе к гибридным приложениям.

Пишешь однажды, работает везде

Ionic

React Native

Цель RN это не возможность «написал один раз, работает везде». Скорее, RN дает разработчикам использовать компоненты, которые наиболее хорошо подходят используемую платформу. Для примера, Андроид имеет более кастомизируемые тулбар; iOS нет. Вы можите используете тулбар для Android, но вам придется использовать что-то другое для iOS. Не волнуйтесь, множество компонентов имеют эквиваленты; и если они не эквиваленты, то можно достаточно легко отделить часть логики для отдельной платформы.

Вердикт

С Ionic, вам определенно не придеться беспокоится насчет платформо-зависимого поведения. Но с RN, вы можете предложить более привычный интерфейс для пользователей определенной платформы.

Стек языков

Ionic

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

Оставлять комментарии могут только зарегистрированные пользователи

Ionic vs React Native-Which is Best for Your Mobile App?

As it’s an internal app, native performance wasn’t our first priority. Our goal was to deliver it as soon as possible with minimum maintenance. Here are the few comparisons why we choose Hybrid over Native framework.

There are so many hybrid mobile frameworks such as Ionic, NativeScript, React Native, Xamarin, PhoneGap etc. We decided to evaluate top 2 hybrid frameworks — Ionic and React Native

Ionic vs. React Native Comparison

Ionic versus React Native — let’s check out the differences between the two:

Our team was familiar with technologies like HTML, CSS, JavaScript, Java etc. and had no experience with React. Ionic rich pre-built components, typescript simplicity and vast support of platforms convinced us to go with it for our mobile app.

Ionic Overview

Ionic is the only mobile app stack that enables web developers to build apps for all major app stores and the mobile web with a single code base. And with Ionic’s Platform Continuity, your app looks and feels at home on every device. Ionic community has developed more than 4M ionic apps.

Ionic 2 is based on Angular 2 which is based on TypeScript. Typescript is a typed superset of Javascript that compiles to plain JavaScript. Angular 2 is the successor of the overwhelmingly successful Angular.js framework. Angular 2 is faster than Angular 1 and offers a much more flexible and modular development approach.

Progressive Web Apps(PWA) — The mobile future

Progressive Web Apps bring features we expect from native apps to the mobile browser experience. Ionic apps enable developers to get the best of both worlds: cross-platform app store deployment on iOS, Android, and Windows, along with deployment to the mobile web as a Progressive Web App with the same code. See this amazing video to see power of PWA- https://www.youtube.com/watch?v=MxTaDhwJDLg

Ionic Performance

We deployed our in iOS platform

An Overview of React Native — Mobile App Development Framework

React Native is developed by a software engineer at Facebook. Using React Native framework, the top applications like Facebook, Skype, Instagram etc. are developed. It is mainly based on JavaScript & allows the developers to build mobile apps for iOS and Android using JavaScript. It allows developers to utilize the existing code.

Pros/Advantages/Strong Points of React Native framework :

Comparison & Benchmark

Below is the comparison of Ionic app and React Native app.

Native, or hybrid?

Ionic

Ionic is a typical hybrid development framework. It uses web technologies to write and render the application, and requires PhoneGap/Cordova bridges to access native features. Then it will try to reproduce native behaviors to provide the best user experience.

What about Ionic Native you’re asking? Don’t be mistaken by the name. Ionic Native is a new name for what used to be called ngCordova. It’s simply the new Ionic way to use existing Cordova and PhoneGap plugins. Ionic Native will not make your app native.

React Native

Developing in React Native is primarily done with Javascript, which means that most of the code you need to get started can be shared across platforms. However, where hybrid apps render using HTML and CSS, React Native will render using native components. This means that the user experience will generally be closer to other native apps as they will follow the patterns imposed by the operating system. Often, this also comes with better performance and smoother animations.

The hiccup is that this only works when the bridging components have been written for React Native. A decent set of native components is provided by default, but if you are a native app developer, do not expect to find all the components you are used to.

Conviction

While the result of RN is native, it requires bridge components to be written for each platform in order to use them, which brings it back closer to a hybrid framework.

Write once, run everywhere

Ionic

A typical hybrid app will run the same code regardless of the platform, and that is what Ionic is capable of doing. However, in order to feel more “native”, Ionic will adapt a few of its behaviors according to the platform. If you use tabs, they will be displayed just as recommended by the platform — at the bottom of the screen in iOS, and at top in Android.

React Native

The goal of RN is not to provide a way to write once, and run everywhere. Rather, they want developers to use the components which best follow the native behaviors of the platform. For example, Android has a highly customizable toolbar; iOS does not. You can use the toolbar for Android but you’ll have to use something different for iOS. Don’t worry, many components have an equivalent; and if there’s no equivalent, it’s easy enough to separate the platform-specific logic.

Conviction

With Ionic, you definitely do not have to worry about platform-specific behaviors. But with React Native you may have to in order to provide the most seamless experience for your users.

Plugin

On React Native, we can add 3rd party plugin using React Native Modules. In this release we use https://github.com/teamrota/react-native-gmaps for native google maps view. Before using this, on our Ionic app, we use http://angular-ui.github.io/angular-google-maps/ that still uses webview to render the map. The drawback of using web-based map view is it loads longer and the memory is higher. On native map view we can use 3d map features on map view, like rotating, zooming, and compass.

Beside map view, we can also change the status bar color. You can see in the picture above, the status bar color is in red (we can actually change the status bar color from webview https://developers.google.com/

We also use the native drawer for the main menu.

Conviction

As of this day, React Native has more stars on Github than Ionic, about 36,000 vs. 25,000, respectively. Though, Ionic has more questions on Stackoverflow than React Native. They also inherit the community they are based on, namely Angular and React. We can safely say that they both have a very healthy ecosystem.

Memory Usage

This is quite important especially for low end android devices. We must keep the memory usage low so that the app run smoothly on the devices. To do memory usage comparison, we use the following command.

After running the command above, we got the result. Bus In Time app in Ionic Framework uses

84,714 kB memory. While react native app uses

58,585 kB memory. So the app run smoother on react native app.

Testing during development

Ionic

When developing an app, it is very important to get immediate feedback. There is nothing more frustrating than having to wait a while to see if two pixels of margin is looking good or if three pixels is better. With Ionic, you can instantly preview your app in your browser and mobile devices. It instantly refreshes as you make changes to your application.

React Native

Forget about testing in your browser, RN produces native rendering remember? That’s not a problem though, with React Native you see the result of your modifications as you make them. No need to recompile, rebuild, etc.; the result is instant in an emulator or a real device. Pretty amazing!

Conviction

Both are brilliant — but a little different — in that regard. Instant feedback you want; instant feedback you’ll get!

React Native vs Ionic: Which is better?

I can’t tell you which is better because I firmly believe that it depends on many factors: you, your project, your user requirements, the acquired skills of your team, etc. They both do different things, and both do it well. It’s like comparing an Xbox and a Playstation, MacOS and Windows, a car and a motorcycle. Neither is better than the other.

However, I can tell you which one I prefer. It is React Native. I personally value the native rendering more than the rest. To me, apps need to be extremely fast and responsive, and in React Native, I have found a good compromise between writing pure native applications, or pure hybrid apps.

React Native & Iconic both being a proficient framework is time and cost effective. However, React Native is most suitable for each app development whether it is a startup or an enterprise level app development. React Native offers a similar experience like Native app development and thus it’s an appropriate pick when compared to the Iconic framework.

Now, my best advise to you is to try them out both, pick one, and make the best out of it!

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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. Абсолютно всё зависит от требований к проекту.

Ionic Blog

Build amazing native and progressive web apps with the web

Share

Ionic vs. React Native: Performance Comparison

It’s no secret that Ionic and React Native compete in the cross-platform application development ecosystem.

A quick online search will bring up countless articles comparing the two cross-platform solutions. In these articles, advocates for React Native will often lean on performance as the biggest reason to choose one platform over another. Their assumption is that, because React Native orchestrates native UI controls (as opposed to rendering the UI in a browser, like Ionic) then it must be faster.

The problem? None of these explanations ever seem to be centered around actual performance metrics. Rather, what the authors seem to fall back on is the perception that React Native is “more native”, and thus it has better performance.

Well, does React Native have better performance? We decided to create competing applications, with the same feature-set, and run some of our own tests on the same exact iPhone 11 Pro Max. Let’s take a look at how it played out.

Ionic vs. React Native

First, if you’re just getting to know Ionic or React Native, let’s briefly summarize how the two are different in terms of their approach and underlying architecture.

Ionic fully subscribes to the philosophy of leveraging web technologies to deliver its applications. React Native, on the other hand, also runs using JavaScript (JS), but does so under the guise of orchestrating platform-specific user interface (UI) controls. Both platforms create real native apps with full native access through plugins and custom native code.

To learn more about the differences between Ionic and React Native, check out our comparison guide.

Boot Time

The time that the application takes to load is a routine measuring stick for performance. There are two ways we can look at boot time: cold boot time and warm boot time. Cold boot times are measured by having the operating system in a fully rebooted state, where nothing is cached in regard to the app. On the contrary, warm boot times apply when the application has been killed so it is no longer running in the background, but there could be some cache lingering in the operating system.

Both React Native and Ionic cruised in at around 1.5 seconds for cold boot times, as well as about 1 second for warm boot times. Take a look at the side-by-side boot time of Ionic and React Native:

React Native champions claim there are substantial boot time performance gains when compared to Ionic. That just isn’t the case. The video showcases the applications loading up at virtually the same speed. If you see it as React Native with a slight edge, it’s far from being substantive enough to write off Ionic as a contender. React Native is fast, but so is Ionic!

Smooth Scrolling

The general performance argument seems to also be tied to the notion that Web Native applications are inherently slower to render. The following video speaks for itself:

It is commonly accepted that 60 frames per second (fps) is the rate at which animations appear to be smooth. In the video above, it demonstrates that perfectly. While performing the rendering throughout scrolling, both the Ionic application and the React Native application continued to take around 16.67 milliseconds, or just below, to do it’s work. This ensures that the user isn’t experiencing any sensation of “frame drop.”

Ionic React FPS

React Native FPS

A choppy user experience isn’t something you’ll see simply by choosing the web. The web is fast and so are Web Native applications. Of course, React Native applications are fast as well. The video portrays a list of 2500 employees being loaded into a list view. With proper techniques applied across each app, the lists continue to scroll without lag. The items are lazy loaded and the experience is smooth. Suffice it to say, this isn’t a good indicator for which cross-platform development platform you should be choosing. Both approaches work incredibly well.

Native Transitions

Another fear surrounding Web Native applications is that given its web-first approach, it’ll lose the native feel when it comes to transitions the user makes throughout the application. A simple example would be the “push” and “pop” animations that occur as the user navigates along the application’s routed paths into a detail screen and back.

This is an inaccurate assumption. The Ionic SDK, alongside the frontend framework of your choosing, ships with these user experience paradigms baked in. These elegant transitions aren’t something only frameworks that orchestrate native UI controls can accomplish. The web can do it too! Take a look:

Platform-specific or Unified Styling

The jury is out on whether the expectation for mobile apps these days is to have the same styling within your application across operating systems. Many people subscribe to the idea that platform-specific styling, that we’re all familiar with, is still the standard. Others are moving toward the concept that an application should purely be on brand and look the same regardless of the operating system in which it is being consumed.

No matter where you fall in this debate, Ionic has you covered. Adaptive Styling, shipped out-of-the-box with Ionic’s UI toolkit, means your components will look exactly like their first-class native citizen. Your app automatically adapts to Android’s Material Design and Apple’s Cupertino Design, depending on which platform your app is running on. This is all delivered out-of-the-box and requires zero config. However, if you’d prefer your application components look the same, regardless of operating system, the exposed CSS Variables allow you to override the norms and create your brand’s specific style!

React Native supporters have used the idea that orchestrating native UI components is the only way to achieve a truly native look and feel. This couldn’t be further from the truth. As you scroll back through the videos above, take note that without a label, you’d be hard pressed to determine if the example was built with Ionic or React Native.

Code Execution

One of the biggest innovations in JavaScript over the last 15 years has been Just-in-time (JIT) Compilation for JavaScript, translating interpreted JavaScript into native machine code at runtime for dramatically better runtime performance and energy consumption. Famously, the V8 engine that powers chrome and the Nitro engine powering Safari brought JavaScript to entirely new categories of applications that reimagined what browsers and web apps were capable of.

However, as JIT compilation requires generating and executing native code at runtime, it presents security challenges. To mitigate these issues, vendors only enable JIT compilation for JavaScript running in a sandboxed browser environment. On mobile devices, for example, JavaScript code only has access to the JIT engine when running in a Web View, such as WKWebView. This means Ionic apps always run with a JIT engine. Apps that use JavaScriptCore or Hermes, such as React Native, do not have access to a JIT engine.

This is one of the most significant performance differences between Ionic and React Native. Engines that do not use JIT compiling have significantly worse performance when it comes to executing JavaScript, as shown by publicly available data such as the QuickJS Benchmark results. As this data plainly shows, the lack of JIT compilation results in considerably slower JavaScript execution and much higher energy consumption as shown in the next section.

CPU Consumption and Energy Impact

Looking at performance from yet another angle, we can consider the CPU consumption performance for both of these hybrid mobile applications. Yet another set of intriguing results surfaces. Take a look at the following screenshots that were taken while both apps were running from Xcode and scrolling through the employee list view:

Ionic React CPU Consumption

React Native CPU Consumption

From these images we can see that the Ionic application is far less CPU intensive than the React Native application. At its highest, the React Native application was using nearly 200% of the CPU, while Ionic was only using upwards of 10%. The reason for this is that Ionic hybrid apps have access to the aforementioned faster JS engine within WKWebView than those hybrid apps using JavaScriptCore, such as those built using React Native. From the outside, these applications both seem to be running smoothly, but under the hood, your machine is working a lot harder to run your React Native application.

Given the CPU consumption metrics, we see that the React Native application was putting quite a bit more strain on the device than the Ionic application was.

Ionic React Energy Impact

React Native Energy Impact

While scrolling through the lists again, Ionic dipped into the High Energy Impact range, while React Native rose further into the Very High Energy Impact range. It was important to take a look at these ranges while the apps were not idle because there will be far fewer times that users are interacting with your application without performing any type of action. If the energy consumption of your application remains very high throughout the course of its use, it’s going to become a battery drain. From our competing examples, the Ionic application will have a smaller impact on your device’s overall battery life.

Parting Thoughts

React Native is a great platform with which you can build some truly incredible applications. But, the “myth” React Native offers better performance is just that, a myth. The examples should be sufficient to prove that. Ionic applications are just as fast, performant, and look and feel just like native applications.

Our take? Don’t use “performance” as the reason to choose one solution over the other. Both options will give you a high performance app with a truly native look and feel. Instead, play around with each platform and choose the one that works best for you, and is easier or more fun to play with. And if you’re building a mission-critical app to support your business, consider things like access to professional support and enterprise readiness, that only Ionic provides.

Either way, you can rest easy knowing that, whichever one you choose, how your app performs in the market will have more to do with the merits of your idea and how well you execute on it, and less to do with the tooling you choose.

Get Started

Ionic is quick to install and it’s easy to get started. Start building cross-platform apps today!