User Interface Development Considerations

Salesforce has two different desktop user interfaces: Lightning Experience and
Salesforce Classic. This module is designed for Lightning Experience.

You can learn about switching between interfaces, enabling Lightning Experience, and more in the Lightning Experience Basics module here on Trailhead.

Learning Objectives

After completing this module, you’ll be able to:

Name and describe the difference between the two models for developing web
applications.

Describe two different ways of approaching building web apps with Visualforce.

Describe strengths and trade-offs of building web apps with Visualforce or with Lightning components.

List at least three different scenarios where it makes sense to use either Lightning components or
Visualforce.

Raising the Bar for Web App User Interfaces

Over the last decade or more, we’ve all seen the bar continually be raised for user
experience in web applications. Users expect responsive, fully featured, and highly
interactive, immersive experiences literally at their fingertips.

We first saw this in single-purpose apps. Services like Google Maps introduced direct
manipulation of user interface elements. Analytics applications brought dynamic,
interactive chart drill-downs. Even the humble sign-up or log in form comes with dynamic
error feedback when users enter invalid data, animations, transitions, and more.
Interactivity is no longer a novelty, it’s the norm.

And the scale has grown. The expectation for individual components has quickly spread to
the core application experience. Today web applications feature things like sliding
menus, animated page transitions, and dynamic master-details. There’s also app-style
elements such as overlays and modal windows. The difference between native applications
and web applications has never been smaller.

So what does this mean for Salesforce?

The traditional Salesforce
experience, lovingly known as Salesforce Classic, is an example of a
page-centric web application model. It’s great for basic functionality, but
it’s challenging to deliver the new, more dynamic experience that users expect.
Fundamentally, this is because it relies on the server to generate a new page every time
you interact with the application.

To deliver a more interactive experience, you need help from JavaScript on the
client-side. In this new app-centric model, JavaScript is used to create, modify,
transform, and animate the user interface rather than completely replacing it a page at
a time. This model is exciting, interactive, and fluid. This is the new Lightning Experience.

Both the page-centric and app-centric models are here to stay. A quick look around the
web is enough to show that most web applications take advantage of both approaches.
Combining these models lets applications deliver the right type of experience for the
right use case.

Let’s take some time to explore the different options that the Salesforce Platform offers for
these models.

Classic Visualforce

Visualforce is a robust, mature platform for building page-centric apps. The Visualforce framework provides
a robust set of tags that are resolved on the server, and that work alongside standard
or custom controllers to make database and other operations simple to implement.

Let’s review some basics.

UI Generation

Server-side

Data and Business Logic

Apex standard or custom controller

Workflow

User requests a page

The server executes the page’s underlying code and sends the
resulting HTML to the browser

The browser displays the HTML

When the user interacts with the page, return to step one

Pros

Tried and true model

Easy to implement for greater productivity

Naturally splits large applications into small, manageable
pages

Has built-in metadata integration

Caveats

Limited interactivity (aside from added JavaScript
functionality)

Higher latency, which degrades mobile performance

Visualforce is conceptually
similar to other page-centric technologies like PHP, ASP, JSP, and Ruby on Rails. Salesforce’s rich metadata
infrastructure makes Visualforce a productive solution. The standard controller makes it easy to access objects
directly and via relationships without executing a single query. Other metadata-aware
components are similarly plug-and-play: add markup to a page and you’re done. These
capabilities are alive and well on the platform, and they’re still suitable for many use
cases.

Visualforce as a JavaScript Application Container

When you think about it, Visualforce pages are just HTML pages with extra tags resolved
by the server. As a result, you can use an empty Visualforce page as a container for a
JavaScript application. In this scenario, you don’t use Visualforce tags to build your
user interface. Instead, you load your JavaScript application in an empty page. Then the
user interface is generated on the client-side by the JavaScript application. These
applications are generally referred to as single-page applications, or
SPAs, and are often built using third-party frameworks like AngularJS or React.

Let’s review some basics.

UI Generation

Client-side (mostly JavaScript)

Data and Business Logic

Remote Objects or JavaScript Remoting, Apex controller

Workflow

The user requests the “empty” Visualforce page containing a page
skeleton and JavaScript includes

The page is returned to the browser

The browser loads the JavaScript application

The JavaScript application generates the UI

When a user interacts with the application, the JavaScript modifies
the user interface as needed (return to the previous step)

Pros

Enables highly interactive and immersive user experiences

Caveats

Complex

No built-in metadata integration

Lack of an integrated developer experience. The Lightning Platform
Developer Console doesn’t explicitly support these JavaScript
applications. Typically, you have to load them as static resources,
and that’s a cumbersome experience.

We want to be clear. If you can live with the caveats we’ve described, this is a
perfectly good way to build interactive applications today. It’s the reason we
originally built toolkits like Remote Objects and JavaScript remoting. If you’re a
confident AngularJS or React or other JavaScript framework developer, your expertise
will take you a long way developing apps for Salesforce with the tools you know.

But, if you’re open to new things, we think we have some great ideas for what the next
level is in web-based application development.

Lightning Components

Lightning components are part of the new Salesforce user interface framework for
developing dynamic web applications for desktop and mobile devices. They use JavaScript
at the client-side and Apex at the server-side to provide the data and business logic.

Let’s take a look at an overview.

UI Generation

Client-side (JavaScript)

Data and Business Logic

Lightning Data Services, Apex controller

Workflow

The user requests an application or a component

The application or component bundle is returned to the client

The browser loads the bundle

The JavaScript application generates the UI

When the user interacts with the page, the JavaScript application
modifies the user interface as needed (return to previous step)

Pros

Enables highly interactive and immersive user experiences

Aligns with Salesforce user interface strategy

Built on metadata from the foundation, accelerating development

Both the Force.com IDE and the Developer Console support Lightning
components, providing an integrated developer experience

Caveats

Steeper, longer learning curve compared to Visualforce

Higher complexity than Visualforce—you’re building an
application, not a page

Since Lightning components are new, there are still some features
that aren’t supported

There are a limited number of out-of-the-box components

We need to be straight with you. These caveats aren’t small considerations. We’ll talk
about how they apply to your organization in a bit. But! We’re working hard—really
hard—on reducing the size of these considerations. We’re super-excited to bring
improvements to you, as soon as we can.

Choosing the Right Tool for the Job

Visualforce has been around for a while, it’s a mature, well-understood platform for
building your apps. It’s not going away. Lightning Components is the new kid on the
block. It’s got a lot going for it, but, well, you know. It’s a stranger to you right
now.

Here’s the thing: You don’t have to choose one or the other.

Think of the page-centric and app-centric models as tools in your development tool
belt—one isn’t always better than the other, and you’ll get the most out of them if you
understand their strengths and their trade-offs. Use the right tool for the job at
hand.

Here are some guidelines to help you decide—but remember, you’re The Decider. In the end,
use the tool that feels right to you. Also, keep in mind that tools evolve. These
guidelines will evolve too.

Job

Recommendation

I’m Developing for Lightning Experience

We highly recommend Lightning Components. Lightning Experience was
built with Lightning Components, and the two fit together
like hand and glove.

You can certainly use Visualforce if you have
existing code or a project underway. Visualforce for Lightning
Experience is fully supported, with a few constraints.

But you
won’t find a better tool for Lightning Experience than working in
its native language, Lightning Components.

I’m Developing for the Salesforce Mobile Application

We recommend Lightning Components. Visualforce characteristics,
especially the page-centric orientation, can be a poor match for mobile
apps with limited, high-latency network connections and limited compute
resources. Lightning Components, by contrast, was designed
specifically to handle this context.

Both Visualforce and
Lightning Components use similar tag-based markup. For example,
Visualforce markup for an input field is <apex:inputText> while for Lightning Components
it’s <lightning:input>.

So what’s the difference?
Well, Visualforce processes markup tags on the Salesforce server.
Lightning Components process markup on the client. The advantage of
processing on the client is that the HTML block for the entire page
isn’t passed back and forth between the client and the server with
every interaction.

With a few exceptions, Lightning Components
are better for Salesforce mobile development. Some cases call for
Visualforce as a JavaScript application. See the Lightning
Components Developer’s Guide for more information.

I’m Building a Page-Centric Experience with Limited Client-Side
Logic

Use Visualforce pages to ensure development velocity and
manageability.

I’m Building an Interactive Experience with JavaScript to Meet
User Experience Requirements

Use Lightning Components but refer to limitations documentation
first.

I’m Committed to a JavaScript Framework Such as AngularJS or
React

Use a Visualforce page as a container for your third-party framework,
such as AngularJS or React, and your application.

Continue to use Visualforce. Consider opportunistically moving
elements to Lightning Components using Lightning Components for
Visualforce.

I’m Committed to Investing in the Latest Technology

You’re right there with us! Dive in to Lightning Components. Start
with the Lightning Components Basics Trailhead module.

I’m Starting a Brand New Project

Use Lightning Components. If you’re not familiar with them, there’s
no better time than now to learn!

I’m Building a Flow to Guide Users Through a Business
Process

Use Lightning Components to customize the functionality and
look-and-feel of the flow’s screens.

Choosing the Right Tool for Your Organization

When you think about choosing a tool, it’s important to focus on more than just the job
at hand. You also want to consider your organization as a whole and your role within
your organization. Let’s look at how some different roles can best leverage Salesforce’s development
models.

Role

Recommendation

ISV Partner

Start using Lightning components for new apps or new features in existing apps. Package
these units for subscriber use in both Salesforce Classic
and Lightning Experience.

SI

Start using Lightning components for new implementations. For in-progress
implementations, continue using Visualforce.

Professional developers who are JavaScript gurus and experienced
with Visualforce

Continue using Visualforce, but consider checking out the Lightning App Builder.

Point-and-click admins

Use the Lightning App Builder to create apps and customizations.
Buddy up with developers and partners to build custom Lightning components.

Migrating to Lightning
Components

Here’s the good news. Despite the shift to Lightning Experience and an increased
focus on Lightning
components, your Visualforce
pages still work on Salesforce. It doesn’t
matter if you’re using the new interface or your old friend Salesforce Classic—Visualforce is able to work
with both. You don’t have to convert any existing Visualforce pages to keep
using them for a long time.

But, because web applications are taking more advantage of the app-centric model, we
encourage all Salesforce
developers to learn at least the basics of Lightning components. You’ll
want to use these components in your future development work.

Now is the perfect time for you to take the first steps. Features such as the Lightning
App Builder and Lightning
Components for Visualforce let
you “dip your toe in the water,” and try using as little as a single Lightning component in a new
or existing page. You can use these embedded components in both Lightning Experience and Salesforce Classic. It’s so easy, you’d
be nuts not to give it a try.

We know that migrating to a new development framework is daunting. But we’re here for
you. This trail is loaded with all the tips, tricks, and gotchas that you need to
successfully adopt Lightning Experience development.