Salesforce Lightning Web Components (LWC) was launched in December 2018 as a part of the Winter ’19 release. This release introduced Lightning Web Components as a new framework for building web applications and as an alternative to Aura components. Since then, LWC has become increasingly popular among Salesforce developers due to its modern approach to web development, improved performance, and seamless integration with other Salesforce services.
In this series of articles, we will learn the development of Lightning Web Components from scratch. Below is the index of the article series.
Lightning Web Components Course Curriculum
| Unit 1: Introduction to LWC | 1. What LWC is and why it matters? 2. Pre-requisites to learn LWC 3. Aura vs LWC |
| Unit 2: Getting Started with LWC | 1. Setting up environments for LWC development 2. Basics of Javascript 3. First LWC Component 4. Using HTML Templates |
| Unit 3: Playing with Data in LWC | 1. Data Binding 2. Intro to LWC Decorators |
| Unit 4: Lifecycle Flow & Hooks in LWC | 1. Lifecycle Flow 2. Constructor 3. connectedCallback and disconnectedCallback 4. renderedCallback 5. errorCallback |
| Unit 5: Concept of LWC Wire and Imperative | 1. Import Apex Methods 2. Expose Apex Methods to Components 3. Intro to LWC Wire service and error handling 4. Using Imperative |
| Unit 6: Communication between components | 1. Create, handle, and dispatch events 2. Parent-to-child communication 3. Child-to-parent communication |
| Unit 7: Debugging LWC Components | Debugging LWC Components |
Introduction to Salesforce LWC
1. What LWC is, and why it matters?
Salesforce Lightning Web Components (LWC) is a robust framework for building web applications on the Salesforce platform. It is a lightweight and modern approach to web development that allows developers to create custom user interfaces.
LWC offers many benefits over traditional development approaches, including faster development, improved performance, and easier maintenance. With LWC, developers can build scalable and reusable components that can be easily reused within the platform.
In the initial days, Salesforce started with Visual Force, then later launched Aura in 2014. In just 4 years, Salesforce came up with “Lightning Web Components” which is now widely adopted. LWC offers a more modern development experience, with a simpler and more intuitive syntax, better tooling, and easier debugging compared to other Salesforce development frameworks. This helps to improve developer productivity and reduce development time and cost.
LWC is designed to be highly performant, with faster load times and better rendering speed compared to other Salesforce development frameworks. This is achieved through the use of server-side rendering, which reduces the amount of code that needs to be downloaded and processed by the browser.
2. Pre-requisites to learn LWC
- HTML and JavaScript: LWC is built using web standards and technologies such as HTML, CSS, and JavaScript. Therefore, having a good understanding of these languages is essential for learning LWC.
- Salesforce Platform: LWC is designed specifically for the Salesforce platform. Therefore, you should have a basic understanding of the Salesforce platform, including its data model, security model, and other core concepts.
- Apex programming language: Although not strictly necessary, having some knowledge of the Apex programming language can be helpful when building LWC components that require server-side logic.
- Basic understanding of MVC architecture: LWC uses the Model-View-Controller (MVC) architecture to separate the presentation, data, and logic layers of an application. Therefore, having a basic understanding of this architecture can be helpful in understanding how LWC components work.
- Familiarity with development tools: To develop LWC components, you will need to use a number of development tools, including a code editor, a web browser, SFDX CLI, and the Salesforce Developer Console. Therefore, having some familiarity with these tools can be helpful.
In summary, to learn LWC, you should have a good understanding of web development and the Salesforce platform, as well as some familiarity with the Apex programming language and the MVC architecture. Having a good set of development tools can also be helpful in getting started with LWC.
3. Aura vs LWC
| Feature | Aura Components | Lightning Web Components |
| Development Model | MVC | Web Components |
| Technology | Uses Aura Framework | Uses Aura Framework |
| Performance / Speed | Comparatively Slower | Comparatively Faster |
| Complexity | Comparatively Complex | Easy to learn and understand |
| Data Binding | Uses two-way data binding | Uses one-way data binding |
| Modularity | Uses Aura bundles | Uses modules |
| Code Size | Comparatively Larger | Comparatively smaller |
| Learning Curve | Steep | Easy to use and learn |
| Reusability | Reusable components are possible | Reusable components are possible |
| Debugging | Debugging is complex | Its comparatively easier |
Aura Components and LWC have different development models and use different technologies. While Aura Components are more complex and have a steeper learning curve, LWCs are simpler and easier to understand. LWC components are faster, more modular, and have a smaller code size compared to Aura components. Additionally, LWC offers better debugging capabilities.
In summary, Lightning Web Components are a Modern framework for Salesforce development, which is packed with lots of pros and features. That’s why I feel it is worth learning.
Abhishek
Mr. Abhishek, an experienced Salesforce Technical Lead with over 4+ years of development experience and 8x Salesforce Certified. His expertise is in Salesforce Development, including Lightning Web Components, Apex Programming, and Flow has led him to create his blog, SFDC Hub.