The document outlines forward-looking statements made by Salesforce.com, Inc. regarding potential risks and uncertainties related to their business operations, including product availability and financial results. It discusses the features of base lightning components, emphasizing their accessibility, ease of use, and adherence to design standards. Additionally, it introduces the Lightning Data Service, which simplifies CRUD operations and improves data handling efficiency for developers.

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

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 will work their way
down the queue.
§ Stick around for live Q&A at the end
– Speakers will tackle questions at the end, time-allowing.
§ Head to Developer Forums
– More questions? Visit developer.salesforce.com/forums
Have Questions?

5. Base Lightning Components

6. How can my app
look like this?

7. Can I use the
CSS in my app?

8. Can you make
it easier?

9. Base Lightning Component Goals
 Easy to adopt
• Patterned after HTML standards making it easy to adopt.
 Componentized
• Components are self contained and can be composed to build experience
components
 Minimal CSS
• Styled using the Salesforce Lightning Design System (SLDS), ensuring that your
components match the Lightning Experience and Salesforce1 Mobile seamlessly
• They evolve with SLDS
 Accessible by design: Supporting WCAG 2.0 and Section 508 standards

10.  Facilitate reusability over all other
principles
 Start with restrictive shape and relax on
request
 Optimize for best practices and make
bad practice harder to implement
 Develop components for the 80%
Base Lightning Component Philosophy
Base
Lightning
Components

11. Most Used/Requested Components

12. Styling Is Baked In
 Buttons
 Icons
 Badges
 Inputs

13. Simple Markup
 Buttons
 Icons
 Badges
 Inputs
<lightning:button … />
<lightning:icon … />
<lightning:input type="number" … />
<lightning:select … />

14. Base Lightning Components in Winter ‘17
 icon
 button
 buttonGroup
 buttonIcon
 buttonMenu
 input
 badge
 formattedNumber
 formattedDateTime
 menuItem
 select
 spinner
 textarea

15. Button Patterns
<lightning:buttonGroup>
<lightning:button … />
<lightning:button … />
<lightning:button … />
<lightning:buttonMenu … >
<lightning:menuItem … />
<lightning:menuItem … />
<lightning:menuItem … />
</lightning:buttonMenu>
</lightning:buttonGroup>

16. Container and Layout Components
 Tabset & Tab
 Card
 Layout & layoutItem
<lightning:card
footer="Card Footer”
iconName="utility:location"
title=“My Card Header">
<aura:set attribute="actions">
<lightning:button label="New"/>
</aura:set>
Card Body (custom component)
</lightning:card>

17. Component Structure and Variants
<lightning:button variant="brand" ../>
<lightning:button
variant=“destructive"
label="Delete"
onclick="{!c.handler}"
class="myClass"/>

18. Salesforce Lightning Design System
 CSS framework
• Open sourced, faster development
 Consistent User Experience
• Across different apps and devices
 Seamless upgrades every release
• Easy migration path across releases

19. Evolving In Step With SLDS

20. Release Roadmap
Release Theme Components
Spring ‘17 Adding depth to single
record foundational
components
Eg: avatar, inputSearch,
inputSelect, picklist,
inputRichText, tile, pill,
modal and notification
Summer ‘17 Introducing experience
and databound
components
Eg: inputField,
outputField, list, lookup

21. Demo

22. Christophe Coenraets
@ccoenraets
Lightning Data Service

23. Components Drive Modern UI Experiences

24. Before Lightning Data Service
Property
Status
Property
Map
Mortgage
Calculator
Property
Controller
- getProperty
getProperty(abc)
getProperty(abc)
getProperty(abc)
Client Server

25. Challenges
1. Multiple calls to the server for the same record
2. Code-centric
– Javascript at the client-side
– Apex at the server-side (including CRUD and FLS enforcement)
3. UI inconsistencies
– Each component has its own copy of the data
– Changes made in one component are not reflected in other
components

26. Introducing Lightning Data Service
• Declarative CRUD operations
• No Apex
• No SOQL
• Limited Javascript (Edit mode only)
• Handles sharing rules and field level security
• Shared record cache

27. Lightning Data Service
Property
Status
Property
Map
Mortgage
Calculator
Client Server
Shared Record Cache
<force:record recordId="abc"/>
<force:record
recordId="abc"/>
<force:record recordId="abc"/>

28. Example
<aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes"
access="global">
<aura:attribute name="recordId" type="Id" />
<aura:attribute name="property" type="Property__c" />
<force:recordPreview recordId="{!v.recordId}"
targetRecord="{!v.property}"
fields="['Id', 'Status__c']" />
{!v.property.Status__c}
</aura:component>

29. Example 2: EDIT mode
<aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes"
access="global">
<aura:attribute name="recordId" type="Id" />
<aura:attribute name="property" type="Property__c" />
<force:recordPreview aura:id="propertyService"
recordId="{!v.recordId}"
targetRecord="{!v.property}"
fields="['Id', 'Status__c']"
mode="EDIT"/>
<ui:inputText label="Status:" value="{! v.property.Status__c}"/>
<lightning:button onclick="{!c.onSaveClicked}">Save</lightning:button>
</aura:component>

30. Saving the Record
onSaveClicked : function(component) {
component.find("propertyService").saveRecord();
}

31. Synching Records in Edit Mode
<aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes"
access="global">
<aura:attribute name="recordId" type="Id" />
<aura:attribute name="property" type="Property__c" />
<force:recordPreview aura:id="propertyService"
recordId="{!v.recordId}"
targetRecord="{!v.property}"
fields="['Id', 'Status__c']"
mode="EDIT"
recordUpdated="{!c.onRecordUpdated}"/>
<ui:inputText label="Status:" value="{! v.property.Status__c}"/>
<lightning:button onclick="{!c.onSaveClicked}">Save</lightning:button>
</aura:component>

32. Reloading the Record
onRecordUpdated : function(component, event, helper) {
var changeType = event.getParams().changeType;
if (changeType === "CHANGED") {
component.find("propertyService").reloadRecord();
}
}

33. Summary
Without Lightning Data Service With Lightning Data Service
Code-centric (Apex, SOQL, FLS,
Javascript)
Declarative (no code)
Components make multiple calls to
the server for the same record
Components get record from local
record cache which manages server
access transparently and efficiently
Each component has its own copy of
the record
Components share a single copy of
the record

34. http://dreamhouseapp.io

35. Survey
Your feedback is crucial to the success
of our webinar programs. Thank you!
http://bit.ly/2fcaY5s
A copy of the webinar and the survey will
be emailed to all who registered.

36. Q & A
Also try our discussion boards
http://bit.ly/discussionboards
Try Trailhead: trailhead.salesforce.com
Join the conversation: @salesforcedevs

37. Thank You