Introduction to lightning lifecycle

INTRODUCTION
TO
LIGHTNING LIFECYCLE
Smriti Sharan
Mohit Sharma

TOPICS TO BE COVERED
Section 3
 Lightning Experience or LEX
 Lightning Component Framework
 Base and experienced components
 Lightning Design System
 Lightning App Builder
 Lightning Application
Section 4
 Interfaces in lightning
 Component Bundle
 Action.SetCallback
 Demo 1
 Demo 2
Section 5
 Events in
Lightning
 Demo 3
Section 1
What is Lightning?
Lightning tools
How to enable Salesforce
lightning?
Section 2
 Classic Vs Lightning

SECTION 1
WHAT IS LIGHTNING?
LIGHTNING TOOLS
HOW TO ENABLE SALESFORCE
LIGHTNING?

WHAT IS LIGHTNING ?
LIGHTNING IS SINGLE PAGE APPLICATION
FRAMEWORK FOR BUILDING SINGLE PAGE
RESPONSIVE APPLICATIONS

LIGHTING TOOLS: WHAT MAKES
LIGHTNING SO SPECIAL?

WHAT MAKES LIGHTNING SO
SPECIAL?
• BUILD ON OPEN SOURCE TECHNOLOGIES AND
INDUSTRY STANDARDS
• USE JAVASCRIPT ON CLIENT SIDE AND APEX ON
BACKEND

EVOLUTION OF SALESFORCE
LIGHTNING
2006
JavaScript
with
S-controls
2008-
Apex and
Visualforce
2011-
Jquery and
Visualforce
2012-
Javascript
Remoting
2014-
Salesforce1
Mobile
2016-
Salesforce
Lightning

HOW TO ENABLE SALESFORCE
LIGHTNING?
• FREE DEVELOPER EDITION
• SWITCH BETWEEN CLASSIC AND LIGHTNING

MY DOMAIN
• MY DOMAIN IS REQUIRE TO CREATE LIGHTNING COMPONENTS
• USING MY DOMAIN, SALESFORCE LETS YOU DEFINE A SUBDOMAIN WITHIN THEIR
SALESFORCE ORG.
• THE SUBDOMAIN NAME APPEARS IN ALL ORG URLS AND REPLACES THE INSTANCE
NAME Instance name
Custom Subdomain

CLASSIC VS LIGHTNING
Classic Lightning
Does not have two-way binding Has two-way binding
Multipage Application Single Page Application (SPA)
MVC architecture MVCC architecture
Stateless client, Stateful Server Stateful client, Stateless server
View State No View State

MULTIPLE PAGE APPLICATION
• RELOADS THE ENTIRE PAGE AND DISPLAYS THE NEW
ONE WHEN A USER INTERACTS WITH THE WEB APP
• AJAX ALLOWS TO REFRESH ONLY PARTICULAR PARTS
OF THE APPLICATION BUT IT IS MORE COMPLICATED
THAN CREATING SINGLE PAGE APPLICATION

MULTIPLE PAGE APPLICATION
DIAGRAM

EXAMPLE OF MULTI PAGE
APPLICATION

SINGLE PAGE APPLICATION
• LOADS EVERYTHING ON THE PAGE LOAD
• NEVER NEEDS TO RELOAD THE PAGE
• EXECUTES LOGIC IN THE WEB BROWSER ITSELF RATHER
THAN ON THE SERVER
• DEPENDS HEAVILY ON JAVASCRIPT, CSS,HTML5
• SERVER ACTS AS THE DATABASE FOR STORING THE DATA

SINGLE PAGE APPLICATION
DIAGRAM

EXAMPLE OF SINGLE PAGE
APPLICATION

EXAMPLES OF SINGLE PAGE
APPLICATION
GMAIL, GOOGLE MAPS, FACEBOOK OR GITHUB

STORY TIME: RESTAURANT ANALOGY
TO UNDERSTAND MVC
VIEW CONTROLLER MODEL
CUSTOMER WAITER CHEF

CLASSIC VS LIGHTNING :MVC VS
MVCC ARCHITECTURE

STORY TIME: RESTAURANT ANALOGY TO
UNDERSTAND MVCC
VIEW CLIENT SIDE
CONTROLLER
MODELSERVER SIDE
CONTROLLER
CUSTOMER
TAKING ORDER
WAITER SERVICE WAITER CHEF

MVCC : MODEL VIEW
CONTROLLER CONTROLLER

CLASSIC: STATELESS CLIENT AND STATEFUL
SERVER
• CLASSIC PAGES ARE COMBINED ON SERVER
• EVERY INTERACTION RESULTS IN SERVER CALL
LIGHTNING: STATEFUL CLIENT AND STATELESS
SERVER
• PIECES OF PAGES ARE ASSEMBLED THEMSELVES AS
INDIVIDUAL BUILDING BLOCKS
• THE PROCESSING IS BEING DONE AT THE BROWSER
LEVEL
• LESS LOAD ON SERVER MAKES USER EXPERIENCE

SECTION 3
• LIGHTNING EXPERIENCE OR LEX
• LIGHTNING COMPONENT FRAMEWORK
• BASE AND EXPERIENCED COMPONENTS
• LIGHTNING APPLICATION

LIGHTING EXPERIENCE =
LIGHTNING COMPONENT FRAMEWORK + SLDS

LIGHTNING EXPERIENCE: MADE OF
LIGHTNING PAGES
Home Page Opportunity Page

THREE TYPES OF LIGHTNING PAGES (AKA
FLEXIPAGES)
Flexipage:availableforrecord
page
Flexipage:availablefordeskt
op
Flexipage:availableforallpag
etype

LIGHTNING PAGES ARE MADE OF
EXPERIENCED COMPONENTS

EXPERIENCED AND BASE COMPONENTS

LIGHTNING APPLICATION AND EXPERIENCED
COMPONENTS

BASE AND EXPERIENCE COMPONENTS
BASE COMPONENTS:
INDIVIDUAL COMPONENTS, DON’T HAVE LOT OF FUNCTIONALITY
• CUSTOM SVG
• EMBEDDED IMAGES
• LIGHTNING MAP
• CHARTING
EXPERIENCED COMPONENTS:
ADD LOGIC THEN THEY BECOME EXPERIENCED COMPONENTS

COMPOSITION TO BUILD COMPONENTS

LIGHTNING COMPONENT FRAMEWORK
TOOLS THAT ALLOW DEVELOPERS TO BUILD
• REUSABLE COMPONENTS
• BUILD STANDALONE APPS
• EVENT DRIVEN APPROACH
IT USES JAVASCRIPT ON THE CLIENT SIDE AND APEX ON THE
SERVER SIDE.

LIGHTNING COMPONENT
• REUSABLE SECTION OF UI
• GLUE TOGETHER LIKE NUT AND BOLTS
• CLUBBED TOGETHER TO CREATE APPLICATIONS USING
LIGHTNING APP BUILDER
• ADDED TO SALESFORCE COMMUNITIES
• CAN BE EMBEDDED WITH VISUALFORCE PAGES
• EVENT DRIVEN APPROACH
• PUBLISH IT ON APPEXCHANGE

LIGHTNING COMPONENTS ARE
REUSABLE

COMPONENT LIBRARY TO FIND ABOUT
COMPONENTS

LAYOUT COMPONENTS : USED FOR
PRESENTATION

VISUAL COMPONENTS: IMAGE AND
ICONS

DATA INPUT AND BUTTON
COMPONENTS

POPULAR BASE COMPONENT
EXAMPLE

APP BUILDER TO DRAG AND DROP
COMPONENTS
Standard and
custom
Components
Toolbar
Component
Properties
Component
Canvas

DEVELOPMENT TOOLS
• DEV CONSOLE
• SUBLIME
• VISUAL STUDIO CODE PLUGIN

Section 4
Interface in Lightning
Demo 1: Hello Lightning
Action.setCallback
Demo 2: Fetching Account List

INTERFACES IN LIGHTNING
• LIGHTNING:ACTIONOVERRIDE : COMPONENTS THAT IMPLEMENT THIS
INTERFACE DON’T AUTOMATICALLY OVERRIDE ANY ACTION. YOU NEED TO
MANUALLY OVERRIDE RELEVANT ACTIONS IN SETUP.
• LIGHTNING:APPHOMETEMPLATE : TO ENABLE YOUR COMPONENT TO BE USED
AS A CUSTOM LIGHTNING PAGE TEMPLATE FOR PAGES OF TYPE APP PAGE. THIS
INTERFACE HAS NO EFFECT EXCEPT WHEN USED WITHIN LIGHTNING
EXPERIENCE AND THE SALESFORCE APP.
• FORCE:APPHOSTBLE : TO ENABLE YOUR COMPONENT TO BE USED AS A
CUSTOM TAB IN LIGHTNING EXPERIENCE OR THE SALESFORCE MOBILE APP.
COMPONENTS THAT IMPLEMENT THIS INTERFACE CAN BE USED TO CREATE
TABS IN BOTH LIGHTNING EXPERIENCE AND THE SALESFORCE MOBILE APP.

INTERFACES IN LIGHTING
• FORCE:HASRECORDID :ENABLE THE COMPONENT TO BE ASSIGNED THE
ID OF THE CURRENT RECORD.THE CURRENT RECORD ID IS USEFUL IF THE
COMPONENT IS USED ON A LIGHTNING RECORD PAGE, AS AN OBJECT-
SPECIFIC CUSTOM ACTION OR ACTION OVERRIDE.
• FORCE:LIGHTNINGQUICKACTION :ADD
THE FORCE:LIGHTNINGQUICKACTION INTERFACE TO A LIGHTNING
COMPONENT TO ALLOW IT TO BE USED AS A CUSTOM ACTION IN
LIGHTNING EXPERIENCE OR THE SALESFORCE MOBILE APP.
• FORCECOMMUNITY:AVAILABLEFORALLPAGETYPE : TO APPEAR IN
COMMUNITY BUILDER, A COMPONENT MUST
IMPLEMENT THIS INTERFACE.
• FORCE:LIGHTNINGQUICKACTIONWITHOUTHEADER: ADD
THIS INTERFACE TO A LIGHTNING COMPONENT TO ALLOW IT TO BE
USED AS A CUSTOM ACTION IN LIGHTNING EXPERIENCE OR THE
SALESFORCE MOBILE APP.

COMPONENT BUNDLE
COMPONENT- CONTAINS THE MARKUP
CONTROLLER- HANDLE EVENTS ON COMPONENT
HELPER-FUNCTIONS MAY ME CALLED FROM OTHER
JS
STYLE- GREAT EXPERIENCE TO END USER
DOCUMENTATION- HOLDS ALL THE DOCUMENTATION
DETAILS FOR YOUR COMPONENT
RENDER- IT ALLOWS TO OVERRIDE COMPONENT
LIFECYCLE. USE WITH CAUTION
DESIGN- FILE CONTAINS INFORMATION AROUND
HOW TO APPLY YOUR COMPONENT
SVG- CUSTOM ICON

ATTRIBUTES
• AURA:ATTRIBUTE DESCRIBES AN ATTRIBUTE AVAILABLE ON AN
APP, INTERFACE, COMPONENT, OR EVENT.
• IT IS A PLACE TO STORE THE VALUE
• DEFINE ATTRIBUTE USING <AURA:ATTRIBUTE>
• EXAMPLE: <AURA:ATTRIBUTE NAME=“SFDCAMPLFIED"
TYPE="STRING" />

EXPRESSION
• EXPRESSIONS ALLOW YOU TO MAKE CALCULATIONS AND ACCESS
PROPERTY VALUES AND OTHER DATA WITHIN COMPONENT MARKUP.
• USE EXPRESSIONS FOR DYNAMIC OUTPUT OR PASSING VALUES INTO
COMPONENTS BY ASSIGNING THEM TO ATTRIBUTES.
• THE EXPRESSION SYNTAX IS: {!EXPRESSION}
• EXAMPLE : {!V.FIRSTNAME} – WHEREVER WE USE THIS EXPRESSION THEN
WE ARE
• IN THIS EXPRESSION, V REPRESENTS THE VIEW, WHICH IS THE SET OF
COMPONENT ATTRIBUTES, FIRSTNAME IS AN ATTRIBUTE OF THE
COMPONENT.

CLIENT SIDE LOGIC- CLIENT SIDE
CONTROLLER
Component
JS Controller

EXECUTION OF
ACTION.SETCALLBACK
1.THE SETUP OF A VARIABLE “ACTION”
2.THE CALLBACK IS A FUNCTION ITSELF – ALL OF WHICH IS NOT
EXECUTED AS IT IS READ, BUT RATHER STORED AS AN
ATTRIBUTE OF THE ACTION PARAMETER.
3.CONTENT ARE FILLED WITHIN ACTION.
4. THEN PASSES OUR ACTION OBJECT INTO THE
$A.ENQUEUEACTION METHOD

SECTION 5
• EVENTS IN LIGHTNING
• DEMO 3

Introduction to lightning lifecycle

EVENTS
• EVENT ACTS AS A CHANNEL TO COMMUNICATE BETWEEN COMPONENTS.
EVENTS ARE USUALLY TRIGGERED BY USER EXPERIENCE.
• EVENT CAN CONTAIN ATTRIBUTES THAT CAN BE SET BEFORE THE EVENT
IS FIRED AND READ WHEN EVENT IS HANDLED.
• COMPONENT WHICH REGISTER THROUGH EVENT CAN SEND
INFORMATION THROUGH CONTROLLER.
• COMPONENT SPECIFYING HANDLER FOR EVENT CAN READ
INFORMATION PASSED BY OTHER EVENT.

Types of Lightning Events
• System Events
• Browser Events
• Application Events
• Component Events
• Navigation Events

DEMO 3: FILTER IN ACCOUNT LIST

LINKS
• MEETUP LINK - HTTPS://SFAMPLIFIED-DEVELOPER-
EDITION.AP15.FORCE.COM/S/MEETUP
• GITHUB LINK - HTTPS://GITHUB.COM/SSHARAN199/SFDCAMPLIFIEDDEMO
• SFDCAMPLIFIED LINK -HTTPS://WWW.SFDCAMPLIFIED.COM/

NOW HOW TO LEARN
• DON’T WORRY YOU ARE NOT ALONE
• ASK COMMUNITY – MEETUPS ,STACK EXCHANGE,
SUCCESS COMMUNITY
• TRAILHEAD
• SFDC AMPLIFIED

LIGHTNING
CANNOT BE TAKEN
LIGHTLY !

EVERYTHING
EASY IS ONCE
DIFFICULT

Introduction to lightning lifecycle

Recommended

More Related Content

What's hot (20)

Similar to Introduction to lightning lifecycle (20)

More from SmritiSharan1 (8)

Recently uploaded (20)

Introduction to lightning lifecycle