React Native and the New Dream of Learn Once, Write Anywhere – InApps 2022

Main Contents:

React Native and the New Dream of Learn Once, Write Anywhere – InApps is an article under the topic Software Development Many of you are most interested in today !! Today, let’s InApps.net learn React Native and the New Dream of Learn Once, Write Anywhere – InApps in today’s post !

The Dream of Write Once Run Anywhere

From Java to C# Xamerian, the ability to write a single code base that works across multiple platforms has been the holy grail of mobile development. Additionally, many developers have far more experience with web development toolchains, than they do with mobile development ones, and are reluctant to expand a large amount of time and effort learning “yet another framework.”

But many are finding the “write-once, run-anywhere” paradigm is closer to “right-once, debug-everywhere” at best, and at worst being able only to carry over only a tiny bit of app logic and code over from system to system.

The other major limitation with some incumbent solutions is a lack of proper access to low-level hardware APIs — such as GPS, tilting, and multi-touch features. Finally, many of the current cross-platform mobile frameworks suffer from substantial performance penalties.

Even in the best case scenario, your average web developer is going to experience a substantial amount of friction switching to mobile development, and will often end up developing a subpar mobile application.

Redefining the Dream

While any developer would love it if their code just ran anywhere, this is a difficult problem to solve. It is somewhat of a workaround solution to the actual underlying issue: Most developers want to be able to carry over their skill sets from environment to environment, and don’t want to learn everything from scratch, just to target another platform.

While still a difficult problem — and perhaps not as ideal as simply having one code base run anywhere — this is a tractable problem to solve. With React Native, the new paradigm is “learn once, write anywhere.” With this approach, an experienced web React developer can get up and running, and write Android or iOS apps at a much faster pace.

Currently, there is a little to no code sharing possible between React apps on the web, Android, and iOS React apps. With time, Facebook hopes to allow code sharing between target platforms. To understand how this will be facilitated, we can look at how React for web was broken into two packages: React and React DOM.

Not About the DOM

At its core, React was never about the Document Object Model (DOM), the standard HTML API for browsers to interpret web pages; the DOM was just an implementation detail to how React was created for the web.

When programming in React, one ideally doesn’t do any work with the actual underlying DOM; instead, one stays within React’s virtual-dom and let’s it figure out how that translates to the real DOM.

For those who aren’t familiar with React’s virtual-dom, the virtual-dom is a lightweight abstract description of a DOM. The actual DOM is quite heavy weight and a resource hog while React’s virtual-dom is composed of lightweight JavaScript objects. Instead of going straight to the DOM, each change in your applications DOM generates a new virtual-dom and is compared with the previous iteration. This difference is then applied to the actual DOM.

This approach is efficient as React does the minimum amount of actual DOM manipulation necessary to bring us to this new state, even if conceptually we can view it as we are just regenerating the entire DOM with each change to our application. This allows developers to reason easily about application state and in an immutable way, while getting all the performance benefits of making small changes to a mutable document structure.

But What About iOS and Android?

Given that, how does this relate to the bigger picture of React not being about the DOM? Well, imagine instead of the DOM, we are composing an app made up of iOS components, or even more abstractly, any set of UI widgets for a platform. We can still describe the app as a series of nested components, where we will define our “pseudo” components, that eventually resolve to actual UI widgets or DOM elements. For example, let’s say we had a fairly typical app with navigation. The official React Native site provides an iOs code sample for this:

import React, { Component, TabBarIOS, NavigatorIOS } from ’react-native'; class App extends Component { render() { return ( <TabBarIOS> <TabBarIOS.Item title=”React Native” selected={true}> <NavigatorIOS initialRoute={{ title: ’React Native' }} /> </TabBarIOS.Item> </TabBarIOS> ); } }

import React, {

Component,

TabBarIOS,

NavigatorIOS } from ‘react-native’;

class App extends Component {

render() {

return (

<TabBarIOS.Item title=“React Native” selected={true}>

</TabBarIOS.Item>

</TabBarIOS>

);

}

And the “equivalent” Android version:

import React, { Component, DrawerLayoutAndroid, ProgressBarAndroid, Text } from ’react-native'; class App extends Component { render() { return ( <DrawerLayoutAndroid renderNavigationView={() => <Text>React Native</Text>}> <ProgressBarAndroid /> </DrawerLayoutAndroid> ); } }

import React, {

Component,

DrawerLayoutAndroid,

ProgressBarAndroid,

Text } from ‘react-native’;

class App extends Component {

render() {

return (

<DrawerLayoutAndroid renderNavigationView={() => <Text>React Native</Text>}> <ProgressBarAndroid />

</DrawerLayoutAndroid>

);

}

While these apps have different underlying components, Android having DrawerLayout and iOs have TabBarIos, the general structure of both apps look quite similar, even to a developer that isn’t familiar with React or mobile development! This is a major win as it not only allows developers to leverage roughly the same skill set for both apps, but it makes porting from one platform to another a much simpler affair. Instead of having to possibly — and quite likely — re-architect the app from scratch, the porting process will mostly entail swapping out one version of a component with another. The overall component hierarchy design will largely remain the same, though.

Companies left and right have been adopting React Native for their applications. It remains to be seen if React Native is a passing trend or the cross-platform solution many of us have been waiting for, but React Native is off to a great start so far!

Feature Image via Pixabay, licensed under cc0.

Source: InApps.net

Rate this post

Phu Nguyen

As a Senior Tech Enthusiast, I bring a decade of experience to the realm of tech writing, blending deep industry knowledge with a passion for storytelling. With expertise in software development to emerging tech trends like AI and IoT—my articles not only inform but also inspire. My journey in tech writing has been marked by a commitment to accuracy, clarity, and engaging storytelling, making me a trusted voice in the tech community.