2017-06-01

Alternatives for Web and Mobile App in single codebase

If you are a one-man-army.. um I mean full-stack dev, you'll need to reuse most code as much as possible, a single codebase for all platform instead of rewrite everything in programming language best suited for that platform, that is C++/Java for Android, Swift/Obj-C for iOS, and Javascript for Web.

Other than the popular ReactNative (with react-native-web) and NativeScript (with angular-part that can be reused), there are ReactXP (Microsoft), is a fork of ReactNative (Facebook), with some extras: TypeScript (future proposed ES7 with better tooling), single codebase for all common platform: Android, iOS, Web, and Windows.
To use them, you should clone their repository, and use the provided Hello World.

git clone https://github.com/microsoft/reactxp
cp -r reactxp/samples/hello-world rxp1
cd rxp1
npm install
npm run web-watch # or rn-watch for mobile

Open index.html using browser, preferably use a web server instead of file:// protocol. Install ReactDevTools for better debugging experience. The directories should show something like this:

├── android
│   ├── app
│   ├── build.gradle
│   ├── gradle
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   ├── keystores
│   └── settings.gradle
├── index.android.js
├── index.html # <-- the main code for web
├── index.ios.js
├── ios
│   ├── RXPHelloWorld
│   ├── RXPHelloWorldTests
│   └── RXPHelloWorld.xcodeproj
├── node_modules
├── package.json
├── README.md
├── src # <-- your common source code / components here
│   ├── App.tsx 
│   ├── index.tsx
│   ├── ToggleSwitch.tsx
│   └── typings
├── tsconfig.json
└── webpack.config.ts

Now you can edit the App.tsx and start digging, but probably you'll need to wait around end of this year, until it has more features.

Next are the Cordova-based (that would be slower than native since it's browser based, also user on the older devices that has buggy 1 probably need to install last version of CrossWalk), there are:
And there are new one similar to ReactNative that supported by Alibaba (internet giant from China), called Weex that can be used with VueJS, and recently joined Apache Foundation.

Haven't tried them all, but..
  • by skimming the specs and the docs (that i prefer ones that not focusing on mobile-only), 
  • and since I dislike Angular (sorry Google), 
  • not really into React (and whatever state management libraries available: Flux, AltJS, Redux, MobX, Cerebral), 
  • prefer to use RiotJS > VueJS (since I think they take the good parts of Angular and React)
  • not really like write in Typescript (but I like using libraries that written in Typescript ^^ because parameter info/object-property checking is quite helpful on development), 
I think the most prospect is Weex (hey it's native) and Quasar Framework (really cool built in components).

Btw have you heard PWA (youtube)?

Note: this article written in 26th April 2017, scheduled to be published at 1st June 2017, probably things have change since then.

Github Stat Apr 2017 Watch Star Fork
ReactNative 2.9 47.5 11.0
Weex 1.9 14.0 1.9
Ionic 1.7 29.2 7.4
NativeScript 0.6 10.0 0.7
Framework7 0.5 9.5 2.0
OnsenUI 0.2 4.6 0.6
ReactXP 0.2 4.4 0.2
IncubatorWeex 0.1 2.2 0.3
Quasar 0.1 1.9 0.1
Phonon 0.0 0.3 0.0
React 4.4 65.3 12.1
Angular 4.4 55.5 27.7
Vue 2.9 51.5 6.89
Riot 0.4 11.8 0.9
Mithril 0.3 7.5 0.6

Also note that I didn't include other cross platform mobile-only development alternative or ones that specialized for gaming or must-pay, such as Xamarin/Unity3D, Cocos2D, RemObject's Silver, etc

2 comments :

  1. Thanks For sharing this helpful and informative blog. I love the way that you describe the things. You are an incredible writer, Thank you so much for sharing the blog. Please keep sharing.
    Mobile Application Development
    Android App Development
    IOS App Development

    ReplyDelete
  2. Thank you for the tips. I want to build an app using like vender app. App that lets you manage your leads and tasks in 1 app. YES shre this to other mobile programmers

    ReplyDelete

THINK: is it True? is it Helpful? is it Inspiring? is it Necessary? is it Kind?