Lecture 1: Introduction to

Mobile Applications
Development
T. Fatima Al-azazi
Agenda

● What is mobile application?

● Mobile application vs web application
● Mobile application development models
● Native and cross platform solutions
● What is Flutter
● Why Flutter?
● What is Dart?
● Why Dart?

2
What is Mobile Application?

● A mobile application, most commonly referred to as an app,

is a type of application software designed to run on a mobile
device, such as a smartphone or tablet computer.
● Mobile applications frequently serve to provide users with
similar services to those accessed on PCs.

3
Mobile Applications vs Web Applications
Mobile Applications Web Applications
Pros: Pros:
1. faster than web apps 1. No installation
2. Provides more 2. Maintenance is easy
functionality 3. Self-upgradation
3. No need of internet 4. Quick implementation
connectivity 5. Does not require approval
4. Provides security from app store.
5. Easy to implement.
Cons:
Cons:
6. Need internet connectivity
6. Increased development 7. Slow
costs 8. Less availability
7. No compatibility between 9. Less guaranteed security. 4
different platforms
Mobile Application Development Models

There are five different mobile application development models

which exist.

1. Native application development

2. Hybrid application development
3. Cross-platform application development
4. PWA development
5. Desktop application development.

5
Native application development model
● Used to create mobile app which supports single
platform/operating system.
● It uses programming language which is the operating system
dependent.
● For example, Java or Kotlin for android OS and swift or objective
C for IOS.
● Native application development model will have access to all
features in a feature set of device, so that it gives a good
performance.
● Tools that can be used in native application development model
are android studio, android IDE and ATOM
Advantages:
1. Gives best performance
2. Provides more security 6
Hybrid application development model
● Combines elements of web applications with mobile application.
● Codebase needs to be developed using web technologies like HTML
and CSS.
● Then, the codebase will be wrapped inside the container.
● The container is web view which will act as a browser to load the
application.
● Native plugins specific to a mobile device can be installed
specific to mobile device, so that features of mobile device can be
accessed through web application.
● Tools to be used in hybrid app development are Cordova, Ionic,
etc.
● Example applications developed using hybrid application
development model are Gmail, Evernote, etc.
Advantages:
1. Uses agile process model 7
Cross-platform application development model
● Bridges are used to connect codebase written in framework-dependent
programming language to native components.
● Cross-platform applications do not depend on platforms.
● Easy to implement, cost-effective and provide good functionality.
● Tools to be used in cross-platform application development model are
React Native, NativeScripts and Flutter.
● Examples of applications developed using cross-platform application
development model are Instagram, GoogleAds.

Advantages:

1. Quick time to market

2. Single source code
3. Easy implementation
4. Easy maintenance
5. Same application can run on different devices.
8
Progressive web application development
● An alternative approach to traditional mobile application
development.
● the application need not to be installed so that storage is not
required.
● These are the web applications which utilize the capabilities
of a browser to provide mobile application like user
experience.
● Tools to be used in progressive web application development
model are React, Angular JS.
● Examples of applications developed using progressive model are
e-commerce applications, Flipkart.
Advantages:
1. Can run on any device
2. Easy to develop 9
Desktop application development model

● Desktop application development model is the most widely

used model nowadays to develop cross-platform desktop
applications.
● Electron can be used as a tool to develop desktop
applications.
● Some of the desktop applications are Chime, slack.
Advantages:
1. High efficiency
2. Easily scalable
3. Security
4. Easy to maintain
10
Comparison of different models on technical aspects

11
Mobile
Application
Development
Models

12
13
WHAT IS FLUTTER

● Flutter is Google’s portable UI framework for building modern,

native, and reactive applications for iOS and Android.
● Flutter is a cross-platform framework
● Google is also working on Flutter desktop embedding and Flutter
for the Web and embedded devices .
● Flutter is an open-source project hosted on GitHub with
contributions from Google and the community.
● Flutter uses Dart, a modern object-oriented language that
compiles to native ARM code and production ready JavaScript code.

14
15
16
17
18
Why Flutter?
● No JavaScript bridge:
○ The JavaScript bridge, used in most cross-platform
options, is a major bottleneck in development and in
your application’s performance.
○ apps don’t lose any performance or productivity when
running on a user’s device.
● Compile time
○ In Flutter, a full compile generally takes less than 30
seconds, and incremental compiles take less than a
second (hot reloading).
● Write once, test once, deploy everywhere
○ Not only do you get to write your app one time and 19
Why Flutter? Part 2

● Code sharing:
○ With Flutter and Dart, your web and mobile apps can
share all the code except each client’s views.
○ Flutter will be able to target Web and Desktop, too.)
○ In practical terms, this means you are super productive.
● Productivity and collaboration
○ Gone are the days of separate teams for iOS and
Android.
● Code maintenance:
○ Nothing is more satisfying than fixing a bug once and
having it corrected on all your clients.
20
 WHAT IS DART !!

● A general-purpose, high-level modern programming

language developed by Google.
● Open source web programming language
● Emerged in 2011,
● Dart gains popularity when it is used by Flutter.
● Dart is class-based, single-inheritance object-oriented
programming language.
● Supports interfaces, abstract classes, reified
generics ,optional typing and strong typing.
● If you know any of these programming languages, you can
easily learn Dart because it is C-style syntax

21
WHY DART ?!
● Dart is a platform-independent language and supports all
operating systems such as Windows, Mac, Linux, etc.
● It is an open-source language, which means it is available
free for everyone. It comes with a BSD license and is
recognized by the ECMA standard.
● It is an object-oriented programming language and
supports all features of oops such as inheritance,
interfaces, and optional type features.
● Dart is very useful in building real-time applications because
of its stability.
● Dart comes with the dar2js compiler which transmits the
Dart code into JavaScript code that runs on all modern web
browsers.
● The stand-alone Dart VM permits Dart code to run in a
command-line interface environment. 22
23
24
Assignment 1

1. Install Dart and Flutter SDKs

2. Install any IDE that support Flutter (Android Studio , Intellij or
Visual code)
3. Install Dart and Flutter plug-ins in your IDE
4. Print out the versions of Dart and Flutter that you have
installed.

25