Whether you are newbie on Salesforce Lightning Platform or have been working in Salesforce domain for a decade, you can not deny that LWC is a revolutionary change in the lightning platform programming paradigm. Lightning Web Components (LWC) is a new programming model which is used to build the lightning components. If you are new to Lightning Platform and you have been developing solutions outside of Salesforce with the help of HTML and JavaScript then you will find LWC as a piece of cake. Salesforce made it GA in Spring’19 release and since then LWC has become a buzz in the Salesforce developers. In this blog, we will be going to cover following aspects –

• What’s a web component?
• What is LWC and how is it different then “Aura Components” what was previously known as “Lightning Components”
• Benefits of using LWC
• Where are Lightning Web Components supported?
• Where to start learning LWC

What is Web Components

A web component is a DOM element created through reusable code. Each component is meant to save developers time when building websites that use similar elements on many pages.

The idea behind web components is to create dynamic interface elements without writing custom JavaScript code or building your own libraries. Modern web frameworks such as React, Angular and Vue already using this concept.

Web components are based on four main specifications:

• Custom Elements – The Custom Elements specification lays the foundation for designing and using new types of DOM elements.
• Shadow DOM – The shadow DOM specification defines how to use encapsulated style and markup in web components.
• ES Modules – The ES Modules specification defines the inclusion and reuse of JS documents in a standards based, modular, performant way.
• HTML Template – The HTML template element specification defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.

LWC is a New Programming Model

Lightning Web Component is a brand new lightweight framework built on web standards. You must be wondering about web standards team and why is it being so important for Lightning Web Components then I must tell you that “Web standards are rules and guidelines established by the World Wide Web Consortium (W3C) developed to promote consistency in the design code which makes up a web page. Without getting technical, simply it’s the guideline for the mark-up language which determines how a web page. displays in a visitor’s browser window.” Since, Salesforce is committed to developing open web standards and is a member of the World Wide Web Consortium (W3C), it has become important encouraging development around web standards on Lightning Platform.

Lightning Web Component (LWC) is quite similar to the Aura Components (Originally Lightning Components) when it comes to look and feel but both are different at architecture level. LWC uses modern web programming models and everything which is provided by the browser’s API as part of web standards. On the other side, Aura Components has their own programming standards and component model. Lightning web components use native JavaScript and HTML components along with optional CSS to render layouts on the page. Since most of the feature implemented natively with the help of browser supported APIs LWC are faster when it comes to the performance. It leverages custom elements, templates, shadow DOM, decorators, modules, and other new language constructs available in ECMAScript 7 and beyond. We will discuss all these things in the upcoming post.

Since, everything render on the client side with the support of browser APIs,  LWC is faster compared to Aura Components and significantly removes poor performance due to rendering delays.  Lightning web components and Aura components can be used in the same lightning app as both can talk to each-other and can deliver exceptional performance. As you know JavaScript is used in 95% of all websites so it gives the flexibility to a company who has shortage of lightning developer talent today. Such companies can use experienced Javascript developers to start developing outstanding solutions on the Salesforce Lightning Platform.

Why should I switch to LWC programming model

This is a question which I would love to answer. This question has become relevant to every developer / Salesforce partner after release of this one more new programming model for Salesforce development. Salesforce customers who were planning to roll-out Lightning Experience in their Salesforce org had plans to convert Visualforce pages and components into Aura Components but now they are wondering why is this new LWC launched when they already had Aura Frameworks. Do they need to revisit their plans to switch to Lightning Web Components? Here is the answer of your question –

• If you have already converted VF pages and components into Aura Framework then stick with it for now and Use Lightning web components for new components only.
• If you have a long way to go and just started on this path then switching to web components would be a wise decision
• If you’r seeing any performance issues with existing work mainly in rendering delays then, LWC could be a good bet.

Benefits of using LWC

If you have been doing development on React.js and an expert in JavaScript then I think you already know the benefits of using LWC in the Salesforce development. But someone who just started with Aura Components and looking out for the information around LWC then you should check the following facts –

• Lightning Web Components (LWC) used HTML5, ES6, CSS3 which utilise browser APIs for rendering the UI and it give users a seamless experience.
• Web components use browser’s native API support to render UI which reduces the overheads of using other JS libraries and CSS.

• You can compose Aura components from Lightning web components, but not the other way around. 

LWC Support

Lightning Web Component is a new programming model and it’s still need more time to be available in a full-fledged manner. Currently, LWC can be used in limited areas which are following.

• Lightning Experience
• Salesforce App
• Lightning Communities
• Lightning App Builder
• Community Builder
• First-Generation Managed Packages
• Second-Generation Managed Packages
• Unlocked Packages
• Unmanaged Packages
• Change Sets
• Metadata API—LightningComponentBundle
• Tooling API—LightningComponentBundle, LightningComponentResource

Areas where we have to wait to use “lwc”

• Lightning Out
• Lightning Components for Visualforce
• Standalone Apps
• Salesforce Console (Navigation Item API, Workspace API, UtilityBar API)
• URL Addressable Tabs
• Flows
• Snap-ins Chat
• Lightning for Gmail, Outlook Integration
• Apex Continuations
• EMP API, Conversation Toolkit API, Omni Toolkit API, Quick Action API
• Standard Action Overrides, Custom Actions, Global Actions, List View Actions, Related List View Actions
• Chatter Extensions

Where to start learning LWC

You can learn it through the following resources –

• Getting started with lightning web components on Trailhead.
• Lightning Web Components episodes from Salesforce Developers.
• Lightning Web Components official documentation – Introducing Lightning Web Components.

Resources

https://developer.mozilla.org/en-US/docs/Web/Web_Components
https://developer.salesforce.com/blogs/2018/12/introducing-lightning-web-components.html