Cross-platform mobile

app development
Overview of mobile app
architecture
 Outline

• System architecture

• Android Application Architecture

• iOS Application Architecture

• Cross-platform architecture

2
 SYSTEM ARCHITECTURE

• When it comes to the architecture for a mobile application, we must pay

attention to both the architecture of the device hardware and the architecture
of the whole supporting server system.
• Both hardware + mobile application + server must form a consistent,
transparent and transferable system
• Uniformity: data is easily exchanged across different components
• Transparency: components that are easy to detect or understand the errors of
other components returned.
• Portability: easily change one component with another without spending much
time editing.

3
 History of the mobile programming
industry
• Mobile devices are increasingly experiencing design
changes:
• Bag phone.
• Next is the generation that can be held in the palm of your
hand
• Folding case phones
• Full keyboard
• Smartphone with touch screen and very few push buttons

• Today's devices have increasingly large screens, large duration,

even bulky to the point that they are not pressed against the
ear but can listen to calls like phones (iPad)

4
 History of Mobile Programming
(2)
• Motorola DynaTAC 8000X
• 1983

• 13 x 1.75 x 3.5

• 2.5 pounds

• $3,995

• + Monthly Fee

• + Pay per minute

5
 History of Mobile Programming
(3)
From the rough bricks, what has made us now care about the user experience on mobile:
• The cheaper price makes it no longer a luxury.
• The battery lasts longer, the size is more compact, the touch technology is more
sensitive, the screen is more shatterproof, scratch-resistant ...
• Mobile hardware manufacturers don't want and don't anymore
• The ability to write responsive applications for users too.
• However, hardware manufacturers do not want to share too much technology secrets
to manufacture their hardware
• From there, standards have emerged that are agreed between
hardware
manufacturers and application developers.
• The first is mobile Web standards.

6
 History of the Mobile Programming Industry
(4)

• WAP (Wireless Application Protocol)

• A substandard of HTTP for data exchange
• between mobile (poor, unstable connection) and
Server
• Use WML instead of HTML
• Two sites use WAP most commonly: CNN and
ESPN

7
 History of Mobile Programming (5)

• Mobile payments at the time (and are still used today) were SMS, with
messages called value added (VAT)
• Send messages to a certain number to be served with a skyrocketing
message fee compared to normal news
• There are units that accept payment via scratch card or Web charging.
• Over time, the demand for phone payments increased as
large companies saw the potential of the phone market (except Microsoft)
• The evolution of hardware makes programming languages for portable
• It's not a nightmare like J2ME anymore.

8
 History of Mobile Programming
(6)

• Before 2010, it can be said that Nokia took the throne in the market global phone
section in general and Vietnam in particular
• Other manufacturers equally split the remaining market share such as Blackberry,
• Samsung, HTC...
• Every manufacturer tries its own operating system, and they doesn't seem to
be going all out to develop them.
• Many operating systems were born, but developers still very good with his work
(Windows CE, Windows Mobile, Linux, Symbian...)
• Things changed completely when the iPhone came out.

9
 History of Mobile Programming (7)

There used to be three big players in the market in the production of mobile applications
and mobile devices:

• Microsoft:
• With Nokia's mobile division, try with the Windows Universal philosophy.
• Due to delays, the Windows Phone product eventually failed
• Apple:
• It has always been the pinnacle of hardware design, application development
and business in mobile
• Google:
• Still follows the open standard criteria of the original Android
• As one of the largest corporations in the world, still successful in this phone
segment
10
 History of Mobile Programming (8)

Currently two popular mobile operating systems remain:

• Ios
• Works on iPhone and iPad devices
• Use Objective-C or Swift languages with XCode or cross-platform frameworks (Unity, Xamarin,
Flutter...)
• Still strictly managed by Apple with a "closed" philosophy
• Android
• Very diverse in models and types of both hardware and operating systems
• Programming in Java using Android Studio or other cross-platform parties (Unity, Xamarin,
Flutter...)
• Open source, other manufacturers can customize (such as Samsung, HTC, Sony...)
12
 Software architecture

Both operating systems, advocate the common

use of several architectural models
Layers: three different components
• iOS Dev favors MVC
(Model/View/Controller)
• Android Dev favors
MVVM
• Support for styled data exchange Client-
Server

13
 Software Architecture (2)

• Is the three-story architecture applied to many different scenarios?

• The demonstration layer is only responsible for displaying data, increasing the spread
experience for users and easy docking with versions different of other floors.
• The business layer prepares input data for sending requests to query data, edit data
received, and handling returned errors
• Data layer: store the most important data, organize access to produce the fastest and
most accurate results.

1
5 14
 Software Architecture (3)

Model/View/Controller illustrated as shown below.

This MVC template assigns out:
• What the Model Layer identifies need to return
to user
• The Controller layer makes the requirements resource
queries
• Layer View redisplays the data according to a standard
that is easy for people to understand use.

15
 Software Architecture (4)
Model/View/ViewModel
• quite similar to MVC
• ViewModel: Contains models and prepares observation data for the
View. It provides mechanisms for transferring data from the
View to Model.
• An object-side update of a class in the View group updates the object-
side data of the class in the Model group and vice versa (Data
Binding)

1
7 16
 Software Architecture (5)

• Client/server architecture
• MVC/MVVM architecture is applicable to applications without an Internet
connection
• The client/server architecture refers to applications that have access to
external
computers, via HTTP requests or sockets or webservices
• In general, applications that want to be used by users for a long time, cannot fail
to follow the client/server architecture.
• However, because the Internet connection still has unstable times or consumes
resources (memory, capacity, processing speed ...), it is necessary to store data
locally at the device.

17
Software Architecture (6)

18
2
0 19
 Android Application Architecture

• All Android apps are written in Java (or another language

if using cross-platform technology)
• The running file of an Android app with an APK extension
• When listed on the Store, Google will update a signature
on this runtime file.
• In addition, you can use the App signing service to store
your
private keys.

20
 Android App Architecture

• Android is a multi-user operating system, developed in the Linux platform

• Each application is tied to a user identifier when it's installed
• Each application has its own storage area "sandbox" where the files are
assigned permissions only to the actual application show read and write
• Each application runs on its own VM (i.e. Each source code of an
application
runs independently of the application other)
• Each application has its own process code.

21
 Android Application Architecture (3)

• Each Android app can still share data with other apps
• Different applications can still share user_id if they share the same digital
certificate.
• Each application can set up data sharing for other applications based on
modifying the XML permission in the manifest file.
• Each application can still have access to the address, phone status,
SMS ... when the user agrees to grant permissions.

22
Android Application Architecture (4)

23
 Android Application Architecture

• Most IT engineers know Java programming

• Java is still a language, clear, tight syntax, strong type
• Virtual machine support is available to ensure "write once,
run everywhere"
• There are plenty of support tools and forums
• No need to care about freeing up memory
• The original purpose of Java was to work on home
and handheld devices

24
 iOS App Architecture

• The most outstanding features of iOS:

• Also belongs to the operating system group *nix
• Same development branch as Apple's OS X
• Based on the Cocoa platform, developed into Cocoa Touch -
contains the main APIs for the application to interact with
the operating system
• iOS also breaks down into tiers like Android, but overall it's
much simpler.

2
8 25
iOS Application Architecture

2
9 26
iOS App Architecture

3
0 27
 iOS App Architecture

The differences between these two groups of operating systems are:

• Each layer of iOS has only one component involved
• iOS's Media layer involves multimedia data arranged into a separate layer
• iOS does not need the cascading associated with the Java virtual machine
• However, it is likely that the architecture of iOS is not as clearly stated as
Android.

3
0 28
 iOS App
• MVC in iOS: Architecture
• Still Model-View-Controller is a basic application design methodology for mobile
devices
• Due to Objective-C's object-oriented capabilities, MVC is one of the design
patterns for both iOS and OS X

29
 iOS Application Architecture

MVC in iOS:

30
 Cross-platform architecture

If cross-platform tools are not used, it is necessary to develop each platform separately

Tools Android iOS

N/a
Open source IDE Android Studio
XCode
Copyright IDE IntelliJ IDEA
XCUnit
Test Tools JUnit, Espresso
Xcode Instrument
Performance Measurement Tools Android Profiler
Source code management tools Git, Subversion, CVS
Emulator Emulator, HAXM, Genymotion iPhone Simulator

31
 Cross-platform architecture

• Concept: is an application created by frameworks that support cross-platform "Write

once run on multiple devices"
• Evaluation: to decide whether to develop a cross-platform application or not?
• The development team needs to answer a few questions themselves:
• Which user group you intend to target (Android group or iOS or both)
• How much money do you plan to pour into development costs?
• How much do users expect a premium experience? -What kind of payment option
do you want to use?

32
 Cross-platform architecture
(2)
• The development team needs to answer a few questions themselves
(continued):
• Is it trying to reduce development costs for both platforms?
• Is there currently a development team for several platforms or is there a
team for each platform?
• Who will maintain this system?
• The responses (of the majority of the group surveyed) were:
• Want to serve as many users as possible
• Want the cost to be as cheap as possible
• Want maintenance as easy as possible
• With three criteria: cheap, fast, good, only choose 2.
• Cross-platform applications are generally cheap, fast but not really good
33
 Cross-platform architecture
(3)

Previous cross-platform programs were bad:

• Poor user interface
• Poor performance
• The file runs in large size
• Platform developers don't care about them

34
 Cross-platform architecture
(4)

Current cross-platform programs have made significant improvements:

• Programmers can create well-customizable interfaces
• Many cross-platform tools with tech giants behind (Microsoft,
Google, Facebook)
• The installation file size has been reduced (with reduced
size techniques supported)
• Many other tools to support built-in app development

35
Cross-platform architecture
(5)

36
 Cross-platform architecture
(6)

• Careful consideration should be given to cross-platform application development:

• If planned, 50-80% of the source code is reusable for another project. Make
app development faster and cheaper cost.
• Maintenance may be easier if there are only problems in tissue settings
• business image, not interface
• Business model testing can be easier or centralized more

37
 Cross-platform architecture
(7)

• Careful consideration should be given to cross-platform application

development:
• If the development team already has a grasp of Dart or languages like
Javascript or HTML5, there is no training cost
• Interface design, which can make products that do not follow the implicit
rules of the platform, makes users initially surprised.
• The platform may have changes and tools not keeping up
• Performance is still an issue
• Initial costs and profits remain big questions

38
 Cross-platform architecture
(8)
React Native is a framework that allows writing in Javascript to build apps for
iOS and Android.
• Based on Facebook's React library to build app interfaces.
• React Native apps are built by:
• Javascript
• .CSS
• JSL = Javascript + XML
• The javascript source code will be converted to the native code of
the platform.

39
40
 Cross-platform architecture
(9)

Flutter is Google's portable toolkit for building apps that work on mobile, web,
and personal computers using Google's Dart programming language.
Flutter has the following main components:
• Flutter engine: written in C++ provides low-level rendering support for
Google's Skia graphics library
• Platform library – written in Dart, provides basic layers of functionality
settings for applications and APIs for communicating with the Flutter
engine
• Widgets - basic interface blocks for UI

41
 Cross-platform architecture
(10)

Flutter unlike Xamarin and React Native, it doesn't use the native widgets of each
platform.
• Instead, Flutter uses its own widgets (including components from Material Design
and Cupertino (iOS)), which are curated and rendered to the screen using the Flutter
engine.
• In this respect, Flutter will create less platform-dependent apps than React Native.

42
 Cross-platform architecture
(11)

Flutter does not depend

on the original equipment
manufacturer's widgets, it
exposes its own high-
performance engine-
based graphical
interfaces.

43
 Cross-platform architecture
(13)

Dart is a programming language developed by Google

• Similar to Java, C#, Swift, or Kotlin
• For development, Dart used a JIT (Just In Time) compiler
• To publish applications, Dart uses an AOT (Ahead Of Time)
compiler to generate code that runs at the highest
possible performance
• Dart can also compile Javascript code to work on the Web

4
8 44
 Scrolling

Wenhao, W. (2018, 03 01). React Native vs Flutter, cross-platform mobile application

frameworks.

45
 Data logging

Wenhao, W. (2018, 03 01). React Native vs Flutter, cross-platform mobile application

frameworks.

46
 According to the latest
figures

Biorn-Hansen, Andreas. "Presence and Performance of Mobile Development Approaches." PhD diss., Brunel University
London, 2021.

47