Download - Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Transcript
Page 1: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Mobilizing Your Visualforce Application

Keir Bowden, BrightGen, CTO@bob_buzzard

Page 2: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

About me▪ CTO of BrightGen

▪ 5 years Force.com

▪ Force.com MVP

▪ Enterprise Java background

Page 3: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

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

Page 4: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Sample application▪ Native

▪ Survey

▪ Multiple answer types

▪ Back/forward navigation

Page 5: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Data model

Survey

SurveyQuestion

SurveyResponse

SurveyQuestionResponse

Contact

Page 6: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Flow

Start Survey Retrieve Question

Checkbox

Radio Buttons

Text Area

Update Question Response Complete Survey

Page 7: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Demonstration

The desktop version of the application ...

Page 8: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Visualforce markup

Page 9: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

HTML5 Web Application▪ Web pages

▪ Accessed via browser

▪ Basic device features

▪ Transactional

Page 10: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Part 1: jQuery Mobile

JqueryMobile

▪ Mobile UI framework

▪ Touch optimized

▪ Cross device

▪ Built on jQuery

Page 11: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

HTML5 Custom Attributes

Page 12: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Single Page Application

Page 13: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Mobilizing the wrong way

▪Replace Visualforce markup with jQuery Mobile markup

▪Set viewport to device size

▪Leave controller in place

Page 14: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Competition not co-operation▪ Page navigation

▪ Form submission

▪ Ajax rerendering

Page 15: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

View state▪ Mobile bandwidth

▪ Heavy for device

▪ Server side in pilot

Page 16: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Latency▪ Power saving

▪ Packet loss ≠ congestion

▪ TCP backs off

▪ “Nobody wants to wait while they wait.” - Mike Kreiger, Co-founder Instagram

Page 17: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

DemonstrationThe desktop version with jQuery Mobile markup

Page 18: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Visualforce

Page 19: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Rebuild the app for mobile

▪ Mobile experience

▪ Animated transitions

▪ Reactive

Page 20: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Part 2: JavaScript

JqueryMobile JavaScript

JavaScriptRemoting

▪ Business logic

▪ Executes client side

▪ Reduced round trips

▪ No API calls

Page 21: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

JavaScript Remoting▪ Controller method

Page 22: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

JavaScript Remoting▪ Invoke via JavaScript

▪ Callback function

Page 23: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Part 3: Knockout

JqueryMobile

JavaScript JavaScriptRemoting

▪ Reduce DOM manipulation

▪ Declarative binding

▪ Automatic refresh

▪ JavaScript “controller”

▪ Fast!

Knockout

Page 24: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Knockout View Model

Page 25: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Declarative binding

Page 26: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Advanced binding

Question 1•Type=‘Text Area’•Response=‘Great’

Question 2•Type=‘Text Area’•Response=‘Okay’

Question 3•Type=‘Checkbox’•Response=‘true’

Page 27: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Progressive enhancementjQuery Mobile enhances markup

▪HTML -> CSS -> JavaScript

▪Only runs once

▪Knockout updates the DOM

Page 28: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

DemonstrationThe survey application rebuilt for mobile.

Page 29: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Lesson 1: Storyboard the application

▪Especially single page applications!

▪Map pages to functionality

▪Identify swipe transitions

Page 30: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Lesson 2: Client side business logic

▪ On device - faster

▪ Eases transition to hybrid

▪ Don’t mix with server side!

Page 31: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Lesson 3: Professional JavaScript

▪ Avoid anonymous functions

▪ Use your own namespace

▪ Don’t tie behaviour to content

Page 32: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Lesson 4: Combining frameworks

▪ Rarely as simple as combining resources

▪ You are the conductor

▪ Persevere!

Page 33: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Competition▪ Quiz on this session

▪ QR code/link in chatter feed

▪ Closes 8pm

▪ Win my book

Page 34: Mobilizing Your Visualforce Application With JQuery and KnockoutJS

Keir Bowden

CTO, BrightGen@bob_buzzard

Page 35: Mobilizing Your Visualforce Application With JQuery and KnockoutJS