[Albanian Dreamin 2024] Dynamic LWC: With great power comes great responsibility

In Winter ‘24, Salesforce released a long awaited feature for Lightning Web Components: Dynamic LWC. No more need to hardcode your LWC names when you’re creating a dynamic page, create your components on the fly. While this is great, this can have a severe impact on performance if used incorrectly. Let’s deep dive !

Transcript

1. #ALD2024 27 APRIL 2024 Dynamic Lightning Web Components With great power comes great responsibility
2. #ALD2024 27 APRIL 2024 Thanks to our amazing sponsors !
3. #ALD2024 27 APRIL 2024 Fabien Taillon Partner & CTO at Texeï Salesforce MVP - Hall of Fame Paris Developer Group leader French Touch Dreamin team https://x.com/FabienTaillon https://www.linkedin.com/in/fabientaillon https://trailblazer.me/id/fabien https://texei.com/blog
4. #ALD2024 27 APRIL 2024 Introduction
5. #ALD2024 27 APRIL 2024 What is a Dynamic Component A way to instantiate dynamically a component that may not be known before runtime
6. #ALD2024 27 APRIL 2024 Why it was not possible before
7. #ALD2024 27 APRIL 2024 Why it was not possible before Performance
8. #ALD2024 27 APRIL 2024 Thank you! Any questions? We have purposely made the decision of not allowing dynamic component creation yet (the equivalent of $A.createComponent) on the Salesforce platform to make sure we had a clean, statically analyzable and predictable behavior on which to build upon in LWC. … In LWC in the platform we don't allow you to shoot yourself in the foot creating small tiny components, and once we do, we will give you a water pistol first :) Diego Ferreiro Val - Ex Principal Architect LWC https://salesforce.stackexchange.com/questions/244847/not-able-to-render-dynamic-lightning-web-component
9. #ALD2024 27 APRIL 2024 Valid use cases Most use cases can be achieved with existing lwc:if/lwc:elseif, but: • N°1 use case would be for AppExchanges allowing dynamic components defined through Metadata for instance (think AppBuilder like) • Can be used to defer big components load if not on the main displayed page • Displayed after a button click • Displayed in another tab • …
10. #ALD2024 27 APRIL 2024 How it works now Very easy: • Import component in JS • import MyComponent from 'c/myComponent'; • await import('c/myComponent'); • Define a Dynamic component in template with lwc:component and lwc:is • <lwc:component lwc:is={componentConstructor}></lwc:component> • Assign in JS the component you want to render • this.componentConstructor = MyComponent;
11. #ALD2024 27 APRIL 2024 A deeper look
12. #ALD2024 27 APRIL 2024 Before Dynamic Components Declarative use of components in the template markup All components are known at save time and can be statically analyzed
13. #ALD2024 27 APRIL 2024 Before Dynamic Components c-my-component Only one round trip to get the whole component and sub-components c-my-component + c-small-component + c-heavy-component
14. #ALD2024 27 APRIL 2024 With Dynamic Components Dynamic components will be created by JS and may not be known at that time Depends on how dynamic components are created - more on this later
15. #ALD2024 27 APRIL 2024 With Dynamic Components c-my-component If not done correctly, one additional round trip per dynamic component c-my-component + c-small-component c-heavy-component c-heavy-component
16. #ALD2024 27 APRIL 2024 Dynamic Components To do it correctly, you need to understand how it works and different options available
17. #ALD2024 27 APRIL 2024 Static Import - Statically analyzable • Import needed components • Switch the rendered component by changing the lwc:is variable • Almost the same as using components in markup and lwc:if • Everything is downloaded with a single server round trip
18. #ALD2024 27 APRIL 2024 Dynamic Import - Statically analyzable • Same as previous, but loading is done on demand • connectedCallback • Function linked to any action (user click…) • Not part of the initial load so additional server round trip
19. #ALD2024 27 APRIL 2024 Dynamic Import - Not Statically analyzable • Same as previous BUT component is not statically analyzable • No way for Salesforce to improve loading, caching etc • As much as possible, don’t use this one
20. #ALD2024 27 APRIL 2024 A good use case
21. #ALD2024 27 APRIL 2024 Loading heavy component async • One heavy component • Not visible during first page load • Would slow down the whole page if part of the markup
22. #ALD2024 27 APRIL 2024 Loading heavy component async
23. #ALD2024 27 APRIL 2024 Recap
24. #ALD2024 27 APRIL 2024 Recap •Use it when you understand how it works •Not for very small components, server round trip will be slower than initial load •Use it for big components that may slow down initial load and that are not immediately visible (like unclicked tab)
25. #ALD2024 27 APRIL 2024 Resources Documentation https://developer.salesforce.com/docs/platform/lwc/guide/js-dynamic-components.html Blog post https://developer.salesforce.com/blogs/2023/10/dynamic-components-for-lightning-web-compon ents-is-now-ga RFC: https://github.com/jmsjtu/lwc-rfcs/blob/jtu/dynamic-component-creation/text/0119-dynamic-co mponent-creation.md StackExchange answer about performance https://salesforce.stackexchange.com/questions/244847/not-able-to-render-dynamic-lightning-we b-component
26. #ALD2024 27 APRIL 2024 Thank you! Any questions?