SFDCWallah

LWC OSS stands for Lightning Web Components Open Source, which is a framework for creating custom web components using HTML, JavaScript, and CSS.

It is based on the web standards for web components and supports modern browsers.

Web components are reusable UI elements that can be defined with HTML tags, styled with CSS, and enhanced with JavaScript.

They can communicate with each other using properties, events, and slots. They can also leverage native browser features such as shadow DOM, custom elements, and templates.

LWC OSS is a lightweight layer on top of the native web components that provides some additional features and benefits, such as:

• A declarative syntax for defining components using HTML templates.
• A reactive data binding system that automatically updates the UI when the data changes.
• A set of decorators that simplify common tasks such as accessing the DOM, defining properties and attributes, handling events, and connecting to services.
• A collection of base components that provide common UI elements such as buttons, icons, inputs, etc.
• A testing framework that allows you to write unit tests and integration tests for your components.
• A tooling ecosystem that includes a CLI, a VS Code extension, a playground, and a documentation site.

You can use LWC OSS to create web applications that run on any platform, such as Heroku, AWS, or your own server2. You can also use any CSS framework or library of your choice to style your components.

What is LWR?

LWR stands for Lightning Web Runtime, which is a tool for creating single-page applications using LWC OSS.

It provides a fast and lightweight runtime that optimizes performance and reduces boilerplate code. It also supports features such as:

• Routing: You can define the URL structure of your application and navigate between different views using the @lwr/router module.
• State management: You can manage the global state of your application using the @lwr/store module.
• Server-side rendering: You can render your application on the server side using Node.js and improve the initial loading time and SEO of your application.
• Code splitting: You can split your application code into smaller chunks that are loaded on demand using dynamic imports.
• Hot module replacement: You can update your application code without refreshing the browser using webpack.

You can use LWR to create web applications that run on Salesforce Platform or on your own server. You can also use any backend service or API of your choice to fetch or update data.

Conclusion

LWC OSS and LWR are two technologies that enable you to use Lightning Web Components, a framework for creating custom web components using HTML, JavaScript, and CSS.

They allow you to create web applications that run on any platform, using any stack and tools you prefer.

They also align with web standards and are open source, which means that you can contribute to the framework and shape its future.

How does LWC OSS differ from LWC in Salesforce?

LWC OSS and LWR are based on the same core technology as LWC in Salesforce, which is the framework for creating web components on the Lightning Platform.

However, there are some differences between them that you should be aware of:

• LWC in Salesforce uses a synthetic version of shadow DOM, which creates a virtual DOM as an in-memory representation of the DOM. This allows it to support older browsers that do not fully support native shadow DOM. LWC OSS uses native shadow DOM by default, which provides better encapsulation and performance. However, this also means that you cannot use global stylesheets or cascade styles across components.
• LWC in Salesforce provides some base components that are specific to the Lightning Platform, such as lightning-datatable, lightning-record-form, lightning-card, etc. These components leverage some platform features such as Lightning Data Service, UI API, SLDS, etc. LWC OSS does not include these components or features. However, you can use any third-party component or library of your choice to achieve similar functionality.
• LWC in Salesforce provides some decorators that are specific to the Lightning Platform, such as @wire, @api, @track, etc. These decorators allow you to access data or metadata from the platform or communicate with other components on the page. LWC OSS does not include these decorators or features. However, you can use other decorators or modules to achieve similar functionality.
• LWC in Salesforce uses Aura as the underlying framework for rendering components on the page. Aura provides some features such as event bubbling, component lifecycle hooks, error handling, etc. LWC OSS does not use Aura or its features. However, you can use native web component features or LWR features to achieve similar functionality.