5

I am looking to see if there are any best practices when developing a large LWC "app".

The main challenge I am seeing is when I want to display a certain "screen" to an end user, I basically have to create a container component which then contains a bunch of <template if:true/> elements wrapping my actual LWC that I want to display based on the condition being true.

So I guess I am looking for guidance on a couple of fronts:

  • In the way I am suggesting above, will initial load of the container component try and fetch all code related to LWCs wrapped in the <template> elements, OR will it only fetch once the condition resolves true. Subsequently, if the condition changes to false, does it destroy the component and its state or does it leave it in place.

  • Is there just a better way of approaching this? I know the question has been asked many times about dynamic creation like it used to be in Aura, but from what I can see that feature is still not available.

1 Answer 1

3

In the way I am suggesting above, will initial load of the container component try and fetch all code related to LWCs wrapped in the elements, OR will it only fetch once the condition resolves true. Subsequently, if the condition changes to false, does it destroy the component and its state or does it leave it in place.

Until the condition is true, the child components won't be rendered and won't initiate data loading. So, it should not take forever to load everything. Also, if the condition goes false and the component is being removed from the page, and then reappears, it should be rendered "from scratch." However, from my experience, some things can always be cached already. For example, if you render a record-edit-form component and then remove it via toggling the template tag, every next time it will be loaded instantly because the record info is already cached.

Is there just a better way of approaching this? I know the question has been asked many times about dynamic creation like it used to be in Aura, but from what I can see that feature is still not available.

I assume it depends on what you're trying to achieve. It's hard to make suggestions without the requirements, but I think different patterns and implementations can be used depending on the context.

A few suggestions from the comments:

  • Use a Flow of type "Screen Flow", where you can put a separated LWC for each step of the flow. So it will be like a wizard, where you can just tell the flow to go to the next or previous screen from the component being currently displayed.
  • Or if the flow is not an option, maybe the LWC ones you want to use as "step screens" can be grouped by context and each of them will manage its stages and visibility of some child elements.
  • Or you can dynamically create LWC components from the parent Aura one if you want to go extreme :)
  • Update Just remembered, there is an opportunity to dynamically create dom elements from javascript in LWC as it was in Aura. You can use the <template lwc:dom="manual"> directive for this. Then, using Document.createElement() function to render pretty much anything.
9
  • Thanks for the reply @Anton Kutishevsky, to help with the second part of my question high level design would be using the progress-indictaror base component as a guide for an end user the steps (each step rendering a fairly complex and different LWC) Feb 2, 2023 at 19:05
  • 2
    Okay, I understand what you mean @BryanAnderson. If you have a lot of steps, maybe it won't be that pretty to have a lot of hardcoded things in the parent component. I don't know all details, but as a suggestion, you can use a Flow of type "Screen Flow", where you can put a separated LWC for each step of the flow. So it will be like a wizard, where you can just tell the flow to go to the next or previous screen from the component being currently displayed. Feb 2, 2023 at 19:15
  • 1
    Or if the flow is not an option, maybe the LWC ones you want to use as "step screens" can be grouped by context and each of them will manage its stages and visibility of some child elements. Feb 2, 2023 at 19:18
  • 1
    Oh, by the way. You can dynamically create LWC components from the parent Aura one if you want to go extreme :) Feb 2, 2023 at 19:56
  • 2
    It would be good to lift some of these comments into the answer...
    – Phil W
    Feb 2, 2023 at 20:52

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .