JavaScript Basics

A quick, easy introduction to JavaScript core concepts.

This session provides a rapid yet comprehensive overview of essential JavaScript concepts crucial for LWC development. We'll cover:

• Data Types: Primitives (Number, String, Boolean, Null, Undefined, Symbol, BigInt) and Objects. Emphasis on how these are used within the context of LWC.
• Variables and Operators: Declaring variables (var, let, const), assignment operators, arithmetic operators, comparison operators, logical operators, and the spread syntax. We'll discuss best practices for variable declaration and scoping.
• Control Flow: Conditional statements (if, else if, else, switch), loops (for, while, do...while), and how to use them effectively to control the execution of your LWC code.
• Functions: Defining and calling functions, function parameters, return values, arrow functions, and the importance of modular code in LWC. Closures and their relevance.
• Objects and Arrays: Creating and manipulating objects and arrays, including common methods like map, filter, reduce, forEach, and how these are used for data handling within LWCs.

This session is designed to quickly get participants up to speed with the JavaScript skills needed to build powerful LWCs, even if they have limited prior JavaScript experience.

JavaScript Advanced Topics

Understanding the foundation of LWC.

This session delves into more advanced JavaScript concepts crucial for modern web development and essential for mastering LWC. We'll explore:

• Asynchronous JavaScript: romises, async/await, and how to handle asynchronous operations, which are essential for interacting with APIs and the Lightning Data Service. We'll cover event loops, callbacks, and best practices for managing asynchronous code.
• ES Modules: Understanding how to import and export modules, a key aspect of organizing and reusing LWC code. We'll discuss different module formats and how they impact code structure and maintainability.
• Web Components Standard: A high-level overview of the four main specifications: Custom Elements, Shadow DOM, HTML Templates, and HTML Imports (now largely replaced by ES Modules). This introduction lays the groundwork for later deep dives.
• The Benefits of Web Components: Discussing the advantages of using Web Components, including reusability, maintainability, performance, and interoperability. This will also be revisited in more detail later in the training.
• How LWC Leverages Web Components: Briefly explaining how the Lightning Web Components framework builds upon the Web Components standard, providing a developer-friendly way to create robust components within the Salesforce ecosystem.

This session bridges the gap between basic JavaScript and the more specialized knowledge required for LWC development, setting the stage for understanding the underlying technologies.

LWC Structure & Syntax

Build and customize LWCs effortlessly.

This session focuses on the practical aspects of building LWCs:

• Component Structure: Understanding the different files that make up an LWC (JavaScript controller, HTML template, CSS stylesheet, and metadata file).
• Template Syntax: Working with the HTML template language, including data binding, expressions, conditional rendering, iteration, and event handling.
• JavaScript Controller: Writing the JavaScript code that controls the component's behavior, including handling events, interacting with data, and updating the template.
• Decorators: Using LWC decorators (@api, @track, and @wire) to simplify development and improve code readability. Detailed explanation of each decorator and its use cases.
• Component Lifecycle: Deep dive into the LWC component lifecycle and how to use lifecycle hooks effectively.
• Modules and Imports: Organizing and reusing code using JavaScript modules and imports.
• Best Practices: Recommended approaches for structuring LWC code and maximizing performance.

Participants will learn how to create, customize, and manage LWCs efficiently.

LWC Event Management

Handle interactions like a pro.

This session covers how to handle user interactions and communicate between components using events:

• Handling DOM Events: Responding to standard DOM events like clicks, mouseovers, and form submissions within an LWC.
• Custom Events: Creating and dispatching custom events to communicate between parent and child components. Understanding event bubbling and capturing.
• Passing Data with Events: Efficiently transferring data between components using custom events.
• Event Best Practices: Strategies for organizing and managing events in complex component hierarchies.
• Lightning Message Service (LMS): Introduction to LMS for communicating between LWCs and Aura components (and even Visualforce pages) that are not directly related in the component tree.

This session will empower developers to build interactive and dynamic LWC applications.

Lightning Data Service

Unlock seamless Salesforce data integration.

This session explores how to seamlessly integrate LWCs with Salesforce data using the Lightning Data Service (LDS):

• @wire Adapter: Using the @wire decorator to efficiently retrieve data from Salesforce objects and Apex controllers. Different wire adapters for different use cases.
• Wire Parameters: Dynamically updating wire parameters to fetch specific data based on user interactions or other component logic.
• Caching: Understanding how LDS caches data to improve performance and reduce server requests.
• Imperative Apex Calls: Making imperative Apex calls for more complex data operations.
• Working with Records: Creating, updating, and deleting Salesforce records using LDS.
• Error Handling: Implementing robust error handling for data operations.

Participants will learn how to efficiently access and manipulate Salesforce data within their LWCs.

Salesforce Lightning Design System (SLDS)

Design user interfaces that stand out.

This session focuses on creating visually appealing and consistent user interfaces using the Salesforce Lightning Design System (SLDS):

• SLDS Basics: Introduction to the SLDS framework and its core principles.
• SLDS Components: Using pre-built SLDS components to quickly create standard UI elements.
• Styling with SLDS: Customizing the appearance of components using SLDS CSS classes and tokens.
• Responsive Design: Creating components that adapt to different screen sizes and devices.
• Best Practices: Following SLDS best practices for creating consistent and user-friendly interfaces.

This session will enable developers to create professional-looking LWCs that align with the Salesforce look and feel.

LWC Security & Debugging

Ensure robust, secure components.

This session covers essential security and debugging practices for LWC development:

• Debugging Techniques: Using browser developer tools and other debugging techniques to identify and fix issues in LWC code.
• Data Sanitization: Sanitizing user input to prevent security risks.
• Security Best Practices: Protecting against common web vulnerabilities like Cross-Site Scripting (XSS), Cross-Site Request Forgery (CSRF) etc.
• Security Review Process: Understanding the importance of security reviews for LWC applications.

Participants will learn how to build secure and reliable LWCs.

LWC Testing

Validate your code for peak performance.

This session focuses on writing unit and integration tests for LWCs:

• Jest Testing Framework: Introduction to Jest and how to use it for LWC testing.
• Testing Component Logic: Writing tests to verify the behavior of LWC JavaScript code.
• Testing Component Rendering: Testing the HTML output of LWCs.
• Mocking Dependencies: Mocking external dependencies like LDS and Apex calls for effective testing.
• Test Coverage: Measuring test coverage to ensure that all parts of the code are adequately tested.

This session will equip developers with the skills to write comprehensive tests for their LWCs.

Lightning Out and LWC OSS

Extend your applications beyond Salesforce.

This session explores how to use LWC outside of the Salesforce platform:

• Lightning Out: Embedding LWCs in external web pages and applications.
• LWC Open Source (OSS): Developing and deploying LWCs in non-Salesforce environments.
• Use Cases: Exploring different use cases for Lightning Out and LWC OSS.
• Setting up LWC OSS: A practical walkthrough of setting up an LWC OSS project.

This session will broaden participants' understanding of the versatility of LWC.

Final Project

Apply your knowledge to a real-world scenario.

This session culminates the training with a hands-on project that allows participants to apply their newly acquired LWC skills to a realistic scenario. Participants will work on a project that involves building a complete LWC application, from design to implementation and testing. This provides valuable practical experience and solidifies their understanding of the concepts covered throughout the training. Guidance and support will be provided during the project.