Lightning Web Components (LWC) Tutorial

Welcome to Lightning Web Components (LWC) world. Let’s understand why Lightning Web components were introduced by Salesforce and How to create the first LWC component in the sandbox or developer org (Non-scratch org). In addition, We will talk about the difference between Aura and LWC.

You might have lots of questions about Lightning Web Components-Why, What & how to start from? This Lightning web component FREE Training will help you.

What is Lightning Web Component

Lightning Web Components is a new programming model for building Lightning components. It leverages the web standards breakthroughs of the last five years, can coexist and interoperate with the original Aura programming model, and delivers unparalleled performance.

Now you can build Lightning components using two programming models: Lightning Web Components, and the original model, Aura Components. Lightning web components are custom HTML elements built using HTML and modern JavaScript. Lightning web components and Aura components can coexist and interoperate on a page. To admins and end users, they both appear as Lightning components.

Advantages of using LWC

What is Lightning Web Component

Why Lightning Web Component(LWC)

When Salesforce introduced LWC as a Developer my first question was why use LWC when we are already having the AURA component framework.

8 years back, in 2014, Lightning Components Launched. At that time Web Standards had limited functionality and various framework came to fulfill 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.

FREE LWC Training

Fast forward a few years later. Web standard has a rich set of functionalities, supported by Native Browsers. In other words, the Lightning Web Components framework brings the 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

Web stack transformation 2014-2019

Image from Salesforce Document.

What is going to happen with Aura now?

Well, now you know the power of LWC, now you must be wondering what is going to happen with AURA components ? Are we going to skip them ? The answer isNO!

Aura vs LWC

Aura components and Lightning web components can coexist and interoperate, and they share the same high level services:

  • Aura components and Lightning web components can coexist on the same page
  • Aura components can include Lightning web components
  • Aura components and Lightning web components share the same base Lightning components. Base Lightning components were already implemented as Lightning web components.
  • Aura components and Lightning web components share the same underlying services (Lightning Data Service, User Interface API, etc.)

How to start the LWC Journey?

Here are some recommended steps that might help in your LWC development journey!

  1. Install VS Code and set it up for Salesforce Development. You can follow Set up VS Code trailhead module for that. 
  2. Start with JavaScript Basics.
  3. Follow SLDS.
  4. Check the component library before starting the build.
  5. Complete the LWC trail mix on the trailhead.
  6. Check Lightning web component FREE Training

Introduction to Lightning Web Components

Check our Apex Hours LWC DAY-1 session to learn about Why LWC.

YouTube video

What Next for Lightning Web Components?

Check below post for Example of Lightning Web Components(LWC).

  1. 8 ECMAScript standards to learn before building Lightning Web Components
  2. Learn about how to call Apex in LWC
  3. Event communication in LWC.
  4. Custom Label in Lightning Web Components.
  5. Lightning Datatable in LWC.
  6. Navigation Service in Lightning Web Components.
  7. Design attributes in Lightning Web Components.

Summary

Learn Lightning Web Components with our free Training and don’t miss our upcoming sessions.

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.

Articles: 459

7 Comments

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

  2. 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.

Leave a Reply

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