mobilizing your visualforce application with jquery and knockoutjs

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