React Native at GeekHive

December 5, 2017

Blog | Development | React Native at GeekHive
React Native at GeekHive

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:

Responsive Websites

  • 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 is a JavaScript library for building user interfaces. It offers a method of describing user interfaces as isolated components with a reactive data flow model. React components are highly composable and extensible.

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

With React Native you write all of your application UI and logic in JavaScript (or any language that can compile to JavaScript). This code is executed in the native application shell by an embedded JavaScript interpreter, connected to the application shell through a two-way communication bridge.

Sharing Code Between Platforms

Thanks to the React Native platform, code that is written can be shared across supported OS’s.  The React Native platform provides a suite of common UI and device capability to a JavaScript execution environment. Since all of the UI and business logic is written in JavaScript, it executes across supported OS’s in a largely identical and predictable way.

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.

Competitive 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

Conclusion

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.

Justin Firth

UX/Front End Practice Lead
Tags
  • Best Practices
  • Mobile Applications
  • Native Mobile Application
  • React Native
  • Technical Strategy
subscribe to GeekHive's newsletter

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.

Recent Work

Check out what else we've been working on