Why Lightning Web Components

 Introducing Lightning Web Components

Lightning Web Components is a new programming model for building Lightning components. It leverages the web standards breakthroughs of the last five years, can coexist and interoperate with the original Aura programming model and delivers unparalleled performance.

Lightning Web Components uses core Web Components standards and provides only what’s necessary to perform well in browsers supported by Salesforce. Because it’s built on code that runs natively in browsers, Lightning Web Components is lightweight and delivers exceptional performance. Most of the code you write is standard JavaScript and HTML.

You simply create components using HTML, JavaScript, and CSS.

Lightning web component creation is one, two, three steps. You create

• a JavaScript file, 
• an HTML file, 
• a CSS file. // optional. 

• HTML provides the structure for your component.
• JavaScript defines the core business logic and event handling.
• CSS provides the look, feel, and animation for your component.

Here’s a very simple Lightning web component that displays “Hello World” in an input field.

HTML

<template>
    <input value={message}></input>
</template>

The template tag is a fundamental building block of a component’s HTML. It allows you to store pieces of HTML.

JavaScript

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
  message = 'Hello World';
}

CSS

input {
   color: blue;
}

Setup Your Org for Development in Lightning Web Component. Here