Cross platform phone apps


28 October 2016, by

If you want to write a phone app, and want it to run on multiple platforms, but don’t want to spend large amounts of time maintaining two code bases, then there are several solutions that allow writing one app, and deploying it to several platforms.

These multi-platform apps work by running a mini website on a phone, which is accessed via a web view, which is how the app appears native.

In this post, we’ll discuss several different approaches to writing a multi-platform app, and have a look which situations you should choose each option.

Cordova with React

cordova logoCordova (the engine that drives Adobe’s phone gap) allows a simple entry point into your web application. The framework is fairly mature these days, and has a whole host of plugins that can be used to access native phone components using JavaScript.

React has also been talked about a lot recently, and is a great way of writing components in a reusable way. There are also lots of plugins for React which are written to make development in it simpler.

The downsides of using this combination, is that the build is quite complicated. You’ll probably want to use at least a combination of webpack and npm and maybe grunt or gulp. This can be quite a lot to take on if you just want to write a simple app.

Another disadvantage of this combination is that it is not trivial to make your app look native (especially on both platforms), but there are some nice CSS libraries (e.g. Topcoat, ratchet or framework7) which can help out with this.

React Native with React

React native LogoThe advantages and disadvantages for React in this scenario are the same as above (good for components, bad for looking native). However, React Native creates native components from React code, which mostly overcomes the disadvantage of using React with Cordova. Native components also improve the apps performance.

React native builds are quick and easy to get setup in.

The disadvantages of using this tech stack are that the framework is still quite new, so it’s undergoing lots of changes at the moment. It’s also more complicated to produce the actual app from your code than it is using Cordova. Finally, all of your testing and debugging has to be done in an emulator (compared to Cordova, where the app can be run in the browser).

Ionic (Cordova and Angular)

ionic LogoThis combination of technologies has the advantages of Cordova (browser testing, etc.) but it also has an easier build process (as the ionic framework sets lots of this up for you) making it quicker to set up that Cordova and React.

The main downside of this stack is that if you don’t already know Angular, it’s a much steeper learning curve to pick up than React. Also, as angular is a framework, the errors it produces can often be quite cryptic.

 

 

What should I use?

As each solution has it’s own pros and cons, it depends what you’re trying to do as to which tech stack you should use.

If you are trying to write something quickly e.g. for prototyping, then React and Cordova or React native would be the best solution.

If you already know Angular, or are planning on writing a full application with long term support, there will be large benefits to choosing Ionic.

If you need to be able to do debugging in a browser, then either of the Cordova solutions will be required, whereas if you need better app performance then React Native is the better choice.

Summary

As we’ve learnt above, there are currently several ways to write multi-platform apps, and the best choice depends on what purpose your app is for.

If this post has left you more confused than before, then how about contacting Softwire Labs, and seeing if we can help you out with your idea?

Tags: , , , , , ,

Categories: Android, iOS, Mobile, Technical

«
»

Leave a Reply

* Mandatory fields


9 − eight =

Submit Comment