Howto build an App

Let’s say you have an amazing idea for an app and you want to get it developed. For the sake of this article we skip the subjects of validating your idea, designing the user interface and everything in between and we fast forward to the development phase. So: what options do you have to develop your app?

The first questions is then: on what kind of hardware do you want to make your app available?

You can split this question further into 2 questions:

Question 1: What physical kind of devices do you want to support with your app? Mobile phones, tablets, laptops & desktops… We could even add TVs & cars to this list, but let’s leave them out of the equation.

Question 2: What platforms do you want to support? Google, Apple, Microsoft

You can visualize these questions into a matrix:

Remark:

• OS stands for Operating System

So there are many different operating systems out there that keep all our devices running. Now let’s have a look how we can develop apps for all these devices.

Your development options

There are many different ways to develop an app. Very high level you have 2 methods to create an app:

1. Develop by using Web technologies: the internet is build & glued together by technologies such as html, css & javascript. Since these became so popular in the last decades, developers are using the exact same technologies to create apps.These web technologies are also very good supported on all of our devices.
2. Develop by using Native technologies: each platform (iOS, Android) has its own set of tools (XCode from Apple & Android Studio from Google). Developers can then use these tools & technologies to create full native apps targeted for these specific platforms.

In the diagram below you see on the left side the web technologies: the browser software of the device (Safari, Chrome) will be used to visualize your Web App that is composed out of html, css & javascript. On the right side of the diagram you see the Apps developed with native technologies (= non-Web technologies): languages such as Objective-C, Swift, Java & Kotlin are used to develop native apps.

So basically you can use web technologies or native technologies. But, it’s not because you use web technologies, that you will necessarily end up with a Web App. This is what we’ll try to illustrate with the following diagram:

Notice the 4 arrows in the diagram:

• W1: Use web technologies to create a web app
• W2: Here you use web technologies to create a Web App, but the Web App is embedded into a Native App container
• W3: With this method you can use Web Technologies to create a Native App, so the end result has nothing to see anymore with web technology. An example is React Native from Facebook
• N1: You use native technologies to create Native Apps

Also note that Web Apps are started from the internet, whereas native & hybrid apps are installed from an app store.

Native Development

Here we will talk about the N1 arrow from the previous diagram. Apps developed for Apple devices such as iPhones & iPads will have that typical Apple look, whereas apps developed for Android will have that typical Android look.

On the left you have an example of an iPhone app (habitify) and on the right side you see an Android app (Youtube). Both platforms have their different set of guidelines. If your app needs that typical look and feel of the hosting platform (Android or iOS) then you probably will have to choose for “Native Development”.

Native Platform Development

If you develop your app in the “Native Platform” way, then you use the tools provided by that particular platform or device.

You can build for instance an iPhone application (the iOS platform) by using Apple’s Xcode environment.

The benefit of native development is that you can use all the features of that platform and that you can get the best performance and the most beautiful apps. The biggest drawback is that your application will only run on that specific platform. Basically, this means that your app will only work for 1 block in our matrix:

If you developed an iPhone app with Apple’s Xcode environment, then your app will only be available for iPhones. Your app will not run on a Samsung or Huawei phone. If you want to make your app available on these devices too, then you will have to develop another app from the ground up targeted for Android.

Native Cross-Platform Development

If you want a native app, but you don’t want to develop separate apps for each platform then you could use “Native Cross-Platform” development. Over the years some tools & frameworks came out that allows developers to reuse much of their efforts. Not everything will be possible what you can with “Native Platform” development, but for many types of apps it is more then sufficient.

So with these technologies you develop your app once and it will run on multiple platforms as shown below:

Some examples are: Xamarin, Flutter, React Native

• Xamarin: Xamarin is a toolset developed by and for developers with a Microsoft background (more specific .NET and C#). It allows you to have common code for Android and iOS.
• Flutter: Flutter is a relatively new development environment offered by Google. It allows developers to build high-performing, modern and beautiful apps that work on both Android and iOS.
• React Native: React Native is a framework from Facebook that allows you to build mobile apps by using JavaScript and React (basically web technologies), but the result is a native app.

Web Development

If you use web development technologies to develop your app, then you’re basically building web pages to be viewed in a web browser. And the nice thing about web browsers is that they are available on almost any device: mobile phones, tablets, laptops & desktops.

So basically, if you build your app with web technologies, then your app will run on all these devices:

The resulting app will not look exactly as a native developed app and you will not be able to use all the features of a specific platform, but your app will be able to run on all these devices. You will probably need to do some tuning to support the different screen sizes, but the amount of work to get your app running on multiple platforms will be significant less.

One of the characteristics of a web application is that you need a web site somewhere on the internet that is hosting your web pages. Basically this means that you need an active network connection. Luckily there are some solutions if you want to create an “offline” app:

1. Create a hybrid application = Re-package your web application as a native application
2. Or, create a Progressive Web App: this we’ll discuss below

There are of course more reasons to select one of these methods than just the offline availability of your app. Let’s have a look…

Hybrid Application

With a hybrid application you basically repackage a web application (= website) into a native app. Your end users will need to get your app from the app stores.

Some of the advantages:

• Available offline: you no longer need an active connection to communicate with a web server
• You can re-use your code on different platforms: iOS & Android
• Your app can access the hardware: camera, sensors, …

Of course there are disadvantages:

• Not the best performance because you introduce extra layers of abstraction (browser)
• Sometimes there are problems to get them registered in the app stores

Single Page Application

Most web applications have multiple HTML pages. The trend of the last years is to develop Single Page Apps (SPAs), so as the name suggests you only have 1 page. So how can you then display multiple pages? Well this is done via a mechanism that just substitutes the content within your page. Frameworks like Angular and React can help building these kind of applications.

Progressive Web App

Progressive Web Apps (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications.

Conclusion

There are many ways to develop an app. Think first about the devices & platforms you need to support. Then think about the features you need to support in your app. If you don’t need to access specific hardware (camera, sensors, …) and you want to support a wide range of devices (from Mobile to Desktop) and you’re on a tight budget then Web Development might be your best option. On the other hand, if you need to access the local hardware or you want to have that native (quality) experience, then native development is the better candidate. But you still have some options there…