📣 Attention Salesforce Certified Trailblazers! Link your Trailhead and Webassessor accounts and maintain your credentials by December 14th. Learn more.
close
trailhead

User Interface Development Considerations

Lightning bolt icon used to indicate that the content is for Lightning Experience

Attention, Trailblazer!

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
  1. User requests a page
  2. The server executes the page’s underlying code and sends the resulting HTML to the browser
  3. The browser displays the HTML
  4. 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
  1. The user requests the “empty” Visualforce page containing a page skeleton and JavaScript includes
  2. The page is returned to the browser
  3. The browser loads the JavaScript application
  4. The JavaScript application generates the UI
  5. 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
  1. The user requests an application or a component
  2. The application or component bundle is returned to the client
  3. The browser loads the bundle
  4. The JavaScript application generates the UI
  5. 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.
I’m Enabling Non-Developers to Build Apps by Assembling Standard or Custom Components Use Lightning Components to create custom components that can be used in the Lightning App Builder.
I’m Building an Interactive Experience with JavaScript and I Need a Third-Party Framework Use a Visualforce page as a container for your third-party framework, such as AngularJS or React, and your application.
I’m Adding User Interface Elements For example, say you want to add a tab to a record home. This task is a simple drag-and-drop in the Lightning App Builder. Use Lightning Components to create custom user interface elements.
I’m Building a Community for Customers Use Community Builder to create a Lightning-based community leveraging Lightning Components.
I’m Building a Community for Partners Use Community Builder to create a Lightning-based community leveraging Lightning Components.
I’m Exposing a Public-Facing Unauthenticated Website Use Community Builder to create a Lightning-based site leveraging Lightning Components.
I’m Rendering Pages as PDFs in My Application Use Visualforce. Lightning Components don’t support rendering as PDF output yet.
I’m Adding to an Existing Project with Lots of Visualforce Pages 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 with your preferred JavaScript framework. Explore Lightning components and consider switching down the line.
Citizen developers who use standard Visualforce components for pages 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.

retargeting