![Page 1: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/1.jpg)
Professional Visualforce DevelopmentStephan MoraisDirector of Product Managment Visualforce & UI Architecture
![Page 2: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/2.jpg)
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
![Page 3: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/3.jpg)
What is professional development?
![Page 4: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/4.jpg)
?
![Page 5: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/5.jpg)
?
![Page 6: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/6.jpg)
?
![Page 7: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/7.jpg)
![Page 8: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/8.jpg)
Judgement
![Page 9: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/9.jpg)
Quality & Detail
![Page 10: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/10.jpg)
Design
![Page 11: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/11.jpg)
Looking ahead
![Page 12: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/12.jpg)
Professional Visualforcein 4 parts in 4 parts
![Page 13: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/13.jpg)
![Page 14: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/14.jpg)
TMTOWTDIThere’s more than one way to do it.
Part 1
![Page 15: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/15.jpg)
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
![Page 16: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/16.jpg)
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
![Page 17: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/17.jpg)
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
![Page 18: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/18.jpg)
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
![Page 19: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/19.jpg)
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
![Page 20: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/20.jpg)
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
![Page 21: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/21.jpg)
![Page 22: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/22.jpg)
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>
![Page 23: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/23.jpg)
TODO: VF sample code
Google Instant -style search results with JavaScript Remoting
TODO: Apex sample code
![Page 24: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/24.jpg)
![Page 25: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/25.jpg)
Performance Matters
Part 2
![Page 26: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/26.jpg)
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
![Page 27: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/27.jpg)
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
![Page 28: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/28.jpg)
Performance Tools
Apex CSI
View State Inspector
![Page 29: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/29.jpg)
Performance Tools
Firebug
Dynatrace Ajax
Page Speed
YSlow
![Page 30: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/30.jpg)
New Performance ToolsComing Soon Sneak Peak
Scorecard
Apex CSI Performance Perspective
![Page 31: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/31.jpg)
![Page 32: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/32.jpg)
User Experience MattersLess is more.
Part 3
![Page 33: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/33.jpg)
Right Data, Right UI, Right Time
TODO: Image of Bad VF page– Too many fields
– Too many related lists
– Related lists editable
![Page 34: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/34.jpg)
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
![Page 35: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/35.jpg)
![Page 36: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/36.jpg)
Field SetsComing Soon Sneak Peak
![Page 37: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/37.jpg)
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>
![Page 38: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/38.jpg)
Inline EditingComing Soon Sneak Peak
<apex:detail inlineEdit="true"/>
<apex:outputField inlineEdit="true" .../>
![Page 39: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/39.jpg)
![Page 40: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/40.jpg)
“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
![Page 41: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/41.jpg)
<HTML 5>
![Page 42: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/42.jpg)
![Page 43: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/43.jpg)
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>
![Page 44: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/44.jpg)
HTML5Client Storage
localStorage.setItem('foo', 'bar'); var bar = localStorage.getItem('foo');
![Page 45: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/45.jpg)
![Page 46: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/46.jpg)
Mobile
Touch
+
![Page 47: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/47.jpg)
ExampleHTML5-based, offline capable VF page for iPhone
TODO
![Page 48: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/48.jpg)
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
![Page 49: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/49.jpg)
![Page 51: Advanced Force.com Code (Apex) Development and Performance Considerations](https://reader034.vdocument.in/reader034/viewer/2022052508/55a07e321a28abed578b4761/html5/thumbnails/51.jpg)
Additional InformationTODO- Developerforce Articles- Souders Books- See my Chatter Feed for demo code zip