Lightning Web Component. Aura Component

As you know Salesforce introduced Lightning web components in Spring 19 release and with that the existing Lightning components are renamed as Aura components. So, the question lies how does Aura components and Lightning web components coexist in the same space and here we are to discuss the same. One thing is for sure – Aura components and Lightning web components can co-exist and work together in many different ways.

Coexistence

If you’re looking to use Aura components and Lightning web components together in your applications then there are two strategies to consider: Nested and Side-by-side compositions.

Nested Composition

A nested composition is a component within a component, either an Aura component or Lightning web component. This is like a parent-child relationship. The rule is you can have both Aura components and Lighting web components inside a parent Aura component, but Lightning web components can only contain other Lightning web components.

In the above ‘nested composition’ example, the Aura component has two child components: another Aura component and a Lightning web component.

The other parent, Lightning web component, also has two children. Both children are Lightning web components.

Remember – Aura component is the ultimate parent.

Side-by-side Composition

The other type of composition is side-by-side in which Aura component and Lightning web component are not within the same hierarchy but are placed separately in a Lightning App Page as shown below.

Here the parent Aura component and the parent Lightning web component are in Side-by-Side strategy. And within the parent Aura component and the parent Lightning web component, the strategy used is nested composition.

How do they work together?

Now that we have seen the different ways the components can co-exist within a single Lightning App Page, let’s look at how they talk between themselves in both nested and side-by-side arrangement using the above example.

    1. Aura component: The parent aura component can interact directly with child component attributes whether those are standard Aura events or custom Aura event bundles.
    2. Lightning web component: The parent Lightning web component can send and receive information through JavaScript CutomObject objects, as well as interacting with child component methods and properties exposed through public APIs.

Both Aura and Lightning web components can send and receive data through the Lightning Data Service (LDS) and the User Interface API.

Limitation: A mechanism for communication between Aura components and Lightning web components that aren’t in the same component hierarchy isn’t provided by the platform yet! But this will be soon available in Lightning Event Service as highlighted in the images above.

Previous
Next

Author: CloudFountain

We started as a side business in 1999 and have since grown to become a leading provider of IT solutions for businesses. With around 30 employees across several countries, we offer a wide range of services, including IT support, hosting, and custom software development.Over the years, we have served approximately 1000 customers, ranging from small startups to large enterprises. Our mission is to provide cutting-edge technology solutions that help our clients achieve their business goals. We pride ourselves on our exceptional customer service and attention to detail, and we work closely with each client to understand their unique needs and provide tailored solutions that meet their specific requirements.At CloudFountain, we believe that technology can be a powerful tool for growth and success. That’s why we stay on top of the latest trends and advancements in the industry, so we can provide our clients with the best possible solutions. Whether you need IT support, hosting services, or custom software development, our team of experts is here to help. Contact us today to learn more about how we can help your business succeed.