lightning web components
Amit Chaudhary

Amit Chaudhary

Amit Chaudhary is Salesforce Application & System Architect and working on Salesforce Platform since 2010. He is Salesforce MVP since 2017 and have 17 Salesforce Certificates. He is a active blogger and founder of Apex Hours.

Lightning Web Components

Welcome in Lightning Web component world. let’s understand why Lightning Web components introduced by Salesforce and How to create first LWC component in sandbox or developer org (Non-scratch org). In addition we will talk about LWC best practices.

Why Lightning Web Component

  • 5 years back, in 2014, Lightning Components Launched
  • At that time Web Standards had limited functionality and various framework came to fulfil the gaps like ReactJs for virtual DOM, commonJS etc
  • Aura framework was part of that initiative where they pushed web standards to build enterprise applications
  • Aura framework, Angular, React these all framework became languages
  • Web component
    • Web standard has rich set of functionalities, supported by Native Browsers
    • Templating, Shadow DOM, Custom Element to name few
  • More Standard and less framework

In other words, Lightning Web Components framework brings power and benefits of Web Components while being built on modern web standards. Lighting Web Components are comprised of 3 key pieces:

  • Base Lighting Components – a set of 80+ UI components built as custom elements
  • The Lightning Data Service– provides declarative access to Salesforce data and metadata, data caching, and data synchronization
  • The User Interface API– the underlying service that makes Base Lighting Components and the Lightning Data Service metadata-aware

Introduction to Lightning Web Components

We did two session in Apex Hours “Introduction to Lightning Web Components” and ” Lightning Web Components Best Practices“. In that session we covered the all below topics.

  1. Why Lightning Web Component (LWC)
  2. Part 1 – Vanilla HTML5 Web Components
    • Benefits of Web Component
    • Pillars of Web Component
    • Demo of Custom Element and Templating 
  3. Part 2 – Lightning Web Component
    • Hello World
    • Demo of Lifecycle methods
    • Call Apex Class
    • Access Custom Label
    • Lightning Data Services
    • Communication between Lightning Component and LWC

Here is recording of session :-

Getting started with Lightning Web Components LWC

Check this session why we need Lightning web component and what is the difference between LWC and AURA. Also in this session you will learn about how to create first LWC project include how to call apex from lightning web components.


  • Introduction to Lightning Web Components
  • Aura vs LWC
  • Anatomy of a Lightning Web Component
  • Lightning Playground
  • Create your first Lightning web components
    • Lightning-input
    • Attribute in LWC
    • Handle Input value and Click event
    • Calling function on button click
  • Properties in LWC
  • Invoking Apex from LwC ( Wire and Imperative)
  • Q & A

Lightning web component Event Handling and Navigation

Join this session and learn about Event handling and Lightning Data Service in lightning web components. We will also talk about how to handle Navigation in LWC.


  • Event Handling (Communication between LWC)
    • Parent to Child Communication
    • Child to parent
  • Accessing data from Salesforce Database
  • Lightning Data Service (LDS) Demo
    • Lightning-record-form
  • Use LWC in Lightning Experience
  • Navigation in lightning web component

Lightning Web Components Best Practices

On 23 March 2019, We did another live session on Lightning Web Components (LWC) best practices with “René Winkelmeyer” in ApexHours. In that session we talk about how to build rich, efficient, and resilient Lightning Web Components. That webinar covered best practices around :-

  1. Using public, and private properties for effective component composition.
    1. When we should use @api or @track variable
  2. Event communication for child-to-parent as well as for sibling components (pubsub).
    1. Parent to Child Communication
    2. Child to Parent Communication
    3.  pubsub
  3. When, and when not, to use Apex with Lightning Web Components
    1. UI Record Api in LWC
    2. Lightning Data Service in LWC (Lightning record form)
  4. Aura interoperabilitys Recipes, Patterns and Best Practices
  5. How to debug Lightning Web Components
  6. How to test Lightning Web Component (Lightning Testing Service)
    1. Jest Tests for Lightning Web Components ( LTS ) 

Here is recording of session :-


Lightning Web Components ( LWC ) in Salesforce with Non-Scratch Org

In this post we talk about how to create LWC component in non-scratch org.
For Lightning Web Components development you need to setup SalesforceDX and VsCode as LWC components are currently not available in Developer console

Design attributes CSS and SVG Files in Lightning Web Components

We created one blog post on how to create Design Attribute in Lightning web components. Design Attribute is used to make lightning web components attribute available to System Admin to edit Lightning App Builder or Community

Here is recording of this


Invoke Apex Class from Lightning Web Component

We have three way to call Apex method

  1. Wire a property
  2. Wire a function
  3. Call a method imperatively.

Please check this post to know about all different way to Invoke Apex Class in LWC. Check this recording to one of way to call apex method.

Please check this post to learn about different way of Events in Lightning web components (LWC).

Converting Visualforce page to Lightning Web Components

In this session we talk about how to convert the VF page into LWC components. Salesforce Recently introduce the Lightning Message Service (LMS). Lightning Message Service (LMS) allow you to communicate between Visualforce and Lightning Components (Aura and LWC both) on any Lightning page

Further Reading :-

Please check below post on learn more about Lightning Web Components

  1. Lightning Web Components ( LWC ) in Salesforce with Non-Scratch Org
  2. Invoke Apex Controller from Lightning Web Component | Lightning Web Component inside Another LWC
  3. Design attributes in Lightning Web Components | CSS and SVG Files | Lightning Web Components | targetConfigs
  4. How to get current user id in lightning web component | Access logged in user ID in LWC
  5. Toast Notification in Lightning Web Components | ShowToastEvent | (LWC)
  6. LWC Best practices
  7. Events in Lightning web components (LWC) | Communicate with Events
  8. Lightning datatable In Lightning Web Components | lightning datatable inline edit
  9. Lightning Message Service (LMS) | MessageChannel
  10. Sorting in Lightning Datatable

Trailhead :-


Share this article


  • “under standard”! LMAO. you might want to fix that typo, Amit. pretty funny (and not so great) meaning….! haha

  • I am unable to follow the video sequence.
    I am searching for LWC. I can find only the 13th class and the 12th.
    I want 1st class onwards.
    Can you help? His teaching is good.

  • As i want to learn LWC i was searching here but not get video sequentially. Can you help me with the same.

  • Great session to start with LWC.. Good explanation on the decorators.


Leave a reply

Keep in Touch

Subscribe for Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 3,229 other subscribers


Our Supporter


Apex Hours

Apex Hours is one stop platform to learn Salesforce skills and technology

Join our Newsletter and get tips and tricks how to explore the salesforce for free!