Lightning Web Components: the parts that actually matter

Template, class and metadata. Modern JavaScript on a rendering engine with rules, and the rules are the interesting part.

1. VideoAnatomy of a component, and the three filesPreview9 min
2. VideoReactivity, tracked state, and why your object did not re-render8 min
3. VideoLifecycle hooks, in the order they fire8 min
4. VideoconnectedCallback is not componentDidMount, and why that matters6 min
5. VideoTemplates: iteration, conditionals, and slots8 min
6. VideoPublic and private fields: @api versus a plain class property5 min
7. LabLab: build and deploy your first component15 min

The declarative path in, with a cache most people do not know is there until it serves them stale data.

1. VideoWire adapters, and the cache you did not know you had9 min
2. VideoWiring an Apex method versus a standard adapter7 min
3. VideorefreshApex, and when the cache actually needs busting6 min
4. VideoThe wire that never fires, diagnosed6 min
5. ReadingReading: wire adapter cache scope and when it resets5 min
6. LabLab: build a wired list that stays current14 min

Two more ways in, each with a different failure mode. Choosing wrong is the usual cause of a slow record page.

1. VideoImperative Apex, and when you need it8 min
2. VideoThe UI API, record forms, and getting record data without Apex8 min
3. Videolightning-record-edit-form versus a hand-built form6 min
4. VideoChoosing between wire, imperative Apex and the UI API6 min
5. VideoPromises and async/await inside a component method4 min
6. VideoErrors: reducing them, showing them, and not swallowing them7 min
7. LabLab: build a list component with server-side filtering15 min

Parent to child by property, and the API surface of a component that other people will reuse.

1. VideoPublic properties, getters, and the API surface of a component8 min
2. VideoSlots, and composing markup a parent controls6 min
3. VideoDesign attributes, so an admin can configure without a deploy6 min
4. VideoWhen a public property should be a getter instead4 min
5. ReadingReading: composition patterns worth copying5 min
6. LabLab: build a reusable child component with a typed API13 min

Child to parent by event, and everything else by a message channel that should stay a last resort.

1. VideoCustom events, bubbling, and composed8 min
2. VideoEvent payloads, and keeping them small on purpose6 min
3. ReadingLightning Message Service, and why it is a last resort6 min
4. VideoComponents in Flow screens and quick actions6 min
5. VideoEvent listeners added and removed without leaking5 min
6. LabLab: build a parent and two children that stay in sync14 min

The largest components in a real org run past three thousand lines. This module is the four tells that a component has to split, and how.

1. VideoA 3,225-line datatable and a 3,002-line docket scheduler, read as case studies9 min
2. VideoThe four tells that a component should have been two7 min
3. VideoSplitting a display component from its data and state7 min
4. VideoExtracting a JavaScript module that is not a component at all6 min
5. ReadingReading: a component-size budget worth setting as policy4 min
6. LabLab: split an overgrown component without changing its behaviour15 min

A caught error is not a handled one. The user needs to see something true, and the developer needs the rest.

1. VideoReducing an Apex error into a message a user can act on7 min
2. Videolightning-messages, toast events, and the inline error6 min
3. VideoLogging the full error while showing the short one6 min
4. VideoThe difference between a caught error and a handled one4 min
5. ReadingReading: error surfaces that lie, and what they cost5 min
6. LabLab: turn a swallowed error into a message a user trusts14 min

Focus order, labels and keyboard operation, tested the way a screen reader user actually experiences the component.

1. VideoAccessibility: focus, labels, and keyboard operation8 min
2. VideoARIA roles on a custom control, used sparingly and correctly6 min
3. VideoColour is never the only signal, checked against a real component5 min
4. VideoSkip links, landmark roles, and a component inside a modal5 min
5. VideoTesting accessibility with a screen reader, not just an automated scan4 min
6. LabLab: complete a component using only the keyboard13 min

Field users open Salesforce on a phone in a truck. If a component only works on a desktop it does not work, and a resized window does not prove otherwise.

1. VideoMobile is a requirement, not a variantField users open Salesforce on a phone in a truck. If a component only works on a desktop it does not work.8 min
2. VideoThe desktop table that does not render in the mobile app6 min
3. VideoWhy a resized browser window is not a phone5 min
4. VideoTouch targets, viewport quirks, and the mobile-safe layout5 min
5. VideoSafe-area insets, and the mobile chrome that eats your layout4 min
6. LabLab: verify a component on a real phone, not a simulator14 min

Rendering cost on a record page carrying eleven components, then the debugging skills and check that close the course.

1. VideoPerformance: rendering cost, and the record page with eleven components8 min
2. VideoDebugging from the browser, including the wire that never fired7 min
3. VideoDeploying one source component to a record page, an app page and a Flow screen6 min
4. ReadingReading: a component performance budget worth keeping5 min
5. ReadingReading: a pre-ship checklist for a new component5 min
6. LabLab: profile and fix a slow-rendering record page15 min
7. QuizCheck: Lightning Web Components14 min