Mobilizing Your Visualforce
Application
Keir Bowden, BrightGen, CTO
@bob_buzzard
About me
▪ CTO of BrightGen
▪ 5 years Force.com
▪ Force.com MVP
▪ Enterprise Java background
Styling isn’t mobilizing!
“Mimicking a mobile device UI turns my slick Visualforce pages into slick
HTML5 web applications...
Sample application
▪ Native
▪ Survey
▪ Multiple answer types
▪ Back/forward navigation
Data model
Contact

Survey

Survey
Response

Survey
Question

Survey
Question
Response
Flow
Checkbox

Start Survey

Retrieve Question

Radio Buttons

Text Area

Update Question
Response

Complete Survey
Demonstration
The desktop version of the application ...
Visualforce markup
HTML5 Web Application
▪ Web pages
▪ Accessed via browser
▪ Basic device features
▪ Transactional
Part 1: jQuery Mobile
▪ Mobile UI framework
▪ Touch optimized
▪ Cross device
Jquery
Mobile

▪ Built on jQuery
HTML5 Custom Attributes
Single Page Application
Mobilizing the wrong way
▪Replace Visualforce markup with jQuery Mobile markup
▪Set viewport to device size
▪Leave control...
Competition not co-operation
▪ Page navigation
▪ Form submission
▪ Ajax rerendering
View state
▪ Mobile bandwidth
▪ Heavy for device
▪ Server side in pilot
Latency
▪ Power saving
▪ Packet loss ≠ congestion
▪ TCP backs off
▪ “Nobody wants to wait while they wait.”
- Mike Kreiger...
Demonstration
The desktop version with jQuery Mobile markup
Visualforce
Rebuild the app for mobile
▪ Mobile experience
▪ Animated transitions
▪ Reactive
Part 2: JavaScript
▪ Business logic
▪ Executes client side
▪ Reduced round trips
Jquery
Mobile

JavaScript

JavaScript
Rem...
JavaScript Remoting
▪ Controller method
JavaScript Remoting
▪ Invoke via JavaScript

▪ Callback function
Part 3: Knockout

▪ Reduce DOM manipulation
▪ Declarative binding
▪ Automatic refresh

Jquery
Mobile

Knockout

▪ JavaScri...
Knockout View Model
Declarative binding
Advanced binding

Question 1

Question 2

Question 3

•Type=‘Text Area’

•Type=‘Text Area’

•Type=‘Checkbox’

•Response=‘G...
Progressive enhancement
jQuery Mobile enhances markup
▪HTML -> CSS -> JavaScript
▪Only runs once
▪Knockout updates the DOM
Demonstration
The survey application rebuilt for mobile.
Lesson 1: Storyboard the application
▪Especially single page applications!
▪Map pages to functionality
▪Identify swipe tra...
Lesson 2: Client side business logic
▪ On device - faster
▪ Eases transition to hybrid
▪ Don’t mix with server side!
Lesson 3: Professional JavaScript
▪ Avoid anonymous functions
▪ Use your own namespace
▪ Don’t tie behaviour to content
Lesson 4: Combining frameworks
▪ Rarely as simple as combining resources
▪ You are the conductor
▪ Persevere!
Competition
▪ Quiz on this session
▪ QR code/link in chatter feed
▪ Closes 8pm
▪ Win my book
Keir Bowden
CTO, BrightGen
@bob_buzzard
Mobilizing Your Visualforce Application With JQuery and KnockoutJS
Upcoming SlideShare
Loading in …5
×

Mobilizing Your Visualforce Application With JQuery and KnockoutJS

524 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
524
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobilizing Your Visualforce Application With JQuery and KnockoutJS

  1. 1. Mobilizing Your Visualforce Application Keir Bowden, BrightGen, CTO @bob_buzzard
  2. 2. About me ▪ CTO of BrightGen ▪ 5 years Force.com ▪ Force.com MVP ▪ Enterprise Java background
  3. 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. 4. Sample application ▪ Native ▪ Survey ▪ Multiple answer types ▪ Back/forward navigation
  5. 5. Data model Contact Survey Survey Response Survey Question Survey Question Response
  6. 6. Flow Checkbox Start Survey Retrieve Question Radio Buttons Text Area Update Question Response Complete Survey
  7. 7. Demonstration The desktop version of the application ...
  8. 8. Visualforce markup
  9. 9. HTML5 Web Application ▪ Web pages ▪ Accessed via browser ▪ Basic device features ▪ Transactional
  10. 10. Part 1: jQuery Mobile ▪ Mobile UI framework ▪ Touch optimized ▪ Cross device Jquery Mobile ▪ Built on jQuery
  11. 11. HTML5 Custom Attributes
  12. 12. Single Page Application
  13. 13. Mobilizing the wrong way ▪Replace Visualforce markup with jQuery Mobile markup ▪Set viewport to device size ▪Leave controller in place
  14. 14. Competition not co-operation ▪ Page navigation ▪ Form submission ▪ Ajax rerendering
  15. 15. View state ▪ Mobile bandwidth ▪ Heavy for device ▪ Server side in pilot
  16. 16. Latency ▪ Power saving ▪ Packet loss ≠ congestion ▪ TCP backs off ▪ “Nobody wants to wait while they wait.” - Mike Kreiger, Co-founder Instagram
  17. 17. Demonstration The desktop version with jQuery Mobile markup
  18. 18. Visualforce
  19. 19. Rebuild the app for mobile ▪ Mobile experience ▪ Animated transitions ▪ Reactive
  20. 20. Part 2: JavaScript ▪ Business logic ▪ Executes client side ▪ Reduced round trips Jquery Mobile JavaScript JavaScript Remoting ▪ No API calls
  21. 21. JavaScript Remoting ▪ Controller method
  22. 22. JavaScript Remoting ▪ Invoke via JavaScript ▪ Callback function
  23. 23. Part 3: Knockout ▪ Reduce DOM manipulation ▪ Declarative binding ▪ Automatic refresh Jquery Mobile Knockout ▪ JavaScript “controller” ▪ Fast! JavaScript JavaScript Remoting
  24. 24. Knockout View Model
  25. 25. Declarative binding
  26. 26. Advanced binding Question 1 Question 2 Question 3 •Type=‘Text Area’ •Type=‘Text Area’ •Type=‘Checkbox’ •Response=‘Great’ •Response=‘Okay’ •Response=‘true’
  27. 27. Progressive enhancement jQuery Mobile enhances markup ▪HTML -> CSS -> JavaScript ▪Only runs once ▪Knockout updates the DOM
  28. 28. Demonstration The survey application rebuilt for mobile.
  29. 29. Lesson 1: Storyboard the application ▪Especially single page applications! ▪Map pages to functionality ▪Identify swipe transitions
  30. 30. Lesson 2: Client side business logic ▪ On device - faster ▪ Eases transition to hybrid ▪ Don’t mix with server side!
  31. 31. Lesson 3: Professional JavaScript ▪ Avoid anonymous functions ▪ Use your own namespace ▪ Don’t tie behaviour to content
  32. 32. Lesson 4: Combining frameworks ▪ Rarely as simple as combining resources ▪ You are the conductor ▪ Persevere!
  33. 33. Competition ▪ Quiz on this session ▪ QR code/link in chatter feed ▪ Closes 8pm ▪ Win my book
  34. 34. Keir Bowden CTO, BrightGen @bob_buzzard

×