Get Struck By Lightning

Jaipur Dev Fest www.jaipurdevfest.com @jaipurdevfest
Get Struck by
Lightning
Mustafa Jhabuawala
Sr. Salesforce Developer
Mustafa.jhabuawala@zen4orce.com
@MustafaJhabua
#JDF17

#JDF17 | 3
Getting
Started…
▪ Prerequisites
▪ How to start with Lightning
▪ Framework Basics
▪ Lightning Components
▪ Lightning Events
▪ Lightning Locker Service

Javascript
Basic knowledge of javascript
and its working.
Prerequisites
DOM
Understanding on DOM creation
and manipulation.
#JDF17 | 4
HTML & CSS
Basic understanding on HTML &
CSS.
Salesforce Ecosystem
Apex Development.

How to start with
lightning ?.....
▪ Lightning Components
▪ Lightning Events
▪ Lightning App Builder
▪ Lightning Connect
▪ Lightning Out
▪ Lightning Extension
▪ Lightning Dataservice
▪ Base Lightning Components
▪ Aura Framework
▪ Javascript
▪ SLDS
#JDF17 | 5

Difference
between
Visualforce
&
Lightning?
#JDF17 | 6

Visualforce
▪ Page-Centric model
▪ More server side
▪ Built for Web
▪ Native visualforce page tags
▪ Monolithic
▪ Building SPA can be tedious
Visualforce &
Lightning
Lightning
▪ App- Centric model
▪ More Client Side
▪ Built for Mobile
▪ HTML & CSS
▪ Component driven
▪ Building SPA can be fun
#JDF17 | 7

Why
Lightning ?
Lightning ?
▪ Business ready components
▪ Ready to use in S1,Lightning Experience & Communities
▪ Faster performance
▪ Increase in application efficiency
▪ Rich component ecosystem
▪ Event-driven architecture
▪ Device-aware and cross browser compatibility
#JDF17 | 8

What is
Lightning ?is
Lightning ?
▪ Combination of :
▫ JavaScript framework
▫ CSS framework
▫ Series of UI components
▪ Used for developing dynamic web apps for :
▫ Mobile
▫ Desktop devices
#JDF17 | 9

Tools▪ Developer Console
▪ MavensMate + Sublime
▪ Welkins Suite
▪ Force.com IDE
#JDF17 | 10

Framework’s
#JDF17 | 11

Aura Framework
#JDF17 | 12

XML Component
Definition
Lightning
Component Bundle
XML
#JDF17 | 13

XML Component
Definition
Lightning
Component Bundle
XML
#JDF17 | 14
JS
JS Controller, Helper,
Renderer, etc..

XML Component
Definition
Lightning
Component Bundle
XML
#JDF17 | 15
JS CSS
Renderer, etc..
Styling

XML Component
Definition
Lightning
Component Bundle
XML
#JDF17 | 16
JS CSS Apex
Renderer, etc..
Styling Apex Controller

Component Based
Development
#JDF17 | 18
Application

Component Based
Development
#JDF17 | 19
Component
Thor
Application

Component Based
Development
#JDF17 | 20
Component
Thor
Application
Component
Iron Man

Component Based
Development
#JDF17 | 21
Component
Thor
Application
Component
Iron Man
Component
Batman

Component Based
Development
#JDF17 | 22
Component
Thor
Application
Component
Iron Man
Component
Hulk
Component
Batman

Component Based
Development
#JDF17 | 23
Component
Thor
Application
Component
Iron Man
Component
Hulk
Component
Batman
A B

Component Based
Development
#JDF17 | 24
Component
Thor
Application
Component
Iron Man
Component
Hulk
Component
Batman
A B C D
E

Event Driven
Programming
#JDF17 | 25
Application

Event Driven
Programming
#JDF17 | 26
Component
Thor
Application
Component
Iron Man
A
B

Event Driven
Programming
#JDF17 | 27
Component
Thor
Application
Component
Iron Man
A
B

Event Driven
Programming
#JDF17 | 28
Component
Thor
Application
Component
Iron Man
A
B

Event Driven
Programming
#JDF17 | 29
Component
Thor
Application
Component
Iron Man
A
B

Event Driven
Programming
#JDF17 | 30
Component
Thor
Application
Component
Iron Man
A
B

Event Driven
Programming
#JDF17 | 31
Component
Thor
Application
Component
Iron Man
A
B

Event Driven
Programming
#JDF17 | 32
Component
Thor
Application
Component
Iron Man
A
B

Event Driven
Programming
#JDF17 | 33
Component
Thor
Application
Component
Iron Man
A
B

Event Driven
Programming
#JDF17 | 34
Component
Thor
Application
Component
Iron Man
A
B

Event Driven
Programming
#JDF17 | 35
Component
Thor
Application
Component
Iron Man
A
B

▪ Self-contained + Reusable units.
▪ Rich-set of prebuilt components.
▪ Rendered to produce HTML DOM elements.
▪ Can contain other
▫Components
▫HTML
▫CSS
▫JavaScript
▫Any other Web-enabled code.
▪ Enables you to build apps with sophisticated UIs.
#JDF17 | 37
Lightning
Components

Lightning
Components
#JDF17 | 38

Using
Developer
Console
#JDF17 | 39

Component
Bundle
#JDF17 | 40

Component
Markup
#JDF17 | 41

Component
IDs
▪ A component has two types of IDs:
▫ Local ID
▫Global ID
#JDF17 | 42

CSS in
Component
#JDF17 | 43

Component
Attributes
▪ Similar to member variables in Apex Class
▪ Make components more dynamic
▪ Attributes have:
▫ Name
▫ Type
▫ Required
▫ Default
#JDF17 | 44

Data Binding
Between Components
▪ Passing attribute from parent to child component results in
data binding also known as value binding
▪ Expression types –
▫ Bound Expressions
▫ Unbound Expressions
#JDF17 | 45

Bound
Expression
▪ Syntax – {!v.data}
▪Data updates in either component are reflected through bidirectional data binding
in both components.
#JDF17 | 46

Unbound
Expression
▪ Syntax – {#v.data}
▪ Data updates in a component is NOT reflected in other component
#JDF17 | 47

Lightning
Events
▪ There are two types of events :
▫ Component events
▫ Application events
#JDF17 | 48

Component
Events
▪ Fired from an instance of a component
▪ Handled
▫ Component that fired the event
▫ Component in the containment hierarchy that receives the event.
#JDF17 | 49

Component
Events
#JDF17 | 50
Component
Thor
Application

Component
Events
#JDF17 | 51
Component
Thor
Application

Component
Events
#JDF17 | 52
Component
Thor
Application

Component
Events
#JDF17 | 53
Component
Thor
Application
Component
Iron Man
A
B

Component
Events
#JDF17 | 54
Component
Thor
Application
Component
Iron Man
A
B

Component
Events
#JDF17 | 55
Component
Thor
Application
Component
Iron Man
A
B

Component
Events
#JDF17 | 56
Component
Thor
Application
Component
Iron Man
A
B

Application
Events
▪ Fired from an instance of a component
▪ Components that provide a handler for the event are
notified
#JDF17 | 57

Application
Events
#JDF17 | 58
Component
Thor
Application
Component
Iron Man
A
B

Application
Events
#JDF17 | 59
Component
Thor
Application
Component
Iron Man
A
B

Application
Events
#JDF17 | 60
Component
Thor
Application
Component
Iron Man
A
B

Application
Events
#JDF17 | 61
Component
Thor
Application
Component
Iron Man
A
B

Application
Events
#JDF17 | 62
Component
Thor
Application
Component
Iron Man
A
B

Application
Events
#JDF17 | 63
Component
Thor
Application
Component
Iron Man
A
B

Lightning
Locker Service
#JDF17 |
64

Locker
Service
▪ Enforces security into SPA built using lightning components
▪ It prevents from
▫ Causing XSS and similar security issues
▫ Reading other component’s rendered data
▫ From calling undocumented/private APIs
▪ Resulting In -
▫ Faster security review
▫ Better and more secure JS development practices
▫ And many more….
#JDF17 | 65

www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com #JDF17 | 66
Any Questions ?

Resources
#JDF17 | 67
▪ Trailhead
▪ Lightning Developer Guide
▪ And our awesome community members

Jaipur Dev Fest www.jaipurdevfest.com @jaipurdevfest
Thanks!!
You can find me at @MustafaJhabua &
mustafa.jhabuawala@zen4orce.com
#JDF17

Credits
Special thanks to :
▪ Jina Chetia
▪ Jaipur Dev Fest (Gaurav Kheterpal, Abhinv Gupta & team)
#JDF17 |

Get Struck By Lightning

Recommended

Recommended

More Related Content

Similar to Get Struck By Lightning

Similar to Get Struck By Lightning (20)

Recently uploaded

Recently uploaded (20)

Get Struck By Lightning