React Native at GeekHive
December 5, 2017
Mobile devices have become ubiquitous and are now being used for things one might traditionally use a computer for. As of today, mobile devices account for over 50% of all web visits. As this trend continues, it is increasingly important to have a strong mobile application presence.
Mobile Application Landscape
When considering a mobile application presence a few options prevail:
- Cost: Low
- Utility: Low
- User Experience: Low
Responsive websites provide an adequate mobile user experience. Responsive web design is well understood, and a host of style libraries exist to help produce them quickly. With the recent advent of progressive web applications (PWA), your responsive website can even be built to run offline.
Responsive websites have their limitations, however. Relative to their native counterparts, responsive websites tend to have limited utility and the user experience feels clunky and slow. To interact with a website you have to first open a browser and navigate to the URL; while tools exist to create home screen bookmarks for websites on any mobile platform, this requires manual intervention by the user.
Hybrid Mobile Applications
- Cost: Medium
- Utility: Low
- User Experience: Low
Hybrid mobile applications are a middle ground between native mobile applications and responsive websites. Essentially they are a responsive website displayed in a native application via an embedded web browser. These types of solutions allow you to deploy an application to stores while leveraging a web developer skillset.
While hybrid mobile applications solve the home screen icon issue, they have all of the same problems as responsive websites. Additionally, deployment is much more difficult compared to a responsive website, usually requiring a store submission for feature updates.
Native Mobile Applications
- Cost: High
- Utility: High
- User Experience: High
Native mobile applications provide the best user experience of all of the options. They are the fastest and most responsive of the options which opens the door to application types that aren’t viable as a website product. They can also provide the most utility, as they are not constrained by the capabilities of mobile web browsers.
Native mobile applications have a big downside though: traditionally they required separate development efforts for each platform you want to support. This made the cost of developing such an application prohibitive for many companies and feature upgrades usually require a full store submission.
A New Kind of Native
React Native is a native mobile platform that turns these traditional comparisons on their head. It allows for low cost development capable of being done by traditional web development teams yet offers a high amount of utility and a great user experience.
React and React Native
React has traditionally been used for web development. Over time, web rendering was factored out of the core library into a separate library (react-dom). This change allowed React to transcend being a strictly web-only library, allowing for pluggable rendering targets and sent the groundwork for React Native.
React Native leverages the component model of the React core library and a layer of common abstractions to provide primitive UI components (e.g. Text, Image, View), a CSS-like method of styling, and a plethora of API’s for various device capabilities.
Anatomy of a React Native Application
Sharing Code Between Platforms
A Great Development Experience
Getting up and running with React Native is a breeze. React Native provides a great “Getting Started” guide that, while it has many steps, will get you set up for cross-platform development painlessly. React Native ships a first-party command line utility that makes bootstrapping a new application simple, but there are alternative utilities made by the community that support different workflows, such as create-react-native-app and expo.
Once running, React Native provides all of the typical development workflows you would expect from a traditional modern web application: remote debugging of device or emulator, live and hot reloading, a utility to inspect the component tree and network transmissions, and a utility to profile the run time performance.
The performance of React Native applications is competitive with other traditional native development approaches. From a study conducted earlier this year that profiles the performance of comparable applications written in Swift with traditional iOS libraries versus React Native, the conclusion was:
- Most efficient use of CPU: Swift
- Most efficient use of GPU: React Native
- Most efficient use of RAM: React Native
React Native is an exciting addition to the mobile application development landscape. Its unique blend of utility and efficiency are a great fit for many products and companies. At GeekHive, we look forward to working with our clients to provide feature rich, high impact mobile applications using React Native for maximum developer efficiency and at minimum cost to our clients.
Stay up to date with our email updates!
Like what you've read? There's more where this came from!
Our monthly newsletter features a blog roundup of our top posts so you can stay up to date with industry trends, tutorials, and best practices.