Professional Visualforce DevelopmentStephan MoraisDirector of Product Managment Visualforce & UI Architecture

Safe harbor statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services.

The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the fiscal year ended January 31, 2009 and our other filings. These documents are available on the SEC Filings section of the Investor Information section of our Web site.

Any unreleased services or features referenced in this or other press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.

Safe Harbor

What is professional development?

?

?

?

Judgement

Quality & Detail

Design

Looking ahead

Professional Visualforcein 4 parts in 4 parts

TMTOWTDIThere’s more than one way to do it.

Part 1

Visualforce Development Models

<apex:commandButton

rendered="{!buttonRendered}"

action="{!doFoo}"

rerender="a, b, c" />

<apex:actionSupport

event="onclick"

action="{!doBar}"

rerender="x, y, z"/>

Visualforce “Classic”

‣ Easy AJAX‣ Partial page updates‣ Managed state‣ But there’s a view state tax

Visualforce Development Models

<apex:form>

<apex:inputText value="{!query}"> <apex:actionSupport event="onkeyup" rerender="results"/>

</apex:inputText>

<apex:dataList value="{!results}" var="r" id="results">

{!r.firstname} {!r.lastname}

</apex:dataList>

</apex:form>

Google Instant -style search results with Visualforce “Classic”

public List<Contact> getResults() {if (query != null && query != '') {return Database.query('SELECT firstname, lastname, email ' +'FROM Contact ' +'WHERE firstname LIKE \'' + '%' + query + '%\' ' +'OR lastname LIKE \'' + '%' + query + '%\' ');} else { return null; }}

Visualforce Apex

Visualforce Development Models

<apex:form>

<apex:commandButton>

<apex:actionSupport>

rerender

Visualforce “Light”

‣ Only leverages templating and components

‣ Client manages state‣ Uses direct AJAX‣ No view state

Visualforce Development ModelsGoogle Instant -style search results

with Visualforce “Light”<input type="text" value="" class="search" onkeyup="doSearch(this.value)"/>

function doSearch(q) {var xhr = new XMLHttpRequest();xhr.open('GET','/apex/gi_light_results?' + 'q='+encodeURIComponent(q),false);xhr.send();document.getElementById('results').innerHTML = xhr.responseText;}

<apex:repeat value="{!results}" var="r"><li>{!r.firstname} {!r.lastname}</li></apex:repeat>

public List<Contact> getResults() {if (query != null && query != '') {return Database.query('SELECT firstname, lastname, email ' +'FROM Contact ' +'WHERE firstname LIKE \'' + '%' + query + '%\' ' +'OR lastname LIKE \'' + '%' + query + '%\' ');} else { return null; }}

Visualforce Apex

Visualforce Development ModelsVisualforce “CSR” (Client Side Rendering)

‣ Client-side rendering in JavaScript

‣ May leverages JavaScript libraries like Ext and JQuery

‣ Client-server communicationvia SOAP or REST APIs

‣ Client managed state

<apex:form>

<apex:commandButton>

<apex:actionSupport>

rerender

Visualforce Development ModelsGoogle Instant -style search results

with Visualforce “CSR”<input type="text" value="" class="search" onkeyup="doSearch(this.value)"/>

sforce.connection.sessionId = '{!$Api.Session_ID}';function doSearch(q) {document.getElementById('results').innerHTML = '';var results = sforce.apex.execute("GIController","getResultsWS", {queryArg : q});if (results.length > 0) {var ul = document.createElement('ul');for (var i=0; i<results.length; i++) {var r = results[i];var li = document.createElement('li');li.innerHTML = '<span class="r1">' + r.FirstName + ' ' + r.LastName + '</span>' +'<div class="r2">' + r.Email + '</div>';ul.appendChild(li);}document.getElementById('results').appendChild(ul);}}

webservice static List<Contact> getResultsWS(String queryArg) {if (queryArg != null && queryArg != '') {return Database.query('SELECT firstname, lastname, email ' +'FROM Contact ' +'WHERE firstname LIKE \'' + '%' + queryArg + '%\' ' +'OR lastname LIKE \'' + '%' + queryArg + '%\' ' );} else { return null; }}

Visualforce

Apex

JavaScript Remoting for ApexComing Soon Sneak Peak

public global class MyController { @RemoteAction public static String sayHello(String helloTo) { return 'Hello ' + helloTo + '!'; }}

<script type="text/javascript">MyController.sayHello('World', function(result, e) {document.getElementById("result").innerHTML = result;});</script>

TODO: VF sample code

Google Instant -style search results with JavaScript Remoting

TODO: Apex sample code

Performance Matters

Part 2

Performance Best Practices Design for performance at the beginning,

not the end

Measure server and client -side perf

Optimize view state

Be wary of heavy-weight JS frameworks

Pick the right development model

Speed of Google Instant ExamplesComparing the different models

Model Time to Render after keyup

Visualforce Classic 873ms

Visualforce Light 250ms

Visualforce CSRAJAX Toolkit 582ms

Visualforce CSRJavaScript Remoting 195ms

Performance Tools

Apex CSI

View State Inspector

Performance Tools

Firebug

Dynatrace Ajax

Page Speed

YSlow

New Performance ToolsComing Soon Sneak Peak

Scorecard

Apex CSI Performance Perspective

User Experience MattersLess is more.

Part 3

Right Data, Right UI, Right Time

TODO: Image of Bad VF page– Too many fields

– Too many related lists

– Related lists editable

Right Data, Right UI, Right Time

TODO: Image of Improved VF page– Fields scoped down and to the user

– Related lists only on demand

– Related lists inline editable

Field SetsComing Soon Sneak Peak

Dynamic BindingComing Soon Sneak Peak

<apex:repeat value="{!$ObjectType.Contact.FieldSets.Compact_Detail}" var="f">{!$ObjectType.Contact.Fields[f].label} : <apex:outputField value="{!contact[f]}"/><br/></apex:repeat>

Inline EditingComing Soon Sneak Peak

<apex:detail inlineEdit="true"/>

<apex:outputField inlineEdit="true" .../>

“A good hockey player plays where the puck is. A great hockey player

plays where the puck is going to be.”

Wayne Gretzkey

Part 4

<HTML 5>

HTML5Offline Access

<apex:page contentType="text/html" showheader="false" standardStylesheets="false" sidebar="false"><apex:outputText escape="false" value="<!DOCTYPE html>"/><html manifest="/apex/manifest_cache">...

<apex:page contentType="text/cache-manifest" showHeader="false" standardStylesheets="false" sidebar="false" cache="false">CACHE MANIFESTCACHE:/apex/accounts/soap/ajax/20.0/connection.js/soap/ajax/20.0/apex.js/favicon.icoNETWORK:/services/Soap/package/AccountController</apex:page>

HTML5Client Storage

localStorage.setItem('foo', 'bar');  var bar = localStorage.getItem('foo'); 

Mobile

Touch

+

ExampleHTML5-based, offline capable VF page for iPhone

TODO

Recap

TMTOWTDI Understand the different Visualforce models

Performance MattersMeasure and optimize

User Experience MattersLess is more

Skate to where the puck is goingHTML5 and mobile

Questions?smorais@salesforce.com

Additional InformationTODO- Developerforce Articles- Souders Books- See my Chatter Feed for demo code zip