UNIT -III

HYBRID APP DEVELOPMENT

What is a Native Mobile App?

• When people speak of a native mobile application, they are usually referring to an application that has
been written using the native development language and tools specific to that platform.
• For example: A native iOS application would be written in either Swift or Objective-C and compiled
using Xcode, while a native Android application would have been developed using Kotlin or Java and
compiled using Android Studio.
• Since these applications are developed using the platform’s default solutions, developers have full and
easier access to the device’s capabilities; like all the device’s sensors, the user’s address book, and
whatever the latest and greatest new bit of technology the phone offers.
• However, any application written for iOS using Swift cannot run on Android, and vice versa. Meaning,
you have to develop specifically for each platform, which can lead to a larger budget and team size,
assuming that you’d want to release your application for both iOS and Android.
• In addition, your application is only available through each platform’s app stores, subjecting it to their
respective rules and restrictions. This means for every release, whether it is a new feature or a bug fix,
the same approval process must occur. This can take anywhere from a day to two weeks for the Apple
App Store.

What is a Web Application?

• For some, this uncertainty about having your application approved by faceless app-store gatekeepers
is too risky. There are also stories of top-tier applications running afoul of regulation and being
removed from the app store, which can cause a loss of revenue.
• Because of this, some developers have turned to building a web-only application, which gives them the
freedom to exist outside the app-stores and offer their application to other mobile and desktop users.
• These are just traditional web applications written in HTML, CSS, and JavaScript for which you can
leverage a wide range of frameworks and libraries, such as Angular, React, Vue, or even plain-vanilla
JavaScript. However, when taking this approach to development, your mobile application is restricted
to the capabilities of the user’s mobile browser . This means it will not have full access to the user
device for things like their address book and more. While this has improved over the years with access
to features like GPS and the camera, depending on the features needed for your application this could
also become an issue.
 What is Hybrid Mobile App Development?

• Hybrid apps are a blend of both native and web solutions. Where the core of the application is written
using web technologies. This solution is a blend, hence the name hybrid, of both native and web
solutions. Where the core of the application is written using web technologies (HTML, CSS, and
JavaScript), which are then encapsulated within a native application. Through the use of plugins, these
applications can have full access to the mobile device’s features.
• The heart of a hybrid-mobile application is still just an application that is written with HTML, CSS, and
JavaScript. However, instead of the app being shown within the user’s browser, it is run from within a
native application and its own embedded browser, which is essentially invisible to the user.
• For example, an iOS application would use the WKWebView to display our application, while on
Android it would use the WebView element to do the same function.
• This code is then embedded into a native application wrapper using a solution like Apache Cordova
(also known as PhoneGap) or Ionic’s Capacitor.
• These solutions create a native shell application that is just the platform’s webview component in
which it will load your web application. This gives you the ability to create and publish true native
applications that can be submitted to each of the platform’s app stores for sale.
• Additionally, both Cordova and Capacitor have a plugin system that allows you to extend beyond the
limitations of the ‘browser’ and access the full suite of capabilities of a user’s mobile device.
• The only other consideration to take into account is if your application is still running within the
device’s native browser. If so, you may encounter performance issues or other quirks specific to each
platform or operating version.

Advantages of hybrid mobile application development

• Ease of development: Developing hybrid apps is more straightforward than their native counterparts
since developers need to write code for one application only. They don't need to learn multiple
programming languages for every operating system. Hybrid mobile app development mainly involves
web technologies like HTML, CSS, and JavaScript. Moreover, the developers can choose from
frameworks like Xamarin, Flutter, React Native, and others.
• Less time to market: Hybrid app development allows businesses to leverage their existing
development tools to write codes for their applications. They don't need to look for new technologies
or hire developers with expertise in platform-specific technologies to build their applications. Besides
that, you can use the same code for different platforms, eliminating the need to create a new codebase
across each platform. It saves a lot of time and reduces the time to deploy the app.
• Cross-platform compatibility: One of the significant benefits of developing a hybrid app is cross-
platform compatibility. The developers have to write code once and run it on multiple platforms. Unlike
native apps, hybrid apps are not platform-specific. It makes them ideal for businesses that don't want
to spend time and money to build separate apps for each platform.
• Easy scalability: Scalability is a crucial factor in mobile application development. A scalable app offers
greater flexibility, reliability, and security and allows you to add new functionality and features. Hybrid
mobile app development provides easy scalability as the developers don't need to make considerable
changes to scale up the app across platforms. They can change the code once, which will be effective
on all the platforms.
• Cost-effective: App development costs are going up. Considering the cost of the development kit,
hiring engineers, and development time, building native apps for each platform is costlier than creating
a hybrid app since you need more developers, resources, and time. Contrary to that, a hybrid app
doesn't require a platform-specific development kit. You don't need to hire specialist developers for
different platforms, which help you save a significant amount of money and adds to your profit.
• User experience: Hybrid mobile app development allows you to reuse the design elements across
various operating systems. It ensures users can get the same experience regardless of what platform
they use, which helps improve the brand image.
• Easy maintenance: A hybrid app development approach helps you maintain the application code
easily since developers don't need to work on multiple code bases and monitor multiple platforms.
They can work on a single back-end and update the apps on all the platforms simultaneously.
• Easy Integration: To create hybrid applications, the same SDK and API libraries are sufficient.
Applications designed using hybrid platforms overcome inflexible circumstances through their simple
integration and cross-platform compatibility.
• Wider Audience: Native or web applications focus on only one platform, meaning that a business is
missing out on a large chunk of the profitable user share from other operating systems. In today’s
competitive domain, targeting only a single set audience means stunted growth. In such a situation,
hybrid app development comes to the rescue. As Android accounts for 73 percent market share and
iOS occupies 26 percent globally, the total amounts to 99 percent. So, going hybrid means potentially
reaching a wider audience.
• Better UI/UX: Hybrid applications perform better and faster operations, which improves the user
experience. Moreover, as the same set of features and codes are allowed, there is efficiency across all
platforms. Lastly, hybrid applications are lightweight and also load materials rapidly.
 • Faster Development: The development process is significantly quicker when compared to native app
development, as the hybrid app framework enables mobile app developers to reuse a large proportion
of the same. Besides, with the introduction of React Native, Flutter, Ionic, etc. Hybrid app development
has become way easier, faster, and more efficient.
• Enhanced Speed: Hybrid app development frameworks assure better speed, as they are premised on
the ethos of less code and reusability. Moreover, they do not depend on network communication, which
means they run at a high speed even when the traffic is high. One of the best examples of a hybrid
application is Twitter.
Disadvantages of hybrid app development
• Slow performance: Building hybrid apps requires developers to write more code lines than a native
app to adapt to various platforms. It makes the app heavier, which can affect its performance. Moreover,
as you rely on a single codebase for all the platforms, some native features miss out on hybrid apps,
affecting performance and user experience.
• Takes time to roll out new features: Hybrid app development involves using third-party frameworks
which are not always updated. It takes more time to roll out new features than native apps.
• Test complexity: Testing a hybrid app is a more complex process since developers need to test it on
multiple devices across platforms to ensure proper functioning. Moreover, these apps may share many
codes between various platforms. Some of them are native in practice and written for a particular OS,
making testing more complex.
• A limited user interface: Hybrid apps have a design that doesn’t have a native feel. The user interface
thus isn’t as seamless. Possibilities (3D for example) are also restricted due to the fact that WebView
is used and that this doesn’t allow the exploitation of the devices’ full potential.
• Functionality Limitations: If your mobile app involves complex features and functionalities, then
hybrid app development might not be the right approach for you. This is because few hybrid
frameworks like phonegap don’t provide support for every native feature. And as a result, this
restriction might impact the stability of your mobile app as a whole and make it sub-optimal.
• May Lack 3D Support: If you want to design eye-catching graphics or add 3D elements, then hybrid
approach may not be right for you as you may face quality issues. Although you can use third-party
tools such as Unity 3D to fill the quality gap, but the overall efforts will be increased compared to the
native approach.
 SCENERIOS TO CREATE HYBRID APP DEVELOPMENT
The core reason for this is the adaptability of hybrid mobile apps across various platforms. Hybrid apps
are compatible with both iOS and Android devices. That is, they can take the place of two native apps. Also
known as cross-platform mobile apps, advantages of hybrid mobile apps include-
Better User Interface: Developing an app on a hybrid platform enables the app's UI to remain responsive
and offer consistent user experience across multiple platforms. Hybrid App Development ensures a
flawless user experience across iOS, Android platforms. Hybrid applications focus on making it work for
mobile by adopting the web. Moreover, the lightweight UI helps in loading content and graphics quickly.
Hybrid app development companies ensure faster adaptation to different device screens for rapid data
display and seamless data streaming.
Great Performance: Hybrid apps offer high performances and are even faster than progressive apps in
some instances. As hybrid apps are lightweight, they take lesser time to load the high-definition graphics
and content. Hybrid apps hence load content much faster than the web and native apps. Hybrid apps
actually do not face even during times of refresh/reload or weak internet connections.
Cost-Effectiveness: Hybrid platform enables building a single app with same code for all devices
(Windows, Android, iOS). This saves a lot of money along with resources and also increases development
speed whilst reducing the maintenance cost. Hybrid app developers can speed up the development
process with assistance from various mobile development frameworks and a set of libraries.
Faster Development: Hybrid mobile apps are easier and faster to develop when compared to a native
app. They enable companies to utilize their existing web development talent pool for leading the mobile
market. Knowledge of JavaScript and HTML is required. So once the code is written, the application can be
run on both environments. (namely iOS and Android).
• Create a robust mobile app for a specific platform by investing more money and time or build Android
and iOS applications using the same code, which requires fewer expenses and less work.
• While both approaches have their benefits, choosing the time, cost, and effort-effective solutions
is best. In simple words, develop a hybrid mobile app that uses the same code for multi-platform
apps.
• In the initial days, not many accepted cross-platform development.
• The primary reason was performance issues. But over the years, this domain has undergone
improvement. Today, we have cutting-edge tools and technologies that ensure top-notch hybrid apps.
That is why businesses have started to hire mobile app developers in India.
• Also, studies suggest that nearly 42% of developers use cross-platform solutions to build mobile apps.
• Thus, it seems evident that hybrid development is popular among developers and enterprises.
 TOOLS TO DEVELOP HYBRID MOBILE APPS
If you are planning to develop a hybrid mobile app for your business, one thing you must know. Working
with the right tool leads to a successful project. Here, we have listed the top ones in the industry. Depending
on your business goals and requirements, you can pick a tool that meets all.
Xamarin
Owned by Microsoft, this cross-platform framework uses C# programming language with the .NET
framework. It is compatible with different platforms and provides performance and a user experience
similar to native solutions.
It is an open-source technology that enables developers to create modern and native applications. And they
are compatible with multiple platforms like Android, iOS, Windows, tvOS, macOS, etc.
Xamarin developers use the C# codebase for building high-performing apps. When you hire a mobile app
developer using Xamarin, you may expect the following features.
• Xamarin uses Visual Studio, which enables developers to execute advanced mobile app design and
development. It does all this through C# and .NET.
• It delivers a one-size-fits-all solution for mobile app development.
• It supports Type-checking.
• It is compatible with SDKs that ensure responsive mobile apps.
Flutter
Developed by Google, Flutter is another excellent tool for hybrid app development companies. It is the first
choice of many to develop a hybrid mobile app. As an open-source UI technology, it allows developers to
create mobile apps that are native.
Flutter uses a single codebase for building mobile, desktop, and web apps. The single codebase makes the
development process faster and simpler. Let us look at other benefits of using Flutter as your cross-platform
app development tool.
• Uniform business logic and UI across all platforms.
• It offers native app performance.
• You can create robust creative designs.
• Faster code development.
• Customized, animated UI of any level of complexity.
• Less time-to-market.
Sencha Touch
Sencha Touch is creating momentum as a reliable tool for developing hybrid mobile apps. It is an HTML-
based, cross-platform framework that helps developers to design, develop, and test web and mobile
applications. Sencha is known for delivering business-grade SDK and development solutions. And its
primary focus is to create touch-based applications for Android, iOS, Windows Phone, etc. However, it
gained popularity because of its great features. We have listed some below.
• It allows developers to build customized UI depending on specific business goals and needs.
• It utilizes hardware acceleration, which improves performance and operating speed.
• You can take advantage of its well-written documentation with samples and tutorials.
• It comes with a large code and component library.
React Native
It is a JavaScript-based open-source framework. It helps to develop hybrid mobile apps for Android, iOS,
web, Windows, macOS, tvOS, and more. The best thing about React Native is that it ensures truly native
apps. In short, your cross-platform app will have native platform capabilities. Here are the features that
make React Native perfect for your hybrid app development project.
• It follows the “write code once and use everywhere” approach.
• It offers easy integration with third-party libraries.
• Thanks to code reusability, you can complete app development faster.
• If you are looking for a UI-focused app, React Native is an ideal option.
• It is backed by an extensive community of developers, designers, and contributors.
Ionic
It is one of the best tops we have today for cross-platform app development. Based on AngularJs, it lets
developers use programming languages such as JavaScript, HTML, and CSS. So, if you want to add native
capabilities to your application, develop a hybrid app with Ionic. You can build an exceptionally creative UI
while leveraging user-friendly features. Let us look at some features that make app development hassle-
free and faster.
• It uses Cordova plugins that allow easy accessibility to in-built features like GPS, Camera, and Audio
Recorder.
• It is a SaaS UI that works perfectly with mobile operating systems.
• You can alter code structure, which saves a lot of time.
Popular frameworks for hybrid mobile app development
React Native
Facebook created this framework in 2015, and it became popular in a few years. Large organizations like
Uber, Skype, Bloomberg, and Instagram used React Native for their hybrid app development projects. This
open-source Javascript framework helps you develop multi-platform user interface components with JSX
and link them to native code.
Key benefits of React Native
• About 90% of codes are reusable across Android and iOS.
• Large community base due to high popularity.
• Node Package Manager (NPM) installation makes it easy for new developers.
• It has many plugins that make it compatible with a device's hardware components.
• The development process takes less time compared to many other frameworks.
Flutter
Flutter is a relatively new framework in the hybrid mobile app development arena, but it has created a lot
of hype in the last couple of years. A recent Statista report suggests Flutter is the most popular Hybrid
mobile framework. Powered by Google, this open-source framework is known for its speed and reliability.
It also enables developers to create highly creative UIs with flexible designs. Renowned brands like Amazon,
Alibaba, BMW, Toyota, and many others have used this framework to build their applications.
Key benefits of Flutter
• Intuitive UI designs with many ready-to-use widgets help developers create interactive elements.
• Lightning fast, thus reducing the time-to-market.
• Low entry barrier; anyone with basic coding knowledge can start with Flutter.
• Apps can adapt to different screens.
• Faster testing process because of a single codebase.
• Deliver high performance with a native app-like experience.
Xamarin
It is one of the best frameworks for hybrid mobile app development. Built by Microsoft, Xamarin is written
using C#; it is advanced and much more improved than Java and Objective C. Developers can use this
framework to build hybrid apps for iOS, Android, and Windows operating systems.
Key benefits of Xamarin
• Developers can use up to 90% of their codebase across different platforms.
• Apps build using Xamarin offers high performance and feel like native apps.
• Easy testing, update, and maintenance.
• Provides testing tools.
• Offers a complete mobile app development toolkit.
Ionic
Ionic is another popular framework for hybrid mobile app development. It uses HTML, CSS, and JavaScript
and has built-in support for AngularJS, making it preferred for front-end developers. Building Progressive
Web Apps (PWAs) is easier with this framework as it has a rich library for front-end development and
provides premium UI design components.
Key benefits of Ionic
• A large number of UI components and layouts.
• Pre-generated app setups with creative layouts.
• Comes with testing and debugging tools to build interactive apps.
• Uses many Angular concepts, making it simple for developers with knowledge of Angular.
NativeScript
NativeScript is one of the best frameworks for developers who code their hybrid app in JavaScript,
TypeScript, or Angular. It offers a runtime bridge module with a JavaScript-based virtual machine. The app
built with this framework can deliver a native user experience to every mobile platform.
Key benefits of NativeScript
• It offers native app like performance on all platforms and devices.
• Allows users to access all iOS and Android APIs
• It is based on JavaScript, which is an easy and developer-friendly language
• Quick app testing and debugging
• Faster code execution
Framework7
This open-source and free framework is used to create mobile and web-based applications and progressive
web apps (PWAs) that provide a native feel and appearance. It offers components for popular JavaScript
frameworks like React, Vue, and Svelte.
• It is not dependent on third-party libraries even for DOM manipulation and has its own custom DOM7.
• Developers can start creating apps with HTML, CSS, and basic JavaScript knowledge.
• It has a lot of widgets and components.
• It is an open-source and free-to-use framework.
APACHE CORDOVA
In 2011, Adobe acquired Nitobi and donated open-source core to Apache Software Foundation and it was
rebranded as Apache Cordova.
What is Apache Cordova?
Apache Cordova is defined as an open source platform which is used for building mobile applications
using HTML, CSS and JavaScript. It acts as a container that is responsible for connecting our web
applications with native mobile functionalities. It mainly offers a bridge that defines the connection
between the web applications and mobile devices.
Apache Cordova provides a set of API's that are responsible for providing the access to the native device
features such as Camera, SIM card or the contacts lists. We can consider Cordova as an application container
with the presence of web view that covers the entire screen of the device. The web view used by the Cordova
is same as the native operating system. In iOS, by default UIWebView or a custom WKWebView class is
used, whereas in Android, android.webkit.WebView is used.
Apache Cordova consists the set of pre-developed plugins that provide access to the device's camera, GPS,
file system, etc. Following are the platforms where we can develop apps using Cordova:
• Android
• iOS
• Windows
• Firefox OS
• Blackberry
• Tizen
• Web OS
• Symbian
• Ubuntu

Who can use Cordova?

The users of the Apache Cordova are as follows:
• If you are a mobile developer and want to make your application compatible on more than one
platform without the need to re-implement it with the language of each platform
• If you are a web developer and want to deploy your web application on different store portals.
• If you are a mobile developer and want to mix native application components with a WebView for
accessing the device-level APIs. You can also use it to develop plugin interface between native and
WebView components.
Features of Apache Cordova
Now, the Features of Apache Cordova are as follows:
Cordova Core Components: Cordova provides different core components that every mobile application
needs. These components create base of an app that helps us to focus on implementing our own logic.
Command Line interface: This tool is responsible for building processes and installing plugins for
different platforms. It is used for starting the projects and make the development process easier.
Cordova Plugins: It provides API for implementing native mobile functions to our JavaScript app. These
plugins provide access to device capabilities in an application such as camera, battery, contacts etc.
Advantages of Apache Cordova
• It is an open-source platform.
• It is easy to learn and used for developing a cross-platform application.
• It provides flexibility to build apps for multiple platforms without learning new programming
languages.
• Development of applications in Cordova is fast because it transforms into app that is supported by
other platforms.
• It is very quick to prototype.
• It consists the set of pre-developed plugins that provide access to the device's camera, GPS, file system.
• There are many community add-ons that provides several libraries and frameworks.
Disadvantages of Apache Cordova
• It is not optimal for large apps because hybrid apps are slower than native ones.
• Because of running its code in the web view, its performance become slow.
• It is not suitable for game application development, because it needs some higher-end plugins that
are currently not available.
CORDOVA ARCHITECTURE
Apache Cordova provides a set of APIs that can be used to access and stimulate the native mobile OS
features like Camera, Storage, Accelerometer, Geolocation, etc. To access the device's native feature,
JavaScript application objects are used via calling the Apache Cordova APIs. The following diagram shows
high level design of the Cordova Architecture:

Basically, Apache Cordova creates single screen in the native application and this screen consists a single
WebView that holds available space on the device screen. Cordova uses the native application WebView for
loading the application and its related JavaScript and CSS files.
Basic Components
The Cordova Application rely on the common config.xml file. This file provides the information about the
app and also specify the parameters that affect its working. It follows the W3C's Packaged Web App.
By default, this application is implemented like a web page that named as index.html that references the
resources (images, media files) necessary for running the application. The application executes as a Web
View with the native application wrapper which can be distributed to the app stores.
WebView:
A WebView provides user interface of a Cordova application and it can also be a component for some
platforms within a larger, hybrid applications. These applications mix the WebView with the native
application components.
Web App: A Web App is defined as a core part where the application code resides. It is simply a webpage
that is created using HTML, CSS and JavaScript. By default, a local file i.e., index.html is used to refer to CSS,
JavaScript, media files and other resources that are required to run the application. The app is mainly
executed in a WebView within the native application wrapper that are distributed to the app stores. This
container consists a key file i.e., config.xml that are responsible for providing the information about the
app. Cordova creates an app, in which the web app is initialized in a WebView i.e.,HTML Rendering Engine.
Plugins:
Plugins are defined as an integral part of the Cordova ecosystem that provides an interface for the Cordova
and the native components for communicating with each other. It also provides an interface for bindings
standard device APIs. It allows you to invoke the native code from JavaScript. Basically, the Apache Cordova
project defines a set of core plugins called Core Plugins. These plugins provide access to device capabilities
in the application such as camera, battery, contacts etc.
By using these plug-ins, the developers can easily link the JavaScript code to native code that is running in
the backend. In addition of these core plugins, there are several third-party plugins are available that
provide additional bindings to the features that are not necessarily available on all platforms.
How does it actually work?
When the application launches, firstly, Apache Cordova loads the application's default startup page (usually
index.html) in the application's WebView and passes its control to the WebView.
The WebView, allows the user to interact with the application by entering data in input fields, clicking on
the action buttons, and viewing results in the application's WebView.
To access the mobile's native functionalities such as audio or camera, Cordova provides a package of
JavaScript APIs that can be used by the developers from their JavaScript code. The calls to the Cordova
JavaScript APIs will translate into native device API calls by using a special bridge layer. The native APIs can
be accessed from the Apache Cordova plugins.
Cordova Development Workflows:
You can follow two basic paths when developing the Cordova:
Cross-platform workflow is used for deploying your application to different platforms with little or no
platform-specific development. Cordova Command-Line Interface is defined as a tool that support this
workflow and acts as a higher-level abstraction used for building your application compatible for different
platforms.
Platform-centered workflow is used for developing your application for a specific platform and helps to
modify code at a lower level by mixing the native components with Cordova components.
Command Line Interface:
The Command Line Interface (CLI) is responsible for creating a new Cordova application and deploy it
into various native mobile platforms. It is a text-based interface that mainly operates on various software
and operating systems. We can also use CLI to initialize the project code for which you can use various
platform's SDKs to develop the app further.
If you want to add any support or rebuild your project for any platform, you must require to run the
command line interface from the same machine which supports the platform's SDK.
Basically, it is available on the Command Prompt under Accessories on the PC. It also maintains a remote
source code repository through which you can run CLI from different machines.
The Command Line Interface consists some specific commands that are used to accelerate the mobile app
development, testing, and deploying the app to various mobile platforms. It can also execute the commands
for testing the hybrid mobile app with both real devices and emulators.
Before using the CLI tools, you must have to install the SDKs for each targeted mobile platform. These tools
can quickly be used by installing it as a npm package.
What role does CLI play in Cordova?
The Apache Cordova is fully dependent on CLI. It can't execute a single process without CLI. Basically, it is
used in following cases:
• To create a Cordova project.
• To generate the APK.
• To add the plugins.
• To provide a platform where we can develop an app.
 IMPORTANT ASPECTS OF APACHE CORDOVA FRAMEWORK
Single Code Base:
• Cordova framework is capable to support different platforms like iOS, Android, Ubuntu and Windows. So,
a developer can build a single mobile app by targeting several mobile platforms.
• Cordova framework allows the developers to develop app in HTML5, CSS3, and JavaScript. Developer can
write a source code once and packed it for individual mobile platforms by using specific devices installer
format. This format enables the app to deliver native user experience by accessing native device
functionality like GPS, Bluetooth, Camera, Contacts etc.
App Templates
Cordova App Templates are used to accelerate hybrid mobile application development by using the pre-
existing code. The developer can choose templates from various sources i.e., npm, Git repository, etc.
Variety of Development tools
Cordova Framework is designed to be compatible with different mobile app development frameworks and
IDEs. Developers can create different mobile applications by using the popular tools like Ionic
Frameworks and IDEs like Visual Studio.
Shortcomings
Cordova Framework has its own shortcomings. To build the hybrid mobile apps, mobile app developers
address the shortcomings of Apache Cordova. Cordova Framework is used to reduce hybrid mobile app
development time and cost.
Cordova Installation
• To install the Cordova command line tool, you must have to follow below steps: Cordova basically
runs on the Node.js platform. So, you have to install Node.js as the first step.
Installing Node.js
• Step 1: Here is the link where you can easily install it -> http://nodejs.org The window that appears
after clicking on this link will be shown as follows:
You can install Node 12.14.0 LTS, which is recommended for most users.
After completing the installation, a pop-up window will appear. Consider the below screenshot:

Click on the Next button to continue.

Step2: Select the features that you want to add in your application.

Click on the Next button to continue.

Step 3: You can install some additional tools that are necessary to compile native modules.

Click on the Next button to continue.

Step 4: Click on the Install button to begin the installation.

If you want to test the installation, you can write following command on the command prompt:
node --version
If the version number is displayed on screen, it means that Node.js is properly installed on your
system.
Installing Git:
Step 1: To install the Git, you can visit its official website that are as follows: http://git-scm.com
Go ahead and follow the instructions on its official website. The web page will appear as:

Step 2: Click on the latest release version 2.24.1 for Windows. The pop-up window will be shown after
installation:

Accept the license agreement and click on the Next Button to continue.

Step 3: Here, you can select the path where you want to install Git and then click on the Next button
to continue.
Step 4: After that, you can specify the shortcut name that is displayed for the Start Menu folder and
then click on the Next button to continue.

Step 5: Default components required for installation are automatically selected. You can also select
your additional components.

Click on the Next button to continue.

Step 6: You can choose the editor for using the Git. By default, Vim editor is being used.

Click on the Next Button to continue.

Step 7: You can adjust the path environment of Git from the below three options. The default path for
the Git installation is from the command line and 3rd party software.

Click on the Next button to continue.

Step 8: The default library is being selected for the HTTPS connections.

Click Next to continue.

Step 9: Select line ending options and then click on the Next button.
Step 10: Select the terminal emulator that is to be used with Git Bash and click on the Next button to
continue.

Step 11: This is the last step that provides some additional feature that you want to add in your Git
application.

Click on the Next button to continue.Now, the installation will begin:

Installing Cordova:
You can install the Cordova module by using the Node Package Manager(npm), utility of Node.js. This
module will automatically be downloaded from the npm utility of Node.js.
On Windows:
You can run the following command in command prompt to install the Cordova application on
Windows:
C: \>npm install -g cordova
This -g flag is responsible for installing the Cordova module globally. Otherwise, it will install Cordova
in the node_modules subdirectory of current working directory.
After installing it, you can run cordova on the command line with no arguments. If you want to check
the version of cordova, you can simply check it from the below command:
cordova --version
If you see the version number in the command prompt that means your cordova application is properly
installed.

Link : Creating first Cordova Application ( https://www.javatpoint.com/creating-first-cordova-application )

 Ionic Framework
Ionic framework is an open-source UI toolkit for building performant, high-quality mobile apps, desktop
apps, and progressive web apps using web technologies such as HTML, CSS, and JavaScript. It allows
developers to build once and run everywhere. It was created by Max Lynch, Ben Sperry, and Adam
Bradley of Drifty Co. in 2013. The first beta version of the Ionic framework was released in March 2014.
The Ionic framework mainly focuses on front-end user experience or UI interaction that handles all the
look and feel of your app. It is easy to learn and can integrate with other libraries or framework such
as Angular, Cordova, etc.
Officially, the Ionic framework has integration with Angular, but it also provides support
for Vue.js and React.js, which are in development.
Why should you use the Ionic Framework?
Ionic is an excellent choice for creating basic native functionalities within an application which can run
on multiple devices and operating system. The main advantage of the Ionic framework is that we can build
the app once, rather than multiple times for separate devices and can deploy everywhere. It makes the app
development fast and cost-efficient. It also reduces the need for maintenance.
Advantages of Ionic Framework
1. Easy to learn
If the developer has a basic knowledge of CSS, HTML, or JavaScript frameworks, then learning and
developing apps using the Ionic framework is very easy. It also allows for the development companies to
switch to Ionic if their requirements and needs require hybrid application development.
2. Easy documentation
Ionic provides very good and well-structured documentation. The official documentation covered most of
the things required for the developers.
3. Cross-platform
The ionic application can deploy on multiple platforms such as native iOS, Android, Desktop, and the web,
all with one codebase. These applications can write once and runs everywhere.
4. User Interface
The user interface of Ionic, such as themes and components are highly customizable. The ionic platform
allows its components to adapt the platform on which application is running.
5. Built on AngularJS
The Ionic framework uses AngularJS which provide many functionalities to the developers. Nowadays,
AngularJS is the most widely used framework by designers. AngularJS allows Ionic to provide a robust
structure which makes the code more manageable.
Disadvantages of Ionic Framework
1. Performance
The performance of the Ionic application is not as good as compared to native mobile applications.
However, the performance gap is not noticeable for most of the average users.
2. Security
The app developed with the Ionic framework may not provide as much security as a native application.
For example, if you are developing a financial app, e.g., the app for a bank, the Ionic framework is not
recommended.
3. Limited native functionality
There are some native functions may not be available in the Ionic framework. In such a case, you need to
develop the plugin to fulfill that function yourself. However, there are many plugins available to cover most
of the native functionalities.
4. Not good for video game
Ionic framework is not perfect for high-end graphics-dependent applications or video games.
5. Need for specialists
JavaScript can be tricky to learn. So, there is a need for someone who can not only "do" JS, but also have
deep knowledge of advanced libraries and technologies including Angular, Cordova, Ionic, etc.
6. Early adopter risk
Ionic technology is still in development. It regularly keeps changing its support and standard, and its
libraries can be completely rewritten at any time.
Ionic Framework Features
Ionic framework is an open-source AngularJS based framework that allows a developer to use a
combination of several web technologies such as HTML5, CSS, and JavaScript. With the help of these
technologies, the mobile app developer can design a creative user interface and introduce user-friendly
features for their targeted audience.
Cross-platform
The app builds on the Ionic framework can deploy across multiple platforms, such as Android, native iOS,
Desktop, and the web as a progressive web app and all with one codebase. Thus, Ionic apps can write once
and run everywhere.
Web Standards-based
Ionic framework is built on reliable, standard web technologies, such as HTML, CSS, and JavaScript, using
modern web APIs (like Custom Elements and Shadow DOM). Due to this, Ionic components have a stable
API, which allows running Ionic app on multiple platforms.
Beautiful Design
The Ionic framework allows us to build a clean, simple, and functional application. It is designed to work
and display beautifully across multiple platforms. The Ionic application contains pre-designed
components, typography, interactive paradigms, and a gorgeous base theme.
Simplicity
The Ionic framework built with simplicity, easy to learn, and can be accessible to anyone with web
development skills.
Cordova Plugin
It offers the API which needed for using native device functions with JavaScript code.
License
Ionic framework is a free and open-source project which released under the MIT license. It means we can
use it in personal or commercial projects for free.
Ionic CLI
The Ionic CLI, or Command Line Interface, is a tool that provides several helpful commands to Ionic
developers. It is a command which is used for starting, building, running, and emulating Ionic applications.
Framework Compatibility
The past releases of Ionic were tightly coupled to Angular. But the recent version of Ionic, i.e., v4 was re-
engineered to work as a standalone web component library, with integration for the latest JavaScript
frameworks. We can also use it in most of the front-end framework, such as React.js and Vue.js.
JavaScript Components
It extends the CSS components with JavaScript functionalities to cover all mobile elements which cannot
be done only with HTML and CSS.
Angular
Angular is responsible for making the Ionic great. While the core components work as a standalone web
component library, the angular package makes the integration with angular ecosystem a breeze. The
angular package includes all the functionality that angular developers would expect and integrates with
Angular core libraries.
Link : Ionic Installation ( https://www.javatpoint.com/ionic-installation)