0
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
Contact

Survey
Survey

Survey
Survey
Response
Response

Survey
Survey
Question
Question

Survey
Survey...
Flow
Checkbox
Checkbox

Start Survey
Start Survey

Retrieve Question
Retrieve Question

Radio Buttons
Radio Buttons

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

Jquery
Jquery
Mobile
Mobile

 Cross device
 Built on jQue...
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
Jquery
Jquery
Mobile
Mobile

JavaScript
JavaScript

 Reduced r...
JavaScript Remoting
 Controller method
JavaScript Remoting
 Invoke via JavaScript

 Callback function
Part 3: Knockout

 Reduce DOM manipulation
 Declarative binding

Jquery
Jquery
Mobile
Mobile

Knockout
Knockout

JavaScr...
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 Mobile and Knockout.js
Upcoming SlideShare
Loading in...5
×

Mobilizing your Visualforce Application with jQuery Mobile and Knockout.js

1,094

Published on

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.

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
1,094
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Options – native, hybrid,htm5. Users not going to install an application to take the odd survey.
  • JQM and Visualforce fight for control of navigation and form postbacks. It ends up feeling like a regular web site, as every action requires a round trip with a full page reload.
    Mention server side view state pilot in winter 14 – this will help with point 2, but latency is still the killer for round trips.
    Network interfaces go to sleep to conserve battery life.
    Mobile devices Packet loss is inevitable in mobile networks – this is interpreted as congestion and the transmission speed is decreased.
  • Lots of large viewstate consumes bandwidth and makes things slow
    Server side is back to the future – I have to work with what is GA.
  • Extracting list of responses from the database.
  • Everything is asynchronous.
  • Transcript of "Mobilizing your Visualforce Application with jQuery Mobile and Knockout.js"

    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 Contact Survey Survey Survey Survey Response Response Survey Survey Question Question Survey Survey Question Question Response Response
    6. 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. 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 Jquery Jquery Mobile Mobile  Cross device  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 Jquery Jquery Mobile Mobile JavaScript JavaScript  Reduced round trips JavaScript JavaScript Remoting 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 Jquery Jquery Mobile Mobile Knockout Knockout JavaScript JavaScript JavaScript JavaScript Remoting Remoting  Automatic refresh  JavaScript “controller”  Fast!
    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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×