Unit 3

Hybrid Apps

Hybrid apps are nothing but an application which possess the capabilities of both
native and web apps. Simply they are web apps under the influence of native apps. Although
it looks similar to a native app, a hybrid app is run by a website. They display web contents
using the web technologies such as JavaScript, HTML5 and CSS

Today hybrid apps are used in various devices. Mostly it is preferred in mobile
devices irrespective of the operating system. It is no doubt that hybrid app offers many
benefits to the users. Similar to other application, hybrid apps too exhibit certain drawbacks.
These strength and weaknesses must be considered before building a hybrid app.

Advantages of Hybrid App

1. Cost
A benefit of maintaining a single code base for multiple operating systems is
that it is able to bring lower costs. As the time required to build the app is reduced, the
overall investment for the application is reduced as well. This cost savings are
beneficial for small businesses.
2. Maintenance
Hybrid applications are known to use simple HTML language which is easy to
maintain. Unlike in native apps, there is no versioning here. A hybrid app doesn't need
to produce new app whenever there is a new operating system released. It has the
tendency to function without any changes in the new operating system.
3. Scalability
Hybrid apps are easily made scalable to various platforms. Developers can
target multiple O/S without much effort. The web technology used behind a hybrid
app is similar in most cases. Which means the process of scaling does not require to
develop the app again. Necessary changes can be made to the code.
4. Development Time
Significant amount of time is saved by writing a code only once. Thus, the
development time is much faster compared to a native app. Apps that usually take
months to develop is made ready within several weeks if followed a native approach.
In addition to that, QA engineers spend less time in testing the apps for bugs with the
quality similar to a standard app.
5. Updates
Constant updates are released by the developers to fix bugs and other errors in
a hybrid application. These updates do not need to get approval from the app store.
Whenever there are changes in a hybrid app, the necessary results are shown
immediately. Therefore, all the time the users are benefited from the latest version of
hybrid app with the newest updates.

6. Internet Requirement
 Offline support is another plus point of a hybrid application. A hybrid
application is able to work without an internet connection. Even some hybrid apps
uses local servers to store data. Hence, in case of a network disruption the data can be
accessed once the connection is restored. This is especially convenient for people in
rural locations without a reliable internet connection.
7. Platform Support
Hybrid apps on default are designed for multiple platforms. Unlike in native
apps, there is no need to build the app separately for each operating system. Multiple
operating systems can be supported with a single code base. For an example, hybrid
apps can be installed on two different devices with Android and IOS operating
systems. This allows users to target larger audience base

Disadvantages of Hybrid App

1. Performance
The performance offered by a hybrid app is slower in every aspect. This is
because; there exists a layer between the operating system and the source code.
Depending on the application the performance degrades. Usually if the application is
small this is not noticeable.
2. Functionality
Since one single code is common to all platforms, some of the native features
are missing in a hybrid app. As a result, the users cannot expect the maximum level of
quality and stability when it comes to hybrid apps. Especially for the applications
those with complex features
3. User Experience
The interface used by a hybrid app is poor in terms of user experience. Since
each operating system operates differently, the design of hybrid application many not
be suitable for all of them. For an example, if the hybrid app is developed as per the
requirement of Android OS, the experience could be worsening for IOS users. Same
thing could happen in the vice versa.

4. Graphics
Hybrid apps are known to face many quality issues. On the contrary to a
native app, it cannot deliver pictures of high graphics. Therefore, hybrid apps are not
suitable to render 3D graphics. Even though there are many third party tools to
enhance the 3D graphics experience, still the efforts are much higher compared to a
native approach.

5. Debugging
 No matter how skilled the developer is in coding, there is always a tendency of
having errors and bugs. Debugging and figuring out the exact issue can be a difficult
task since the code is written for multiple platforms. So the developer needs to be
extra precautions not to present new bugs.

6. Glitches
Whatever the content loaded in a hybrid app can be glitchy. They cannot
function smoother as similar to a native app. However, there are some ways that can
be used to avoid glitches.
7. Browser Requirement
Different from the way of native app where it displays the apps in the home
screen, a hybrid app needs to be opened using a web browser. Users have to type the
URL, open the website and then access the app. Hence, many users find it difficult to
interact with the hybrid app because it is not listed in the app store.

Popular hybrid App Development Frameworks

• React Native – Captain America

• Flutter – Iron Man
• Ionic – Thor
• Xamarin – Black Widow
• Onsen UI – Hawkeye
• NativeScript – Spiderman

React Native as Captain America

React Native
Captain America is seen as the leader of avengers and can be easily compared with
React Native. Because React Native was at the top when compared to other hybrid app
frameworks in the Stack Overflow Developer Survey 2021. React Native is a solution to help
you build natively rendered mobile apps on both Android and iOS. This framework is tried
and trusted by a large developer base to build apps, even Facebook uses React Native to build
all its mobile applications. React Native is Facebook’s baby with an ability to create robust
and complex hybrid apps from scratch. The great thing about React Native is it is based on
React which is a JavaScript library.

Developer: Facebook Initial Release: 2015

 A functional component is just a plain JavaScript pure function that accepts props as
an argument and returns a React element (JSX).
A class component requires you to extend from React. Component and create a render
function that returns a React element

Functional Components vs Class Components

Functional Components Class Components

The simplest definition of a functional You must build a render function that
component is a simple JavaScript pure returns a React element when creating a
function that takes an argument called props render function for a class component by
and returns a React element (JSX). extending from React.Component.
The render() method returning JSX is
Functional components do not use any
required (which is syntactically similar to
render methods.
HTML).
When a function is returned, it can no longer Different life cycle methods are kept alive,
be maintained because functional performed, and triggered based on the phase
components work from top to bottom. of the class component after it is created.
Also referred to as stateless components
because they merely accept data and render Because they use logic and state, they are
it in some way, they are mostly in charge of also known as stateful components.
rendering user interfaces.
Class components can use React lifecycle
Functional components cannot use React
methods (for example,
lifecycle methods, such as
componentDidMount,
componentDidMount.
componentWillUnmount etc).
Since the state needs to be stored,
There is no use of constructors.
constructors are utilized.
Functional components are more efficient Class components are a little inefficient
Functional components require fewer lines Class components are complex and require
of code and are easy to understand more lines of code.
Implementation inside a class component
requires a different syntax. Example:
Make functional components stateful, hooks
constructor(props)
can be used with ease. Example:
{
const [name,SetName]=
super(props);
React.useState(‘ ‘)
this.state = {name: ‘ ‘}
}

Flutter
Iron Man is known for his intelligence and with the help of Flutter, you can
intelligently build natively-compiled mobile apps from a single codebase, which is why he is
the personification of Flutter. Flutter is a Google UI framework to help you easily build and
deploy aesthetically pleasing mobile apps.
Google launched the first version of Flutter by the codename “Sky” in 2015. And,
today the Flutter framework is making good progress in terms of popularity. No other mobile
SDK (Software Development Kit) than Flutter provides reactive styles without any Javascript
bridge.
Developer: Google
Initial Release: 2017
Backed Platforms:
 iOS 9+
 Android 4.4+
Key Advantages:

 Supports hot reload which results in fast code writing.

 Flutter works in a fast way to increase the time-to-market speed.
 Features rich widgets which can be customized or you can also create your own.
 Testing process can be faster because of a single codebase.
 Apps smoothly adapt to different screens.
 It has a UI first approach with many ready-to-use widgets to easily create interactive
elements.
 Easy initial setup and apps have good execution performance.

Written in: Dart

What Is Ionic?

Ionic framework is an open-source UI toolkit for building performance, 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,
which 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. It can also be used as a standalone
without a front-end framework using a simple script include.
Officially, the Ionic framework has integration with Angular, but it also provides
support for Vue.js and React.js, which are in development.

Ionic is an open-source UI and Native API framework. It provides cross-platform UI

components and native API functionality for building iOS, Android, Electron, and web apps
using standard web technologies.

Ionic is an open source UI toolkit for building performant, high-quality mobile apps
using web technologies — HTML, CSS, and JavaScript — with integrations for popular
frameworks like Angular, React, and Vue.
Key Features:

 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.

The first version of Ionic was released in 2013. The current version, 6.0.0, was released in
December 2021.

Advantages of Ionic Framework

The advantages of Ionic application development framework are as following:

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

The disadvantages of Ionic application development framework are as following:

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 Architecture
React Native Architecture

Apache Cordova
Apache Cordova is an open-source mobile development framework. It allows you to
use standard web technologies - HTML5, CSS3, and JavaScript for cross-platform
development. Applications execute within wrappers targeted to each platform, and rely on
standards-compliant API bindings to access each device's capabilities such as sensors, data,
network status, etc.

Use Apache Cordova if you are:

• a mobile developer and want to extend an application across more than one platform,
without having to re-implement it with each platform's language and tool set.
• a web developer and want to deploy a web app that's packaged for distribution in
various app store portals.
• a mobile developer interested in mixing native application components with a
WebView (special browser window) that can access device-level APIs, or if you want to
develop a plugin interface between native and WebView components.

Architecture

There are several components to a Cordova application. The following diagram shows a high-
level view of the Cordova application architecture.
Web View
The Cordova-enabled Web View may provide the application with its entire user interface.
On some platforms, it can also be a component within a larger, hybrid application that mixes
the Web View with native application components.

Web App
This is the part where your application code resides. The application itself is
implemented as a web page, by default a local file named index.html, that references CSS,
JavaScript, images, media files, or other resources are necessary for it to run. The app
executes in a Web View within the native application wrapper, which you distribute to app
stores.
 This container has a very crucial file - config.xml file that provides information about
the app and specifies parameters affecting how it works, such as whether it responds to
orientation shifts.

Plugins

Plugins are an integral part of the Cordova ecosystem. They provide an interface for Cordova
and native components to communicate with each other and bindings to standard device
APIs. This enables you to invoke native code from JavaScript.

Apache Cordova project maintains a set of plugins called the Core Plugins. These core
plugins provide your application to access device capabilities such as battery, camera,
contacts, etc.

In addition to the core plugins, there are several third-party plugins which provide additional
bindings to features not necessarily available on all platforms. Plugins may be necessary, for
example, to communicate between Cordova and custom native components.

Cordova does not provide any UI widgets or MV* frameworks. Cordova provides only the
runtime in which those can execute. If you wish to use UI widgets and/or an MV*
framework, you will need to select those and include them in your application.

Development Paths

Cordova provides you two basic workflows to create a mobile app. While you can often use
either workflow to accomplish the same task, they each offer advantages:

• Cross-platform (CLI) workflow: Use this workflow if you want your app to run on
as many different mobile operating systems as possible, with little need for platform-specific
development. This workflow centers around the cordova CLI. The CLI is a high-level tool
that allows you to build projects for many platforms at once, abstracting away much of the
functionality of lower-level shell scripts. The CLI copies a common set of web assets into
subdirectories for each mobile platform, makes any necessary configuration changes for each,
runs build scripts to generate application binaries. The CLI also provides a common interface
to apply plugins to your app. To get started follow the steps in the Create your first app guide.
Unless you have a need for the platform-centered workflow, the cross-platform workflow is
recommended.
• Platform-centered workflow: Use this workflow if you want to focus on building an
app for a single platform and need to be able to modify it at a lower level. You need to use
this approach, for example, if you want your app to mix custom native components with web-
based Cordova components, as discussed in Embedding Web Views. As a rule of thumb, use
this workflow if you need to modify the project within the SDK. This workflow relies on a
set of lower-level shell scripts that are tailored for each supported platform, and a separate
Plugman utility that allows you to apply plugins. While you can use this workflow to build
cross-platform apps, it is generally more difficult because the lack of a higher-level tool
means separate build cycles and plugin modifications for each platform.

When first starting out, it may be easiest to use the cross-platform workflow to create an app,
as described in Create your first app guide. You then have the option to switch to a platform-
centered workflow if you need the greater control the SDK provides.