Build Consumer Apps using Mobile

SDK and Ionic Framework

Anup Jadhav

Co-Founder, Managing Director EMPAUA Limited

Salesforce Developer MVP

anup.jadhav@gmail.com

@anup

Mobile Dev LandscapeWhat platforms, tools are available today?

Native Apps

iOS, Android, Windows, Blackberry

HTML5 apps

standard web technologies – HTML, CSS,

Javascript

Hybrid Apps

Web app in a thin native container

Mobile Dev Landscape

Mobile Dev Landscape

Your app requirements and

business drivers will determine

the choice of platform

Platform specific APIs (iOS,

Android)

Camera, Notifications, Contacts,

Calendars

Secure offline storage

Swipe, Pinch and Spread

Objective C, Swift, Java

HTML5, Canvas, SVG

Only restricted to mobile browser

Shared SQL (e.g. Web Storage)

Swipe

HTML5, CSS, JavaScript

HTML5, Canvas, SVG

Camera, Notifications, Contacts,

Calendars

Secure file system, Shared SQL

Swipe, Pinch and Spread

HTML5, CSS, JavaScript

Native Web App Hybrid

Mobile Dev LandscapeDifferences between platforms

Ionic Framework

Powerful HTML5 SDK that helps you build

native-feeling mobile apps

created in 2013 by Drifty and v1.0 was

released in May 2015

Look and feel, and UI interaction of your app.

Requires AngularJS v1.0 (support for v2

coming soon)

Apps are packaged using Cordova

Write once, run anywhere

supports Android, iOS (windows support

coming soon)

What is Ionic

Popular open-source javascript framework to build

dynamic web pages

Built and maintained by Google

Follows MV* or MV-whatever model

Is easy to unit test

Main Concepts

Scope – glue between application data and behaviour

Directives – extend html with custom attributes and

elements

Service – reusable business logic independent of views

What is Ionic – AngularJS

What is IonicCordova Architecture

IMAGE SOURCE: BEN REPKINS

What is IonicArchitecture

IMAGE SOURCE: BEN REPKINS

What is Ionic – Summary

AngularJS – to structure the application

Cordova – used to add native device support via plugins

Gulp

Streaming build system

your build file is code, not config

minify js, concatenate files

tasks are executed with maximum concurrency

Salesforce Mobile SDKBuild consumer and enterprise apps lightning fast

Open source suite of familiar technologies that let you

rapidly build html5, native and hybrid mobile apps

Build employee and consumer apps

Fully customized UI

Supports native platforms like iOS, Android, Windows

Provides Enterprise features like:

Authentication

Secure Offline Storage

Smart synchronisation for online and offline apps

Push notification service

What is Salesforce Mobile SDK

Mobile SDK Architecture

IMAGE SOURCE: http://developer.salesforce.com

* Employee focused apps

* Use Visualforce and/or Lightning Components

* Ease of Development

* Difficult to build completely offline apps

* Mobile dev expertise not required

* Customer focused apps (but can also build

employee apps)

* Built using Objective-c/swift for ios, java for

android, html/js/css for web/hbybrid apps

* Complex to build but provides powerful

customization

* Build secure offline apps

* Requires knowledge of mobile frameworks and

platforms

Salesforce1 App (and Lightning Components)

Mobile SDK vs Salesforce1 App (and Lightning components)

Mobile SDK

Introducing Ionic-starter-salesforce*

* Official project title is ionic-starter-salesforce

Open source add-on starter template for

Ionic Framework

It setups the initial project structure to build

ionic apps using mobile sdk

Collaboration between Salesforce and Drifty

What is Ionic-starter-salesforce

Introducing Ionic-Starter-Salesforce*https://github.com/driftyco/ionic-starter-salesforce

Demo

Next Steps

Get Started

Ionic Framework:

* Documentation - www.ionicframework.com

* Support – http://ionic.io/support

Mobile SDK:

* Documentation - https://developer.salesforce.com/mobile/services/mobile-sdk

* Support – Salesforce StackExchange, Github issues

Questions

Thank you