Join us for a brief overview of the Salesforce Mobile SDK and Ionic Framework, and learn how you can use the two technologies together to build consumer apps lightning fast. We will talk about best practices, considerations, and architecture of a consumer app. The talk is aimed at a technical audience who are both beginners and proficient at mobile app development.

1. 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

2. Mobile Dev Landscape
What platforms, tools are available today?

3.  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

4. Mobile Dev Landscape
Your app requirements and
business drivers will determine
the choice of platform

5. 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 WebApp Hybrid
Mobile Dev Landscape
Differences between platforms

6. Ionic Framework

7.  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

8.  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

9. What is Ionic
Cordova Architecture
IMAGE SOURCE: BEN REPKINS

10. What is Ionic
Architecture
IMAGE SOURCE: BEN REPKINS

11. 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

12. Salesforce Mobile SDK
Build consumer and enterprise apps lightning fast

13.  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

14. Mobile SDK Architecture
IMAGE SOURCE: http://developer.salesforce.com

15. * 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
Salesforce1App (and Lightning Components)
Mobile SDK vs Salesforce1 App (and Lightning components)
Mobile SDK

16. Introducing Ionic-starter-salesforce*
* Official project title is ionic-starter-salesforce

17.  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

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

19. Demo

20. Next Steps

21. 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

22. Questions

23. Thank you