search

benoitvallon / react-native-nw-react-calculator

Mobile, desktop and website Apps with the same code
MIT License
5.21k stars 864 forks source link
android-app architecture desktop electron flux ios-app react react-native universal-app

readme

Mobile, desktop and website Apps with the same code

Build Status Dependency Status devDependency Status

This project shows how the source code can be architectured to run on multiple devices. As of now, it is able to run as:

A demo for the Website App is available here.

Screenshots

Mobile Apps (iOS & Android)

Mobile Apps

Desktop Apps (NW & Electron)

Desktop App

Website App

Website App

Libraries/tools

This project uses libraries and tools like:

Basic philosophy

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

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 .js is 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);
  }
}

What's next

Here are some thoughts about what can come next:

Thank you Robert for your awesome design

I want to thank Robert O'Dowd who kindly authorized me the reuse his very beautiful design. The original design made by Robert was part of his project called "Simplifycation" visible here.

How to build/run the projects

General requirements before running any specific project

With some versions of npm (>=v3.3.10 <=v3.6.0)

Some builds from npm included bugs while npm install. So if you are using a npm version within the range form 3.3.10 to 3.6.0 included, you must run npm install twice. Those versions including npm v3.3.12 are the ones bundled by default with node from version v5.1.0 to v5.5.0.

The Mobile Apps (iOS & Android)

Requirements for React Native

iOS

Android

Running the Mobile Apps

iOS

Android

Congratulations! You've just successfully run the project as an iOS or Android App.

The Website App

Requirements for React

There isn't any additional requirements since you already installed the deps with npm install.

Quick start

Congratulations! You've just successfully run the project as a Website App.

The Desktop App

You can either run the project with NW or electron.

Requirements for NW

To run the project, you are supposed to run something like:

/path/to/nw .

On OSX, the executable binary is in a hidden directory within the .app file. The easier solution to install it is to download the app on http://nwjs.io/ then copying it to your application folder. You will now be able to run:

/Applications/nwjs.app/Contents/MacOS/nwjs .

You can also setup an alias to call the binary.

alias nw="/Applications/nwjs.app/Contents/MacOS/nwjs"

Quick start with NW

Congratulations! You've just successfully run the project as a Desktop App.

Quick start with Electron

Congratulations! You've just successfully run the project as a Desktop App.

Run the tests

To run the tests, simply run:

npm test

Tests