React Native, the WebView 2.0

You probably already use them in your applications: webviews… Most likely to display content screens, often to share “pages” with your website, and sometimes even to create a complete application: webviews.

Webview: a versatile component

The webview is one of the oldest components in mobile development, and its principle is simple: it allows you to integrate a “web browser” into a screen, enabling the development of pages using web technologies (HTML/JS/CSS) within a native application.

Various uses

Excluding “shell” applications (applications consisting of a single webview to encapsulate an entire website), webviews have various applications:

• To display static content screens (such as terms and conditions).
• To display complex screens shared with the website, which can be instantly updated without going through the app store publication process (like transactional flows such as e-commerce checkout processes).
• To view related websites without leaving the main application.

The limitations

Although very effective for sharing functionality between mobile platforms or between web and mobile experiences, webviews have their drawbacks. You may have already noticed this while using certain applications. Firstly, their performance is inferior to native screens since they execute interpreted code (unlike native, which uses compiled code). This can result in “freezes” during the initial page rendering or a slightly laggy scrolling experience.

Additionally, there may be additional network loading time when the page’s code is not integrated into the application and must be fetched from a server. Depending on the quality of the connection, this could take several extra seconds. Furthermore, transitions between native screens and webviews are often quite visible. The visual design and behavior of the service may differ slightly.

Navigation can also be confusing, as webviews have their own navigation (moving from one web page to another within the same webview), just like the encapsulating application. Often, it’s difficult to determine the effect of the “back” button in a webview — will it go back to the previous webview page or exit the webview altogether? It all depends on the app’s design.

React Native: A Viable Alternative

React Native is a cross-platform development framework (one codebase for both iOS and Android) that uses JavaScript to generate applications with a native look and feel.

Very popular lately, it utilizes “bindings” to allow the use of native platform UI components with JavaScript.

As effective as a webview?

Similar to a webview, React Native offers the following advantages:

• Write code once to target iOS and Android (but not shareable with the web, unlike HTML pages).
• Mix React Native screens with native screens within the same application.
• Update a screen without resubmitting a new version of the application (possible via Microsoft’s CodePush solution, while adhering to Apple’s guidelines on the matter — section 3.3.2).

Better than a webview?

React Native also allows you to overcome the limitations of webviews:

• It produces a native rendering, making the performance of React Native screens very close, if not identical, to native screens.
• Since React Native uses native components, there is no discernible seam in the user experience.

In conclusion

Over the past decade, the webview has often been the number one component for sharing development across various platforms and channels. However, this has often left users disappointed by the experience and performance of this solution.

React Native can resolve this age-old dilemma by offering the same flexibility as a webview while providing an experience very close to native.