User Interface Development Considerations
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.
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.
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
- Apex standard or custom controller
- 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 1.
- Tried and true model
- Easy to implement for greater productivity
- Naturally splits large applications into small, manageable pages
- Has built-in metadata integration
- 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.
Let’s review some basics.UI Generation
- The page is returned to the browser.
- Enables highly interactive and immersive user experiences
- No built-in metadata integration
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 are part of the Salesforce user interface framework for developing dynamic web applications for desktop and mobile devices.
Let’s take a look at an overview.UI Generation
- Lightning Data Service, Apex
- The user requests an application or a component.
- The application or component bundle is returned to the client.
- The browser loads the bundle.
- Enables highly interactive and immersive user experiences
- Aligns with Salesforce user interface strategy
- Built on metadata from the foundation, accelerating development
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.
|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
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.
|I’m Building a Page-Centric Experience with Limited Client-Side Logic||Use Visualforce pages to ensure development velocity and manageability.|
|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 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 or Partners||Use Experience Builder to create a site leveraging Lightning Components.|
|I’m Exposing a Public-Facing Unauthenticated Website||Use Experience 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.|
|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.
|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.|
|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.
- Trailhead: Visualforce & Lightning Experience
- Trailhead: Lightning Web Components Basics
- Trailhead: Aura Components Basics
- Configure Components for Communities
- Configure Components for Lightning Pages and the Lightning App Builder
- Use Lightning Components in Visualforce Pages
- Lightning Web Components Developer Guide
- Lightning Aura Components Developer Guide
- Screencast: Intro to Lightning Components
- Use Aura Components with Flow