By: Shashank Parashar 

Salesforce has been on a fantastic journey with the use of Lightning components. Years ago, Salesforce developers used a unique HTML tag-based, mark-up language, known as VisualForce and used Apex as the controller for logic.

In 2014, Salesforce launched the Lightning Component framework, supported by the Aura programming framework, it changed Salesforce programming forever. Lightning Component Framework enhanced Aura Framework through a component-driven model with the purpose of making the development of large-scale enterprise applications easier. Since the web standards previously offered limited feasibility to build large-scale web applications at the time, the launch of Lightning allowed developers to build large-scale client applications on the web.

Fast-forward 5 years from the time of Aura; the web stack has seen an unprecedented level of innovation and standardization that transformed from a rudimentary page-rendering platform to a web development platform.

In 2014, Salesforce launched the Lightning Component Framework and it changed the Salesforce Programming way forever. Lightning Component Framework brought Aura Framework which used a component-driven model that was brilliant in developing large-scale enterprise applications.

Web technology is being changed every day, seeing an unprecedented change in JavaScript Frameworks, redefined way of creation of a web page, and more. Lightning Component also has to become Lightning web components to accommodate the newest technologies in Salesforce development.

A Quick Recap of Web Components

First, let us review what web components are. Web Components consist of four separate technologies that are used together:

  1. Custom Elements: The HTML elements with custom templates, tag names like and behaviors, are made with a set of JavaScript APIs. HTML Living Standard specification has definitions of these Custom Elements.
  2. Shadow DOM: A new DOM feature that helps you build components. We use this for isolating CSS and JavaScript. DOM already has the CSS and JS classes in built, which can used directly. Shadow DOM can be thought of as a scoped subtree inside your element.
  3. HTML templates: User-defined templates in HTML are rendered only when called upon. HTML Living Standard specification has the definition of the tag.
  4. ES Modules: The ES Modules specification defines the inclusion and reuse of JS documents in a standard based, modular, performant way.

What is a Lightning Aura Component?

To understand the Salesforce Lightning component, we need to understand Salesforce Lightning first. Salesforce Lightning is a complete toolbox set for developers which includes the Salesforce Lightning Framework and some tools like Lightning App Builder and Experience Builder to make the development seamless for developers.

Salesforce Lightning Component is a user interface (UI) based framework for developing single-page mobile/desktop/web-based applications. Using the Lightning Component along with these tools, you can customize and deploy new apps in mobile devices easily and effortlessly.

Aura components are reusable units of the app. It represents a small section of the UI of reusable apps. Aura Component Framework contains several pre-built components. We can consider this an example of Lightning Components. Lightning components come with Lightning Design styling and are fully configurable to create custom Lightning components for the apps according to the requirements. Developers render these components to produce HTML Document Object Model elements within the browser.

Everything that happens inside a component is encapsulated and hence the developer can just concentrate on building their apps. Innovations, design changes, or any new change made to the components are done by the author of the component itself.

Major Benefits of using Lightning Components are –

  • Lightning Component Framework is not backed by the legacy VisualForce Framework. Instead it helps developers create apps using a standardized JavaScript framework.
  • Components are simple to use, reusable, and customizable, which offers a robust and fast framework to work with.
  • The lightning framework is very much event-driven, which helps to deliver faster apps to the end-users.
  • Lightning Component pages are higher in performance than their legacy counterparts.
  • Easy to create a responsive page or app with Lightning Component.

What are Lightning Web Components?

Lightning Web Components (LWC) is a stack of modern lightweight frameworks built on the latest web standards. It is a DOM (Document Object Model), element created through reusable code and is used to generate a dynamic interface without using JavaScript or building a Library. This feasibility makes it quick and seamless, saving the developers a ton of time and effort on the Web Stack. Let’s look at some of its remarkable features:

  • Improved performance of the component as most of the code is recognized by the native web browser engine and web stack.
  • Ability to compose applications using smaller chunks of code since the crucial elements that are required to create a component is part of the native web browser engine and web stack.
  • Increase in the robustness of the applications built using LWCs as they are inclusive of the said modern web standards.
  • Parallel interoperability and feasibility to use both Lightning Web Components and Aura components together in the applications with no visible differentiation to the end-users.

If LWCs get the same UI result, what is in store for Web Stack?

  • Languages like React, Angular, and the Lightning Components Framework which use JavaScript are now part of the modern Web Stack. Consequently, the Web Stack no longer requires an additional mid-layer which used to be a challenge for the developers working with Aura as it impacted the speed and performance of the applications.
  • The addition of above features has given more power to our Web Stack to create a lightning UI component. It doesn’t require a mid-Layer to the browser which impacts our speed and performance. This one is the main reason developers are struggling within Aura and now LWC will work for them.
  • Aura-based Lightning components are built using both HTML and JavaScript, but LWC is built directly on the Web stack.

  • Web components can easily interact with the Aura component and can handle the events of one another.
  • A developer who works on LWC is not only using coding skills on a particular framework, but in other frameworks like React or Angular, which are based on the Web Stack.
  • In addition to the latest features, LWC still embraces the features like the Security, Lightning Data Service, and Base lightning components from Aura.
  • Creating a LWC is fast as it no longer requires the user to download the JavaScript and wait for the engine to compile it before rendering the component.
  • It is possible to include LWC in Aura, but not the other way around as the generic elements cannot be added to the custom components.