In addition to guest posting on the UpCity blog, Blue Label Labs is featured as one of our Top Mobile App Developers in the United States. Check out their profile here.
I recently stumbled across an article on VentureBeat about the usage of hybrid apps in today’s digital ecosystem based on a report from a development company and found myself cringing at the misunderstanding. While there are still hybrid apps in circulation, most of the successful apps that we see today are cross-platform apps built with tools like React Native. And there is a difference.
On the surface, hybrid sounds a lot like cross-platform. This is because the underlying idea is the same –for an app to run on more than one platform, meaning on both Android and iOS, it needs to be developed with technologies that play nicely regardless of where the app is running.
The problem is that hybrid app development requires navigating through extra layers of code to get components to function properly as web programming technologies used in hybrid development don’t directly interface with the underlying system.
The truth is, the hybrid app is basically a dead technology. Nobody should be building true hybrid apps because it’s about as easy – and smarter, especially when looking at the long term – to develop cross-platform using React Native or some similar technology like Flutter. This is why Walmart scrapped its existing hybrid app in favor of a truly cross-platform app built with React Native.
I’d like to first look at the hybrid app as it’s necessary to understand its shortcomings and from there we’ll take a look at why cross-platform app development is the superior choice.
The Shortcomings of the Hybrid App
Hybrid app development is something that came about out of necessity as this enabled developers to quickly cobble a piece of software together that would run on both major mobile platforms. Because the goal is to furnish a product for the largest possible audience, it made sense to do what was necessary to build an app that could function on both iOS and Android with as little friction as possible.
This was (and still is) accomplished by using web technologies such as HTML5, which has been designed to be platform agnostic. Here, developers take advantage of technologies like WebView or WebKit which are embedded browsers that are used for layout and displaying content. In doing so, the majority of the app can be built as you would build a website.
Web technologies enable an app to do a few basic things such as quickly push and pull information between the app and a server and properly layout all the elements of the software on any screen. By using a web engine, HTML5, CSS, and JavaScript allow developers to design the elements of a site or app and make it “move” accordingly when a user interacts with some component.
The problem with this design is that it doesn’t inherently allow a developer to engage with OS system components. Web technologies mostly serve as an efficient tool to display content from a server like text, images, and videos. What it doesn’t do without some help is allow the app to interact with hardware components on the device which is essential for using features like the GPS, accelerometer, camera, or other parts of a device.
A hybrid app requires connectors from the framework used to build the app for it to properly interface with the underlying system when using any of the major development products like Ionic, Apache Cordova, or Visual Studio. This gives a closer-to-native functionality but it increases the number of moving parts which inherently affects performance. This added friction slows down hybrid apps as it requires more steps to complete steps when accessing OS resources as well as everything underneath. Today, most developers stray away from this style of app development unless they’re simply out to make a quick dollar.
The hybrid app was a good interim solution until around five years ago when true cross-platform frameworks began to emerge, namely React Native. Rather than rely on a kind of web browser to handle a majority of the functions in an app, cross-platform frameworks enable developers to build native applications with one set of code.
The Simple Reason Walmart Shifted to React Native
The hybrid app solution worked for a while as it gave developers a way to quickly develop an app that would run on either major mobile platform with minimal tweaking. Then, React Native emerged in early 2015 and completely changed the game.
Rather than create an app using web technologies and build out or take advantage of plugins necessary to use the hardware of a system, developers can use React Native to build true-to-form native apps with a single code base. Apps developed with React Native can use at least 80% of the same code by leveraging JavaScript which solves a few problems.
- This allows a product to reach the market about as fast as when developing a hybrid app as the same code can be reused on both Android and iOS. Too, it’s typically easier to support over time as well as modify when changes to Google Play or the App Store
- Native apps look and feel as though they are built with the device in mind. They function efficiently without having to “wrap” sections of code or use plugins to access underlying components.
This is because, in the cross-platform world, Javascript is translated on the fly into native platform calls. It doesn’t need the web engine as a middle man.
In the article I alluded to earlier, the author called the app used by Walmart a hybrid which isn’t true. The most current iteration of the Walmart app for both Android and iOS was built using React Native. The usage of web tech has since been phased out, meaning it no longer qualifies as a hybrid anymore since the heavy lifting is accomplished through native code.
Walmart ended up shifting to a cross-platform app after it ultimately became too expensive and time-consuming to maintain the hybrid design. Though it gave them what they needed for the time, growing the app required writing a lot of custom code to get features to work, thus defeating the purpose of the hybrid app. While it does still have some minimal hybrid aspects, the Walmart app qualifies as a truly native app.
Final Thoughts
The takeaway here is that business needs to stray from considering hybrid apps as they lack the capacity to perform like native apps. Though you might be able to get to the market faster, the costs incurred over time are usually greater as many find themselves in the same spot as Walmart where further development requires writing custom code anyway. With React Native, you can write code once and share most of it between the two major mobile platforms, making it easier to support in the long run.