12

I'm still very confused on how React Native works. Maybe because I don't have a decent background on Mobile Development (I have tried native Android once or twice though).

If I'm not wrong, hybrid frameworks like Phonegap or Ionic will run the entire project (or most of it) in a 'WebView', am I wrong?

Whereas native frameworks such as React Native is meant to use native resources instead of purely web technology.

But we still write Javascript, and React Native does the job so quickly that it is probably still using the Javascript we just wrote (I mean, it's not parsing, translating to native code and recompiling).

The question that comes to my mind is, what exactly is a native resource and what is not in a React Native project? Where is the Javascript we write running if not in a 'webview'? There are native libraries that creates the interface of Javascript to Objective-C and Java for both platforms? In a web-solution it simply injects the entire code in the WebView?

Extra question : can we consider React Native an hybrid framework just because we write one code for many different platforms, or it is not the correct terminology?

3 Answers 3

14

If I'm not wrong, hybrid frameworks like Phonegap or Ionic will run the entire project (or most of it) in a 'WebView', am I wrong?

Yes. Phonegap and Ionic, which uses PhoneGap (actually Cordova) as part of the framework make use of HTML, CSS and JavaScript to render the UI. The only connection (as far as I know) outside of that is the access that Cordova provides to the native APIs of the device (think sensors, for instance).

Whereas native frameworks such as React Native is meant to use native resources instead of purely web technology.

Yes, the approach of RN is to enable developers to use JavaScript and the React framework while retaining the benefits of native development (performance, feel-and-look, etc).

But we still write Javascript, and React Native does the job so quickly that it is probably still using the Javascript we just wrote (I mean, it's not parsing, translating to native code and recompiling).

Here is where I think your misunderstanding lies: you have to think of React Native as a 'bridge' between a native application that still relies on the iOS/Android/Windows native APIs and a JavaScript piece of code. The bridge grants JS access to such APIs, and cares about rendering the UI and other different native aspects, as well as providing data in the opposite direction (from Native to JS). The JS code is never 'converted' to say Java or Swift/Obj-C. It is executed in the same way you program it. However, you have the possibility of asking RN to use some native component from JavaScript (say, a <Text> will instantiate a UILabel in iOS)). The library then implements this approach with a handful of components, like layouts, views, controls and so on, but the essentials remain as described.

The question that comes to my mind is, what exactly is a native resource and what is not in a React Native project?

So... basically, anything that is written in JavaScript will not be native, but through its execution you get native components. Anything that you program using the native API directly (that is one of the strengths of RN, that you can still develop natively if you feel up to it or a certain native component is not implemented in the library) can be considered 'native'.

Where is the Javascript we write running if not in a 'webview'? There are native libraries that creates the interface of Javascript to Objective-C and Java for both platforms?

As explained before, the React Native is the interface between JS and Objective-C. The JavaScript is not rendered in a WebView at any time.

In a web-solution it simply injects the entire code in the WebView?

React Native is not meant for the web... unless you use this.

Extra question : can we consider React Native an hybrid framework just because we write one code for many different platforms, or it is not the correct terminology?

Well... I'd say that a hybrid framework is a tool that combines different development resources (say web technologies and native APIs). In that case, React Native would fall in the category. I would not call it hybrid just because it works in several platforms (that I would simply call multi-platform).

Sign up to request clarification or add additional context in comments.

6 Comments

You are saying that UI Components will be backed by native components for each platform? A ListView in RN, for example, will inject a ListView Layout in Android? Being a little more specific, when I add a ListView to my React code in RN and then re-run the app, it will, in terms of Android, programatically instantiate a new Android ListView and append it to the Layout ? Is that the idea?
Yes, that is exactly what it does.
You mention Windows in here, but as far as i know, RN doesn't support Windows phone
Not officially, but the Microsoft folks maintain a version that works for both UWP and WPF. Some components are not yet implemented though: github.com/Microsoft/react-native-windows
@JackBlack The native components are not compiled from the JavaScript, they are instantiated. The JS code is executed every time the app is launched and it can call native APIs to, among other things, create the UI (that's why it's called a 'bridge''). Since the JS code is packed as an asset of a native application, it can be swapped by a different version over the air (which is allowed by both iOS and Android). The next time that the application launches, it will read the updated version of the JavaScript code, potentially defining a new UI.
|
0

As per my knowledge Native resources are the components purely given by the framework/OS(Android/iOS). You must have the respective Android/iOS knowledge to make the native UI.

Coming to ReactNative, It will create/generate the Native components using your javascript or HTML code. I can say that it treats you code as commands to generate the required native components

Comments

0

From https://hub.packtpub.com/react-native-really-native-framework/

"It’s important to know that everything is done on three main threads:

  • UI (application main thread)
  • Native modules
  • JavaScript Runtime"

Basically, the main thread is JS (in JS runtime, JS event-loop) and everything else is delegated into native modules.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.