Unit-2
Unit-2
2.0 INTRODUCTION
Mobile app consists of various client side components and support
infrastructure components. It is important to understand various components of
mobile app to design and develop an effective mobile app. The knowledge
about the architecture for various kinds of mobile app and their applicability
would guide us to select the most appropriate mobile app for a given scenario.
Mobile app architecture also provides a perspective about the user interface
design, integration aspects and other such considerations.
In this unit, we closely look at various components of mobile app and have a
deep dive study of architecture of various mobile apps. At the end we will also
look an end-to-end case study.
2.1 OBJECTIVES
After going through this unit, you should be able to:
Table 2.1: Provides the key differences of three types of mobile app architectures
20
Development Fast Higher cost Lower development cost Components of a
Mobile Application
development and due to portability. Build
maintenance once deploy to any
platform model.
Advantages Standards High performance, Easy portability
compliance, rich UI, can exploit
lesser native mobile
development features,
cost.
Performance Relatively lower Optimal Relatively lower
performance performance performance
User Provides optimal Provides excellent Provides decent UI
experience experience for UI features experience.
web experience leveraging the
device capabilities
to the fullest extent
Hosting Cloud or on App stores or App stores or marketplace
premise marketplace
platforms
21
Introduction to
Mobile Application
Development
The key components of the hybrid app are given in Figure 2.3. The Mobile
application development using Hybrid app development has the following
benefits:
We can have mobile specific services which consolidate the required backend
services and provides optimized data for the mobile application.
22
Components of a
Mobile Application
Figure 2.3 is an expanded view of the mobility solution. It details out the
functionalities and the interfaces with the underlying components as given
below:
Application UI: All the screens would be developed using HTML5, CSS3 and
JavaScript’s. User experience would be specifically designed for Mobile Apps
with targeted platform compatibility.
Business Rules: are operational procedures for making decisions, identifying
workflows and operational choices.
Service Integration Layer: Integration of all the business services with the
backend system would be managed by this layer.
Security Framework: All the data persisted within the device will be stored
securely using the encryption techniques specific to each platform. Random
generated unique key will be used for encryption and decryption. The key used
to encrypt will persist in the device securely. Advanced Encryption Standard
(AES) is the algorithm used for security purpose. The data sent through the
network will be specific to the backend service.
23
Introduction to Authentication / User Management: The user specific data management and
Mobile Application
Development the business logics will be handled by this layer. The authentication will be
done in online / offline mode.
Localization: This is the layer which will provide the multi-lingual capability
to the app. All the static literals specific to each language will be maintained
locally inside the app. The literals specific to the dynamic content would be
fetched from the backend services.
Data Access Layer: All the data stored locally would be accessed through this
layer. This consists of data objects and the local storage. SQLite would be used
as local storage for the application.
Native Bride/Wrapper - This layer will provide the capability to access the
devices native features. This is the combination of the mobile core platform
and JavaScript.
The end to end flow of the hybrid mobile app is shown in Figure 2.4 and the
corresponding layers explained.
Presentation Layer
UI will follow a Responsive Web Design (RWD) and will be developed
using HTML5.0, CSS3, Twitter Bootstrap with JQuery
The UI can be packaged using Apache Cordova to create a Hybrid App.
REST/JSON Web services will be leveraged.
Hybrid apps will have two components, the native component and the
web component.
24
Business Layer Components of a
Mobile Application
REST/JSON Web services will be leveraged to access server side
applications.
Business layer consists of server side components for Services Integration
and other custom business services.
Security Layer
Authorization to the app user will be leveraged with user registry services.
Client Layer
• MVC: Client-side MVC framework (Angular JS) will be used to structure
the application, which will provide:
– routing support within the application to allow navigation in
application;
– event-driven interaction between views and model;
– Simplified CRUD (Create, Read, Update and Delete) invocations on
RESTful services.
Server Layer
• A router layer maps the URL with a service end point. This layer will be an
interface with client side. These REST services will pass the request
parameters to business layer.
• Business layer will validate the input data, perform any data manipulation
or business logic implementation on the data retrieved from the Integration
layer.
• Integration layer will basically integrate with the external system which
will be exposing APIs/web services. Data communication will take place
using JSON (Java Script Object Notation) format.
A sample technology stack for implementing the mobile web app is depicted in
Table 2.3:
27
Introduction to Table 2.3: Technology Stock for Mobile Web App
Mobile Application
Development
Technology Usage Description Benefits
to be used side
- The application uses offline data storage. The application expects the
backend system to provide delta data retrieval (for offline sync). The delta
data retrieval is needed to reduce the amount of data transmitted across
network.
- The data synchronization would be implemented as a manually initiated
sync. This is to provide more control to the user and to prevent periodic
polling to the backend (which would increase battery usage on the device).
o Last synchronized time and number of entities modified on the device
which are pending to be synchronized with the backend may be
displayed in the header. This will provide a better view on the data
freshness to the users.
Figure 2.8 depicts various components in the backend of Mobile App.
2.6 SUMMARY
In this unit, we started discussing the high level architecture of various kinds of
mobile apps. We then detailed layer-wise components of native moble app,
responsive mobile web app and hybrid app. We looked at various components
of mobile client application and support infrastructure. We also detailed the
roles and technology stack for responsive web app. We saw an end to end case
study for Android app.
32