Lightning Web Components was born to succeed Aura/Lightning components.
Launched by Salesforce in Feb’19, Lightning Web Components is an open source framework built on latest web standards. It also uses custom elements, templates, decorators, modules, and all others available in ECMAScript 6 and beyond.
Lightning Web Components (uppercase) or LWC is the programming model used to create Lightning web components. Lightning web components (lowercase) are custom HTML elements built using HTML and modern JavaScript with LWC.
Use of modern language and standards (HTML, JavaScript, and CSS) makes LWC very easy to learn. If you were used to web development like me, this should be a snap.
Let’s see some essentials to know to get ready for Lightning Web Components development.
First thing to know is that will need to use the latest versions of JavaScript
You can use any JavaScript feature that are browser-supported.
If you are new to JavaScript or want some refresher, complete the Modern JavaScript Development Trailhead module.
For a complete Lightning Web Components learning journey, check out this list of Trailhead LWC modules.
You can’t develop Lightning web components in the Developer Console
Salesforce recommands Salesforce DX tools but you can use any other code editor, then deploy your code in your org.
Check out this Lightning Web Component Local Development Setup# and Installation to develop locally a Lightning Web Components app.
To create a Lightning Web Components project, use the open-source create-lwc-app tool.
Pay attention to Name rules
Now that you’ve set up your tools to create your first Lightning web component. The first thing you will do is name your component’s folder and files.
Remember to always use the JavaScript Naming Conventions:
- Names must be written as camelCase : this means that Lightning web component name should always start with a lower case letter. And the first letter of each following word in upper case
- Hyphens are not allowed : underscore is only special character allowed
- Whitespace are not allowed : use underscore if you want to add a separator
- Can not end with underscore and can not contain 2 consecutive underscores in the name
- And especially, the name must be unique in the namespace
And you know what? These rules also apply to your Custom Event name 🙂 Your best bet is to always use the same naming convention for all of your code.
Define Component metadata in {component}.js-meta.xml file
Specify if you want to use the component in Lightning App Builder and in managed packages.
Define in what types of Lightning pages your component can be exposed on. Here you can also configure your component’s properties, give your component a title and also a short description.
<<span style="color:#159ae7;" class="has-inline-color">?xml</span> <span style="color:#362e77;" class="has-inline-color">version</span>=<span style="color:#df3715;" class="has-inline-color">"1.0"</span> <span style="color:#362e77;" class="has-inline-color">encoding</span>=<span style="color:#df3715;" class="has-inline-color">"UTF-8"</span>?>
<<span style="color:#159ae7;" class="has-inline-color">LightningComponentBundl</span>e <span style="color:#362e77;" class="has-inline-color">xmlns</span>=<span style="color:#df3715;" class="has-inline-color">"http://soap.sforce.com/2006/04/metadata"</span>>
<<span style="color:#159ae7;" class="has-inline-color">apiVersion</span>>51.0</<span style="color:#159ae7;" class="has-inline-color">apiVersion</span>>
<<span style="color:#159ae7;" class="has-inline-color">isExposed</span>>true</<span style="color:#159ae7;" class="has-inline-color">isExposed</span>>
<<span style="color:#159ae7;" class="has-inline-color">masterLabel</span>>My First Lightning web component</<span style="color:#159ae7;" class="has-inline-color">masterLabel</span>> <span style="color:#009ca3;" class="has-inline-color"><!-- The title of the component. --></span>
<<span style="color:#159ae7;" class="has-inline-color">description</span>>This is a component created to get started with LWC.</<span style="color:#159ae7;" class="has-inline-color">description</span>>
<span style="color:#009ca3;" class="has-inline-color"><!-- A short description to help you and others know what the component is. --></span>
<<span style="color:#159ae7;" class="has-inline-color">targets</span>>
<<span style="color:#159ae7;" class="has-inline-color">target</span>>lightning__RecordPage</<span style="color:#159ae7;" class="has-inline-color">target</span>> <span style="color:#009ca3;" class="has-inline-color"><!-- Expose on Lightning Record Page --></span>
<<span style="color:#159ae7;" class="has-inline-color">target</span>>lightning__AppPage</<span style="color:#159ae7;" class="has-inline-color">target</span>> <span style="color:#009ca3;" class="has-inline-color"><!-- Expose on Lightning App Page --></span>
<<span style="color:#159ae7;" class="has-inline-color">target</span>>lightning__HomePage</<span style="color:#159ae7;" class="has-inline-color">target</span>> <span style="color:#009ca3;" class="has-inline-color"><!-- Expose on Lightning Home Page --></span>
<<span style="color:#159ae7;" class="has-inline-color">target</span>>lightningCommunity__Page</<span style="color:#159ae7;" class="has-inline-color">target</span>> <span style="color:#009ca3;" class="has-inline-color"><!-- Expose on Lightning community page --></span>
<<span style="color:#159ae7;" class="has-inline-color">target</span>>lightningCommunity__Default</<span style="color:#159ae7;" class="has-inline-color">target</span>> <span style="color:#009ca3;" class="has-inline-color"><!-- Used together with lightningCommunity__Page. Enables configurable properties --></span>
</<span style="color:#159ae7;" class="has-inline-color">targets</span>>
</<span style="color:#159ae7;" class="has-inline-color">LightningComponentBundle</span>>
Pass data between components
To communicate up the component hierarchy (Child to Parent), use events. Using event, you can pass data from child to parent.
To communicate down the component hierarchy (Parent to Child ), pass properties to a child using HTML attributes. If both components are LWC, call child component public methods directly. You do not need to fire an event.
One framework, any platform
The Lightning Web Components framework doesn’t have dependencies on the Salesforce platform. If you have to display a view of your app in Salesforce and another view in any other application, you can use Lightning Web Components to build both sides of the application.
Use the same JavaScript framework whether you are building on Salesforce or any other platform.
LWC is an open source framework
Salesforce has announced the open sourcing of the Lightning Web Components framework since May’19. Feel free to explore the source code and contribute as well.
Have fun learning!
Essentials to Know to Get Started with Lightning Web Components
Tweet
