Understand How Lightning Web Components Work with Aura Components

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.

Did you notice a capitalization difference in that last paragraph? If so, you have a keen eye. We capitalize all the words when we refer to the Lightning Web Components programming model. We only capitalize the first word when we refer to the components, themselves, as Lightning web components.

Similarly, the programming model you’ve been using is now called the Aura Components programming model, and you create Aura components.

To belabor the point, in the Lightning Web Components programming model, you create Lightning web components. In the Aura Components programming model, you create Aura components.

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.

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.

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 Lightning Aura Components Developer Guide.

You also need to understand modern JavaScript development and ES6 JavaScript features. If these terms are confusing, you can learn about them in the Modern JavaScript Development module. That module covers all the JavaScript skills you need to develop Lightning web components.

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!

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.

Important

Aura components can contain Lightning web components.

 Lightning web components can’t contain Aura components.

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.

Also, you can write new code in an ES6 module, and access the code from a Lightning web component and an Aura component. This pattern opens the door to modern JavaScript development for Aura developers.

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.