Share Your Application Logic on Web and Mobile

Relaying almost entirely on existing Web technologies and tools, React Native has already proven its power.
Lauri Hahne has now crossed the bridge beetween Web and Mobile showing a proof of concept app that shares application logic beetween the two.

We can only imagine similar approaches being applied when the upcoming Android version of React Native is being released.

Compared to older hybrid mobile frameworks, such as PhoneGap, React Native uses native UI controls to provide fully native look and feel. In addition, it allows us to leverage existing JavaScript libraries and frameworks such as RxJS, lodash, and Bacon.js. It provides a browser-like execution environment with features like XMLHttpRequest and window.fetch. Application layout is specified using a CSS-like DSL. All of this makes it possible to reuse existing web development expertise and even existing code on native mobile development.

React Native works by executing your application as JavaScript on the phone. Your code and the UI layer are executed on different threads and React Native asynchronously handles all events between these two. Native UI controls are exposed as JavaScript classes that are then used just as HTML elements are used on a regular React web page. React Native provides wrappers for the most common UI controls and it is possible to create your own wrappers to access apis that are not supported out of the box.

Sharing your code

I developed a proof of concept application that downloads train timetable data from a public rest api and displays it on your phone. The user interface is pictured below. In addition, I developed a simple React based web site that uses the same application logic to fetch timetable data. This demonstrates that it is indeed viable to share common business logic between the browser and a React Native application. The full example can be found at https://github.com/lhahne/trains.

blog post on gofore.com

trains app on GitHub

Trains