The document discusses performance best practices for Salesforce Lightning components, emphasizing the importance of managing data retrieval, caching, component instantiation, and conditional rendering to enhance performance. It also includes a forward-looking statement warning users about potential risks and uncertainties related to the company's future operations and service offerings. Additionally, it outlines various technical aspects and recommendations for efficient component design and implementation.

1. May 11, 2017
Lightning Components
Performance Best Practices

2. Forward-Looking Statement
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 product or service availability, 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, new products and services, 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 outcome of any litigation, risks associated with
completed and any possible mergers and acquisitions, 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 most recent fiscal year
and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures 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 presentations, 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.

3. Go Social!
Salesforce Developers
Salesforce Developers
Salesforce Developers
The video will be posted to YouTube & the
webinar recap page (same URL as registration).This webinar is being recorded!
@salesforcedevs / #forcewebinar / @ccoenraets

4. ▪ Don’t wait until the end to ask your question!
– Technical support will answer questions starting now.
▪ Respect Q&A etiquette
– Please don’t repeat questions. The support team is working
their way down the queue.
▪ Stick around for live Q&A at the end
– Speakers will tackle more questions at the end, time-
allowing.
▪ Head to Developer Forums
– More questions? Visit developer.salesforce.com/forums
Have Questions?

5.  Data Retrieval
 Data caching
 Component instantiation
 Conditional rendering
 Data binding
 Events
 List
 Core components
 Production vs Development
 Profiling tools
Agenda

6. Data Retrieval
 Go to server as last resort
 Don't retrieve the same data in different components
 Consider other ways to pass data between components
 Limit columns and rows of result set
 Don’t make call to server to filter/sort data you already have
 Cache data when possible

8. [screenshot 2: map + list]

10. Data Caching
1. Storable Actions
2. Lightning Data Service
3. Custom Cache

11. var action = component.get("c.getItems");
action.setStorable();
action.setCallback(this, function(response) {
// handle response
});
$A.enqueueAction(action);
Storable Actions
cached

12. refreshAge
30
secs
expirationAge
900
secs

13. Storable Actions
Component Framework Client Cache
1. request 2. get
3. not available
6. set7. response
4. request5. response
Scenario 1: Response not cached or age >= expirationAge

14. Storable Actions
Component Framework Client Cache
1. request 2. get
3. response4. response
Scenario 2: Response in cache and age < refreshAge

15. Storable Actions
Component Framework Client Cache
1. request 2. get
3. response
7. set8. response
5. request6. response
4. response
Scenario 3: Response in cache and age >= refreshAge

16. <force:recordData recordId="{!v.recordId}"
targetFields="{!v.contact}"
fields="['Id',
'Name',
'Phone',
'Mobile']" />
Lightning Data Service

17. Lightning Data Service
Lightning Data Service
Component B
111111111111111,
['Name', 'Phone']
Component A
111111111111111,
['Name', 'Phone']
Component C
111111111111111,
['Name', 'Phone', 'Mobile']
111111111111111
Rose Gonzales
415-617-1234
415-123-4567

18. Custom Cache
Component Custom Cache

19. Single record
Data Caching Summary
Caching Requirements Recommended Solution
Lightning Data Service
Collections of records, composite
responses, custom data structures,
third-party data
Complete control over caching
implementation
Storable Actions
Custom Cache

20. Component Instantiation

21. Show all available data
and tools on one
screen
Focus on critical path
and defer everything
else
Interactive Design Best Practices
Usability
Performance
Poor
Poor
Good
Good
Cognitive Overload Progressive Disclosure

22. Lazy Instantiation in Lightning Experience
 Quick or Global Actions
 Utility Bar
 App Builder tabs

23. Lazy Instantiation in your own Components
 <lightning:tabset> and <lightning:tab>
 <aura:if>
 $A.createComponent()
 Lazy load related data

24. Conditional Rendering
1. Toggle visibility using CSS
2. Create elements conditionally using <aura:if>

25. <aura:attribute name="step" type="Integer" default="1"/>
<div class="{!v.step==1 ? null : 'slds-hide'}">
Step 1
</div>
<div class="{!v.step==2 ? null : 'slds-hide'}">
Step 2
</div>
<div class="{!v.step==3 ? null : 'slds-hide'}">
Step 3
</div>
Toggle Visibility using CSS

26. <aura:attribute name="step" type="Integer" default="1"/>
<aura:if isTrue="{!v.step==1}">
Step 1
</aura:if>
<aura:if isTrue="{!v.step==2}">
Step 2
</aura:if>
<aura:if isTrue="{!v.step==3}">
Step 3
</aura:if>
Create Elements Conditionally using <aura:if>

27. Development settings vs production settings
Toggle Visibility with CSS <aura:if>
Initial load time slower faster
DOM bigger smaller
Ghost event handlers yes no

28. Data Binding

29. <aura:component controller="ContactController>
<aura:attribute name="contacts" type="Contact[]"/>
<aura:iteration items="{!v.contacts}" var="property">
<lightning:input value="{!contact.firstName}" />
</aura:iteration>
</aura:component>
Bound Expressions

30. contact.addEventListener("change", function(event) {
inputElement.value = contact.firstName;
});
inputElement.addEventListener("change", function(event) {
contact.firstName = inputElement.value;
});
Behind the Scenes -- Pseudo Code

31. <aura:component controller="ContactController>
<aura:attribute name="contacts" type="Contact[]"/>
<aura:iteration items="{!v.contacts}" var="property">
<lightning:input value="{#contact.firstName}" />
</aura:iteration>
</aura:component>
Unbound Expressions

32. Events
 Use unbound expressions when possible
 Use <aura:if> for conditional rendering
 Use component events for fine–grained communication
 Limit use of application events
 Let events bubble (fundTileList)

33. Lists
Don’t support the creation of an infinite number of list items
 Provide a pagination mechanism
 Or virtualize the list (reuse and rehydrate a limited number
of list item components)

34. Third-Party JavaScript Libraries
 Remove dependencies on unneeded libraries
– DOM manipulation libraries
– UI libraries
– MVC frameworks
 Use minified versions of libraries and style sheet

35. Base Components
 ui namespce
– <ui:button>
 lightning namespace (aka Base Lightning Components)
– <lightning:button>

36. Use <lightning:> Components
Benefits:
 Native Lightning look and feel
 Performance
 Innovation
 Accessibility
 Client-side validation

37. Development settings vs production settings
Development Production
Debug mode On Off
Component caching Off On

38. Performance Profiling Tools
 Profile Components with Chrome Timeline
 Use the Salesforce Lightning Inspector Chrome Extension
 Analyze with the Salesforce Community Page Optimizer

39.  Data Retrieval
 Data caching
 Component instantiation
 Conditional rendering
 Data binding
 Events
 List
 Core components
 Production vs Development
 Profiling tools
Summary

44. Survey
Your feedback is crucial to the success
of our webinar programs. Please be sure to fill out the
survey at the end of the webinar. Thank you!

45. Q & A
Try Trailhead: trailhead.salesforce.com
Join the conversation: @salesforcedevs

46. Thank You