Admins / Developers

[GUIDE] Lightning Web Components vs. Lightning Components

By Tony Zorc

Lightning Components give Salesforce Admins and Developers the tools they needed to enhance the user experience on a variety of devices; however, Lightning Components aren’t perfect, and come with their own limitations – the answer to some of these drawbacks is Lightning Web Components.

Lightning Components continue to play a prominent role in the Salesforce ecosystem; however, Lightning Web Components are more advanced because they align closely with modern web standards, which makes for a more efficient building process. This guide covers everything you need to know about Lightning Components and Lightning Web Components, including the benefits of each for three personas (developers, admins, users), and most importantly, why the differences between the two.

What Are Lightning Components?

Lightning Components are a user interface (UI) framework that is used to create applications for desktop and mobile technologies.

Salesforce Admins deploy these components to construct single-page web applications that provide an end-to-end experience on the platform for a variety of functions.

These pages are optimized for a more interactive user and developer experience. Salesforce Architect Mike Topalovich wrote in one of his articles that Lightning Components provide “a single, integrated framework for developers to create rich, responsive applications that could be seamlessly “plugged in” anywhere in the UI.”

In practice, this means both your users and customers will have an easier time navigating the interface, streamlining the services Salesforce provides them. Lightning Components can be created, divided, and integrated with other components very easily, which lets you create highly customized pages. Instead of just creating separate components throughout the application, developers can extend lightning web components, allowing new components to be built on top of one another.

This makes the build and maintenance easier. For example, a developer can create a TABS Lightning Component and have it contain other Lightning Components within it such as an ACTIVITY component.

The Benefits Of Lightning Components

Lightning Web Components benefit everyone in different roles. Here are some reasons why these components are so electrifying:

For Developers

  • Lightning Component architecture lets developers use a standardized JavaScript framework that isn’t held back by some of Visualforce’s limitations (the legacy framework), which allows them to create customized pages and functions without a third-party framework, or vendor.

For Admins

  • Enables admins to do their job more efficiently, ensuring the company gets the exact web pages they need on Salesforce.
  • Reusable and optimal for responsive actions, meaning components designed are to register an action and provide a specific response or solution.
  • Highly event-driven, delivering faster results in response to user actions, messages, and other events.

For Users

  • Lightning Components create a better, faster web experience for customers.
  • Increase page speed and loading performance.
  • Make the app/page mobile responsive.

The Evolution of Lightning Components

Lightning Components remain crucial aspects of Salesforce web pages, but there’s always room to improve.

Lightning Web Components make creating Lightning Components much easier for those unfamiliar with the complexity of the Salesforce platform.

Programming languages evolve over time, becoming more complex, responsive, and conforming to new requirements. Both Lightning Web Components and Web Components are designed heavily using JavaScript; however, JavaScript has changed significantly since the creation of Lightning Components.

Lightning Web Components incorporates the latest innovations in JavaScript, which we will go into more detail in the next section.

What Are Lightning Web Components?

Lightning Web Components are an updated web standards-based framework method for creating lightning components on the Salesforce Platform, Lightning Web Components utilize standard tech like CSS, HTML, and updated JavaScript without requiring a set framework, incorporating the latest innovations in JavaScript, including Shadow Document Object Model(DOM), custom elements, and web components (ECMAScript 7 is specifically the updated JavaScript language used).

This is what gives them an edge over Lightning Components – they are simpler to define and develop, greatly because they are in-line with updated web standards. This means that developers with skills in these technologies can easily use this framework to develop Lightning Components for their pages, plus users don’t have to be as familiar with the Salesforce Platform to deploy these components (as is required with regular Lightning Components). Overall, this results in more people building Lightning Components more efficiently, effectively opening the doors for admins to utilize a wider range of professionals to get the help they need.

The Benefits Of Lightning Web Components

Lightning Web Components take many of the benefits from regular Lightning Components and amplifies several areas.

For Developers

  • Standardized-based architecture, can build components for pages faster.
  • Code reuse is supported for quicker deployments.
  • Support unit testing for quality assurance.
  • Access to more developer talent who can quickly use Lightning Web Components to create desired solutions.

For Admins

  • The advanced standard-based architecture, Lightning Web Components make the process of building a Lightning page much easier.
  • Implement Lightning Web Components with just clicks in the application.

For Users

  • The components run more fluidly without browser interferences, enhancing performance.

Lightning Components vs. Lightning Web Components: What Are The Differences?

As we said in the introduction, both components can be used together, which means that Lightning Components continue to play a prominent role in the Salesforce ecosystem; however, Lightning Web Components are further advanced because they are aligned with more modern web standards, which makes for a more efficient building process.

The table below summarises these differences in a nutshell:

Lightning ComponentsLightning Web Components
Uses a standardized JavaScript framework.Uses standard tools like CSS, HTML, and updated JavaScript (ECMAScript 7).
Users must be more proficient with the Salesforce platform.Aligned with modern web standards, so developers don’t need to be as familiar with Salesforce architecture.
Takes longer to build and deliver, and can be pricey. Few out-of-the-box components.Structure that relies on using code that runs natively on browsers, improving performance while making it much faster to deploy and more versatile..
Code reuse is supported.Code reuse is supported.
Doesn’t support unit testing framework.Supports unit testing framework for quality assurance.
Heavily reliant on Aura framework for creation and execution, which is limiting. Not built on code that runs natively in browsers.Natively supported in the browser → application's performance is faster.

Both Lightning Components and Lightning Web Components serve to help the Salesforce platform be more accessible and easier to utilize, more flexible. That’s the beauty of the Salesforce platform. As you look to help optimize the user experience and turn out a faster web page, Lightning Web Components should definitely be front of mind.

The Author

Tony Zorc

Tony is the founder and CEO of Accounting Seed, which began out of his passion to provide an innovative, open architecture accounting application on the Salesforce platform.

Leave a Reply