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!
Top Related