New Resources for Moving from Visualforce to Lightning Web Components

Learning how to develop Lightning Web Components (LWC) brings with it many benefits: they follow the most modern web standards, they’re easy to reuse inside and outside the platform, they’re highly performant and they adapt well to different form factors. However, we know that moving from Visualforce to LWC is not easy, as Lightning Web Components are developed in a pretty different way. To help you through the transition, we’ve released some amazing resources that you can leverage! Let’s take a look at them:

Trailhead content

As we love Trailhead and we believe it’s the best way to learn, we’ve released three badges that will help you on your way towards Lightning Web Components development:

  • Lightning Web Components for Visualforce Developers: This is a Trailhead module that will allow you to take advantage of the concepts that you know from Visualforce while learning the LWC development process. You’ll learn how Visualforce and LWC architecture differs, and how some coding concepts are similar. You’ll learn how the Lightning Data Service can give you a direct replacement for Apex in some cases and how you can still use Apex code when the need arises! You’ll also learn how to navigate to pages and how to reuse Visualforce with LWC.
  • Quick Start: Explore the Visualforce to LWC Sample App: We’ve just released five quick starts to introduce some of the apps in the Sample Gallery. And, yes! There is a new app called Visualforce to LWC that you can deploy to your org to take a look at code examples that implement patterns found both in Visualforce and LWC. Let’s talk a bit more about the app in the next section.
  • Lightning Web Components and Salesforce Data: This module is targeted for all LWC developers, not just developers with a Visualforce background, but we’re sure it’ll help you in your transition. It explains when and how to use Lightning Data Service or when to go for Apex to work with Salesforce data in detail, and how to handle server errors in both cases.

Visualforce to LWC sample app

To help you understand how some typical Visualforce patterns are implemented in LWC, we’ve created the Visualforce to LWC sample app. The app includes examples that show how to replace typical layout patterns, how to create UIs to work with single, mixed and lists of records, and how to implement error handling patterns.

The best way to start with the app is to tackle the Quick Start project, but if you want to directly take a look at the code, check it out here, it’s open source.

Visualforce to LWC series Trailhead Live sessions

Additionally, we’re hosting a series of Trailhead Live sessions called “Visualforce to LWC Series” that explain all these concepts in detail. We’re presenting each session both in English and in Spanish.

  • Architecture and Coding Concepts: In this session we introduce the web standards on which LWC is based and how to configure your environment for development and debugging. We review the architectural differences between Visualforce and LWC, and we take a look at some of the Visualforce coding concepts that you can extrapolate to learn LWC. Watch the recording in English or in Spanish.
  • Coding Concepts Continued: We continue reviewing coding concepts, as template directives, how to call JavaScript, component composition and the navigation service. We also take a look at the base components and how they match Visualforce standard components. Watch the recording on Traihead Live in English or in Spanish.
  • Working with Salesforce Data: In this session we will talk about the different ways to work with Salesforce data in LWC. We see how to use the different form base components, Lightning Data Service and Apex. Watch the recording in  English on Trailhead Live or add the July 9 session to your calendar (in Spanish).
  • Combining Visualforce and LWC: In this last session, we’ll review the different ways to use Visualforce with LWC. Either using Lightning Components for Visualforce or the Lightning Message Service. Watch the session in English on August 19, 8:00 a.m. PT or in Spanish on August 20, 7:00 a.m. PT.

Next steps

Now you have a variety of resources to start with! There is not a required order for these, so tackle whichever one you are most comfortable with first, then continue with the other resources.

Do you have questions? Ask them on the Trailblazer community, the Salesforce Stack Exchange or Twitter, or you can also connect with us during the upcoming Trailhead Live sessions. We’ll be happy to help you. Happy coding!

About the author

Alba Rivas works as a Lead Developer Evangelist at Salesforce. She focuses on Lightning Web Components and Lightning adoption strategy. You can follow her on Twitter @AlbaSFDC.