Salesforce Developer: User Interface

Three UI stacks, one exam

You must place a requirement into the correct stack. Lightning Web Components are standard JavaScript with a bundle (component.js, component.html, component.js-meta.xml) and are the default for new development. Aura components are the older framework with markup, controller and helper files. Visualforce is server-rendered markup backed by a standard or custom Apex controller.

Concepts

• LWC decorators: @api exposes public properties and methods; @wire provides reactive, cached data from Apex or Lightning Data Service; imperative Apex is for DML, control over timing, and avoiding the wire cache.
• Lifecycle hooks: constructor, connectedCallback, renderedCallback, disconnectedCallback.
• Events: a child notifies a parent with CustomEvent, using bubbles: true and composed: true to cross shadow boundaries; the parent listens with an on<eventname> attribute.
• Declarative UI: Lightning App Builder pages, page layouts, record types (which drive picklist values and layout assignment), dynamic forms, and permission-set-driven visibility.

Trap

@wire is reactive and cached, so it is the wrong tool for "call Apex when the user clicks Save." Use imperative Apex and refresh the wire afterwards with refreshApex. A second classic trap: expecting a page layout to enforce data integrity. Layouts are UI only; records created through the API ignore them. "Enforce for every entry point" means a validation rule or Apex.

Worked example

A child component with a search box must tell its parent which record was selected. The child dispatches new CustomEvent('selected', { detail: id, bubbles: true, composed: true }); the parent's markup declares onselected={handleSelected} and reads event.detail. Without bubbles and composed, the event never leaves the child's shadow tree.

Rule of thumb

Choose LWC for new custom UI, Aura only for maintenance, and Visualforce for email templates, PDFs and legacy pages.