mobile app development 101

MOBILE APP DEVELOPMENT 101

BYVŨ ĐỨC TUYẾN

@KANVUDUC

AGENDA

• OPENING• NATIVE APP DEVELOPMENT• HYBRID APP DEVELOPMENT• XAMARIN APP DEVELOPMENT• REACT-NATIVE APP DEVELOPMENT• TESTING• UX• RESOURCES

OPENING

View NewsfeedPost new StatusView Profile

… Access data through API

Allow user to pick gallery imageAllow user to pick locationAllow offline working

…Run on multiple platforms

OPENNING – APP ARCHITECTUREPr

esen

tati

onLa

yer

View

Model Controller

Busi

ness

Laye

r

BusinessWorkflow

BusinessComponents

Application Facade

BusinessEntities

Data

Acc

ess

Laye

r DB AccessComponents

API AccessComponents

CROS

S-CU

TTIN

G

Securi

ty

Logg

ing

Exce

ptio

n Hand

ling

NATIVE

• USE PROGRAMMING LANGUAGE NATIVE TO THE DEVICE AND THE OS• OBJECTIVE-C/SWIFT TO DEVELOP IOS APP• JAVA TO DEVELOP ANDROID APP

• USE DEVELOPMENT TOOLS NATIVELY PROVIDED BY THE OS MANUFACTURERS• XCODE IS THE IDE TO DEVELOP IOS APP• ANDROID STUDIO IS THE IDE TO DEVELOP ANDROID APP

APP

View

Model Controller

BusinessWorkflow

BusinessComponents

Application Facade

BusinessEntities

DB AccessComponents

API AccessComponents

Secu

rity

Loggin

g

Except

ion Ha

ndling

UIKitAndroid View

UIViewControllerActivity

APP

Model

BusinessWorkflow

BusinessComponents

Application Facade

BusinessEntities

DB AccessComponents

API AccessComponents

Secu

rity

Loggin

g

Except

ion Ha

ndling

UIKit Android View

UIViewController Activity

iOS Android

NATIVE - TOOLS

NATIVE

PROS• FLUID USER INTERFACE• GREAT USER EXPERIENCE• GREAT PERFORMANCE• FULL CUSTOMIZATION AND ACCESS

CONS• NO CODE SHARING ACROSS

PLATFORMS• NEEDS TOTALLY INDEPENDENT TEAMS • MORE TIME ON TESTING & BUG

FIXING• MORE MAINTENANCE COST

HYBRID

• BUILD UP APP USING HTML5/CSS3 & JAVASCRIPT• ACCESS DEVICE AND OS FEATURE VIA NATIVE WRAPPER

APP

WEBVIEW

Model

BusinessWorkflow

BusinessComponents

Application Facade

BusinessEntities

DB AccessComponents

API AccessComponents

Securi

ty

Logg

ing

Exce

ptio

n Hand

ling

View

Controller

NATIVE WRAPPER

Accelerometer Contacts

Camera Geolocation

Media Network

Storage …

HYPRID APP DEVELOPMENT - TOOLS

HYBRID

PROS• WRITE ONCE, RUN ANYWHERE• LESS DEVELOPMENT TIME• SINGLE TEAM• EASE OF UPDATE

CONS• LACK OF PLATFORM EXPERIENCE• STILL NEEDS NATIVE STUFF • NOT VERY FLUID UI• NOT VERY GOOD PERFORMANCE

XAMARIN

ANYTHING YOU CAN DO IN OBJECTIVE-C, SWIFT, OR JAVA CAN BE DONE IN C# WITH XAMARIN USING VISUAL STUDIO

APP

Model

BusinessWorkflow

BusinessComponents

Application Facade

BusinessEntities

DB AccessComponents

API AccessComponents

Secu

rity

Logg

ing

Except

ion Ha

ndling

UIKit Android View

UIViewController Activity

iOS Android

XAMARIN - TOOLS

XAMARIN

PROS• ALL NATIVE PROS• SINGLE LANGUAGE/TOOL• SINGE TEAM• FREE & POWERED BY MICROSOFT

CONS• BIGGER APP SIZE• TOOLS NOT AS GOOD AS NATIVE

REACT NATIVE

BUILD A REAL MOBILE APP THAT'S INDISTINGUISHABLE FROM AN APP BUILT USING OBJECTIVE-C OR JAVA. REACT NATIVE USES THE SAME FUNDAMENTAL UI BUILDING BLOCKS AS REGULAR IOS AND ANDROID

APPS. YOU JUST PUT THOSE BUILDING BLOCKS TOGETHER USING JAVASCRIPT AND REACT.

APP

UIKit

Wrapper Class

iOSAndroid View

Wrapper Class

Android

Model

BusinessWorkflow

BusinessComponents

Application Facade

BusinessEntities

DB AccessComponents

API AccessComponents

Securi

ty

Logg

ing

Exce

ptio

n Ha

ndling

Controller

React View

JavaScript Engine

APP

Model

BusinessWorkflow

BusinessComponents

Application Facade

BusinessEntities

DB AccessComponents

API AccessComponents

Securi

ty

Logg

ing

Exce

ption

Handli

ng

UIKit Android View

UIViewController Activity

iOS Android

REACTIVE - TOOLS

REACT NATIVE

PROS• ALL NATIVE PROS• SINGLE LANGUAGE/TOOL• SINGE TEAM• FREE & POWERED BY FACEBOOK

CONS• A LITTLE BIGGER APP SIZE• TOOLS NOT AS GOOD AS NATIVE• MIX OF NATIVE & JAVASCRIPT• NO NATIVE ACCESS FROM JAVASCRIPT

TESTING

• UNIT TEST IS DEFAULT• AUTOMATION TEST IS A MUST

• > 4000 ANDROID UNIQUE DEVICES• ~10 IOS DEVICES

UX

RESOURCES

THANK YOU!