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

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?

Native Apps

Native  Two Major Platforms

Native  Design Patterns that work!

 Material Design  iOS Design Guidelines

Native  Building blocks for amazing UIs

Evolution of Native Apps  Evernote

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

HTML5 Apps

What is HTML5

FormsWebSocketsManifestsIndexedDBWeb WorkersGeoAudio / VideoCanvas

Transforms Animations Transitions Layout Perspective Rotate Translate Background

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

The Diverse Selection of HTML5 Frameworks

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

Hybrid Apps

Thin or

THICK

Anatomy Of A Hybrid App

Mobile OS APIs

CONTAINER APP BROWSER

UI HTML & CSS

LOGIC JavaScript

MODEL WebDB

HTML5 APIs

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

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  

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

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

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

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

Salesforce Mobile SDK  How the Salesforce Mobile Platform can help

•  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

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

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

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

Salesforce Mobile SDK + React Native Demo

+

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

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