Understand How Lightning Web Components Work with Aura Components
- List the benefits of Lightning web components.
- Describe how Aura components and Lightning web components can work together.
- Decide when it makes sense to migrate components.
A New Programming Model
You can now develop Lightning components in two programming models: the original model—Aura Components, and the new model—Lightning Web Components. Just when you’ve mastered developing Aura components, we’ve come up with Lightning web components! Why, oh why, you ask? Well, we created the Lightning Web Components model to align with web standards that didn’t exist several years ago when we built the original Aura model.
The goal of this module is to help you to leverage your Aura components skills to accelerate learning about Lightning web components. You learn how the two types of components work well together in the same app.
What Is Lightning Web Components?
Lightning Web Components is an implementation of the W3C’s Web Components standards. It supports the parts of Web Components that perform well in browsers, and adds only what’s needed to work in all browsers supported by Salesforce.
What Are the Benefits of Lightning Web Components?
- Developer Productivity and Satisfaction
- Write less code with Lightning web components and that code is easier to read, maintain, and unit test.
- Find answers to your development questions more easily by going to your favorite search engine. Working with web standards speeds up development and debugging time.
- Code Performance
Before you dive into this module, complete the Lightning Web Components Basics module, which gives you a great introduction to the new programming model.
We’re assuming that you’re familiar with the Aura Components programming model, and we won’t explain its features, except in comparison to the Lightning Web Components programming model. If you’re not familiar with Aura components, start with the Aura Components Basics module.
Buckle Up for a Journey
Learning any new programming model or language is a journey. When you get some new code running, it can feel like the thrill of driving a convertible on an open road. Then you change a line of code and you get an error. You slam on the brakes, but you’ve hit a traffic jam and you desperately search for the next exit. Remember, it’s a journey. The error is just a temporary slowdown, and you’ll get to your destination in the end... hopefully, before dinner time.
We hope that this module prepares you for your Lightning web components journey. Think of the module as packing your suitcase for your trip. We step you through everything you need for the adventure. When you reach your destination, we don’t want you to open your suitcase and realize that you forgot to pack any underwear!
Components Living and Working Together
Let’s start by looking at how you piece components together. You can add components within the body of another component. This component composition enables you to build complex components from simpler building-block components. The concept of component composition is fundamental to both Aura components and Lightning web components.
We know that you may have invested a lot of time and effort into developing Aura components. So we’ve invested the time to enable you to compose Aura components and Lightning web components in the same application. For example, you can write a new Lightning web component and add it to an app that contains Aura components.
In addition to composing Aura components and Lightning web components together, the two types of components can communicate with events. It’s a healthy coexistence.
Like any relationship, there are rules that ensure that composed components play well together.
If you’re building a Lightning web component that expects other subcomponents in its body, those subcomponents must also be built as Lightning web components. Remember that Lightning web components can’t contain Aura components.
If a Lightning web component is the outermost component in a tree of nested components, none of the nested components can be an Aura component.
One of the advantages of the two programming models working together is that you can decide to migrate one Aura component to a Lightning web component and your app continues to function. Even if you decide to use Lightning web components for new components, you can still leverage any existing investment in Aura components.
Migrating code is rarely a straight path. The programming model for Lightning Web Components is fundamentally different than the model for Aura Components. Migrating an Aura component to a Lightning web component is not a line-by-line conversion, and it’s a good opportunity to revisit your component’s design. Before you migrate an Aura component, evaluate the component’s attributes, interfaces, structures, patterns, and data flow.
The easiest components to migrate are simple components that only render UI. An Aura component whose performance is critical is a good candidate to migrate to a Lightning web component.
You get more gains in performance and developer productivity by migrating larger trees of components (components within components) rather than an individual component. However, it’s a useful learning experience to migrate one component and see how concepts in the Aura programming model map to concepts in the Lightning Web Components programming model.
After migrating one component, you’ll be in a better position to determine whether it makes sense for you and your org to:
- Undertake a larger migration effort.
- Use Lightning web components for new components only.
- Stick with Aura components for now.
The choice is down to you and differs for everyone, depending on use cases and available resources. Whatever decision you make, migrating a component is a valuable learning exercise.