Lightning Locker Explained with example – Lightning Locker Services Part 2

In my previous blog post, I have covered “Why there is a need of Lightning Locker?”. In this post, I will try to explain the advantages and disadvantages of Lightning Locker service with an example.

Also read, Why there is a need for Lightning Locker? – Lightning Locker Services Part 1

Advantages of Lightning Locker Services:

  • A component cannot traverse the DOM of another component if another component belongs to a different namespace. Example, we cannot read the DOM of lightning base components as they belong to “lightning” namespace.
  • Custom components do not have access to system APIs. Example, the custom component cannot access $A.eventService API.
  • The javascript strict mode is enabled by default and need not be specified specifically.
  • You cannot have access to external JS libraries without uploading those in the static resource.
  • Salesforce authored or Out of the box components will still have unrestricted access to DOM and APIs as these components will run in System Mode.
  • All above-listed features make your component more secure.

Disadvantages of Lightning Locker Services:

  • JS libraries which are non-locker service compliant will not work.
  • DOM manipulation has become more restrictive.

 

Demo:

For the demo of the lightning locker, I am using below component hierarchy:

  • c:CustomComponent1 (namespace = c)
    • c:CustomComponent2 (namespace = c)
    • ui:outputText (namespace = ui)
    • SFFscts:CheckBalance (namespace = SFFscts)

In the previous post, we have already discussed the DOM generated from the above components when Lightning Locker is NOT enabled. Now, let’s see how the would look like when Lightning Locker is ENABLED.

  • SYSTEM Mode DOM – Only Salesforce Authored component runs in system mode

  • USER Mode DOM – All custom component runs in user mode

 

How to disable lightning locker?

You can disable lightning locker by changing the api version of lightning component bundle to 39 or below.

How to enable lightning locker?

Lightning locker is automatically enabled for component bundles having api version 40 or above.

c:CustomComponent1.cmp – Parent Component in ‘c’ namespace



CustomComponent1Controller.js



CustomComponent1.css



c:CustomComponent2.cmp – Child Component in ‘c’ namespace



SFFscts:CheckBalance.cmp – Child Component in ‘SFFscts’ namespace



CheckBalanceController.js



 

If you will run above code, you will notice:

  • If Lightning Locker is disabled, you will have unrestricted access to system APIs and DOM of all other custom components regardless of their namespace.
  • If Lightning Locker is enabled, you will not have access to System APIs and DOM of different namespace component.

Complete code explanation can be found on my Episode 5 of Advance Lightning Series on youtube.

I have tried to explain the Lightning Locker service concept in these 2 posts (check previous post). Please do share your feedback and queries in comments.

 

(Visited 1055 Times)

Leave a Reply

Your email address will not be published. Required fields are marked *