Understanding Native, Hybrid, and Web Mobile Architectures
-
Upload
salesforce-developers -
Category
Technology
-
view
658 -
download
1
Transcript of Understanding Native, Hybrid, and Web Mobile Architectures
![Page 1: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/1.jpg)
Understanding Native, Hybrid and Web Mobile Architectures
Marcus Torres Sr. Director, Mobile Product Management [email protected] @mtorres_tweet
How to choose in a complicated mobile landscape
Wolfgang Mathurin Architect on Mobile SDK [email protected]
![Page 2: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/2.jpg)
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?
![Page 3: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/3.jpg)
Native Apps
![Page 4: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/4.jpg)
Native Two Major Platforms
![Page 5: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/5.jpg)
Native Design Patterns that work!
Material Design iOS Design Guidelines
![Page 6: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/6.jpg)
Native Building blocks for amazing UIs
![Page 7: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/7.jpg)
Evolution of Native Apps Evernote
![Page 8: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/8.jpg)
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
/Con
s Full Device Access!
Richest UI Experience
BEST app performance
Android Studio, Eclipse ADT
![Page 9: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/9.jpg)
HTML5 Apps
![Page 10: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/10.jpg)
What is HTML5
FormsWebSocketsManifestsIndexedDBWeb WorkersGeoAudio / VideoCanvas
Transforms Animations Transitions Layout Perspective Rotate Translate Background
![Page 11: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/11.jpg)
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
![Page 12: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/12.jpg)
The Diverse Selection of HTML5 Frameworks
![Page 13: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/13.jpg)
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
/Con
s
Non Secure Storage!
Full End to End Automation
Guarantee Trust
Keep 100% of revenue $$$
Cannot be listed in app stores
Limited “device” access
![Page 14: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/14.jpg)
Hybrid Apps
![Page 15: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/15.jpg)
Thin or
THICK
Anatomy Of A Hybrid App
Mobile OS APIs
CONTAINER APP BROWSER
UI HTML & CSS
LOGIC JavaScript
MODEL WebDB
HTML5 APIs
![Page 16: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/16.jpg)
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
![Page 17: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/17.jpg)
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
![Page 18: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/18.jpg)
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
![Page 19: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/19.jpg)
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
/Con
s
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
![Page 20: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/20.jpg)
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
![Page 21: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/21.jpg)
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
![Page 22: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/22.jpg)
Salesforce Mobile SDK How the Salesforce Mobile Platform can help
![Page 23: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/23.jpg)
• 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
![Page 24: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/24.jpg)
SmartStore encrypted database
SmartSync data management
Enterprise identity & security
Native Hybrid Any Web Framework OS UI Frameworks
push notifications container wrappers files mdm policies
Your App
Unified Cross Platform Architecture
![Page 25: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/25.jpg)
Salesforce Mobile Backend-as-a-Service
custom backend 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
![Page 26: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/26.jpg)
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
![Page 27: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/27.jpg)
Salesforce Mobile SDK + React Native Demo
+
![Page 28: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/28.jpg)
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
![Page 29: Understanding Native, Hybrid, and Web Mobile Architectures](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f272461a28abf4048b45b1/html5/thumbnails/29.jpg)
Share Your Feedback, and Win a GoPro!
3 Earn a GoPro prize entry for each completed survey
Tap the bell to take a survey 2Enroll in a session 1