Introducing Lightning Component Architecture, Component Driven Development Approach and their benefits. Places where Lightning Components can run, Tools used for Lightning Component Development & Debugging

1. Lightning Components
Introduction, Benefits & Architecture
Durgesh Dhoot
ddurgesh28@gmail.com
@ddurgesh28

2. Durgesh Dhoot
Technical Consultant @ Appirio
6x Certified Salesforce Developer

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

4. Agenda
● What are Lightning Components
● Benefits of Component Driven Approach
● Lightning Components & Aura
● Architecture & Lifecycle
● Artifacts
● Where Do They Run ?
● Tools For Development
● Logging & Debugging

5. Everything revolves around Components
All leading platform companies are investing in component frameworks
Google
Polymer
Facebook
React
Salesforce
Lightning
Twitter
Flight
Mozilla
Brick

6. What are Lightning Components?
● Part of the Salesforce Lightning framework
● Are Self-contained and reusable functional units of an app
o Reusable section of the UI
o Rendered as HTML DOM elements in browsers
● Exposes their Definitions
o Attributes passing
● Has a Encapsulated Implementation
o Component Bundle
o HTML,CSS & Javascript
● Communicate with Events
● Based on Open source Aura Framework

7. Car Tire
Braking
Pads
Mirror
Ltng App Ltng Components
Analogy

8. Analogy (Code)

9. Benefits
9
1. Quick, Easy & Independent Replacement No need to wait
till next Service
Day
No need to
worry or
interfere your
engine or car
seat etc.

10. Benefits
10
1. Quick, Easy & Independent Replacement
2. Parallel development (Divide-and-conquer)
Brake Pads can be built
independently of tires, so you
can divide the teams easily

11. Benefits
11
1. Quick, Easy & Independent Replacement
2. Parallel development (Divide-and-conquer)
3. Built for Specifications
Brand A Brand B
But Consistent
Interface &
Specs

12. Benefits
12
1. Quick, Easy & Independent Replacement
2. Parallel development (Divide-and-conquer)
3. Built for Specifications
4. Customize it like never before
(Serious Customization)

13. Benefits
13
1. Quick, Easy & Independent Replacement
2. Parallel development (Divide-and-conquer)
3. Built for Specifications
4. Customize it like never before
(Serious Customization)
5. So many Ready Made Choices
(Appexchange, Github...)

14. Benefits
14
1. Quick, Easy & Independent Replacement
2. Parallel development (Divide-and-conquer)
3. Built for Specifications
4. Customize it like never before
(Serious Customization)
5. So many Ready Made Choices
(Appexchange, Github...)
6. Use same set of components but build different
things

15. One Big Benefit of Lightning Component Is
<iframes/>

16. 16
Aura
Lightning Components
Lightning Component & Aura
Built on top of Aura
Salesforce-specific extensions
Open Source framework
Vendor agnostic

17. 17
…… Aura is the ArcFor SF Lightning Man

18. Bridges both the worlds
18
… partitioned multi-tier
component development
Client Side Server Side
AppCache Cache
Manifest Request
Design + Data

19. Component Request Life Cycle
16

20. Component Request Life Cycle
1
Client Sends the request
17

21. Component Request Life Cycle
Parse Request,
Load Registries,
Locate Component Definition
2
Build / Retrieve
Component Definition
3 4
Create New Instance
From Definition
5
Serialize and Send
21

22. Component Request Life Cycle
5
Receive the Response
6
Deserialize Traverse Response Tree
7 8
Render App
19

23. Renderer : js
Definition : html
APP or COMPONENT BUNDLE
Helper : jsStyle : css
Cmp1 Cmp3
Cmp2 App1
App1 App2
Cmp2 Cmp2
Package 1 Package 2
Controller : js Documentation
Artifacts of Lightning Component
20

24. Artifacts of Lightning Component
Resource Resource Name Usage
Component or Application sample.cmp or sample.app
The only required resource in a bundle. Contains markup for the
component or app. Each bundle contains only one component or
app resource.
CSS Styles sample.css Styles for the component.
Controller sampleController.js
Client-side controller methods to handle events in the
component.
Design sample.design
Required for components used in the Lightning App Builder or
Lightning Pages.
Helper sampleHelper.js
JavaScript functions that can be called from any JavaScript code
in a component’s bundle.
Documentation sample.auradoc
A description, sample code, and one or multiple references to
example components.
Renderer sampleRenderer.js
Client-side renderer to override default rendering for a
component.
SVG sample.svg
Custom icon resource for components used in the Lightning App
Builder.
21

25. 25
Where do they run ?

26. First Thing First - Enable Lightning Component
Enable My Domain. After you successfully register it
you must then come back to the My Domain setup
and click to Deploy to Users. Also, make sure you are
logged in through the My Domain URL.
WHY ??? Security, your components run inside your
domain

27. Where do they run?

28. Tools For Development

29. Tools For Development
1. Salesforce Developer Console
2. 3rd Party IDEs: Mavensmate, The Welkin Suite IDE, BrainEngine
3. Chrome Extension: Salesforce Lightning Inspector
29

30. Salesforce Lightning Inspector
30
Building Lightning Components is now even easier!
● Easily inspect and navigate the structure of your components
● Identify performance bottlenecks by looking at a graph of component creation time
● Debug server interactions faster by monitoring and modifying responses
● Navigate the component tree, inspect components and their associated DOM elements
● Track event firing and handling sequences

31. Logging & Debugging
31
● Native JS Log functions, console.log();, debugger;
● Use Aura methods, $A.log(string[, error]);
● To log messages in PROD or PROD-DEBUG modes, write a
custom logging function, subscribe using
$A.logger.subscribe(String level, function
callback); and then call $A.log(string);
● Level: ASSERT, INFO, ERROR, WARNING
● Use the $A.warning(string); method to write a
warning message
● Server side exceptions can also be handled using
response.getErrors(); we will see this while Calling
Server Side Apex Code.

32. Learn More about Lightning Components
●Trailhead Module: Lightning Component
●Trailhead Project: Quick Start: Lightning Components
●Trailhead Project: Build an Account Geolocation App
●Lightning Components Developer's Guide

33. References
●Lightning Component Developer Guide
●Slideshare: Salesforce Developer Group
●Lightning Everywhere By Peter Knolle
●Lightning Components: Creating a Carousel Component

34. thank y u