Lightning Web Components (LWC)Tutorial
Lightning Web Components-Why, What & Where to start from?
Why Lightning Web Components(LWC)?
AURA framework which was used for current Lightning Components was based on standards of 2014 but are outdated now and it was time for change because for the following reasons:
- Rendering could be optimized.
- Standard UI elements were scarce.
- Lacked modern constructs.
- Was not fit for modular apps.
- Web standards were updated.
- AURA Framework became skill and had its own learning curve.
Additionally, Lightning Web Components(LWC) can coexist and interoperate with Aura components.
What Lightning Web Components(LWC)?
LWC is a new programming model levering the recent web standards. Rather than being a totally custom and development wise rigid framework, It’s quite flexible. It’s mostly the common Web Standards and a Thin Layer of Specialized services to make it a perfect fit for Modern Rich UI Implementations in Salesforce. This thin layer of specialized services contain Base Lightning Components, Lightning Data Service and User Interface API which work behind the curtain for LWC.
A thin layer of specialized services on top of a standard web stack results in:
- Ease of development for large scale modular apps.
- Ease of Leveraging the latest web functionalities and constructs.
- A common model and transferable skills.
(Any web developer working on modern JS frameworks could easily ramp-up LWC).
- Interoperable components.
- Better performance.
So, the new development stack looks like:
Where to start from?
Here are some recommended steps:
- Learn more about LWC from the LWC Video Gallery.
- Install VS Code and set it up for Salesforce Development.
You can use ForceCode Extension for Salesforce as it supports LWC Or you can follow this trailhead module.
- Get easy to understand sample code for almost all use cases here.
- For more samples visit here.
- Develop a LWC yourself and try your code by running it here.
- Most importantly, Complete the Get Started with LWC trailmix.
Lightning Web Components-Component Structure
How is a Lightning Web Component(LWC) formed?
So, a LWC component would look like:
Now, lets cover a brief overview of these files one by one:
- Has a root tag <template> which contains your component’s HTML.
- When renders, the <template> tag is replaced with <namespace-component-name>.
- Import functionality declared in a module eg-lwc(the core module), use the import statement.
- To allow other code to use functionality in a module, use the export statement.
- LightningElement is custom wrapper of the standard HTML element and we extend it in the component and export.
XML file that defines the metadata configuration values for the component eg-
- Components Label
- Configuration Attributes
- Builder Attributes
- To style a component.
- The style sheet is applied automatically.
So, the files that we have discussed how would the component build with these look?
This is the best time to learn and start early with Lightning Web Components, which offer the latest web standards, delivers unprecedented performance and productivity and interoperate seamlessly with existing code.
Example of Lightning Web Components(LWC)
Here is list of some of Lightning Web Component example for developers:
Good luck. Happy Coding 🙂