Getting Started with LWC
What is LWC ?
Lightning Web Components (LWC) is a modern programming model to build lightning components in salesforce platform. It is a framework for building web components using modern web standards like JavaScript, HTML and CSS. These web components are reusable building blocks encapsulated in their own DOM structure.
Features of LWC
Standard Web Components
LWC leverages standard web technologies such as JavaScript, HTML and CSS. This allow better interoperability with existing web standards.
Performance Optimization
It offers better performance than Lightning Aura. It involves various strategies like Virtual DOM which allows to efficiently track changes to component tree, Server Side Rendering which improves initial page load times, Lazy Loading allowing developers to defer loading of non-essential components and caching reduces unnecessary calculation overheads and server side calling.
Event-Driven Architecture
In Lightning Web Components, components communicate with each other using events. This allows loose coupling between components. It makes application more modular and easy to maintain. It helps to create generic components to increase reusability of component.
Lifecycle Hooks
Lightning Web Components provide a set of lifecycle hooks that allow developers to build a custom logic at different stages of component lifecycle. It is a callback method triggered at a specific phase of a component instance. There are three phases Mounting Phase, Unmounting Phase and Error Phase.
Security
It provides several security features and best practices to help developers to build secure applications. It provided Locker Service which isolates components from each other and from global scope. There is a built in mechanism provided in Lightning Components to protect against CSRF attacks.
Community and Resources
It has a growing community of developers and wealth of resources. Including documentation, tutorials and sample codes.
Difference between Lightning Aura and LWC
| Parameters | Lightning Aura | Lightning Web Components |
| Framework | Salesforce created proprietary Aura UI framework for developers to create dynamic web applications | LWC is a open source UI framework, directly built on web stack. |
| Programming Model | Aura Component Bundle consist of component or application file consist markup for component demo.cmp / demo.app, controller file client-side controller need to handle events demoController.js, Helper file for server side calls demoHelper.js, CSS file for styling demo.css, design, renderer and svg files | LightningComponentBundle contains LWC resources. Directory of LWC component contains html file demo.html, JavaScript file demo.js and meta.xml file demo.js-meta.xml |
| Compatibility | Aura Components cannot be used inside LWC | LWC components can be included in Aura Components |
| Interoperability with other JS Libraries | Tightly coupled with Aura Framework hence, limited interoperability with other JS frameworks and libraries | LWC offers better interoperability with existing web technologies and we can import various JS libraries |
| Performance and Delivery time | Lighting Aura Components offer good performance But, take longer time to build and deliver | LWC offers better performance due to lightweight architecture, virtual DOM and efficient rendering algorithm and much faster to deploy |
| Platform Dependency | Aura is a salesforce platform dependent | LWC is natively supported in a browser and much knowledge of salesforce is not required |
| Communication | In Aura we use Application Events to communicate between different components in DOM hierarchies. | In LWC we can use Lightning Messaging Service for communication between components. |
| Modern JavaScript features | Lightning Aura supports ES5 features and ES6 promises. It doesn’t fully leverage modern JS features | LWC JS support includes ES6, ES7, ES 8 excluding shared memory and atomics and some features of ES9 |
Overall, LWC offers a modern, performance oriented framework for building responsive and efficient web applications. It includes features and techniques designed to improve rendering performance, minimize loading times, and enhance overall user experience compared to older versions like Aura Components.
