Lightning ComponentsIntroduction, Benefits & Architecture

Durgesh Dhoot

ddurgesh28@gmail.com@ddurgesh28

Durgesh DhootTechnical Consultant @ Appirio6x Certified Salesforce Developer

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.

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

Everything revolves around Components All leading platform companies are investing in component frameworks

GooglePolymer

FacebookReact

Salesforce

Lightning

TwitterFlight

MozillaBrick

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 UIo Rendered as HTML DOM elements in browsers

● Exposes their Definitionso Attributes passing

● Has a Encapsulated Implementationo Component Bundleo HTML,CSS & Javascript

● Communicate with Events● Based on Open source Aura Framework

Car Tire

Braking Pads

Mirror

Ltng App Ltng Components

Analogy

Analogy (Code)

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.

Benefits

10

1.Quick, Easy & Independent Replacement2.Parallel development (Divide-and-

conquer)

Brake Pads can be built independently of tires, so you can divide the teams

easily

Benefits

11

1.Quick, Easy & Independent Replacement2.Parallel development (Divide-and-

conquer)3.Built for Specifications

Brand A

Brand B

But Consistent Interface & Specs

Benefits

12

1.Quick, Easy & Independent Replacement2.Parallel development (Divide-and-

conquer)3.Built for Specifications4.Customize it like never before

(Serious Customization)

Benefits

13

1.Quick, Easy & Independent Replacement2.Parallel development (Divide-and-

conquer)3.Built for Specifications4.Customize it like never before

(Serious Customization)5.So many Ready Made Choices

(Appexchange, Github...)

Benefits

14

1.Quick, Easy & Independent Replacement2.Parallel development (Divide-and-

conquer)3.Built for Specifications4.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

One Big Benefit of Lightning Component Is

<iframes/>

16

Aura

Lightning Components

Lightning Component & Aura

Built on top of Aura Salesforce-specific extensions

Open Source framework Vendor agnostic

17

…… Aura is the ArcFor SF Lightning Man

Bridges both the worlds

18

… partitioned multi-tier component

development

Client Side Server Side

AppCache Cache

Manifest Request

Design + Data

Component Request Life Cycle

16

Component Request Life Cycle

1Client Sends the request

17

Component Request Life Cycle

Parse Request, Load Registries,

Locate Component Definition

2Build / Retrieve

Component Definition

3 4Create New Instance

From Definition

5Serialize and Send

21

Component Request Life Cycle

5Receive the Response

6Deserialize Traverse Response

Tree

7 8Render App

19

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

Artifacts of Lightning ComponentResource 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.jsClient-side controller methods to handle events in the component.

Design sample.designRequired for components used in the Lightning App Builder or Lightning Pages.

Helper sampleHelper.jsJavaScript functions that can be called from any JavaScript code in a component’s bundle.

Documentation sample.auradocA description, sample code, and one or multiple references to example components.

Renderer sampleRenderer.jsClient-side renderer to override default rendering for a component.

SVG sample.svgCustom icon resource for components used in the Lightning App Builder.

21

25

Where do they run ?

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

Where do they run?

Tools For Development

Tools For Development1.Salesforce Developer Console2.3rd Party IDEs: Mavensmate, The Welkin Suite IDE, BrainEngine3.Chrome Extension: Salesforce Lightning Inspector

29

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

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.

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

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

thank y u