Single code base for mobile and web

Question

We are going to begin a project for our company a order status application that will be hosted as web app as well as android/ios app.We started researching and came with conclusion to start with React and React Native or Angular and Native Script.Can anyone suggest on which one to pick as the ultimate goal was to maintain single code base for both web and mobile.

[Edit 1]:Thanks guys.Many of you suggested for Ionic / Cordova , PWA but all these seems to build an hybrid app but i was searching for something like a native app which can run on browser as well.For Example in react native you have this kind of architecture where the JavaScript file is converted to a true native component(Android/IOS).But the problem with react and react-native is there is no single code base.

Answer 1

I have done a single code based package for a ReactJS and React-Native. I can tell you my solution and experience with this.

UI

Both frameworks use the same syntax to describe the UI (JSX). If you go into more detail you will see that there are several differences:

• ReactJS: <div/>
• React-Native: <View/> That means there will be always a "framework-specific" part in your application/architecture. To minimize the specific code to only the differences you can use JSX to provide props to components like styles, data, or event functions.

Functionality

React-Native uses/contains the ReactJS framework and all runs in a JavaScript virtual machine. So for "non native/ui functionality" you can use good old JavaScript written functionalities or packages provided (e.g. via npm) functionalities across both apps (ReactJS && React-Native)

How to use one code for both apps

Now we now functionality is no problem. But how to get across the UI specifics. My solution was to write some kind of pseudo code for framework specific components:

1. For each framework write a pseudo class wich stands for your component. The following example shows some class rejecting to RN View class:

My implementation of a very simple View component on ReactJS side

import React, { Component } from 'react';

class View_Wrapper extends Component {
  render() {
    return (
      <div style={this.props.style}>
        {this.props.children}
      </div>
    );
  }
}

export default View_Wrapper;

My implementation of a very simple View component on React-Native side

import React, { Component } from 'react';
import { View } from 'react-native';

class View_Wrapper extends Component {
  render() {
    return (
      <View style={this.props.style}>
        {this.props.children}
      </View>
    );
  }
}

export default View_Wrapper;

2. Create a own project for your shared-code (Create project) and provide your written View components to it. That means you import your shared-code in your React or React-Native project and give the shared-code project your framework-specific components.

My implementation of a class inside my shared-code project wich holds the view for me. In this code you can reuse the View component and write your UI with this component. That means in React there would be a div against what React-Native would contain a View

let View = undefined;

const registerView = (View) => {
  UIProvider.View = View
};

const getView = () => {
  return UIProvider.View;
};

let UIProvider = {
  View: View
};

//Functions for component registration
UIProvider.registerView = registerView;

//Functions to receive shared components
UIProvider.getView = getView;

export {UIProvider};

Problems i got through this way

• Key to use the components is to break everything down to blank JavaScript and use this in your React or React-Native projects. Maybe its owing through my missing experience in webpack but i got lots of trouble with this. They were cause because if you build up a React app with create-react-app the webpack config is done for you and it's not that easy to break things up to the level they want.

• Another point is you should use High-Order-Components to use your components in your shared-code package/library or whatever. If you are new to it it can be confusing at the beginning but gives you a big value if you use and understand it.

Furthermore reading

• Christian Sepulveda - Share Code between React and React Native Apps
• Ihor Burlachenko - Code sharing between React and React-Native

Answer 2

I would suggest to pick React for web and React Native for mobile, It makes your developers to learn once and write for any platform. And I personally don't suggest a single code base for all the platforms as it makes things messy. I would rather maintain 3 code bases for web, android and IOS (or at-least two code bases for web and mobile) and will share the common code.

You can use hybrid apps to have a single code base but be mindful that these are wrapped applications and thus performance drops.

You can also use the same code base for mobile and web using react-native-web.