How to Build Mobile and Web Apps with a Common Code Base

In this webinar, learn how to reuse your web and Angular skills—and code—to build mobile apps and connect to services like Salesforce faster than ever.

I recently watched a Progress webinar and learned some new techniques to rapidly build cloud-connected mobile apps. During the webinar, “The Fastest Way to Build Mobile Apps with Cloud Data,” the hosts built a web and mobile application connected to Salesforce within an hour. They used the Angular framework, NativeScript and Kinvey. Let me walk you through each technology that was used:

1. Angular Framework

   Angular is a very popular JavaScript framework, as it supports the following features:

   1. Cross-platform (works across web, mobile and desktop)
   2. Performance (dependency injection allows parallel processing of components)
   3. Productivity (code is easy to reuse, read and maintain)
2. NativeScript

   Works with Angular to develop apps in any environment with same code base.

   1. Very good performance as it uses truly native features.
   2. Same CSS can be used across multiple platforms
   3. 100% API Access for both Android and iOS
   4. Code sharing: You can share most of your code seamlessly between three platforms (Android, iOS and the Angular Web App) . The Model and Controller can be shared across all three platforms, with only the View changing.
3. Kinvey

   Every app requires a backend, but not all backends are equal. Kinvey provides a serverless cloud so we don’t have to worry about servers.

   1. Security: Compliant with major security requirements, such as HIPPA
   2. Serverless: Get up and running in no time without worrying about setting up servers
   3. Cloud integrations with Salesforce, etc.

Kinvey also provides the following services:

1. Client SDK provides abstraction, Authentication, offline support, encryption
2. Identity connect (authentication layer for connecting to mobile identity systems like LDAP)
3. Push notifications
4. Business logic
5. Data store and file store: we can store data and files in the cloud
6. If we are already setup with an SQL server, SAP, Sharepoint or REST endpoint, we can integrate them into our app without writing any code.
   For other databases: low code integration is available.

Before the webinar, I would have thought that web apps and mobile apps had completely different code bases, but I learned that by using the Angular CLI and creating a new app using NativeScript Schematics, different environments can share the same code base. For example, if you are familiar with developing web applications using Angular then just by adding the mobile specific view, you can create the mobile app very easily.

Something I found interesting was that by reusing the code of components and services in our MVC model, we can save on costs as we will not have to hire different developers for iOS, Android and Web applications.

In the first part of the webinar, the hosts focus on developing an Angular web app using Kinvey as a backend service. The following things are covered for the web application:

1. To get the data from Salesforce, a new service object is created using Kinvey which allows us to fetch data from Salesforce.
2. Now, once the backend is setup, a new Angular app is created with NativeScript schematics.

   Command: ng new <app_name> --collection=@nativescript/schematics --shared

3. Components, services and guards are created for the application.

   Commands:

   ng g c <component_name>, ng g s <service_name>, ng g guard <guard_name>

4. After the Angular service is created, we can connect to the Kinvey’s backend service to get the data.
5. To display this data to the user, the Kendo UI Grid is used. For showing statistics, Kendo UI Charts are used.

The second part of the webinar focuses on how we can use the same web application for a mobile application as well. The only thing that needs to be added is the mobile specific View, as mobile applications use native Android or iOS features. We can share the code for components and services.

To separate the view of web and mobile there are two HTML files in each component, one for web (<component_name>.component.html) and one for mobile (<component_name>.component.tns.html).

Moreover, the webinar focuses on how you can easily use Android and iOS native functionalities, like using the camera or sound recording just by adding the plugins in the application. 

This webinar focuses on how we can easily use cloud data to build applications for the Android, iOS and web environments, sharing most of our code between them. I found it pretty interesting as I am a web developer and I always wanted to create mobile apps. I never thought that creating a mobile app would be this easy. If you are interested in improving your app development, check out this webinar to learn more.

Watch the Webinar