Chapter 4: LWC Tutorial – Getters and Setters
We already discussed the utility of getters, how if we want to display the result of expression we can use getters as HTML doesn’t know to allow to compute an expression on the go. Setters are used if I want to execute a custom logic every time a value of…
Chapter 4: LWC Tutorial – Attributes and Properties
These are very interchangeable terms and confusing, usually, when we talk about attributes it’s in the HTML context and properties are in the JavaScript context. JavaScript is case sensitive while HTML is not and that is why we use the kebab case when binding any javascript property in HTML. For…
Chapter 4: LWC Tutorial – Component Composition
An event is a signal that some action has taken place. There are many types of events like keyboard events, mouse events, etc. For sake of understanding, we are dividing events into two broad types. Browser Events: Any change that happens on the browser, for example, typing with your keyboard…
Chapter 3: LWC Tutorial – Directives
If:true={property} -> This directive simply adds or removes content from DOM depending on if property evaluates to true or false ie it displays content conditionally. Similarly, we have another directive if:false={property} For:each or Iterator -> These are special directives that are used when we want to show a list of…
Chapter 3: LWC Tutorial – Templates
Let’s revise a little, as we learned in vanilla JS we have to follow the below steps to create a web component. We first create the custom element. We attach shadow DOM to it We clone the template and do all the modifications we want Then we append the template…
Chapter 2: LWC Tutorial – Basics and Component Structure
We can create LWC component via VS code ( Press cmd + shift + P ) or (ctrl + shift + P) and you will see the option as below: After selecting the option, enter the component name and save. We can create LWC for multiple purposes for example …
Chapter 1: LWC Tutorial – Locker Console
We can use the locker console to check our JavaScript code’s compatibility with Lightning Locker, and compare how it runs with Lightning Locker enabled and disabled. E. Setting up Dev environment We cant use the developer console to create the LWC components. We use Salesforce CLI, the VS Code editor…
Chapter 1: LWC Tutorial – Lightning Locker and Lightning Locker Tools
On top of standard restrictions applied via native web APIs, lightning lockers implement a few more restrictions for security purposes. What are lightning locker features? By default, a strict mode of JavaScript is enabled Components can only access elements that are part of it’s DOM Lightning locker restricts the use…
Chapter 1: LWC Tutorial – LWC OSS
LWC OSS is an open-source LWC that would allow developers to use the LWC framework to build applications outside of the Salesforce system as well. LWC framework which we use inside the Salesforce system is considered as managed LWC. Why was it required? Earlier developers were using the different frameworks…
Chapter 1: LWC Tutorial – Basics
We can create lightning components using two programming models: 1. Aura 2. LWC LWC uses Web components standards and provides what over and above is required to perform well on browsers. With time, web standards have evolved a lot and browser vendors have implemented them in…
