SFDC Lessons

The nuts and bolts of Salesforce Configuration and Development

When it comes to building custom components for the Salesforce platform, developers have two main options: Aura Components and Lightning Web Components (LWC). While both frameworks are powerful and capable of building similar functionality, there are some key differences that make LWC a better choice in many cases.

One of the biggest advantages of LWC over Aura is its performance. LWC is built on web standards and modern JavaScript, which results in faster load times and more efficient rendering. This can be especially important when building complex components with a lot of data or logic.

Another advantage of LWC is its ability to work seamlessly with other JavaScript frameworks and libraries. This allows developers to use their existing skills and knowledge to build Salesforce components, which can be a big time-saver. Aura Components, on the other hand, have a more proprietary architecture and are less flexible in this regard.

LWC also has a more modern and intuitive syntax, which makes it easier to read and write code. This can help to reduce development time and make the code more maintainable.

In addition to these technical advantages, LWC also has a more active and engaged community. Salesforce has invested heavily in LWC and is actively promoting it as the future of custom component development. This means that developers can expect more resources, tutorials, and support for LWC in the future.

All in all, LWC is a more powerful, efficient, and modern framework than Aura Components. While Aura Components will continue to be supported for the foreseeable future, it’s clear that LWC is the way of the future, and developers would be wise to start learning it now.

LWC (Lightning Web Components) is considered a superior framework compared to Aura components for several reasons.

Performance: LWC is built on web standards, which makes it faster and more lightweight than Aura. LWC components are also designed to be more efficient in terms of memory usage, resulting in better performance overall.
Development experience: LWC is built on modern web development technologies such as HTML, CSS, and JavaScript, which are widely adopted and familiar to many developers. This allows developers to use their existing skills to build Salesforce applications.
Reusability: LWC components can be used both within Salesforce and outside of it, making it easy to reuse code across different projects. In contrast, Aura components are Salesforce-specific and cannot be used outside of the platform.
Community support: LWC is an open-source framework and has a strong community of developers contributing to it, which means more resources and support are available for developers.
Modularity: LWC components are self-contained and can be easily composed to build more complex features. This allows for better organization and maintainability of code. In contrast, Aura components often require more boilerplate code and can be more difficult to reason about.
TypeScript support: LWC provides built-in support for TypeScript, a strongly typed superset of JavaScript. This allows for better code organization and error checking, making it easier to spot and fix issues during development. Aura components do not have native support for TypeScript.
Advanced JavaScript features: LWC leverages modern JavaScript features such as JSX, web components, and ES6 classes. This allows for more expressive and powerful code. Aura components, on the other hand, are built on an older version of JavaScript and lack some of these advanced features.
Better testability: LWC components are built with testability in mind, and are easy to unit test using standard JavaScript testing frameworks such as Jest. Aura components, on the other hand, can be more difficult to test and often require additional boilerplate code to set up testable conditions.

An example of LWC component that demonstrates modularity and advanced features is a carousel component that can be easily integrated with other components to create a slideshow of images.

	<template>
	<div class="carousel">
	<slot></slot>
	<button class="carousel__button carousel__button--prev" onclick={prev}><</button>
	<button class="carousel__button carousel__button--next" onclick={next}>></button>
	</div>
	</template>

view raw carousel.html hosted with ❤ by GitHub

	import { LightningElement, track } from 'lwc';

	export default class Carousel extends LightningElement {
	@track currentSlide = 0;
	get slides() {
	return this.template.querySelectorAll('img');
	}
	prev() {
	if (this.currentSlide > 0) {
	this.currentSlide--;
	}
	}
	next() {
	if (this.currentSlide < this.slides.length - 1) {
	this.currentSlide++;
	}
	}
	connectedCallback() {
	this.slides[this.currentSlide].classList.add('is-active');
	}
	renderedCallback() {
	this.slides.forEach(slide => slide.classList.remove('is-active'));
	this.slides[this.currentSlide].classList.add('is-active');
	}
	}

view raw carousel.js hosted with ❤ by GitHub

This example shows how LWC component can be easily composed with other components and how it’s easy to reason about, test, and maintain. While in Aura component you will have to write a lot of boilerplate code to achieve the same functionality.