How to choose the right technology
When designing mobile apps it can be difficult to choose what technology to use. Will it be a progressive web app, or a native app? For which platforms, and what capabilities are needed?
Native mobile apps
Although web apps have become more capable lately, there are still things only native apps can do.
Android / iOS
When you need the best performance and control, going fully native is probably the best option. On Android that means programing on Android SDK with a Java language or Kotlin. Kotlin is a fairly recent addition, but is fully supported by Google. On iOS you would use Swift and XCode.
Flutter is a new cross platform development platform by Google. It is mainly intended for making apps for Google’s new Fuchsia OS, but as that one is far from ready, the main focus is now on creating apps for iOS and Android. Apps are written in Dart, and are compiled with Android SDK and XCode into “native” apps. The framework is somewhat large compared to fully native apps, but development is very fast.
Unity as you probably know is a game engine, but it’s worth mentioning here because it has a very strong cross platform focus. It’s missing a lot of the UI elements from other environments, so creating standard apps with it is not really the best idea, but if you’re creating a game, this is easily the best choice.
Progressive web apps
Although there are a lot of tools to create native mobile apps, web based apps are usually still by far the easiest to develop and deploy. And they are also truly cross platform. Recently there has been a lot of features added to web browsers to make web apps closer to native. You can read location, send notifications, run tasks in the background and use the devices camera, plus many more things. On mobile platforms there not yet any way to register them as apps, except to add them to the home screen.
React is a library for building UI, developed by Facebook. It is usually used together with other libraries, such as Redux. React is not really a framework, but it does demand some adherence to a certain way of doing things. React is very popular, and has a lot of ready components and libraries that work with it. It can have a somewhat steep learning curve, especially together with Redux. And most of the libraries are updated often, so the way you do thing now, might be different from the way you did things 6 months ago.
Vue is also used for UI design, but compared to React it’s more of a framework. It combines templates, state code and styles into one component file. Where React is just the view layer, Vue includes a bit more. But in practice it’s very similar to React in the sense that React has a de-facto standard set of libraries that are almost always included. Vue has a slightly less technical focus than React.
Angular is anl app framework developed by Google. It comes in versions for Typescript and Dart. Compared to React and Vue, Angular is much more of a full framework. Angular from version 5 onward has built in support for progressive web apps.
An important part of mobile app design is the user experience (UX) design. Regardless how well you program an app, and how fast and responsive it is, if the UX is not well designed, it will not be pleasant to use.
There are a lot of frameworks that can be used to help with the UX design. Using familiar graphical elements and usage patterns. But of course you probably want somewhat of your own “look” to the app as well. This can also be tricky because iOS and Android uses different native UX designs. But lately they have approached each other a bit.
Google’s native Android “look & feel” is called material design. There are material design libraries available for a lot of different platforms. Native Android apps default to material design elements, but you can also include it in Flutter, and there are versions for Web as well. Especially when you don’t have a lot of resources for UX design, using something material design can be a good choice.
When doing the UX design, Adobe Experience Design (XD) is a useful tool. It allows easy prototyping of UX patterns. You can then share the designs to clients and developers as a web page, which is very useful as it doesn’t require you to have the software installed.
When designing an app chances are that you need to store data somewhere. How much and where depends entirely on the app you are designing.
For most apps you need to store data locally. Even if you are also using other storage methods, you probably still want to store some data locally. For web apps the best option is usually to use the browsers local storage, or session storage functionality.
Using a rest API is usually the way to go with mobile apps. If the data flow is user action centric it’s usually the best option. If there’s a lot of server to client signalling it might not be a good fit, but it can be combined with other methods of signalling, or just using client to server polling.
If you need real-time two way signalling between the app and data storage, Google’s firebase is probably a good option. It uses noSQL collections of data, that can be bound to your app for real-time updates. Firebase have libraries for most technologies used for mobile app development.
Firebase includes user registration and authentication features, so creating applications on top of it is simple.
So what do I choose?
Choosing the right technology is never an easy choice. There are so many choices available that there are probably many suitable choices. Using technologies that you already know is usually a good choice, but before getting started you should find out if there is something that fits a lot better. As the old saying goes; “When all you have is a hammer, everything looks like a nail.” You should find out if your project really is a nail or if there’s something that is much better suited for it.
Text: Niklas Schönberg
Photos: Daniel Kouvo