Slide deck from my Dreamforce 2013 breakout session on how to turn your Visualforce application into an HTML5 mobile application using the jQuery Mobile and Knockout.js frameworks.

1. Mobilizing Your Visualforce
Application
Keir Bowden, BrightGen, CTO
@bob_buzzard

2. About me
 CTO of BrightGen
 5 years Force.com
 Force.com MVP
 Enterprise Java background

3. Styling isn’t mobilizing!
“Mimicking a mobile device UI turns my slick Visualforce pages into slick
HTML5 web applications” – me, circa. Dreamforce 2010
It doesn’t. Here’s why (and how it should be done) ...

4. Sample application
 Native
 Survey
 Multiple answer types
 Back/forward navigation

5. Data model
Contact
Contact
Survey
Survey
Survey
Survey
Response
Response
Survey
Survey
Question
Question
Survey
Survey
Question
Question
Response
Response

6. Flow
Checkbox
Checkbox
Start Survey
Start Survey
Retrieve Question
Retrieve Question
Radio Buttons
Radio Buttons
Text Area
Text Area
Update Question
Update Question
Response
Response
Complete Survey
Complete Survey

7. Demonstration
The desktop version of the application ...

8. Visualforce markup

9. HTML5 Web Application
 Web pages
 Accessed via browser
 Basic device features
 Transactional

10. Part 1: jQuery Mobile
 Mobile UI framework
 Touch optimized
Jquery
Jquery
Mobile
Mobile
 Cross device
 Built on jQuery

11. HTML5 Custom Attributes

12. Single Page Application

13. Mobilizing the wrong way
Replace Visualforce markup with jQuery Mobile markup
Set viewport to device size
Leave controller in place

14. Competition not co-operation
 Page navigation
 Form submission
 Ajax rerendering

15. View state
 Mobile bandwidth
 Heavy for device
 Server side in pilot

16. Latency
 Power saving
 Packet loss ≠ congestion
 TCP backs off
 “Nobody wants to wait while they wait.”
- Mike Kreiger, Co-founder Instagram

17. Demonstration
The desktop version with jQuery Mobile markup

18. Visualforce

19. Rebuild the app for mobile
 Mobile experience
 Animated transitions
 Reactive

20. Part 2: JavaScript
 Business logic
 Executes client side
Jquery
Jquery
Mobile
Mobile
JavaScript
JavaScript
 Reduced round trips
JavaScript
JavaScript
Remoting
Remoting
 No API calls

21. JavaScript Remoting
 Controller method

22. JavaScript Remoting
 Invoke via JavaScript
 Callback function

23. Part 3: Knockout
 Reduce DOM manipulation
 Declarative binding
Jquery
Jquery
Mobile
Mobile
Knockout
Knockout
JavaScript
JavaScript
JavaScript
JavaScript
Remoting
Remoting
 Automatic refresh
 JavaScript “controller”
 Fast!

24. Knockout View Model

25. Declarative binding

26. Advanced binding
Question 1
Question 2
Question 3
•Type=‘Text Area’
•Type=‘Text Area’
•Type=‘Checkbox’
•Response=‘Great’
•Response=‘Okay’
•Response=‘true’

27. Progressive enhancement
jQuery Mobile enhances markup
HTML -> CSS -> JavaScript
Only runs once
Knockout updates the DOM

28. Demonstration
The survey application rebuilt for mobile.

29. Lesson 1: Storyboard the application
Especially single page applications!
Map pages to functionality
Identify swipe transitions

30. Lesson 2: Client side business logic
 On device - faster
 Eases transition to hybrid
 Don’t mix with server side!

31. Lesson 3: Professional JavaScript
 Avoid anonymous functions
 Use your own namespace
 Don’t tie behaviour to content

32. Lesson 4: Combining frameworks
 Rarely as simple as combining resources
 You are the conductor
 Persevere!

33. Competition
 Quiz on this session
 QR code/link in chatter feed
 Closes 8pm
 Win my book

34. Keir Bowden
CTO, BrightGen
@bob_buzzard