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.

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?

3. Native Apps

4. Native
​ Two Major Platforms

5. Native
​ Design Patterns that work!
​ Material Design ​ iOS Design Guidelines

6. Native
​ Building blocks for amazing UIs

7. Evolution of Native Apps
​ Evernote

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

9. HTML5 Apps

10. What is HTML5
Forms
WebSockets
Manifests
IndexedDB
Web Workers
Geo
Audio / Video
Canvas
Transforms
Animations
Transitions
Layout
Perspective
Rotate
Translate
Background

11. CSS3 Properties For Designers
​ Multiple Form Factors
​ @media
phone
(max-­‐width:
500px)
​ @media
tablet
(max-­‐width:
2000px)
​ <link
rel="stylesheet"
media="phone"
href="phone.css"
>
​ <link
rel="stylesheet"
media="tablet"
href="tablet.css">
​ Orientation
​ @media
tablet
and
(orientation:landscape)
​ @media
tablet
and
(orientation:portrait)
#stretch
{
border-­‐image:
url(bubble.png)
25
46
29
31
fill
stretch;
}
Styling

12. The Diverse Selection of HTML5 Frameworks

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

14. Hybrid Apps

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

22. Salesforce Mobile SDK
​ How the Salesforce Mobile Platform can help

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

27. Salesforce Mobile SDK + React Native Demo
+

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