Join Force.com MVP Keir Bowden (aka Bob Buzzard) to learn how to mobilize your Visualforce applications. We'll take an existing survey application and make it mobile by creating pages based on the JQuery Mobile framework, replacing stateful controllers with Javascript remoting, and using Knockout.js to manage client-side data.

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
Survey
Survey
Response
Survey
Question
Survey
Question
Response

6. Flow
Checkbox
Start Survey
Retrieve Question
Radio Buttons
Text Area
Update Question
Response
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
▪ Cross device
Jquery
Mobile
▪ 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
▪ Reduced round trips
Jquery
Mobile
JavaScript
JavaScript
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
▪ Automatic refresh
Jquery
Mobile
Knockout
▪ JavaScript “controller”
▪ Fast!
JavaScript
JavaScript
Remoting

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