Saturday, February 18, 2023

What are Lightning Web Components?

Before going into details on  What are Lightning Web Components? first let us understand What are Web Components?

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

The concept was first introduced in 2011 by Google engineer Alex Russell.

It was in 2013 when Google and the Chrome team developed the first version of this Web Components standard, the V0 version.

It was between 2016 and 2018 when everything changed, Google introduced the Web Components V1 standard, which was adopted by most modern browsers.

Why Web Components?

Let say we select a framework today and tomorrow we want to move to some other framework and share business logic and functionality between different projects however, this might force us, in many occasions to re-code tools and functionalities to adapt them to new projects or services.

This is where Web Components comes into play. Web Components is a tool that allow us to create tools and functionalities that we can use on any framework and on any browser and that are implemented under a standard accepted by the whole community.

Now, as we have the basic idea on what are Web Components let us move on to our topic of discussion What are Lightning Web Components?

As of now, we have built lightning components using the "Lightning Component Framework" using "Aura Component Model" similarly, we can also built lightning components using the "Lightning Web Component Framework". 

Lightning Web Component Model is a new programming model built using the HTML Elements and modern JavaScript. It uses core web component standards and leverages custom elements, templates, decorators, modules, shadow DOM, and other new language constructs available in ECMAScript 7 and beyond.

For developing LWC we require "Salesforce Extensions for Visual Studio Code" and for deploying LWC to an org we require "Salesforce CLI".

Why Salesforce has come up with Lightning Web Component Framework?

Earlier salesforce developers used Visual Force pages which is an HTML Tag-based mark-up language to develop web pages and Apex to perform database operations however it  was not compatible to build large scale enterprise solutions and complex applications using Visual Force pages.

In 2014, Salesforce launched the "Lightning Component Framework" along with "Aura Component Model" that is used to develop large scale enterprise solutions and complex applications.

In 2014, web standards only offered a limited foundation for the full stack that developers need to build large-scale web applications, i.e. a rendering engine, standard elements, events, and a core language (ECMAScript 5) and the key elements like a component model, templates, modules, and shadow DOM were all missing from the web standards.

Since then there has been a lot of improvement in the Web Components and to keep up the pace and standardization’s of the Web Components according to the huge demand of the web Components across the internet salesforce moved from "Lightning Component Framework" to "Lightning Web Components Framework".

We can built components using any of the model and can place these components on the same lightning page. Both Aura component, LWC make use of Security, LDS and Base lightning components.


Below are the advantages of using LWC over AURA.

  1. Improved performance
  2. Faster loading sites
  3. Better security, testing, and browser compatibility
  4. Can be used under AURA.

Important points to note:

1) Aura component and LWC can exist on Same lightning page.

2) Aura component can include LWC

No comments:

Post a Comment