Salesforce Visualforce Pages and Lightning Components Overview

Sometimes the standard Salesforce interface does not meet a specific business need. A company might need a custom data-entry form, a specialized dashboard, or a guided process with a unique look and feel. Salesforce provides two UI development technologies for this: the older Visualforce and the modern Lightning Web Components (LWC). Both let developers build custom pages and components that live inside Salesforce.

What Is Visualforce?

Visualforce is a tag-based markup language — similar to HTML — that Salesforce introduced in 2008. A Visualforce page is an XML-like file that defines a custom user interface. It runs on Salesforce servers and can display Salesforce data, accept user input, and execute Apex code in the background.

The Blueprint Analogy

  STANDARD SALESFORCE PAGE = Pre-built house (quick, standard layout)
  VISUALFORCE PAGE         = Custom-designed house from a blueprint
                             (takes more effort, looks exactly how you want)
  LIGHTNING WEB COMPONENT  = Modern prefab modular room
                             (fast, reusable, fits into any house)

A Simple Visualforce Page

<apex:page standardController="Account">

    <h1>Account Details</h1>

    <apex:detail subject="{!Account.Id}" relatedList="false"/>

    <p>Account Name: <apex:outputText value="{!Account.Name}"/></p>
    <p>Industry: <apex:outputText value="{!Account.Industry}"/></p>
    <p>Annual Revenue: <apex:outputText value="{!Account.AnnualRevenue}"/></p>

</apex:page>

Breaking this down:

• apex:page standardController="Account" — links this page to the Account object. Salesforce automatically provides the current Account record's data.
• {!Account.Name} — a merge field that pulls the Account's Name value and displays it.
• apex:outputText — a Visualforce component that renders text on the page.

Visualforce Controllers

Every Visualforce page needs a Controller — the Apex code that powers the page's logic.

• Standard Controller — built-in controller that Salesforce provides for every standard object. No code needed to display and edit standard record data.
• Standard Set Controller — built-in controller for working with lists of records (used for custom list views).
• Custom Controller — an Apex class you write from scratch to handle complex logic, calculations, or data from multiple objects.
• Controller Extension — adds methods to a Standard Controller without replacing it. The best of both worlds: standard behavior plus custom logic.

Where Is Visualforce Used Today?

Visualforce is in maintenance mode — Salesforce still supports it but recommends Lightning Web Components for new development. You still encounter Visualforce in:

• Legacy orgs built before Lightning Experience was available
• Email templates (Visualforce email templates remain widely used)
• PDF generation — Visualforce renders server-side PDFs cleanly
• Older AppExchange packages

What Are Lightning Components?

Lightning Components are the modern way to build custom UI in Salesforce. There are two generations:

• Aura Components — the first Lightning component framework, introduced around 2014. Still widely used but no longer the recommended choice for new development.
• Lightning Web Components (LWC) — introduced in 2019. Built on modern web standards (HTML, JavaScript, CSS) that developers already know from the broader web industry. Faster, simpler, and better supported.

This course focuses on LWC as it is the current standard.

Lightning Web Components (LWC)

A Lightning Web Component is a reusable UI piece built with standard HTML, JavaScript, and CSS. You create a component once and place it on multiple pages, record layouts, app pages, and Experience Cloud sites.

LWC File Structure

Each LWC consists of a folder containing three files:

  myComponent/
  ├── myComponent.html       (the template — what the user sees)
  ├── myComponent.js         (the JavaScript — logic and data handling)
  └── myComponent.js-meta.xml  (metadata — where the component can be used)

A Simple LWC Example

<!-- myComponent.html -->
<template>
    <div class="greeting-box">
        <h2>Hello, {userName}!</h2>
        <p>You have {taskCount} tasks due today.</p>
        <button onclick={handleClick}>View Tasks</button>
    </div>
</template>

// myComponent.js
import { LightningElement, track } from 'lwc';

export default class MyComponent extends LightningElement {
    userName = 'Priya';
    taskCount = 5;

    handleClick() {
        alert('Navigating to your task list...');
    }
}

The HTML template uses {userName} and {taskCount} — curly braces bind JavaScript properties to the template. When the property changes in JavaScript, the template updates automatically.

LWC Key Concepts

@wire: Connecting to Salesforce Data

The @wire decorator connects your component to Salesforce data automatically. When you wire a component to a SOQL query or a standard controller method, Salesforce fetches the data and passes it to your component — no manual API call needed.

import { LightningElement, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Account.Name';

export default class AccountName extends LightningElement {
    recordId; // passed in from the record page

    @wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD] })
    account;

    get accountName() {
        return this.account.data?.fields?.Name?.value;
    }
}

@api: Exposing Properties to Parent Components

The @api decorator makes a property or method accessible from outside the component. Parent components pass data into child components using public properties.

@track: Tracking Internal State

The @track decorator marks a property as reactive — when its value changes, the template re-renders. In modern LWC, all object and array properties are reactive by default, so @track is less commonly needed than before.

LWC vs. Visualforce: When to Use Which

Key Points

• Visualforce is a tag-based markup language for building custom pages — still used for PDFs, email templates, and legacy orgs.
• Visualforce pages connect to Apex controllers (standard, custom, or extension) to handle logic and data.
• Lightning Web Components are the modern standard — built with HTML, JavaScript, and CSS familiar from the wider web.
• Each LWC consists of an HTML template, a JavaScript class, and an XML metadata file.
• Use @wire to connect an LWC to Salesforce data, @api to expose properties externally, and @track for reactive internal state.