The document discusses the different mobile application architectures including native, hybrid, and HTML5 mobile applications. It describes the development approaches, advantages, and disadvantages of each architecture. Native applications are built using tools like Xcode and Android Studio and allow for the richest user experience but require developing for each platform separately. HTML5 applications can be developed using any text editor and browser but have limited access to device capabilities. Hybrid applications combine web technologies with native platforms using a native container to access device functionality.
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Understanding Native, Hybrid, and Web Mobile Architectures
1. Understanding Native, Hybrid and
Web Mobile Architectures
Marcus Torres
Sr. Director, Mobile Product Management
marcus.torres@salesforce.com
@mtorres_tweet
How to choose in a complicated mobile landscape
Wolfgang Mathurin
Architect on Mobile SDK
wmathurin@salesforce.com
2. HTML5
Responsive designed webpage to display well
on different mobile form factors
Hybrid
Native shell wrapped around a webpage with
access to native features
Native
Pure native code. No plugins. Pure
performance
What are the different mobile architectures?
8. Development for Native Apps
Development
IDE
Distribution Data Storage Testing
Xcode
Android Studio,
Eclipse ADT
CoreData, SQLite
SQLite
Xcode Apple App Store
Google Play
Automation
is very difficult
Simulator = Device
Discoverability
Rev share with Apple
Apple Approval Process
Secure Data!
Pros/Cons
Full Device Access!
Richest UI Experience
BEST app performance
Android Studio,
Eclipse ADT
13. Development for HTML5 Apps
Development
IDE
Distribution Data Storage Testing
Any Editor
Any Browser
WebStorage
(key value pairs)
IndexedDB for
structured data
Debug directly on
device
Full Automation
through Selenium
Completely
Unrestricted
Any web host
Instant updates
Pros/Cons
Non
Secure Storage!
Full End to End
Automation
Guarantee Trust
Keep 100%
of revenue $$$
Cannot be listed in
app stores
Limited “device”
access
15. Thin
or
THICK
Anatomy Of A Hybrid App
Mobile OS APIs
CONTAINER APP
BROWSER
UI HTML & CSS
LOGIC JavaScript
MODEL WebDB
HTML5 APIs
16. UIs for Thin Containers
so thin, can t even see it
WebView
in full screen mode
• Developer responsible for all navigation
• Slightly slower JavaScript execution on iOS
• Fully supported in Android 4.4+
• Option to locally store HTML, JavaScript, and images
• Authentication and Offline Storage
17. UIs for THICK Containers
• Native app provides the UI
• WebView is a partial component
• Built like a native app
• HTML5 plays a much smaller role
• For complex, re-usable components
WebView
18. Container: HTML5 to Native OS Bridge
• Camera
• Calendar
• Contacts
• Connectivity
• Motion
• App Data
• Microphone
• Custom APIs
navigator.camera.getPicture(onSuccess,
onFail,
{
quality:
50
});
function
onSuccess(imageData)
{
var
image
=
document.getElementById('myImage');
image.src
=
"data:image/jpeg;base64,"
+
imageData;
}
JavaScript
19. Development for Hybrid Apps
Development
IDE
Distribution Data Storage Testing
Any Editor
Any Browser
WebStorage
IndexedDB for
structured data
Secure Storage:
SmartStore, Native
Debug in browser &
directly on device
Automation
segmented between
web and native
Pros/Cons
Secure Storage
Browser and native
development tools
Xcode,
Android
Studio
+
Most Device
Feature Access
One app for all platforms
Apple App Store
Google Play
Discoverability
Changes for remote
hybrid apps can be
done anytime
20. Three Options: Which One Is Right For You?
Web developer skills
Access to native platform/features
Non-native performance
App store distribution
Widely known development skills
Partial instant updates
Richest User Experience
Fastest performance
App store distribution
App / Platform
Specialized development skills
Web developer skills
Instant updates
Unrestricted distribution
Limited device capabilities
21. What’s the right choice?
• Best User Experience
• Performance, Performance,
Performance
• Access to all device features
• Duplicate costs for each
platform
• Leverage existing developer
skills (web)
• Access to most device
features
• Real-time updates
• Poorer performance
• Complicated architecture
23. • Modern Unified Architecture on ALL Platforms
• Designed for Super Responsive Apps
• Sync for Online & Offline Functionality
• Push Notification Services
• Comprehensive Mobile SDK Developer Guide
• Certificate based Authentication Support
• Support Latest Technologies: iOS9, Android M, Cordova
4.0
The 4th Generation Mobile Platform with the Mobile SDK
24. SmartStore encrypted database
SmartSync data management
Enterprise identity & security
Native Hybrid
Any Web FrameworkOS UI Frameworks
push notifications container wrappers files mdm policies
Your
App
Unified Cross Platform Architecture
25. Salesforce Mobile Backend-as-a-Service
custombackend back-office partners
Salesforce1 Mobile Platform
• REST endpoints optimized for mobile apps
• Identity services
• Security & policy enforcement
• Push notifications
• Enterprise scale & reliability
• Customizable business process layer
• Integrate easily with any backend system
• Cloud database
• Social everywhere
• Easy dashboards & reports
• Mobile SDK
26. Best of both worlds? (maybe)
• Leverage web developer skills to write you app in
Javascript using react UI components and styles
• UI elements are rendered natively
• Native performance
• Real-time updates
• No need to restart/recompile when changing the
JavaScript code
• Powerful debugging using Chrome or Safari
debugging tools
Native
28. Useful Mobile Resources
Salesforce Mobile SDK Home Page
https://developer.salesforce.com/page/Mobile_SDK
Sample App Source Code
https://github.com/forcedotcom/Smartsyncexplorerreactnative/tree/unstable
Designs
Material Design from Google
iOS Human Interface Guidelines
Windows Modern Design Guidelines
29. Share Your Feedback, and Win a GoPro!
3
Earn a GoPro prize entry for
each completed survey
Tap the bell to take a
survey2Enroll in a session1