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