Lightning Locker Explained with example – Lightning Locker Services Part 2

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

https://gist.github.com/3f2a9e61c0912964afd699c604a6db2f

CustomComponent1Controller.js

https://gist.github.com/4ac0b660928c808472f9080ce411e6de

CustomComponent1.css

https://gist.github.com/e321ed33738cf599b2a471121a098374

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

https://gist.github.com/7668caf4e7726fdc1f0d93a74d089c83

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

https://gist.github.com/3140ab63023723f3dee2487645b9338e

CheckBalanceController.js

https://gist.github.com/96f0e3972eb046b1d4046fa10595d5e7

 

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.

 

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Salesforce.com Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

This Post Has 4 Comments

  1. Avatar

    The explanation you have done on this post and on the Video is awesome. It clears small doubts as well by seeing the post and the vedio.

  2. Avatar

    Very nice explanation Manish. Your knowledge sharing idea is just awesome. 🙂 Keep posting lightning and Salesforce related articles.

Leave a Reply

Close Menu