Choosing a technology stack for Desktop + Mobile application

Question

I am currently browsing the web for information with the goal of building a Web and Mobile version of a classic board game.

The idea is to have the full features and game on the Desktop version, and a stripped down, native mobile app to go with it, that will allow users to play the game and change some settings.

Now I am used to building web application for desktop but I've never touched anything like Cordova / Ionic yet.

I also would like to add that I do have the intention of putting the application in production someday.

I have multiple questions:

• What would you use has a server side technology ? (I'm looking towards Node.js, in advice for or against it ?
• How do Cordova / Ionic / React native and / or the others will relate to my desktop app ? Are they separated projects ? Any way to reuse chunks of code ? (CSS, JS) ?
• Which of those platforms above would you personally use and why ?

I'm trying to gather as much information as possible from anyone that has worked with any of the above mentioned technologies,so feel free to only answer parts of this post so that I can compile everything.

Thanks a lot for your time and help

Answer 1

React Native

learn once, write anywhere.

This is really native apps, so they generally have better performance than non-native apps. To build React Native apps, you still need knowledge of the target platform (Android/iOS) and still need to write one app per platform, but you can use the same app architecture (React/Flux) on both platforms.

As it is written in JS (like React), you can still share code between the platforms, but some code will always have to be different, because the ReactElement you use in your render function are actually platform- specific. So basically you can share all your state management logic, but you will have to provide a custom render function for each platform you target.

This is a good option if you need good/native performances, you have time to learn iOS and Android platforms and maintain 2 different apps in parallel.

Currently React Native for Android is not released but it will probably be in August 2015. It is a good alternative to regular native apps, and offers some advantages like hot reloading, but it's still not a very mature technology and is a bit risky but is very promising in the long term and is battle-tested by Facebook and the community.

You can also take a look at ComponentKit, also from Facebook, that is somehow React for ObjectiveC, but I think the majority of new Facebook projects will tend to use React Native over ComponentKit.

Cordova / WebView apps

write once, run anywhere

Cordova/Phonegap apps are not native apps. They are native shells around WebView apps. A webview is a browser that runs inside a native app. These apps are packaged in a native shell to be made available to Google/Apple app stores like the other native apps.

The advantage is that it is just HTML, JS and CSS. It means that if you already have a mobile website (or a responsive desktop website that handle both desktop and mobile screens), you can easily package it as a Cordova app and make it available through app stores.

So you write once a mobile website, and you get for free an iOS and Android app too!

This is a good option if you just want still very acceptable performances, you want your app to be available on most platforms as soon as possible and you don't have time/ressources to develop multiple applications in parallel.

It also helps if you already know web development :) And you can still easily use native app features (like camera) with Cordova plugins.

AngularJS (Ionic, Famo.us) vs ReactJS (Reapp, TouchstoneJS)

Ionic and Famo.us are mobile frameworks mostly used on top of AngularJS

Reapp and TouchstoneJS are mobile frameworks on top of ReactJS

These are not made for native (or React Native) apps, but for mobile websites or webview apps. Choose the one you want, I don't know any particularly. Using a framework is not a requirement for mobile/webview apps but you will probably need some utilies to handle touch events because the onclick event is often not enough for good mobile experience.

I won't go into arguing about AngularJs vs ReactJs, but have experienced both and prefer a lot ReactJS (and I'm not alone). ReactJS, when used the right way, is more functional, elegant, and easy to reason about. I don't think AngularJs permits elegant hot reloading and time travelling ala Bret Victor because it requires a different architecture that ReactJS enables.

However AngularJS still permit to build stuff, and Famo.us/Ionic are probably more mature than existing ReactJS mobile frameworks.

Backend

I would advice you to use NodeJS because it permits you to build Isomorphic/Universal applications, which means you can share code on both the client/server, including the React components, so that you can render both on the client and the server. This means instead of an empty html page, you can directly serve the content so that it is available faster, it is easier to index for search engines and it also works for js-disabled browsers.

This is weird because I don't even like Javascript (I like languages like Scala, Haskell or Clojure). If this is your case, you can still explore other options for isomorphic apps, like:

• Having most of your backend in language X (or microservices?), and just a little NodeJS service for the server-side rendering.
• Using something like Nashorn to run JS inside the JVM
• Using a backend language that compiles to Javascript (like ScalaJS) and can run on both client/server.

However the last 2 options are still a bit immature.

My experience

We are a small startup (3 devs) with no one having any iOS/Android native experience, and wanted a result fast.

We had initially a complex desktop ReactJS website (SPA). We made it responsive with CSS mediaqueries. We added custom touch event handlers for better mobile experience. So at the end we had a website that support well mobile/tablets/desktop.

We took this exact same app and packaged it in Cordova, so that now it's also available in app stores. It works great and the performances are very acceptable. You can expect the same performances with your mobile website/cordova app (for Android check the Crosswalk project)

We end up with a single HTML/JS/CSS ReactJS responsive SPA to maintain (still hard work those SPA's!).

I will definitively make the same choices again, even if in the future we might use React Native if our team grows.

---

Edit 2016: as for now if I were to choose what to use, I'll use Redux, and use ReactJS for desktop and mobile websites, and ReactNative for mobile native. Redux is very nice, and even if not all code can be shared between mobile apps, Facebook reports that most of it can be easily. Note it's very important to have a clear separation between presentational and container components, so that you can reuse your container components in all your apps and just provide custom presentational components.

Also note that it's possible to add webviews inside a react native app, so it's possible to migrate a mobile webapp to a native app progressively (for example one could first try to migrate the navigation menus and general layout). Edit: also interesting, the Ace project aims to add some native layout inside a Cordova app.

edit 2017: for all mobile app devs is will definitively recommend trying Expo (React Native). You get the developer velocity of Cordova without having to know anything about native apps. If you already know a bit of React you can get started in 1min.

Also recommend using GraphQL with Apollo, it will take a but more time to learn but it's very good choice for long term project maintenance.

Answer 2

There are now couple of approaches in 2019!

1) Hybrid app approach
Outputs: iOS/Android App, PWAs (mobile, desktop site), desktop app using electron
Framework: Ionic 4 Framework (used with Angular/React/Vue and capacitor (successor of Cordova), stencil (UI toolkit))
Codebase: 98% codeshare so easier to maintain. Takes less time in development.
Tech: HTML,CSS,JS..(can be extended to react,angular,vue)
Cons: subpar user experience for mobile apps because of webview wrapper approach. Large app size.

---

2) Cross platform native apps (Universal Apps)
There has been some efforts to build libraries which could use single codebase for native android/ios app and also web app!
Output: Native Android app, Native iOS app, PWA (mobile, desktop site)
Frameworks:
1) react-native-web (most popular)
2) ReactXP by Microsoft
3) Nativescript+Angular, official tutorials here and here
Codebase: 80% codeshare. Bit complicated to maintain as some part of code is gonna be different for platforms. Pros: Code gets compiled to native binaries so better performance of apps. Smaller app size. Cons: Takes more time in development. many checks and conditions required for Apps and PWAs.

---

3) Separate Codebase for Apps and PWA
Build iOS, Android apps using
1) React Native by fb
2) Flutter by Google

Build PWAs (mobile,desktop site) using
React/Vue/Angular.

Codebase: Separate codebase but server-side code could be same if consumed via REST API.
Pros: These mobile apps have better performance than ionic hybrid mobile apps.
Cons: Separate codebase so harder to maintain.