React Native vs Real Native Apps
If you’re into mobile app development, the name of React Native mustn’t be new for you. The term has been trending in the world of technology for quite some time now. Since Facebook formally launched it as an open-source platform, a lot of businesses have already incorporated it into their process.
Just like any other origination, React Native comes with its own pros and cons. Despite the fact that professional web developers still prefer working with the native tools, there are a thriving number of budding developers who’re considering React Native for their projects.
This post is targeted to highlight the theoretical as well as practical aspects of using React Native in comparison with the Swift. To make this comparison, we have two almost identical apps in both frameworks (please check out details at https://github.com/weblab-technology/swift-honors-app
https://github.com/weblab-technology/react-native-honors-app)
My objective was to keep these apps as simple as possible so that it would be easier make a fair comparison in between important aspects of both the platforms. Below you will find a detailed analysis of the apps developed in Swift as well as in React Native in terms of CPU, GPU, and memory consumption. So let’s explore!
Swift vs React Native
Okay, so this app involves Facebook login, Facebook profile recovery, Database recovery, and Tab Bar Controller. I’ve codified the similar app in Swift as well as in React Native and will be using a real device to assess the performance of these apps . My objective is to equate them against each other to observe which one platform performs better.
The Swift
Unlike other languages, Swift is comparatively easy to work with, especially if you compare it to what we had before with Objective C. The XCode is surely a state-of-the-art application and it makes developing a whole lot easier when combined with the Swift.
The React Native
While talking about React Native, learning JavaScript is comparatively easier than learning Swift. The best bit? Dissimilar to iOS, where you need to adjust everything on your own, React Native comes handy for its users. I ran the app in a number of diversified iPhone sizes and guess what? They looked perfect there.
Performance Comparison
It’s time now to stack these apps against each other to conclude which one’s a better option. As mentioned earlier, I’ll be using a real device coupled with an XCode to test these apps. The three categories I’ll be focusing on would be CPU, GPU, and Memory consumption.
React Native app were lagging more than swift when I was resizing and dragging map.
Swift application used less energy in total during the same testing than React Native app according to the Energy Usage Log.
All in all, there are 4 tabs in my app — Facebook login, To-do list, Page view controller, and Maps.
CPU Measurements
Swift vs React Native — CPU Usage
Let’s review each category individually…
- Facebook Profile
With 1.21% difference in CPU measurement, React Native is slightly more efficient than Swift in terms of CPU usage.
2. To-do List
For the second tab, React Native with 0.66% efficiency is a winner again. While doing the task, spikes in CPU consumption were recorded at the exact time I included/deleted an item to/from the list.
3. Page View
Swift is a definite winner for this tab with 5.55% greater efficiency than React Native. While doing this task and noting down measurements, spikes in CPU consumption were recorded at the time I jumped to another page on Page view.
4. Maps
With 9.7% more efficient usage of CPU, Swift wins this category again. Noticeably, while doing this task, a spike in CPU consumption was recorded at the exact time I hit the Maps button.
So we have 50–50 result for Swift and React Native here. All in all, Swift was slightly more efficient than React Native in terms of CPU usage. The outcomes may have been otherwise if I granted myself enough time to test each app. interestingly, the CPU wasn’t used at any moment when moving from tab to tab.
GPU Usage
Okay, so the next analysis we will be doing would be of the GPU measurement. I will do one task per button for each paradigm and note down the results. The vertical axis goes up to 60 frames/second and I’ll be using ‘Core Animation’ tool to assess the results.
Let’s go over each category to check the results
- Facebook Profile
With 1.08 frames/sec measurement difference, Swift marginally wins this tab. The results were observed exactly at the time when I pressed the ‘Log in with Facebook’ tab.
2. To-do List
React Native barely wins this tab by running at 6 frames/sec higher than Swift. The measurements were observed exactly at the moment of adding/deleting items to/from the list.
3. Page View
Swift outperform React Native with 1.37% frames/sec for a Page view tab. While performing the task and noting down measurements, I noticed that the frames/sec elevated up to the 50s when I try to speedily move through the pages.
4. Maps
Swift is a winner here since it runs at 3.6 frames/sec higher than React Native. The measurements were recorded at the exact time when I pressed the ‘Maps’ button.
With 3–1 result, Swift is clearly a winner here.
Memory Usage
It’s time now to compare Swift and React Native in terms of memory measurements. I’ve done single task per tab and plotted the graph with memory (MiB) on the y-axis. The sample interval for CPU consumption is 1ms.
- Facebook Profile
Swift is the winner of this category with 0.07% MiB less memory consumption. A spike in memory was recorded at the moment I hit the ‘Log in to Facebook’ button.
2. To-do List
React Native outperform Swift in this category with 0.35% less memory usage. The spikes in memory consumption were recorded at the time when I included an item to the list. There was a decline in memory usage when I deleted an item from the list.
3. Page View
Once again React Native surpasses Swift this time by showing 0.07%MiB less memory usage. There was no memory spikes observed while toggling between the pages.
4. Maps
React Native again is a winner here by beating out Swift with massive 36.02 memory usage for this category. While doing this task, a spike in memory was recorded at the exact moment I pressed ‘Maps’ button.
I would say here that even if Swift is using more memory on average, which is true, memory would be managed better when the app grows. In addition to that, the results may have been entirely different if I granted myself sufficient time in each app instead of just concentrating on a single task at a time.
My Preferred Platform
Well, the apps I developed for React Native and Swift are nearly similar in their physical presentation. Moreover, it’s clearly evident that both of these apps somewhat function in an identical manner. I can conclude from this experiment that although React Native performed better in the memory category, Swift employs the CPU and GPU of the iPhone quite effectively. In conclusion, we can say that React Native is quite close to Swift, which is great. However, with 2–1 win ratio along with a high potential for memory, Swift is a definite winner here.
What Makes React Native So Popular?
The popularity of this framework doesn’t surprise me at all as it lands with a promise of creating apps for different platforms simultaneously. Yes, you got it right. Since React Native solely depends on JavaScript, you don’t need to get the knack of any other native languages to build apps for iOS and Android separately. Great! Isn’t it? But here the question arises that is this mobile framework suitable for all kinds of projects? Well, of course, no. There are a lot of considerations to take before making a final decision — your current coding proficiency, the scope of your app, and the duration of your project are the questions need to be answered before making a choice.
React Native — Pros & Cons
Pros:
Shared Core Advantage
While talking about the web apps, React manages to set up a React paradigm along with refreshing the Browser’s DOM. However, when it comes to mobile applications, things get demanding when it’s inescapable to manage a number of tree models over diversified platforms. Well, if you keep on adding more and more responsibilities on React’s shoulders, you could not expect anything but a disaster in the end.
An All-Inclusive Platform
If we take a closer look at the formal definition of React, it’s basically a JavaScript library for creating UIs. Alright, so it’s great for building UIs, but at the same time doesn’t include anything else.
Have you ever thought of preparing a whole recipe with a single ingredient? Similar to that, it’s not possible to build an entire application with just React alone. Definitely, you’d require webpack for devising the code, CSS to do styling, a Firebase for data maintenance and plenty of other things.
Well, if your scope of work is limited to web development only, React alone can be sufficient to meet the purpose. However, if you also deal with mobile app designing, it becomes insignificant to add a complete bundle of tools that can be employed to work in the similar way as the React. That’s why React is a library and React Native is a framework.
What React Native Offers?
- The New React
- Contributors for Android and iOS
- Flexbox for styling the user interface
- Different widgets and animations
- And much more
Thus, React Native is an exhaustive platform as it incorporates all you require to create a fully functional app. While the original React only takes care of web UI and you’ll require adding other relevant parts yourself to build a full web app.
Native UI
Have you ever thought why React Native is called ‘Native’? That’s because the user interface constructed with React Native comprises of native widgets that not only functions flawlessly but also feel consistent.
Things like scroll accelerations, animations, and keyboard behavior adds so much to the user experience that you cannot take a chance on avoiding them. This is where React Native apps outperform real native apps as it enables you to create truly native app supporting React paradigm in JavaScript.
Integrated Components
React Native offers a number of integrated components that enable developers to carry out basic tasks quickly and effectively. Some of them include:
- Text: Used to show text
- View: Used for designing a user interface
- Text Input: Enables users to enter text
- Button
For example, you can create a basic button in Native base by using the following source code.
Cons:
APIs Restriction
Although React Native supports a vast variety of APIs, there’s still a requirement to use other APIs through native modules. These modules are basically segments of the codes penned in the native language and then included into the remaining code. Undoubtedly, it’s a great way of resolving the issue, but it needs you to have sufficient proficiency about the native language and its tools.
Complex Design
Android and iOS make use of different design guidelines, which apparently means that by using React Native you have to include plenty of if-statements along with separate coding to stack up against the placement of graphical elements. In addition to that, creating high-quality custom UI is also exhausting in the React paradigm and I was compelled to write and include swift libraries while developing this app.
Slower Performance
This is the biggest setback for me. If you’re planning to develop a complicated app such as an image/video editor, React Native isn’t a good option for you. However, if your project is relatively small, you could save some time by sharing parts of your code (Yes, parts only! Code isn’t completely reusable and you could only use 60% of code for Android. It works better with iOS though….)
Native — Pros & Cons
Pros:
No APIs Limitations
What makes native truly functional is the fact that you can access all of the APIs via native environment. You don’t require an additional layer mapping either that needs to be updated.
Variety of Resources to Choose From
Development in a native environment gives you an opportunity to access a lot of third party libraries. By doing so will help you create more functional apps with improved development experience.
Long-Term Benefits
While working with React paradigm, the factor of uncertainty is always there. Real Native, on the other hand, is the safest possible choice for developers in the long run.
Cons:
The Requirement to Develop Two Separate Applications
Platform specificity is certainly the biggest disadvantage offered by the native platform. You have to develop separate codes for Android and iOS and no code can be shared between them.
Comparing React Native with Real Native Apps
How to Create a React Native App
Whether you’re building an app for iOS or Android, you need insight of three important things
- The preferred programming language
- Suitable tools
- The Application Programming Interface (API’s)
As far as the programming language for React Native is concerned, you require JavaScript or a little offbeat take on JavaScript called JSX. Luckily, you don’t need an elaborated set of tools either as mainly a text editor and the chrome debugger is sufficient for creating and testing the apps. API’s part is a little challenging though. Of course you can’t have a React Native approach of doing everything.
Although, you can take a start without any web exposure, you may still need to have some knowledge of web development to build perfect React Native apps. (How about investing in some professional JavaScript, HTML and CSS courses to polish your skills?)
Building a Native Android/iOS App
Objective-C and Swift are required languages to build a native app in iOS. For Android, you need to acquire proficiency in Java though. In terms of tooling, you’ll require to employ individual platform’s IDE as well as take in how that IDE and the relevant debugger can help you build the system.
Although web development forms a basis for React Native, there’s no specific reference frame in Android or iOS development. Not to forget these are genuine native platforms and you must have the knowledge of the prerequisites associated with these platforms.
Frameworks on the other hand aren’t an exception either. You require to become versed about how everything can be accomplished programmatically. In short you need to be a real programming freak to work with a native environment for building apps.
Which One’s Easier to Learn?
Beyond shadow of a doubt JavaScript is far easier to learn as well as debug in comparison with Swift, Objective-C and Java. But keep in mind, the ease comes at a cost. Since JavaScript is somewhat an easygoing language, there’s always a risk of errors inside your code.
All the other languages, on the other hand, come with a concept of compile time analysis which wipes out many possible errors.
Swift is definitely quite modern, but both the other languages continue to get improved and aren’t actually flawed in terms of performance and functionality. However, JavaScript holds various imperfections that could be a reason for inconsistency and imperfection (Make Google your best buddy and you’ll know the rest).
Thus, React Native may be simpler to learn, but it arrives with the troubles of JavaScript. Moreover, just like any other cross-platform paradigm, you need to cope with the ‘write once, deploy everywhere’ paradox.
React Native vs Real Native Apps — Conclusion
Great! We’ve reviewed quite a few important things until now. Choosing React Native over Swift depends on your personal preferences and requirements. I’d say if your app isn’t complicated and doesn’t need to include comparatively latest features like, complex animations or iMessage, you should opt for React Native initially.
And even if your requirements are complex, but you’re an iOS or Android expert and also acquire some web development exposure, React Native can make a good choice as you’ll possibly fix everything you need to.
However, if you’re an entrant in the world of development, I’d recommend launch on a single platform employing its native language in the beginning. Observe how it works. Then approach to the other platforms.
Do you really think React Native is the future of hybrid app development? Which platform do you think is more practical? Please drop your feedback in the comments section below and let’s discuss!
by Oleksandr Knyga, Software Engineer
Sharmeen Hayat, author & Data Specialist
with help of Andrey Gorobets, Front-end Developer
✉️ Subscribe to Codeburst’s once-weekly Email Blast, 🐦 Follow Codeburst on Twitter, and 🕸️ Learn Full Stack Web Development.
