Section 1.1: Salesforce's Approach to Web Components

Salesforce is a cloud software company specializing in customer relationship management (CRM) services. According to the company, over 150,000 businesses across various industries leverage Salesforce to enhance their operations. Their customizable services allow companies to develop their own components, objects, and user interfaces. Given this scale, creating resilient and sustainable frontend architectures presents significant challenges.

Diego Ferreiro Val, Salesforce's principal architect, emphasizes the importance of durability: "If our customers write a component today, it has to be working in the next ten years."

Approximately six years ago, Salesforce seized the opportunity to revamp its frontend architecture from the ground up. Ferreiro noted at WebComponentsSF that developers were dissatisfied with the existing UI, which was nearly eight years old and overly proprietary. They sought a modern, standardized solution that would facilitate reuse.

"If we were to start over, what would we do?" — Diego Ferreiro Val

After months of examining various frameworks and analyzing leading tech companies' frontend architectures, they reached an interesting conclusion: the web platform has evolved without disrupting existing systems.

"Our goal is to not break our customers ever." — Diego Ferreiro Val

Salesforce recognized that aligning with established standards would provide the most future-proof solution. They found that Web Components could meet these needs effectively. The advantages of Web Components include:

• Interoperability
• Encapsulation
• Future-proofing
• Backward compatibility

By building on these standards, Salesforce is preparing for long-term success while ensuring their platform remains adaptable. Web Components allow for excellent encapsulation and interoperability across different applications, regardless of the frontend frameworks employed.

"It took us a while to arrive at this conclusion, but that is kind of at the core of what we are building." — Diego Ferreiro Val

However, implementing Web Components at an enterprise level was not without its challenges. Ferreiro and his team discovered that the Web Component standard offered a low-level API that wasn't suitable for direct customer exposure. To address this, they developed Lightning Web Components (LWC), which adds a layer of usability to simplify common issues encountered with Web Components.

Section 1.2: Lightning Web Components Explained

Lightning Web Components utilize core Web Component standards while providing the essentials for optimal performance in Salesforce-supported browsers. LWC is lightweight and enhances performance by utilizing native browser code. It improves ergonomics, accessibility, performance, and browser compatibility.

Ferreiro reported in 2019 that over 1 million components had been developed using Lightning Web Components, with 95% of developers affirming that Web Components represent the right direction for the company.

Significant progress has been made in web standards since Ferreiro's presentation in 2019, particularly concerning browser compatibility. As Salesforce's platform evolves, they can take advantage of more native APIs, which further enhances performance. Ultimately, Salesforce aims to reduce reliance on LWC, aspiring to utilize only web standards and eliminate dependence on external libraries.

"Our goal is for LWC to eventually disappear!" — Diego Ferreiro Val

Subsection 1.2.1: Examples of Salesforce Components

Salesforce provides a free trial of its platform, which allows users to explore its features and inspect the source code for custom elements. When examining the code, it’s easy to identify elements prefixed with "lightning-", such as lightning-base-combobox for search filters and lightning-icon for icons.

Section 1.3: Open Source Component Library

Salesforce has made its Base Lightning Web Components available on npm, allowing developers to easily incorporate them into their projects. To install, simply run:

npm install lightning-base-components

or

yarn add lightning-base-components

This library provides a variety of UI components, such as accordions, buttons, and carousels, which can be utilized in numerous projects.

About the Author

I am a Software Engineering Analyst at Accenture Song. We are always on the lookout for talented developers, so feel free to connect if you're interested in joining our team!

My passion lies in creating solutions that can significantly impact others' lives. For instance, if you're tired of sifting through your browsing history to locate previously viewed information, check out my Web Highlights Chrome Extension. It enhances productivity by organizing your research efficiently. You can highlight text on any webpage or PDF, and your highlights will sync to the web app at web-highlights.com, making them accessible from anywhere.

Further Reading

For more content, visit PlainEnglish.io. Sign up for our free weekly newsletter, follow us on Twitter and LinkedIn, and join our Community Discord to connect with others in the field.

This video, "5 Things Salesforce Developers Should Know About Lightning Web Components," provides an overview of essential insights for developers working with LWC.

In the video "The Future of Lightning Web Components: AMA with Salesforce Developers | February 2024," experts discuss the evolving landscape of web components and their implications for future development.