As technology increases, we have more and more access to a lot of alternatives for building many kinds of applications, and of course, this is the case for Native Mobile apps. We have a lot of options to choose from but, as always, people will say the same phrase to us when we ask them what should we use: “It depends on the application you want to create”, but how are we supposed to know that the thing we want to build in fact will be well served by some technology?.
The thing is that in most cases the problems of compatibility or the downsides of some technology appear after we have already chosen that particular technology and we are already developing a product. Software engineers are in most cases smart enough to create an alternative, but in the worst case scenario, it could be impossible to solve some real incompatibility or lacking features of some technology.
React Native and Ionic
React Native and Ionic are here to solve a really interesting, specific problem called cross-platform development. With both of them you can learn once and ship to multiple platforms, both are great but they have an essential difference, while in React Native you build apps that will present native components to the user, with Ionic you basically create a website that will be displayed in a web shell in the user device as an app.
React Native uses Yoga (a powerful open-source layout engine) and ReactJS to end up with a native application. Ionic, on the other hand, uses Apache Cordova – an open source mobile development framework. This one provides the web-view where your “web application” will be shown as a mobile app.
You can find a lot of information about both technologies. There is also a great technical comparison between these two and Xamarin (another cross-platform library); which explains what types of optimization they have, and how easy it is to build apps in them.
Decisions
At this point, this introduction will probably not give you enough information to decide which one to choose, because it depends on what you want to build and on the complexity of your application. For some people this will be enough because their app is not as complex. Perhaps you don’t want to show a lot of data on the screen, or maybe you don’t even want to access the camera or present any 3D objects, then you will be safe to choose Ionic because you already have a web development team and the built-in components are more than enough for building your app. However, if your goal is to deliver more of a real native application, you might want to go for React Native.
Any of those reasons are valid, but sometimes it is not that easy to decide which one is the best option. That’s why it would be great to document some cases that hopefully fit some of the core features you want your application to provide to your final users.
Specific case: List Rendering
For this first particular case we will test both frameworks and watch how they behave when trying to present an item list to the user, and see how much they can handle.
Resources
I have created one basic project for React Native and one for Ionic – both just presenting a screen with a list of items with a small image. For an average application, you probably won’t show the user more than 20 items at the same time. Hence, our first test will render 20 items only and see how they both behave.
Test scenario specifications
| React Native | Ionic | |
| Hardware | iPhone SE | iPhone SE |
| Platform | Ionic DevApp | Expo |
Note: Both tests will be run in their respective development apps for simplicity, Ionic DevApp for Ionic and Expo for React Native.
20 Items
Let’s see how these two behave when rendering only 20 items on the screen.
As you can see both applications render that list very fluently, we can even give an extra point to Ionic there because you can easily use some beautiful vectorized icons out of the box thanks to its web-view rendering capabilities.
So ok, 20 items are no problem at all, those kinds of lists can work for simple apps that don’t require to render a lot of rows, something as color listing or month names are not a problem to render, so let’s go and test both with a hundred items.
100 Items
For 100 items both behave pretty well, if you are looking to list user comments, or maybe a list of recent posts both frameworks will deliver.
1,000 Items
Here we can notice the Ionic web-view begins to be a little flashy, I am scrolling as fast as I can so we can see how fast rendering can work without missing a beat, nevertheless if the user scrolls in a more natural way both frameworks can still be used safely without really sacrificing too much user experience. So if you want to list the user friends or the user activity, maybe the last 1000 sales of the company both frameworks will deliver. It is worth mentioning that in this list, elements are not too complex therefore if your 1000 items are more complex maybe the Ionic webview will be more flicker, so you need to decide if that’s something that can or can’t be tolerated.
10,000 Items
From here we begin to experience a big gap of differences so let’s analyze what’s going on. For the React Native app the scrolling still behaves the same as with the 1000 items, some problems still appear in the rendering of the icons, you can notice that while I go down the list, the scrolling bar is giving us feedback as the list is apparently being loaded while I scroll, this optimization is a classic mobile list technique in which the list items are rendered on demand, thus in the view the rendered elements are only the ones inside the cliping space, this is very useful when the list array is particularly long.
Now the Ionic web-view begins to be awkwardly flickering, and not only that, it is not even rendering anything for a long periods of time. Personally, I wouldn’t tolerate this kind of performance but again it is up to you to decide. This is happening for a simple reason webviews or browser rendering viewports don’t work the same as native applications they are constantly redrawing everything every time something changes, and as you can see the scroll bar appears to be in the right position as if the whole list was ready to be rendered, well the viewport won’t render the whole list actually, it has its own optimizations for rendering only things in the cliping space too, regardless it can’t separate rendering logic by list element so it has to prepare the 10,000 elements to be rendered in the right view spot at the time they are in the cilping space, this spends a lot more memory and processing and that’s why the viewport flickers in that way.
100,000 Items
So this is the crucial test, the Ionic web-view is completely blank, for the same reasons I mentioned before, the render engine can’t get 100,000 items ready to be rendered so we have reached the limits of this approach, but for the React Native List the list still behaves the same. I even tested it for a million items and it was still behaving the same.
Conclusion
In our first specific case we learnt something about performance and scalability, from one side we have Ionic which behaves pretty well with short lists but as we increase the number of rows in our list, it starts to reveal its weakness: a large amount of elements. On the other hand there’s React Native which behaves the same no matter the amount of rows, you’re probably thinking “Why on earth would someone want to render 100,000 items at the same time” well that’s the reason for this post to bring specific cases. Maybe you want to list every user in your system and with some programmatic list enhancements you can easily navigate through the whole list.
While we work on projects we gain a little more experience every time and we gain the ability to make educated decisions about how to make software, what to use, what to recycle and what to build from scratch. When we use a new technology we need to dive enough into it to make sure it’s what we need. Both Ionic and React Native have too much to offer and I hope the information presented here helps in your future decisions on which one to use.
I’ve written this article in a possible series way so If I encounter another good case in which React Native and Ionic shows extravagant differences I will publish it.
If you want to know more about Magmalabs, visit us here!
