View
1.056
Download
1
Embed Size (px)
DESCRIPTION
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.
Citation preview
Mobilizing Your Visualforce Application 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” – me, circa. Dreamforce 2010
It doesn’t. Here’s why (and how it should be done) ...
Sample application Native
Survey
Multiple answer types
Back/forward navigation
Data model
SurveySurvey
SurveyQuestionSurvey
Question
SurveyResponse
SurveyResponse
SurveyQuestionResponse
SurveyQuestionResponse
ContactContact
Flow
Start SurveyStart Survey Retrieve QuestionRetrieve Question
CheckboxCheckbox
Radio ButtonsRadio Buttons
Text AreaText Area
Update Question Response
Update Question Response Complete SurveyComplete 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
JqueryMobileJqueryMobile
Mobile UI framework
Touch optimized
Cross device
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 controller in place
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, Co-founder Instagram
Demonstration
The desktop version with jQuery Mobile markup
Visualforce
Rebuild the app for mobile
Mobile experience
Animated transitions
Reactive
Part 2: JavaScript
JqueryMobileJqueryMobile JavaScriptJavaScript
JavaScriptRemotingJavaScriptRemoting
Business logic
Executes client side
Reduced round trips
No API calls
JavaScript Remoting Controller method
JavaScript Remoting Invoke via JavaScript
Callback function
Part 3: Knockout
JqueryMobileJqueryMobile
JavaScriptJavaScript JavaScriptRemotingJavaScriptRemoting
Reduce DOM manipulation
Declarative binding
Automatic refresh
JavaScript “controller”
Fast!
KnockoutKnockout
Knockout View Model
Declarative binding
Advanced binding
Question 1
•Type=‘Text Area’
•Response=‘Great’
Question 2
•Type=‘Text Area’
•Response=‘Okay’
Question 3
•Type=‘Checkbox’
•Response=‘true’
Progressive enhancementjQuery 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 transitions
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 BowdenKeir Bowden
CTO, BrightGen@bob_buzzard