﻿1 00:00:03,240 --> 00:00:04,150
- Hey everyone. 2
I'm a Developer Advocate 3
4 00:00:08,140 --> 00:00:10,390
In this quick take, we are going to see 5
6 00:00:13,570 --> 00:00:16,093
using Lightning Web Components Open Source.
7 00:00:17,020 --> 00:00:18,560
A quick disclaimer, 8
components dynamically 9
on the Salesforce platform. 10
platform 11
Components Open Source. 12
13 00:00:33,810 --> 00:00:36,160
Let's start with the fundamental question. 14
components dynamically? 15
components dynamically 16
performance of your apps, 17
static or hard dependencies 18
19 00:00:50,480 --> 00:00:52,760
Hard dependencies
essentially become a part 20
bundle or dependency tree 21
component 22
time to fix the component 23
24 00:01:03,470 --> 00:01:04,753
Let's see it in action. 25
where we have built a wizard 26
shown one after the other. 27
If you take a look at the code behind it, 28
29 00:01:21,540 --> 00:01:23,410
one for each step, 30
and shown 31
32 00:01:31,530 --> 00:01:34,800
I've oversimplified things for
this demo, but the components 33
be fundamentally different 34
and can have huge subtrees, 35
components are not shown in the UI. 36
only one step 37
38 00:01:50,290 --> 00:01:54,480
The app component explicitly depends on step one,
step two, 39
components. 40
a part of the definition 41
component, 42
the component's size 43
performance. 44
say static 45
46 00:02:12,300 --> 00:02:15,730
Now, let's imagine if you have a lot of such
components 47
code becomes really verbose 48
lot of conditional statements, 49
your component very bulky. 50
components 51
52 00:02:29,660 --> 00:02:32,420
meaning that the components
will only be loaded 53
runtime. 54
to remember one thing. 55
are created dynamically, 56
components has to be 57
58 00:02:47,500 --> 00:02:49,170
The reason for that is that 59
be discovered or learned 60
run time. 61
62 00:02:57,140 --> 00:02:58,570
We are doing this to prevent you 63
that doesn't exist. 64
means in just a bit. 65
example that I've shown you 66
dependencies, 67
to be loaded dynamically. 68
component called dynamicApp 69
how the app component 70
71 00:03:22,520 --> 00:03:26,700
So, all of this conditional logic from the app
component 72
just one line of code 73
74 00:03:32,610 --> 00:03:35,450
Now, this one line of code has two parts. 75
directive. 76
is going to be the constructor 77
78 00:03:44,150 --> 00:03:48,290
Second, the HTML tag that we have used. 79
to any existing component. 80
source code, 81
component called dynamic steps, 82
name. 83
be anything that you want, 84
you use your own namespace. 85
used the namespace my. 86
directive is going to come 87
88 00:04:15,170 --> 00:04:17,710
In the JavaScript file,
you can see that we've used 89
to import the component. 90
is imported, 91
constructor to the property 92
directive. 93
in a lifecycle hook, 94
any other function that I want. 95
loading step one dynamically 96
97 00:04:43,260 --> 00:04:46,993
and the other steps are loaded in response to custom events.
98 00:04:48,240 --> 00:04:51,080
Now during compile time, LWC checks 99
a component 100
two, three, and four