Mobile, desktop and website Apps with the same code

ref: https://github.com/benoitvallon/react-native-nw-react-calculator

  • iOS & Android Apps (based on react-native)
  • a Desktop App based on NW or based on Electron
  • a Website App in any browser (based on react)

Libraries/tools

This project uses libraries and tools like:

  • es6 syntax and babel
  • react for the Website App and Desktop App,
  • react-native for the iOS & Android Apps
  • NW to package the Desktop App
  • Electron to package the Desktop App
  • flux to organize the data flow management
  • css-loader to integrate the styles in the builds
  • grunt to create the builds
  • webpack to help during the development phase with hot reloading

Basic philosophy

All the code is contained in the src directory, especially the 3 main entry files that are used for the builds:

  • index.ios.js & index.android.js are the ones used to build the iOS & Android Apps
  • index.js is the one used to build the Website App and Desktop App as the code is strictly the same.

Flux architecture actions/stores

All the flux architecture is share to 100% to all the different builds. This means that all the logic and data management code is done only once and reuse everywhere. This allows us to have an easy tests suite as well and to ensure that our code is working properly on all the devices.

Components

The real interest of the project is in how the components have been structured to shared most of their logic and only redefined what is specific to every device.

Basically, every component has a main Class which inherits a base Class containing all the logic. Then, the main component import a different Render function which has been selected during the build. The file extension .ios.js, .android.js or .jsis used by the build tool to import only the right file.

The .native.js files contain code that is shared between both mobile platforms (iOS & Android). Currently, the .ios.js and .android.js files compose this .native.js file since all code is shared right now. However, if a component needed to be different for platform specific reasons, that code would be included in the corresponding platform specific files.

At the end, every component is defined by 6 files. If we look at the screen component, here is its structure.

Screen.js
├── ScreenBase.js
├── ScreenRender.ios.js (specific to iOS build
├── ScreenRender.android.js (specific to Android build)
├── ScreenRender.native.js (shared mobile app code - iOS & Android)
└── ScreenRender.js (used during Website and Desktop build)

And here is the main Class file which composes the files.

'use strict';

import Base from './ScreenBase';
import Render from './ScreenRender';

export default class Screen extends Base {
  constructor (props) {
    super(props);
  }

  render () {
    return Render.call(this, this.props, this.state);
  }
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s