JS Runtime in React Native

JavaScript Runtime

When using React Native, you’re going to be running your JavaScript code in two environments:

  • On iOS simulators and devices, Android emulators and devices React Native uses JavaScriptCore which is the JavaScript engine that powers Safari. On iOS JSC doesn’t use JIT due to the absence of writable executable memory in iOS apps.
  • When using Chrome debugging, it runs all the JavaScript code within Chrome itself and communicates with native code via WebSocket. So you are using V8.

While both environments are very similar, you may end up hitting some inconsistencies. We’re likely going to experiment with other JS engines in the future, so it’s best to avoid relying on specifics of any runtime.

JavaScript Syntax Transformers

Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.

As of version 0.5.0, React Native ships with the Babel JavaScript compiler.

Debugging React Native apps in Browser

https://facebook.github.io/react-native/docs/tutorial.html

the react-native-web-player simulates a React Native environment using the components from react-native-web.

TRY IT HERE: https://cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.6.1/index.html#platform=android

https://facebook.github.io/react-native/docs/debugging.html

Debugging React Native Apps

To debug the javascript code of your react app do the following:

  1. Run your application in the iOS simulator.
  2. Press Command + D and a webpage should open up at http://localhost:8081/debugger-ui. (Chrome only for now) or use the Shake Gesture
  3. Enable Pause On Caught Exceptions for a better debugging experience.
  4. Press Command + Option + I to open the Chrome Developer tools, or open it via View -> Developer -> Developer Tools.
  5. You should now be able to debug as you normally would.

Optional

Install the React Developer Tools extension for Google Chrome. This will allow you to navigate the view hierarchy if you select the React tab when the developer tools are open.

Live Reload

To activate Live Reload do the following:

  1. Run your application in the iOS simulator.
  2. Press Control + Command + Z.
  3. You will now see the Enable/Disable Live Reload, Reload and Enable/Disable Debuggingoptions.

JS to Native Apps Overview

Ionic uses WebView

Phonegap uses WebView

Ionic Native uses WebView for UI + Wrapper around Curated set of Cordova Plugins for Native Access

Nativescript uses V8 JS Runtime for running JS and use JS mappings to Native API to make Native Calls. It also uses XML to define UI Templates which at runtime are rendered as Native UI Components

React Native, like Nativescript, uses JS Runtime but for UI, it’s better as it uses JSX to declare UI Templates and these are then mapped to their native UI Counterparts for Native UI rendering

In React, a component describes its own appearance; React then handles the rendering for you. A clean abstraction layer separates these two functions. In order to render components for the web, React uses standard HTML tags. This same abstraction layer, known as the “bridge,” enables React Native to invoke the actual rendering APIs on iOS and Android. On iOS, that means that your React Native components render to real UI Views, while on Android, they’ll render to native Views.

You’ll write what looks an awful lot like standard JavaScript, CSS, and HTML. Instead of compiling down to native code, React Native takes your application and runs it using the host platform’s JavaScript engine, without blocking the main UI thread. You get the benefits of native performance, animations, and behavior, without having to write Objective-C or Java. Other cross-platform methods of app development, such as Cordova or Titanium, can never quite match this level of native performance or appearance.

ref: https://www.infoq.com/articles/react-native-introduction

Integrating with Existing Apps guide and Native UI Components guide

 

Using CPU vs GPU Version of TensorFlow

Head to the official TensorFlow installation instructions, and follow the Anaconda Installation instructions. The main difference between this, and what we did in Lesson 1, is that you need the GPU enabled version of TensorFlow for your system. However, before you install TensorFlow into this environment, you need to setup your computer to be GPU enabled with CUDA and CuDNN. The official TensorFlow documentation outline this step by step, but I recommended this tutorial if you are trying to setup a recent Ubuntu install. The main reason is that, at the time of writing (July 2016), CUDA has not yet been built for the most recent Ubuntu version, which means the process is a lot more manual.

 

ref: http://learningtensorflow.com/lesson10/

https://www.tensorflow.org/versions/r0.12/get_started/os_setup.html#gpu-related-issues