Quicker MicroApp development using Angular Schematics

Nowadays, web applications are not only restricted to web browsers but are also accessible via native apps. You guessed it right!! MicroApps.

In this blog we will talk about how we leveraged Angular Schematics and MicroApp Exemplar Templates to accelerate the MicroApp development.

What is a Microapp?

A MicroApp is a standalone web app that is highly focused on performing just one task. They are smaller apps run as PWA(Progressive Web Application) inside native apps of Android & IOS. In a MicroApp architecture, the user interacts with application functionality that runs inside a native app as container.

At Halodoc we’ve multiple MicroApps developed and are accessible via native apps serving various business needs.

1. BMI Calculator
2. Period Tracker
3. Pregnancy Tracker

MicroApp needs to communicate with the native app for a variety of business requirements. For this, they need to have a platform to collaborate with Native apps, MicroPlatformBridge.

MicroPlatformBridge is an interface between web view and native App. Its primary use case is to share the data between native apps and javascript in web views.

MicroApps are developed as PWAs(Progressive Web Apps). They deliver a speedy experience even when the user is offline or on an unreliable network & enable us to provide the high-fidelity capabilities and the experience of mobile apps to our web users.

Thus, MicroApp is essentially a PWA with MicroPlatformBridge running on native application.

MicroApps helped us in growth and retention of the users and is proven to be a successful platform for building cross platform apps. With this, we are building more MicroApps. There are certain boilerplate code/ steps which is repeated across  MicroApps, like integrating MicroPlatformBridge. We have an opportunity to automate this and help speed up the development.

What if we have a template that installs all the dependencies, setup services & code required to communicate with the native app?  This is where we dive into Angular Schematics.

Angular Schematics

A schematic is a blueprint that tells the Angular CLI to

1. Update the existing files in the project
2. Create new files with predefined content

Schematics are packaged into collections and installed with npm. It can be used to generate commonly used UI patterns or specific components, using predefined templates or layouts.

All the dependencies like MicroPlatformBridge, services are installed into the MicroApp using schematics.

Following are the steps to create a schematic

1. Setup a new schematic project
2. Create schema
3. Add template files
4. Run npm install tasks
5. Testing a schematic
6. Publishing a schematic

Please refer to schematics documentation for more details.

Schema: A JSON schema associated with a schematic tells the Angular CLI what options are available to commands and determines the defaults. These defaults can be overridden by providing a different value on the command line.

Note: The JSON schemas for the default schematics used by the CLI to generate projects and parts of projects are collected in the package @schematics/angular.

MicroApp exemplar - Template for MicroApps

MicroApp exemplar is an Angular Schematic that can be used to create a template to provide a dev-ready setup and install the dependencies, utilities which are required to communicate with native applications.

This makes it easy to start with MicroApps, that already work right out of the box!

1. Setup a new schematic project

To create a new schematic application we need to install Angular Schematics dependency by npm i @angular-devkit/schematics-cli

The collection.json represents the collection of schematics in the project. We can define multiple schematics for the same project serving different purposes. We should define the factory function in the index.ts file which is the starting point for schematic execution.

2. Create schema

Schema.json provides basic metadata for a schematic such as name, path and prompts the options that may be passed to the schematics when it is invoked by the Angular CLI.

3. Add templates & services files

Schematic can have a set of template & service files with pre-defined code & structure.

When the schematic is invoked from the Angular CLI, all the template files will be replaced with the name passed to the schematic.

Define a factory function that creates workspace & append the template files with the name & path passed to the schematic.

Similarly, create services that will interact with components & MicroPlatformBridge to communicate with native app.

4. Run npm install tasks

Define a new rule in a factory function to run npm task to install the @halodoc/micro-platform-bridge dependency which is used by MicroApp to share state with native app.

5. Testing a schematic

To test schematic, build the schematic npm run build to make sure we have the latest version of schematic then run npm link to make the package available globally in the local system.

Now switch back to the test project and link-local version of the schematic to your test project using npm link micro-app-exemplar.

Note: npm link creates a symbolic link between your test application and the schematic itself.

6. Publishing schematic

As said earlier schematic are packaged into collections & installed with npm, it can be published to verdaccio - a lightweight private npm proxy registry.

Note: Before publishing, make sure to build the latest version.

After publishing, go to your project and follow the below steps

• Install micro-app-exemplar

• Generate container component which communicates with services. Pass the name to the schematic that will be used to create component files from templates.

• Generate services which communicates with container & native module

Services like MicroPlatformService which communicates with MicroPlatformBridge to transfer states(user profile request, user token request for authentication).

Now micro-app-exemplar schematic should have generated the components & services and updated the app.module.

• Execute update schematic to forcefully delete and replace the contents of existed component files created by the micro-app-exemplar-container schematic (required when changes in component files are to be accomplished)

• Use below command to list available schematics

• Use below command to see all possible options available on schematic

With exemplar up and running, data passing & state transfer between the micro app and the native app happens via the MicroApp Exemplar template.

Following are the guidelines & best practices we follow implementing Exemplar Template & MicroApps

At Halodoc, we follow security & performance guidelines while implementing an app or a template and here are some of the industry standard practices we follow to improve the performance of MicroApps.

Performance considerations

Security aspects

Conclusion

Angular Schematic help in ease of use and development. Developers need not spend time on setup and writing boilerplate code. This will also help new team members to start on MicroApp development with With this, we were also able to achieve a quick go-to-market strategy for MicroApps.

Join us

We are always looking out for top engineering talent across all roles for our tech team. If challenging problems that drive big impact enthral you, do reach out to us at careers.india@halodoc.com

About Halodoc

Halodoc is the number 1 all around Healthcare application in Indonesia. Our mission is to simplify and bring quality healthcare across Indonesia, from Sabang to Merauke.
We connect 20,000+ doctors with patients in need through our Tele-consultation service. We partner with 2500+ pharmacies in 100+ cities to bring medicine to your doorstep. We've also partnered with Indonesia's largest lab provider to provide lab home services, and to top it off we have recently launched a premium appointment service that partners with 500+ hospitals that allows patients to book a doctor appointment inside our application.
We are extremely fortunate to be trusted by our investors, such as the Bill & Melinda Gates foundation, Singtel, UOB Ventures, Allianz, Gojek and many more. We recently closed our Series C funding of US$80 million for our mission.
Our team work tirelessly to make sure that we create the best healthcare solution personalised for all of our patient's needs, and are continuously on a path to simplify healthcare for Indonesia.