How do you migrate Aura components to LWC?

Aura -> LWC is similar to Visualforce -> LWC but easier because the component model is similar.

Reasons to migrate:

• Performance — LWC is faster (native rendering vs custom engine).
• Modern tooling — LWC works with VS Code / Jest / ESLint cleanly.
• Skill transfer — LWC is closer to React/Vue/Angular paradigms.
• Future investment — Salesforce is investing in LWC; Aura is in maintenance mode.

Mapping Aura concepts to LWC:

| Aura | LWC | |---|---| | <aura:component> | <template> + JS class | | <aura:attribute name="x" type="String"/> | @api x; (public) or x; (private) | | <aura:handler event="aura:doneRendering"> | renderedCallback() | | <aura:method> | @api decorated method | | Server-side: $A.callServerMethod | import myMethod from '@salesforce/apex/...' | | Aura events | CustomEvent | | aura:if | if:true={x} | | aura:iteration | for:each={items} | | Locker | Lightning Web Security (newer, less restrictive) |

Migration steps per component:

1. Inventory — list all Aura components. Setup -> Lightning Components.
2. Categorise — simple display, interactive, server-heavy, custom JS.
3. Plan dependency order — child components first, then parents.
4. Rewrite — for each component:

• Convert .cmp markup to .html template (with directive renaming).
• Convert controller.js / helper.js to a single .js class.
• Convert events to CustomEvents.
• Replace $A.enqueueAction with imperative or @wire Apex calls.
• Move attributes to @api properties.

1. Test thoroughly — Aura interop with LWC has subtle differences; test in real Lightning pages.
2. Replace usage — find every place the Aura component was used; replace with the LWC equivalent.
3. Deprecate / delete the Aura component.

Coexistence strategy — Aura and LWC can interoperate on the same page during migration. An Aura parent can host LWC children; LWC can dispatch events that Aura handles. Migration doesn't have to be all-or-nothing.

Common gotchas:

• Aura events are different — Aura's APPLICATION and COMPONENT events have richer routing than CustomEvent. Some patterns need rearchitecting (e.g., use Lightning Message Service for cross-tree communication).
• Attribute types — Aura supports more types; LWC's @api only supports primitives, arrays, plain objects.
• Locker vs LWS — LWS is more permissive but stricter on certain patterns. Test with LWS enabled.
• Two-way binding in Aura ({!v.x}) doesn't exist in LWC — explicit setter or event needed.

Tooling:

• VS Code Salesforce extensions edit both Aura and LWC.
• Jest for LWC unit tests.
• The migration is an opportunity to improve test coverage — Aura tests are notoriously hard.

A typical migration: 1 senior LWC dev migrates 5-10 components per week, depending on complexity. A 200-component org takes 6-12 months.