Cross-Platform Mobile Development

In other sections of mobile development, I will walk you through different aspects of mobile development while being bound strictly to a specific segment of mobile development such as Android development for Android platform app development. However in this context, I will tell you and teach you the cross-platform mobile development. There are different definitions and different approaches to mobile development, but they all fail if your organization has to target multiple platforms for userbase or it expects more developers to be on the team before you can continue to work and push the updates and features to the production server for customers to use. The cross platform mobile development suggests that you build mobile apps that target each and every potential user platform, from where your users are consuming your services.

The simple definition of cross-platform suggests that a cross-platform software should abstract away the low-level architecture or platform details. Such as, the same code must take care of being abstracted from the platform-specific code and must execute the code on every hardware that is being used by the end users. This term reaches the core of hardware-specific understanding but at a high-level we can define the term as, "something that works like magic". This is why, when writing cross-platform software, special SDKs are selected and special build systems are chosen to enable the software to be able to be used on multiple platforms, operating systems, machine architectures and screen sizes. I will not go in the details, but I am just trying to demonstrate the necessity of a cross-platform software.

Your team needs to understand the platforms from where your users are visiting your service from. Let's take the example of this web app, I post tutorials and some resources and I see that majority of my users are from mobile platforms. Then, I dig down and find out the major mobile platforms that my users use. This gives me a hint of what platform should I target. If there is one primary platform, then I only need to target one platform and can leave out the rest. However, if there is a tough competition between all of the platforms then I would require to write software for all of those platforms. There are several approaches that one might consider for building the mobile applications,

  1. Silo approach
  2. Hybrid web apps
  3. Native mobile apps with single code-base

Each of these approaches differs in the terms of,

  1. Programmers/Teams needs to write the software
  2. Features of the software developed
  3. Time required
  4. Platforms to target
  5. SDK used

Provided all of these, we can easily understand what we need to do in which context. Simply put, this can act as the checklist for our project and the platform that we need to target. Thus, making it easier for us to decide how to select and decide whether cross-platform apps for good for us, or should we consider native mobile applications and invest something somewhere else.

Silo approach

The silo approach is the approach in which your mobile development teams write a separate project code for each of the platforms that you have to target. This means that if you have to target, Android, iOS and Windows Mobile, then you must have 3 different projects targeting three different SDKs and more. Then you need to build and test them separately and write features, maintain and update them separately.

Like you already know, Android is programmed mainly in Java, iOS and macOS require Swift language and Windows Mobile requires C# programming expertise. It also requires you and your team to purchase a separate development environment for the projects.

Platform IDE Primary Language APIs SDK
Android Android Studio Java, Kotlin, C++ Android APIs Android SDK
iOS, macOS Xcode Swift, Objective-C iOS APIs SDK downloaded with Xcode
Windows Visual Studio C#, F#, C++ UWP APIs or Windows Runtime APIs UWP SDK (contains other tools)

Now of course, you understand that you need to use the tools and SDK provided here. For most, they are not free and they come with a price. To include and install everything and then have multiple teams build your project, is not a good approach in most cases. There can be several reasons to choose a native application written in the native language, a few of them are,

  1. Best performance
  2. Official support from community or platform
  3. 100% APIs available

But the cost of this is huge and if you are not getting enough return, then this can not be a good approach at all. But, do not worry, if you are using silo approach and build native apps, then it is fine as well because I use the same approach. Most of the times, when I build a software, I use the native approach for various reasons — which I will share later on, not just yet.

Hybrid apps

Now, moving up ahead from that, we know that every company has a good website running somewhere. No, I am not going to cover the web development here, but I am just giving you a quick headsup as to what to expect here. Since, every company has a web app, there is an approach in which they can have their own website displayed as a mobile-based responsive web application.

That same CSS3 media query concept gets applied here and the app runs as a website inside the WebView control of the platform.

Most of the platforms provide you with the ability to write your HTML, CSS and JavaScript apps and run them as a native app on the mobile devices. What they do, in turn is that they take your web pages and convert them to offline web apps. This looks as a native mobile application but in real it is just an offline web application. There are several APIs of JavaScript that support data storage, such as the localStorage or more such as the Location providers and kajillion more service-specific API that lets you control the device, user information and how to provide more content to the users. Which is elevated by the platforms and they provide you with the same APIs in your own web apps. Think of a very basic mobile hello world app, written as,

<!DOCTYPE html>
<html>
   <head>
      <title>As Needed</title>
   </head>
   <body>
      <h1>My Page</h1>
      <p>Some content here.</p>
      <style>
         body {
            width: 520px;
         }

         /* Screen specific style here. */
         @media screen and (max-width: 400px) {
            body {
               width: 320px;
            }
         }
      </style>
      <script src="script.js"></script>
   </body>
</html>

Looking at it, can't you see that this can work on every kind of web browser that supports HTML5 and CSS3. And luckily, all of our mobile platforms support HTML5 and CSS3 supported web browsers — and if yours doesn't, please upgrade.

To try this out you can create a very simple mypage.html file and load that HTML content in it, finally you can create your own simple native app with any WebView control. You will realize how the hybrid apps work.

The benefits you might have seen, is that you get to use the same web application and reuse the same code inside the mobile applications too. Then utilizing the power of JavaScript, WebView controls and the mobile you get to provide the same services to the users. This also lets you invest just one single team of web developers to the entire project, and you also get to utilize the web application as the mobile applications too. The same concept of Progressive Web Apps originated from this sense that users do not want to install another application, just to read a blog. But the downside is that you are left with only what JavaScript APIs have to offer and nothing more. There are several offerings for this sort of development, Apache Cordova, React.js (React native) and many more.

I have dedicated a separate section of web development to this, if you want to learn how to build web applications you should visit that section instead.

React native apps

Now that we know how hybrid apps work, I need to share another vision on this. React native framework was developed by Facebook and it supports compilation of source code to native apps. React.js is a JavaScript library that supports event-driven application development, in that, providing a framework for the developers to write the user-interface that can be compiled and brought to life on the native application. But, the problem remains the same... It lacks 100% API coverage of the native platform and also latest changes do not get shipped at the same time as they are updated on the devices OS.

Cross-platform native apps

Finally, the cross-platform (but) native application development is the approach in which you write the software as a single project and then use the tools that compile the project as a native binary for each of the platform. In the previous sections, we saw that either you need to have best performance and more money to invest, or you get to loose some on the performance but save some money to invest. In this approach, you will get to save the money and at the same time reach to the maximum performance as well.

The major component to talk about here is the Xamarin platform by Microsoft. Xamarin is a cross-platform mobile application development framework, that supports code sharing on all the supported platforms.

Xamarin framework

Xamarin itself is a mobile development framework, that supports development of mobile apps in C# language. C# programming language is loved and used by hundreds of thousands of developers worldwide for its object-oriented programming design. This means that you can use the best of your .NET environments and still target and build software applications for mobile platforms, natively. In Xamarin, you can write Android apps using C# language — instead of the official Java language. You get to utilize the best of System.IO, System.Net namespaces for most of the tasks, you get to use the power of LINQ queries, lambda expressions and asynchronous code.

Xamarin is not just for Android, Xamarin supports iOS (macOS), and even Windows itself. You can write and share the components on almost every platform that Xamarin supports. More platform are being added to Xamarin platform to support the write once, execute everywhere ideology.

Xamarin is huge, that is why I would like to talk about Xamarin in a separate topic of itself.

Xamarin.Forms

Xamarin.Forms is a technology vision that supports code-sharing throughout the frameworks. You are no longer only sharing the code, but you are also sharing the UI components as well such as the button elements, comboboxes, dropdowns, checkboxes etc.

Xamarin.Forms is a complete suite for cross-platform mobile development, that targets every platform that you can provide it with.

There is more on a few topics in this, that I covered in their own categories instead of this post.

Sadly, this chapter does not have any topics to share.