2

Recently I was trying to implement(and migrate) my existing functionality with LWC for learning purpose. However later I found that, LWC is allowed in Aura, but aura is not allowed in LWC.

Curious to know the reasons for the same, since it would be very helpful to migrate to LWC from Aura by step by step implementation and testing(in my opinion, there might be different steps as well).

5

This basically boils down to the main differences between Aura and LWC. Lets visit some of the practical differences:

  1. Aura is not truly component based framework. For example, when you define some styles on class my-class in 1 component, then those styles would apply to some other component in same window which uses the same class my-class.

This would not happen in LWC because of the concept called shadow DOM (closed mode by default).

  1. Aura is not something derived from global standard. LWC on the other hand is implemented on top of standard Web Components

  2. Aura is not natively supported by browser. So, salesforce has to convert the tags in client machine which was done through aura_prod.js. If you observe what you are getting from lightning server, you will notice that you will not get any HTML markup. aura_proj.js is responsible for creating HTML elements at runtime for every transaction. This is the main reason why Aura does not has good performance.

LWC on the other hand is natively supported by all browsers because its built on standard web components. Hence there is no additional overhead (like that of Aura).

  1. Aura is a 2-way binding framework and LWC is a 1-way framework.

  2. Using Aura, we can create components dynamically but in LWC dynamic creation of components is not allowed (not exposed).

And the main difference is

  1. Aura tries to modify the same object/array in view (or HTML) when its changed in Javascript. This is the reason Aura does not know when a deeply inner property is changed inside an object and so it does not rerender DOM.

LWC simply creates a new assignment thereby creating new memory allocation. It does not really spend time checking which property in object or item in array might have changed. This is the main reason when api variables are set by the parent component, it is no longer allowed to be modified by the child component which has implemented api property.

Although we have many other differences, these are the main ones. Also the main similarity between them is:

Both Aura and LWC have same secures variables like window, document etc and have access to same methods on them.

Note: Aura is using LWC components in most of the base components behind the scenes (as confirmed by salesforce support - UNOFFICIALLY) - for example, datatable. However this has only solved the performance problems of Aura upto certain extent but still true nature of Aura is still same as above.

Considering all these reasons, logically its just not possible to use Aura inside LWC.

  • 1
    Thank you for the detailed explanation! – Ysr Shk Aug 5 '19 at 11:16
  • Aura does not know when a deeply inner property is changed inside an object and so it does not rerender DOM , so does LWC – Pranay Jaiswal Aug 5 '19 at 16:24
  • @PranayJaiswal, I tested it few weeks back and LWC worked perfectly fine with very deep properties. Can you show a object which does not? – salesforce-sas Aug 5 '19 at 16:26
  • 1
    @salesforce-sas you might be right, i faced this few months back.(Spring) . Probably summer fixed it. salesforce.stackexchange.com/questions/253717/… – Pranay Jaiswal Aug 5 '19 at 16:30
1

Someone may be able to write a more detailed answer, but the main reason is performance. LWC was build with performance in mind, with all lessons learned from mistakes made with Aura.

For instance, you don't have 2 way binding in LWC, which was part of Aura.

Letting us add Aura components inside LWCs would break this new performance model.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.