Salesforce enables developers to build Lightning components using two programming models: Lightning Web Components (LWC) and Aura. Aura has been around longer than LWC and has more supported capabilities, but LWC is the faster and more efficient model.
When deciding which model to use, you should always choose Lightning Web Components unless you need a feature that is only supported by Aura. However, remember to take note of Lightning Web Components limitations so you can plan accordingly and know when you’ll still need to use Aura.
Salesforce Spring ‘20 Release Updates for Lightning Web Components
The Lightning Web Components programming model is still fairly new, and the Spring ‘20 Release included some major enhancements. Here are some ways LWC felt the love from the Salesforce Spring ‘20 release:
Custom Aura Design Tokens - Maintain design consistency and ensure easy updates down the road by using Custom Aura Design Tokens.
Open Source - The base components source code for the Lightning Web Components framework is now open.
Retiring Legacy Components - Salesforce plans to end support for Aura components in the ui namespace in Summer ‘21, so use similar components in the lightning namespace instead.
Reactive Fields - Salesforce developers no longer have to guess which fields need the @track decorator. In fact, all fields are now considered reactive.
History of Lightning Web Components
The original Lightning Component framework — now being referred to by its longtime codename Aura — was introduced at Dreamforce in 2014. It was supposed to be the modern-day follow up to Visualforce development, and it was built for speed and performance.
However, web browsers changed drastically in the four years after the introduction of Aura. Google began to champion a new concept known as Web Components to the internet community. The idea was to scrap the decades-old limitations of what web browsers were capable of and agree to a new set of standards that are more flexible and powerful to web developers.
Web Components was released to Google’s Chrome browser in 2014, and then it made its way through various committees within the tech community. After some revisions and feedback from Salesforce and other big companies, the specifics were ultimately agreed upon and implemented. All major web browsers, such as Mozilla Firefox, Apple Safari, and Microsoft Edge, support the standards, which makes the technology widely available to the masses.
A lot of the functionality Salesforce had built into the Aura framework could now be taken out of their processes and offloaded onto the browser itself using Web Components. Salesforce created the Lightning Web Component framework to do so.
Lightning Web Components are able to utilize the web browser standards while still having the ability to access Salesforce data and work within the existing Lightning Experience UI. This results in faster speeds and processing of Salesforce applications because the web browser has direct access to the processing capability of your computer.
Salesforce had been preparing its development ecosystem for the large shake-up when it introduced Salesforce DX. In that effort, they reviewed the tools other developer communities were utilizing and found a way to fit Salesforce into those standards. This involved shedding the development tools and processes that were in place for many years. While it is a tough pill to swallow for many existing developers, it ultimately results in a development process that provides more options to utilize the tools non-Salesforce programmers are already using.
Lightning Web Components revives that standards-based mindset into its programming language, even at the cost of scrapping the Aura framework. It can now expand its reach to a new demographic of developers who have never experienced Salesforce before. When the platform is more friendly to more developers, it will be rewarded with more support from the community.
Transitioning from Aura to Lightning Web Components
There is total compatibility between the new LWC framework and the current Aura framework. LWC provides the same interfaces to admins and users they have been using since switching to Lightning Experience. For example, developers drag-and-drop LWC components onto pages using the Lightning App Builder, which allows them to set custom parameters on pages.
Developers also have the ability to seamlessly embed LWC into Aura components, so the process of going from Aura to LWC can be gradual over time. The component you ultimately see on your screen might be a combination of LWC and Aura components inside of Aura wrapping.
Aura and LWC Comparison Example
In the following example, we created an Aura component that holds two child components. One is a button written in Aura, and the other is a button written in LWC.
If you look at the highlighted area in the code, you will see the language used to call each component is practically identical between the two types of components. When we render this code into our Lightning Experience page, the two buttons are practically identical.
If we had not explicitly labeled them “Aura” and “LWC” in the component name or button text, you would not have been able to tell which one had come from which framework. But, trust us — they are from different frameworks.
This is how Salesforce seamlessly moved to the new framework in their “Standard Lightning Component” library, and we never noticed it. The similarities allowed Salesforce to test the framework internally before releasing the tools to others. And, the performance boost to switching over to LWC could also be why Lightning Experience is in a much better state now than it was in past years.
While Aura developers embed LWC into their components all the time, diving into LWC requires research and forethought.
Understanding the differences between Aura and Lightning Web Components
Aura and LWC look completely identical to the admin user in Lightning Experience, and embedding LWC components into Aura is seamless to developers currently working in Aura. However, Aura developers wishing to write Lightning Web Components of their own may run into some issues.
The original Web Components framework was created by Google and the rest of the web community in the time after the introduction of Aura, so it makes sense that Web Components and Aura share very little in common other than achieving some of the same end goals.
Salesforce opted to keep Lightning Web Components as close to the original framework as possible in its design while still providing developers the tools needed to work within the Salesforce platform.
However, the shift means every part of the LWC programming language — from the type of files needed and the structure of each component to the naming conventions — is completely different from Aura. Many of the processes and best practices developers follow in Aura will have to be completely disregarded. Salesforce developers who are new to LWC may feel like they are starting over from scratch the moment they start their first web component.
Tips to ensure a smooth transition to Lightning Web Components
Here are tips to ease the shift from Aura to Lightning Web Components:
Study LWC capabilities - Read the Salesforce documentation and complete the related Trailhead modules.
Understand LWC limitations - You can wrap unsupported LWC experiences or tools within an Aura component, so refer to the list of LWC supported experiences and tools to determine which projects will require the workaround.
Embracing Lightning Web Components
The introduction of Lightning Web Components was one of the greatest improvements to Salesforce in the history of the platform. Salesforce Developers understand the impact, but it will probably go unnoticed to the majority of Salesforce users. However, the fact that users can’t tell the difference between Aura and Lightning Web Components is possibly the programming model’s greatest accomplishment.
The Aura rollout was not always smooth for users, developers, and the Salesforce platform itself. But, Salesforce found relief in the new Web Components standard that would offload much of the work from the platform onto the user’s browsers. The switch has resulted in improved performance from the system, and this improvement can be seen today thanks to the seamless transition within Lightning Experience.
Contact CRM Science Salesforce Consultants
It will take time for Salesforce developers to learn the drastically different Lightning Web Components framework. However, the lab coats at CRM Science have been using the LWC programming model since it was first introduced and can provide consulting expertise to companies looking to make the upgrade. In fact, CRM Science is among a small group of Lightning Master Navigator designated Salesforce consultancies.
Contact us to chat about your Salesforce Lightning Web Components puzzles.
