Slide 1

Slide 1 text

BUILD BETTER TOGETHER

Slide 2

Slide 2 text

THANK YOU, SPONSORS

Slide 3

Slide 3 text

Dynamic LWC With great power comes great responsibility

Slide 4

Slide 4 text

Fabien Taillon - 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 Partner & CTO

Slide 5

Slide 5 text

Introduction

Slide 6

Slide 6 text

What is a Dynamic Component A way to instantiate dynamically a component that may not be known before runtime

Slide 7

Slide 7 text

Why it was not possible before

Slide 8

Slide 8 text

Why it was not possible before Performance

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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 App Builder 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 ○ …

Slide 11

Slide 11 text

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 ○ ● Assign in JS the component you want to render ○ this.componentConstructor = MyComponent;

Slide 12

Slide 12 text

A deeper look

Slide 13

Slide 13 text

Declarative use of components in the template markup All components are known at save time and can be statically analyzed Before Dynamic Components

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Dynamic Components To do it correctly, you need to understand how it works and different options available

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

A good use case

Slide 22

Slide 22 text

Loading heavy component async ● One heavy component ● Not visible during first page load ● Would slow down the whole page if part of the markup

Slide 23

Slide 23 text

Loading heavy component async

Slide 24

Slide 24 text

Recap

Slide 25

Slide 25 text

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)

Slide 26

Slide 26 text

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-c omponents-is-now-ga RFC: https://github.com/jmsjtu/lwc-rfcs/blob/jtu/dynamic-component-creation/text/0119-dyna mic-component-creation.md StackExchange answer about performance https://salesforce.stackexchange.com/questions/244847/not-able-to-render-dynamic-light ning-web-component

Slide 27

Slide 27 text

Q&A

Slide 28

Slide 28 text

THANK YOU, SPONSORS