Step Up Your LWC Skills

Lightning Web Components (LWC) is a framework for creating user interfaces using JavaScript and Web Components.LWC relies heavily on language features that were introduced in ECMAScript 6 (aka ES6, aka ES2015). Aura offers support for ECMAScript 5 (aka ES5) features. With ES6, plenty of great features have been added to JavaScript. So if you’re coming from a Visualforce page or Lightning component (Aura) development background, I highly recommend that you brush-up on these modern JavaScript skills before starting your LWC journey.

• Variable declarations using const/let/var
• Arrow Functions
• Promises
• Classes
• Modules
• Array and Object(object.keys,object.values) functional programming methods.

How is a Lightning Web Component(LWC) formed?

Similar to an AURA component, the main contents of a LWC are also html, javascript. There are optional content like css. But then in addition to these for LWC, an xml configuration file is also included which defines the metadata values for the component.

Template File

• Has a root tag template which contains your component’s HTML
• When render, the template tag is replaced with namespace-component-name.

JavaScript

• 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 a custom wrapper of the standard HTML element and we extend it in the component and export.

Configuration

XML file that defines the metadata configuration values for the component eg-

• Components Label
• Availability
• Configuration Attributes
• Builder Attributes

CSS

• 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?

Component UI

Summary

This is the best time to learn and start early with Lightning Web Components, which offer the latest web standards, deliver unprecedented performance and productivity and interoperate seamlessly with existing code.