Salesforce released the Lightning Web Component framework as part of Spring 19 pre-release. Lightning Web Components is a new programming model for building Lightning components. It uses web standards breakthroughs, can coexist and inter-operate with the Aura programming model, and delivers unparalleled performance. LWC is built on web standards for almost all the code involved, with a minimal amount of “custom code” that represents the core Aura runtime that underlies both technologies.

LWC are more secure than their Aura counterparts as LWC adds CSS isolation, leverages native DOM support for better performance, and uses more web-standards JavaScript that can be optimized better. LWC provides polyfills for older browsers, which ensures that the code doesn’t fail on IE 11 and older versions of Safari/Chrome/Firefox. LWC introduced new component types, such as service components; they have no UI so they use no markup, but can export methods for other components to import in just a single line of code.

LWC itself has a richer API based on the UI-API for better performance and less Apex to write, and calling Apex is now easier than before. The support for 3rd party APIs, which reduces the apex code otherwise needed for allowing you to call code in a safe, secure manner in ways that are not possible or required Apex code in Aura components.

Jest is now supported which means unit test cases can be written for the client side logic. This will ensure that the client side logic is tested same way as apex. Main selling points for LWC are better security, better testing, better browser compatibility, better performance, generally smaller components in terms of overall markup and script size, less need for Apex, less need for multiple Apex controllers, and strong leverage of already existing/established knowledge and skills from both Salesforce development and general web component development.

Setting up your Org for LWC Development

Before you start building your first LWC, there are some prerequisites that you should ensure are in place.

  • Enable “My Domain”
Lightning Web Components My Domain
  • Install Salesforce CLI, use this link to download.
  • Install the Salesforce Extension for Visual Studio code.
Lightning Web Components

Now that the installation is done and my domain setup and deployed to all users, we can proceed with creating our very first LWC.

Create the “HelloWorldApp”

Once the setup is done and Salesforce Extension pack is installed, follow the following steps to create a DX Project.

  1. In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
  2. Type SFDX.
  3. Select SFDX: Create Project.
  4. Enter HelloWorldLWC as the project name.
  5. Press Enter.
  6. Select a folder to store the project.
  7. Click Create Project. Once the Salesforce CLI is done setting up the project, the folder structure should look something like this.
Salesforce Lightning Web Components

Authorize your Development org

Before we create and deploy our app, we need to ensure that we have an org where we can deploy and test our app. Follow the following steps to authorize a developer org or your trailhead playground.

  1. In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
  2. Type SFDX.
  3. Select SFDX: Authorize an Org.
  4. Press Enter to accept the Project Default login URL option.
  5. Press Enter to accept the default alias.
  6. Log in using your Trailhead Playground credentials.
  7. If prompted to allow access, click Allow.

Now that the org is authorized, we can create the component.

Create the Lightning Web Component

  1. In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
  2. Type SFDX.
  3. Select SFDX: Create Lightning Web Component.
  4. Press Enter to accept the default force-app/main/default/lwc.
  5. Enter “helloWorld” for the name of the new component.
  6. Press Enter.
  7. View the newly created files in Visual Studio Code. 
Lightning Web Components Creation

Add the following code in the html file.

Add the following code in the .js file

Before deploying the changes to the org, an additional step is needed to ensure the component is visible underapp builder. Add the following code in the meta.xml.

we can see the targets specified are the app page, record page and the homepage so when creating/editing a flexi-page you will see the LWC created.

To deploy the component to your org, right click on the default folder and click SFDX: Deploy Source to Org.

Lightning Web Components Deployment

Once deployed, we can add the component to any lightning fexi-page. Edit an existing lightning app builder page and under the Custom section.

Lightning Web Components adding

You can read more about LWC here.


Leave a Reply

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

Related Posts

Apex

Using Salesforce Reports and Dashboards REST API

The Reports and Dashboards REST API gives you programmatic access to your report and dashboard data as defined in the report builder and dashboard builder. The API lets you integrate the data into any web Read more…

Lightning

LockerService for Secure Lightning Components

Lightning LockerService is a security architecture for Lightning components, that enhances security by isolating individual Lightning components in their own namespace. LockerService also promotes best practices that improve the supportability of your code by only Read more…

Lightning

Auto Style Existing Visualforce Pages with Lightning Experience Stylesheets

With the Winter 18 release, Salesforce has introduced Lightning Experience Stylesheets (Beta). This enables the visualforce page to be rendered with the look nad feel of lightning experience when viewed in Salesforce1 or in Lightning Read more…