Lightning Component Framework from 0 to App

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

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.

Diego Szuster Marcal
Linkedin: diszma
dszustermarcal@suitsupply.com
Developer, Suitsupply

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

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

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

Lightning Components
Visualforce vs. Lightning

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)

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!)

UI Markup
Data binding
Attributes
Component
Lightning Component Bundles

UI Markup
Data binding
Attributes
Component
Event
Handlers
Controller
UI Markup
Data binding
Attributes

UI Markup
Data binding
Attributes
Component
Event
Handlers
Controller
UI Markup
Attributes
Style
Encapsulated
CSS

UI Markup
Data binding
Attributes
Component
Event
Handlers
Controller
Shared
Logic
HelperStyle
Encapsulated
CSS

Demo
Lightning Components in Action

Application Event Broker
Event Object
Product
<aura:registerEvent name="productClicked"
type="c:productClicked"/>
<aura:handler event="c:productClicked"
action="{c.handleAppEvent}"/>
ProductList

The Box Office

<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"/>

<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}"/>

<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>

<c:boxPreparation oppId="0069E000002Hfwx"/>

<aura:component>

<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>

<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>

Demo
Lightning Components Composition

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

Lightning Component Framework from 0 to App

Recommended

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to Lightning Component Framework from 0 to App (20)

Recently uploaded (20)

Lightning Component Framework from 0 to App