Transitioning to Lightning Web Components (LWC) from Visualforce and Aura Components

A key topic for developers at DreamForce ‘19 was Lightning Web Components (LWC). There were several dozen sessions covering LWC and the message delivered was consistent and clear: LWC is the path forward and should be learned and embraced as soon as possible. One presenter went so far as to say, roughly, “internal development on both Aura Lightning Components and Visualforce have been halted.”

Lightning Web Components provide the same basic features and capabilities as Lightning Components, but are built on more core web standards, and fewer Salesforce-specific technologies. They are faster than their predecessors and compatible with all Salesforce-supported browsers. The code is open source and can be used to develop world-class components for any platform, not just Salesforce. The intent with this move is to allow non-platform developers a simpler path to contributing to Salesforce projects, utilizing skills they already have.

If you’re transitioning to LWC from Lightning Components, there are several factors to keep in mind. First, some Aura features are not yet available in LWC, so you may be required to build an “old” Lightning Component here or there. Inter-component communications may utilize DOM events (LWC provider / LWC or Aura listener) and/or Aura events (Lightning Components provider / listener only). Code may be shared between all components using a common ES6 JavaScript module.

Design your component hierarchy to maximize the number of LWCs, but keep in mind that an Aura component can contain an LWC component, but not vice versa. If your goal is to replace existing Aura components, start from the innermost components and work your way out. If the components below represent your hierarchy and all start out as Aura, you would begin converting the inner child elements first, then moving outward to the parent elements.

The move from Visualforce to LWCs will be more challenging, but is also more necessary. Not only will Visualforce enhancements and fixes from Salesforce be rare, finding developers to maintain old pages and components will become increasingly difficult. Rather than creating new Visualforce pages, build LWC hierarchies instead. As you add features to existing Visualforce pages, consider creating and embedding LWCs which you can add to your library of reusable components. As of summer ‘19, both Lightning Components and LWCs can be hosted in Visualforce pages.

As always, Salesforce has fantastic training materials available that will make your LWC ramp-up smooth. Search Trailhead, the developer docs, and community blogs and articles for resources. Happy Lightning Web Component coding!

Ready to Go Beyond ?

Connect with Xede today to start growing your business faster, smarter and stronger.