Back to the homepage
Angular

Angular on mobile applications

If Angular is the technology you mainly use, it’s likely that you have only made use of it by developing web applications. However, did you know that its purpose isn’t narrowed down to those kinds of apps?

Technologies such as NativeScript, PWA or Capacitor allow your app to run on a mobile device. This article will introduce and lead you through the integration process of your app with Capacitor. With this you can easily extend your portfolio by adding mobile applications.  Let’s start with the basics, what is a hybrid application?

 

Hybrid application

This term defines an application originated by combining two theoretically separate technology environments. In the most common case, the app is created by using web technologies, but dedicated for different platforms like desktop or mobile devices. This article will focus on the second case. 

A definite asset of this kind of approach is the possibility of using a common base code to create an app for multiple supported platforms. This allows a single team to create an app for 2 or more platforms, which significantly impacts the economic aspects. 

Unfortunately, the hybrid application is operated in a separate container rendering its content, so this kind of product’s performance deviates from the native. For this reason, this approach is not suitable for the creation of challenging applications like games. With an exception for technologies implementing partial or complete code compilation for a native platform e.g. React Native or growing in popularity – Flutter. Despite the assurances of the technology producers about the supposedly high performance, the smoothness of these kinds of products still varies from the natives. 

The process of developing these kinds of apps is realized with the help of dedicated tools (apart from the technologies mentioned above, which have their own mechanisms implementing the compilation process).

Cordova

Cordova developed by Apache was the protoplast of these kinds of technologies. This tool allowed running any web application on a mobile platform (Android, iOS or other) sharing API and a number of other plugins in order to use physical device resources (access to storage, camera and microphone, etc.). The web application itself was launched in WebView, a dedicated native view allowing the rendering of a web application.

 

Diagram przedstawiający architekturę aplikacji stworzonej przy użyciu Cordova’y.

Capacitor

The development of Cordova was terminated and Capacitor was created, as its direct descendant. This tool allows creating hybrid applications, operating in a similar way. 

The differences between those two technologies come down to the ability to fully exploit the newest Web APIs and functionalities shared by native platforms. Moreover, Capacitor offers corporate interfaces for native functionalities, independent from the targeted platform, taking the responsibility off of the developers when it comes to the necessity of supporting different plugins and API depending on the environment.

Ionic

Ionic deserves extra attention, being a library based on the technologies mentioned above. The main benefit from using the library is the native character of the final application created for the targeted platform, by using suitably set components.

In other words, we are being given a number of components, guidelines and services which expedite and facilitate the app’s developing process. For further information, check the official website.

Integration

In order to integrate the existing Angular app created with Nx, you can use the existing plugin @nxtend/capacitor, following the steps described in the official documentation. Unfortunately, at the time of writing this article, the plugin only supports Capacitor 2 version, although the official Capacitor 3 version already exists. 

If you want to use the latest version, you should perform the installation process manually. 

To finalize the app development for a chosen platform, you should enrich your environment with IDE dedicated to the targeted platform. The detailed information can be found in the following document: environment setup.

Initialization

Proceeding similarly, according to the official Capacitor documentation, we begin by adding CLI and Core packages to our project.

Next, we move on to the path to the application and using Capacitor CLI we activate the command initializing the configuration file (elaboration of all available commands can be found in the CLI documentation).

We continue to adequately enter data concerning the application, after wrapping up the process, the following file should be visible: capacitor.config.js.

You should make sure that you have picked the right path for the created application (in the configuration file, it will most likely be „webDir”: „../../dist/apps/my-app”).

Package.json

One of the most important stages, which wasn’t mentioned in the official documentation, is the necessity of setting up an individual package.json for the application, which will only contain the most relevant information (name is enough) and a list of used plugins in form of dependencies (obviously we can use npm init).

Supporting the platform

At this stage, we can add ultimately supported platforms (you have to be located directly in the applications catalog). It’s worth mentioning, that all packages apart from the plugins have to be installed within the Nx Workspace, the plugins, however, should be located in the catalog with the application.

After adding the platform, we can create our application and synchronize the current version with the targeted platform, following the instructions:

This command copies the created files to suited catalogs and updates configuration files taking into account possibly added or deleted plugins.

Creating

Once you have executed the previous actions, we are ready to create the final application for a chosen platform. For this purpose, we have to open our generated project in the dedicated IDE for the chosen platform. In order to do so, we can make use of the following command:

Android Studio should launch and reach the stage from which we can build our application.

The final appearance of a hybrid application, running on the emulator.

The presented process has been described for the Android platform, in the cases of other platforms, all commands should be executed analogically.

Summary

Hybrid mobile applications are undoubtedly the ideal suggestion for creating a product with a corporate base code supporting many targeted platforms. But before a decision like that is made, an analysis of the targeted application itself is necessary, paying extra attention to the performance expectations of the end-users, since smoothness problems can emerge in these kinds of apps, especially in reference to demanding operations or views.

Moreover, not all native functions are available, so it should be examined which ones will be used by the final application.

The Capacitor integration process, which allows us to create the hybrid app is rapid and simple, the final work with this tool comes down to executing several commands from time to time. We can state that it’s definitely Cordova’s worthy descendent. 

About the author

Marcin Leśniczek

Marcin is constantly hungry for knowledge and passionate about mobile and hybrid applications. Always open to new ideas and technologies, being nit-picky. He dedicates his free time to science and astronomy.

Don’t miss anything! Subscribe to our newsletter. Stay up-to-date with the latest trends, tips, meetups, courses and be a part of a thriving community. The job market appreciates community members.

Leave a Reply

Your email address will not be published. Required fields are marked *