development-of-hybrid-mobile-apps-react-native
Development of Hybrid mobile apps – React Native
November 28, 2019
Andrei Ionescu
Tech

In a time of tremendous mobility and accessibility we all find a great support in the awesome devices that we call mobile phones and which are turning more and more powerful. Systems are connected and applications must share features regardless of the device they are accessed from. During the present article we shall have a look at the mobile app development options to address the increasing demand on the market.

Hybrid applications

A hybrid application is a piece of software that uses both platform specific (native) code and non-native code (usually HTML5/Javascript). This is accomplished by wrapping the web content within an instance of system’s webview renderer, then the whole suite is packed in an installable kit. The content can either be delivered via http or bundled within the app, especially if it is desired to obtain offline functionality.

Hybrid applications are used primarily in mobile app development, where differences between the two major operating systems used in present, Google’s Android and iOS from Apple, increase initial development investment almost twofold, and make maintaining difficult. Android native apps are written using Java, while iOS developers have a choice between Objective-C and Swift. Either way, development for both platforms takes a very wide set of skills. The hybrid approach gained a large popularity in recent years, now representing close to 50% of new mobile app releases, since they offer the great advantage of having a common codebase regardless of targeted platforms, removing the risk of platform specific issues.

Reasons why a hybrid mobile app is a good idea:

  • Built on web technology HTML/CSS/Javascript, making the transition for web developers very easy
  • Cheaper and faster development
  • Easier maintenance
  • Common codebase for all platforms
  • Easier to control user interactions as opposed to an web app, where the user can also modify the URL from the browser address bar to manipulate states and access out-of-flow destinations
  • Access to platform native APIs, being able to use all functionalities of the device (camera, storage, data, hardware controls)

Why you might want to reconsider and not use a hybrid app:

  • Slower than native, the wrapper adding some overhead
  • Dependent on the third party framework picked as the wrapper
  • Not fully integratable with the OS, may affect interractibility
  • Can’t easily reproduce native app look and feel
  • Customisation for each platform would remove the benefit of common codebase

Popular hybrid mobile app frameworks:

  • React Native

Developed by Facebook, Open-source, Reusable Components. Used in: Facebook mobile app, Instagram, Skype, Discord, Pinterest, Uber Eats

  • Ionic

Open Source SDK, able to integrate native device plugins

  • Framework 7

No external dependency, Lots of UI elements and widgets.

  • PhoneGap

From the team behind Apache Cordova, the Adobe PhoneGap framework is an open source distribution of Cordova. Offers native functionality, can be extended with native plug-ins.

  • Onsen UI

Open source, compatible with AngularJS, Angular2+, VueJS, React. powerful CLI, versatile, flexible.

A closer look at React Native

React Native stands out in the pack of hybrid app frameworks, bringing the promise of converting the Javascript code into native instructions, thus minimising overhead brought by the wrapper of web content. It also provides the possibility of incorporating complete native components if needed. Taking things even one step further (away from the hybrid approach), the so called code ejection feature completely takes apart the wrapper, giving complete access to the inner workings of the app.

Developing in React Native isn’t much different from developing in the regular React framework for web. It uses same reusable component based structure written with JSX, an extension to Javascript ES6 standard developed with React, which enables embedding HTML code into script files, bringing template and control functions together in the same place. It is recommended to use Expo, a free and open source toolchain built around React Native to help with everything from project initialisation, to hot reloading changes live into the compiled app and delivering over-the-air updates to app content. Expo comes with some caveats though. It takes over the native layer of the app, making it impossible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app. So of your app needs inclusion of some third party SDK, and there’s no hook provided for it by the Expo client, the only option is code ejection and abandoning the advantages brought by Expo in the first place.
React Native is also compatible with state containers like Redux and Mobx. State containers act like stores for control properties of components, facilitating communication and event handling.

Conclusion

In conclusion, in a world where the mobile market is in continuous expansion, the need of mobile apps has never been greater, but maintaining said apps, never been more difficult. With Google and Apple racing each other to bring the newest and greatest in the palm of your hand, software must keep pace. Developing once for both platforms is a strong advantage to keep up with the requirements, and hybrid mobile apps are just the tool for the job. Long gone are the days of simple single page applications, and React Native, Expo and Redux is the best choice of tech-stack to accommodate for the increasing complexity of apps, as proved in part by the impressive number of big companies that chose the same solution for the billions of customers that use their mobile apps.

Do you want to enhance your operations with a mobile app? Let’s talk about it!

Talk to the team

ASK US SOMETHING OR JUST SAY HELLO, WE'RE HERE.
Contact