Lightning Web Component

Lightning web component

(LWC) is a collection of modern lightweight frameworks created on latest web standards. This is built on a Document Object Model that makes use of reusable code and generates a dynamic interface without using JavaScript or building a library. 

Let us understand why lightning web components were introduced by salesforce and how you can create your first LWC component in a sandbox or developer org. 

Why lightning web component 

• Lightning web components was launched in 2014. 
• Web Standards that time had limited functionality and frameworks like ReactJs, common Js etc came to fulfill the gaps. 
• To build enterprise applications, Aura framework became a part of this initiative and pushed web standards. 
• Aura framework, Angular, React became languages for framework. 
• Web component

1. Web standard has functions and is supported by Native browsers.
2. Templating, Shadow DOM, Custom Element to name few

• More Standard and less framework

What is the lightning web component made up of? 

Lightning web components framework are designed to bring power and benefits of web components but are built on modern web standards. Lightning web components are made up of 3 key pieces. 

1. Base lighting components: these are a set of 80+ UI components built as custom elements. 
2. Lighting data service: the component that provides declarative access to salesforce data and metadata, data caching, and data synchronization. 
3. User Interface API: this is the underlying service that makes base lighting components and the lightning data services aware of the meta data. 

Programming models involved

Lightning components can now be built using two programming models: 

• Lightning web components 
• Aura components, the original model 

Lighting web components are actually custom HTML elements that are built using HTML and modern JavaScript. The programming is such that lightning web components and Aura components can exist together and interoperate on a single page. They will appear as lightning web components to the admin as well as the end users. 

Lightning web components were introduced by Salesforce and uses core web components standards, provides only necessary elements required to perform well in Salesforce supported browsers.lightning web components is lightweight as it is developed on code that is native to the browsers. Most codes are written in JavaScript and HTML and are efficient for functioning. 

Salesforce, a member of the World Wide Web Consortium (W3C) are committed to developing open web standards. Base lighting components are available as both Aura components and lightning web components. The Component reference contains documentation, specification and examples for both. 

The programing model, Lightning Web Components, LWC when referred to, compose of the following:

1. Documentation changelog: a page that lists significant changes made in the lightning web components developer guide. 
2. Getting started coding: lightning web components playground, an interactive code editor is the fastest way to begin coding. 
3. Lightning web components: open source; apart from Salesforce, lightning web components empower you to explore the source code, customize behavior for your needs and build web components on any platform. These platforms are enterprise ready as lightning web component is an open source. 
4. Supported browsers: lightning web components support the same browser as its counterpart, lightning experience. 
5. Supported Java Script: lightning web component uses the latest versions of Java Script. 
6. Supported salesforce experience and tools: Lightning web components are supported in many Salesforce experiences and tools. To use a Lightning web component with an unsupported experience or tool, wrap it in an Aura component.
7. Lightning component library: the hub for Lightning UI developer information, the lightning component library includes reference information, a guide for developers, a code playground and lightning locker tools. 
8. To choose between Lightning Web Components or Aura: lightning web components are better performing and easier to develop than Aura components.  However, when you develop Lightning web components, you also may need to use Aura, because LWC doesn’t yet support everything that Aura does.

• Set up an environment for development: each workflow is different as per your needs. Develop a lightning web component with a workflow that suits your needs. Salesforce DX tools are recommended, but there are situations where those tools are not supported. You can still use your favorite code editor and deploy to an org using your own tools. However, you can’t develop Lightning web components in the Developer Console.
• Explore Trailhead and Sample Code Trailhead content and GitHub repositories are created to jump start your Lightning Web Components development.

To Create a Hello World lightning web component

Once the development environment is set up, you can create a simple lightning web component. 

Create a Salesforce DX Project

• In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).
• Type SFDX.
• Select SFDX: Create Project.
• Press Enter to accept the standard option.
• Enter HelloWorldLightningWebComponent as the project name.
• Press Enter.
• Select a folder to store the project.
• Click Create Project. You should see something like this as your base setup. Visual Studio Code with the newly created HelloWorldLightningWebComponent folder

Authorize Your Trailhead Playground

1. In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (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.
8. After you authenticate in the browser, the CLI remembers your credentials. The success message should look like this: Success message of authorizing an org

Create a Lightning Web Component

• In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).

• Type SFDX.

• Select SFDX: Create Lightning Web Component. Don't use SFDX: Create Lightning Component. (This creates an Aura component.)

• Enter helloWorld for the name of the new component.

• Press Enter to accept the default force-app/main/default/lwc.

• Press Enter.

• View the newly created files in Visual Studio Code.

• In the HTML file, helloWorld.html, copy and paste the following code. <template> <lightning-card title="HelloWorld" icon-name="custom:custom14"> <div class="slds-m-around_medium"> <p>Hello, {greeting}!</p> <lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input> </div> </lightning-card> </template>

• Copy

• Save the file.

• In the JavaScript file, helloWorld.js, copy and paste the following code.

• import { LightningElement } from 'lwc'; export default class HelloWorld extends LightningElement { greeting = 'World'; changeHandler(event) { this.greeting = event.target.value; } }

• Copy

• Save the file.

• In the XML file helloWorld.js-meta.xml, copy and paste the following code.

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>

• Copy

• Save the file.