Post on 10-May-2015
description
transcript
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
Survey
SurveyQuestion
SurveyResponse
SurveyQuestionResponse
Contact
Flow
Start Survey Retrieve Question
Checkbox
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
JqueryMobile
▪ 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
DemonstrationThe desktop version with jQuery Mobile markup
Visualforce
Rebuild the app for mobile
▪ Mobile experience
▪ Animated transitions
▪ Reactive
Part 2: JavaScript
JqueryMobile JavaScript
JavaScriptRemoting
▪ 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
JqueryMobile
JavaScript JavaScriptRemoting
▪ Reduce DOM manipulation
▪ Declarative binding
▪ Automatic refresh
▪ JavaScript “controller”
▪ Fast!
Knockout
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
DemonstrationThe 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 Bowden
CTO, BrightGen@bob_buzzard