---
schema_version: "1"
id: 57308e594a5f297db4e55a99362873c7fc279b0f791ebb6080fc78c11aeed33c
title: How Do Visualforce Pages Compare to S-Controls?
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/pages_intro_vs_scontrols.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.pages_intro_vs_scontrols.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 155feffc353d551936b077ae0a37c19a24593ffa4e3bbf8de86ceb93b636b709
description: Visualforce pages are considered the next-generation of s-controls and should be used instead of s-controls whenever possible, both for their increased performance and the ease with which they can be written.
products:
  - Salesforce Platform
release: "264"
---
# How Do Visualforce Pages Compare to S-Controls?

Visualforce pages are considered the next-generation of s-controls and should be used instead of s-controls whenever possible, both for their increased performance and the ease with which they can be written.

Visualforce pages supersede s-controls. Organizations that haven't previously used s-controls can’t create them. Existing s-controls are unaffected, and can still be edited.

The following table outlines the differences between Visualforce pages and s-controls.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col style="width:33.33333333333333%">
          <col style="width:33.33333333333333%">
          <col style="width:33.33333333333333%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d31319e46">&nbsp;</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d31319e48">Visualforce Pages</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d31319e51">S-Controls</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e46 ">
              <strong>Required technical skills</strong>
            </td>

            <td data-label="Visualforce Pages" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e48 ">HTML, XML</td>

            <td data-label="S-Controls" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e51 ">HTML, JavaScript, Ajax Toolkit</td>

          </tr>
          <tr class="">
            <td data-label="" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e46 ">
              <strong>Language style</strong>
            </td>

            <td data-label="Visualforce Pages" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e48 ">Tag markup</td>

            <td data-label="S-Controls" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e51 ">Procedural code</td>

          </tr>
          <tr class="">
            <td data-label="" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e46 ">
              <strong>Page override model</strong>
            </td>

            <td data-label="Visualforce Pages" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e48 ">Assemble standard and custom components using tags</td>

            <td data-label="S-Controls" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e51 ">Write HTML and JavaScript for entire page</td>

          </tr>
          <tr class="">
            <td data-label="" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e46 ">
              <strong>Standard Salesforce component library</strong>
            </td>

            <td data-label="Visualforce Pages" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e48 ">Yes</td>

            <td data-label="S-Controls" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e51 ">No</td>

          </tr>
          <tr class="">
            <td data-label="" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e46 ">
              <strong>Access to built-in platform behavior</strong>
            </td>

            <td data-label="Visualforce Pages" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e48 ">Yes, through the standard controller</td>

            <td data-label="S-Controls" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e51 ">No</td>

          </tr>
          <tr class="">
            <td data-label="" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e46 ">
              <strong>Data binding</strong>
            </td>

            <td data-label="Visualforce Pages" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e48 ">
              <p>Yes</p>
              <p style="margin-bottom:0;">Developers can bind an input component (such as a text box) with a particular
                field (such as Account Name). If a user saves a value in that input component, it is also
                saved in the database.</p>
            </td>

            <td data-label="S-Controls" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e51 ">
              <p>No</p>
              <p style="margin-bottom:0;">Developers can't bind an input component with a particular field. Instead, they
                must write JavaScript code that uses the API to update the database with user-specified
                field values.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e46 ">
              <strong>Stylesheet inheritance</strong>
            </td>

            <td data-label="Visualforce Pages" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e48 ">Yes</td>

            <td data-label="S-Controls" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e51 ">No, must bring in Salesforce stylesheets manually</td>

          </tr>
          <tr class="">
            <td data-label="" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e46 ">
              <strong>Respect for field metadata, such as uniqueness </strong>
            </td>

            <td data-label="Visualforce Pages" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e48 ">
              <p>Yes, by default</p>
              <p style="margin-bottom:0;">If a user attempts to save a record that violates uniqueness or
                requiredness field attributes, an error message is automatically displayed and the user can
                try again.</p>
            </td>

            <td data-label="S-Controls" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e51 ">
              <p>Yes, if coded in JavaScript using a <code>describe</code>
                API call</p>
              <p style="margin-bottom:0;">If a user attempts to save a record that violates uniqueness or requiredness
                field attributes, an error message is only displayed if the s-control developer wrote code
                that checked those attributes.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e46 ">
              <strong>Interaction with Apex</strong>
            </td>

            <td data-label="Visualforce Pages" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e48 ">Direct, by binding to a custom controller</td>

            <td data-label="S-Controls" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e51 ">Indirect, by using Apex <code>webService</code> methods
              through the API</td>

          </tr>
          <tr class="">
            <td data-label="" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e46 ">
              <strong>Performance</strong>
            </td>

            <td data-label="Visualforce Pages" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e48 ">More responsive because markup is generated on the Lightning Platform</td>

            <td data-label="S-Controls" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e51 ">Less responsive because every call to the API requires a round trip to the
              server—the burden rests with the developer to tune performance</td>

          </tr>
          <tr class="">
            <td data-label="" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e46 ">
              <strong>Page container</strong>
            </td>

            <td data-label="Visualforce Pages" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e48 ">Native</td>

            <td data-label="S-Controls" class="slds-cell-wrap" style="vertical-align:top;" headers="d31319e51 ">In an iFrame</td>

          </tr>
        </tbody>
      </table>