The presentation introduces the Lightning Component Framework and demonstrates how to build applications using Lightning Components. It shows how components can be composed to build reusable UI elements with data binding and event handling capabilities. A demo of a sample "Box Office" application is presented to illustrate how different Lightning Components can be combined to build the application UI and share data between components using attributes. The framework provides a flexible and reusable way to develop dynamic web and mobile applications for Salesforce.

1. Lightning Component Framework from 0
to App
Stevano Cheung
Diego Szuster Marcal

2. Forward-Looking Statements
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. Diego Szuster Marcal
Linkedin: diszma
dszustermarcal@suitsupply.com
Developer, Suitsupply

4. Linkedin: stevano-cheung
scheung@suitsupply.com
Developer, Suitsupply
Stevano Cheung

6. Agenda
What is the Lightning Component Framework?
Lightning Components in Action (demo)
Lightning Components @ Suitsupply (demo)
Review
1
2
3
4

7. Lightning Component Framework
Built on the open source Aura framework
Used to develop dynamic mobile and
web applications
Event-driven architecture
Extendable and Reusable

8. Lightning Components
Visualforce vs. Lightning

9. Visualforce "Page-Centric Model"
1. Browser requests page
Client Server
4. Browser renders html
2. Server executes Apex code
3. Server returns page (html + data)

10. Lightning "App-Centric Model"
1. Browser requests Component
Client Server
3. Browser builds UI with JavaScript
4. Browser requests data
7. Back to 3
2. Server returns Component Bundle
5. Server executes Apex
6. Server returns data (data only!)

11. UI Markup
Data binding
Attributes
Component
Lightning Component Bundles
Lightning Component Framework from 0 to App

12. UI Markup
Data binding
Attributes
Component
Event
Handlers
Controller
UI Markup
Data binding
Attributes
Lightning Component Bundles
Lightning Component Framework from 0 to App

13. UI Markup
Data binding
Attributes
Component
Event
Handlers
Controller
UI Markup
Attributes
Style
Encapsulated
CSS
Lightning Component Bundles
Lightning Component Framework from 0 to App

14. UI Markup
Data binding
Attributes
Component
Event
Handlers
Controller
Shared
Logic
HelperStyle
Encapsulated
CSS
Lightning Component Framework from 0 to App
Lightning Component Bundles

15. Demo
Lightning Components in Action

16. Lightning Component Framework from 0 to App
Application Event Broker
Event Object
Product
<aura:registerEvent name="productClicked"
type="c:productClicked"/>
<aura:handler event="c:productClicked"
action="{c.handleAppEvent}"/>
ProductList

17. The Box Office
Lightning Component Framework from 0 to App

18. The Box Office
Lightning Component Framework from 0 to App

19. Lightning Component Framework from 0 to App
<!-- component -->
<aura:attribute name=”suitSize" type="String"/>
<aura:attribute name=”baseColors" type="List"/>
<aura:attribute name="amount" type="Integer"/>
/* controller */
component.set('v.oppId', response.oppId);
component.set('v.baseColors', response.baseColors);
component.set('v.amount', response.amount);
<c:boxPreparation oppId="0069E000002Hfwx"/>

20. Lightning Component Framework from 0 to App
<c:breadcrumb values="{!v.bcOptions}"/>
<c:title value="Box Preparation"
fontSize="22px">
<c:picklist values="['24 / 38S', ’25 / 39', …]"
label="Suit size"
isMulti="false"
selected="{!v.suitSize}"/>

21. Lightning Component Framework from 0 to App
<c:expandable title="Sizes”>
<c:customerSizes suitSize="{!v.suitSize}"
coatSize="{!v.coatSize}”
.../>
</c:expandable>
<c:footer qty="{!v.qty}"
total="{!v.amount}"/>
<c:expandable title=”Styles”>
<c:customerStyles styles="{!v.styles}"
fit="{!v.fit}"/>
</c:expandable>

22. Lightning Component Framework from 0 to App
<c:boxPreparation oppId="0069E000002Hfwx"/>

23. Lightning Component Framework from 0 to App
<!-- boxPreparation.cmp -->
<aura:component>
<!-- attributes -->
<aura:attribute name="suitSize" type="String"/>
<aura:attribute name="baseColors" type="List"/>
<aura:attribute name="amount" type="Integer"/>
<c:footer qty="{!v.qty}…"/>
</aura:component>
<!-- components -->
<c:breadcrumb values=”{!v.bcOptions}"/>
<c:title value="Box Preparation"…/>
<c:expandable title="Sizes">
<c:customerSizes suitSize="{!v.suitSize}"…/>
</c:expandable>
<c:expandable title="Styles">
<c:customerStyles fit="{!v.fit}"…/>
</c:expandable>

24. Demo
Lightning Components Composition

25. Summary
Lightning Components are flexible and reusable
You can use Lightning Design System and your own styles
You can compose apps in many different ways
It’s a lot of fun !!
1
2
3
4

26. THANK YOU