The Importables: Extend the Capabilities of your Components

Hello, and welcome to another X Force Data Summit, presentation. Today, we have Barry Hughes, who works at a Salesforce consulting consultancy in the UK called Blue Wave Group, their platinum Salesforce partner. And he's gonna talk about importing JavaScript to extend your Lightning components. So here's Barry.

Thanks very much everyone. It's a pleasure to talk to you all today.

And a big kudos out to Casey and to Leonard for a whole explaining how to organize this great event. So today I'm just gonna talk to you for about half an hour on importing JavaScript, your own JavaScript, JavaScript that's already out there, and looking at how imports help your Lightning Web Components. It's a technical session, but the general way that Lightning Web Components can be wider there, the advantages of them, and how we can extend them are probably of interest in most people. So just a brief introduction to me before I get into the content here.

I work for as I said, work for a company called BlueWave Group. I'm personally based in Ireland, but I'm based in the UK. We've got our fingers in many clouds, as you can see. We are a platinum partner.

We lay people who are both not just consultants in these clouds but also instructors.

For myself, I'm an application architect.

I instructed for Salesforce for quite a long time. I don't do quite as much anymore.

I'm a Pluralsight author, which I'll come back in a second, and also I organize a developer group based in Dublin and Ireland, is going now for eight years.

So as I said, I'm a Pluralsight author, so if you want to learn more about anti web components and a lot of things on Salesforce, there's a huge number, think there's fifty different, what they call play by play courses and more official courses besides all aspects of Salesforce, including the trial for free course on any of web components. One the free ones is my own.

Right now, there's ending month of April twenty twenty. The trial site are offering the service for free all around the world, even if you're not a subscriber. But if you're not a subscriber and you haven't got it free when you're listening to this recording, this course will remain free all the time. So you can go through that course, it shows you how to prototype your components and go through a full example of getting a Lightning Web Components suite up and running.

So what I want to talk about today is Lightning Web Components, and this is a subject that kind of came out of the blue a little bit because we've been developing Aura components since about twenty sixteen.

We were first introduced to the idea of component based development in Salesforce in twenty fourteen. It took a couple of years for Aura components to be fully available.

And the main problem with Aura components and the reason we moved to Lightning Web Components was Aura, like many other platforms around about that time, Angular one and a few other platforms, had problems in that when they made their code, they had to be compiled into what we call pure JavaScript running a browser.

About two years ago, Google and some other companies decided to embrace a new W3C specification that allowed us to run a lot of the nice code we see in these platforms available in browsers natively.

So web components were born. And web components is not a Salesforce thing, it's a general web thing, but Salesforce have embraced it, and now you can actually create web components on the Lightning platform. We call those Lightning Web Components. But if you're familiar with other platform stacks, if you're familiar with Angular, new versions of Angular, React, Vue. Js, Ionic, lots of others that are out there, If you're developing web components on those frameworks, you're able to develop web components in Salesforce, just a little different.

Which means that if you're hiring Salesforce developers, there's a lot more of them out there, probably than even they think. So like the web components were announced in December twenty eighteen in the world tour in New York. Came out of the blue, and people had to learn about this thing pretty fast, but what was amazing was they became accepted very quickly, and people were actually deploying them within by the summer of that following year, which is very quick compared to the Aura rollout. In Blueaway, we deployed our first Lightning Web Component in June of twenty nineteen, and we've been developing pretty much exclusively Lightning Web Components since then, although sometimes we have to make Aura for different reasons.

But the news and improvements of the platform for Lightning Web Components has moved at quite a pace. To such an extent that Trello DX is coming up in June and it's virtual, we're expecting a lot more news on Lightning Web Components there. But it's been open sourced. We can see what the guys build to make Lightning Web Components work in Salesforce. The standard components have been open sourced, so if we see a standard component like a data table, we can take that source and change it to be what we want it to We can also look at Lightning Web Components in local development on our own PC without the need of an org, and you're going to see that in my presentation.

And there's a lot of great resources out there, not just on Pluralsight but other platforms as well, where you can get access to a lot of information, how to get up and running with Lightning Web Components.

So most developers and administrators have done a trailhead to introduce themselves to Lightning Web Components.

And what they've done is a bit like what you're seeing here on the right hand side. They installed Visual Studio Code. It's the first time in the Salesforce history that we can't really make something with a browser. We have to use an IDE to make Lighting Web Components and edit them.

So we're using Versus Code, which is a recommended IDE by Salesforce, but there are others.

And in here we're making what's now a pretty famous Lightning Web Component called Hello Binding. It's all part of a sample gallery and a lot of trail heads that go into letting you learn how to make these components.

And when you make these components with Visual Studio Code, you get a folder and you get three files inside of it by default. In this case, we're getting a hello binding folder, a JavaScript file called hello binding, HTML file, and an XML file. The HTML file is actually optional. You don't need it unless you're surfacing something on the browser. But JavaScript file is pretty much mandatory. The XML file allows us to show where the JavaScript file or the component is available to be used.

Just to note that all the names of the files must be exactly the same, including our case sensitivity.

When you create your first Lightning Web Component, you're greeted with a JavaScript file that has got two lines of code already in there, and this is where the first real learning curve for Salesforce developers come in.

We're exposed to an import and an export. And imports and exports are nothing new to JavaScript developers, especially those who use ES6 JavaScript and more, but we're importing in some libraries here to let us do what we wanna do.

We're also exporting a class so that Salesforce can take that component class and use it elsewhere.

So we're going to come back to see what these imports and exports do, but the heart of this particular session is to describe to Salesforce developers what is an import, what is an export, what can we do, And what can we import? What's out there that we can how can we import our code and is there anything out there we can really grab that's kind of cool?

So let's talk about basic JavaScript imports and exports.

So on the left hand side here, we've got a JavaScript file. Now this is stored with our Lightning component, which is shown in the second where it's stored. I'll give you a demo of this.

But we have JavaScript file that's got a class. So again if you're not used to ES6, we can make classes in our JavaScript files, and that class has got a constructor, a class called user, and we're giving them a name and an age. We've got further methods below that in this JavaScript file where we can get the user object that's passed to us and get the user's name and age and console log them out. Nothing amazing.

What you can see, which is kind of fuzzily underlined here, the word export. And the idea behind this is that we can now export JavaScript functions, JavaScript classes, and even JavaScript constants and other variables out so that they're made available to be imported somewhere else. So these ones are all exportable.

We have export in front of all our functions, we've got export default in front of our class.

And the export default from the class is pretty cool because that means that we can grab it in a slightly different way in our imports.

We can only have one default export in JavaScript file.

On the right hand side, you're seeing actual import here. I'm just gonna move down my face here. So we've got an import here, we're importing the word user from and some other things from dot lib dot user. Js.

Now this user. Js is the file on the left hand side we're bringing in. You can see we're importing in the word user. That user is actually picking up the export default.

So that user is now an object, has accessed the class. And then we're bringing in both print name and print age, and in fact, in the case of print name, we're actually giving it an alias called print username. We're just giving it that name for the case of the particular JavaScript file we're in. This JavaScript file on the left is, let's say, is called main JS.

Then we can create a new user object because we've imported it. We're making user called Bob, and he's gonna be thirty. And then we can console out log what Bob's age is and what his name is using the methods on the JavaScript file we've imported. So we can make JavaScript files and we can import these things to separate out our code. Very similar in Aura. We were able to make a helper class, helper file to bring into our controller. Very similar, except this is far more flexible, and we can bring in as many files, many methods as we like, and even bring in parts of them and not bring in all methods.

Just to go beyond that a bit further, we don't just import in flat code, we can also bring in classes that we can extend. So in this case, on the right hand side, we're extending a class. We've got a class called animal. This animal is going have a name and a weight, so we can make an elephant, gorilla, whatever the case may be.

And on the right hand side, we're importing that animal, but we're extending it in our class. So you can see we've a class here, we're extending it, and now we've got this class. So this is another JavaScript file, and we can make a class called gorilla, which is extending animal, and we can add our own methods for a gorilla here, and then later on we can call the gorilla, assign it a new object of that class, call some methods, and get back some returns, which is not just calling methods inside the Gorilla class, but is also calling subsequent methods in its parent animal class. So you get the idea we can import and export code and extend that code as well if we want to.

So in Salesforce, when make like the web components, we can add our JavaScript in various different places.

There's pros and cons to some of these places we can import in, but in this class, in this person, they're going to show you pretty much where we can do it. So, for example, we've got a few different places we can have in JavaScript. Here's our Hello Binding folder on the left hand side. So we've added a subfolder called helpers, and we've added some JavaScript files below it.

And we've also got a user JS file in the root of the component itself. So on the left hand right hand side, you can see I can import in from the root. You can see it's actually commented out dot user JS.

We can also import in from the dot helpers user js so you can add folder structures if you want to.

All this is perfectly possible. Let me just come out of here and show you this actually in action.

So here's our code here I'm talking about a few minutes ago, and here is our JavaScript file. So as I showed you a few minutes ago, we can bring in our code in here using the j JavaScript file at the root, which is here, and also bring it in we possibly could bring it in using some code and helper class. Here's a sorting JS JavaScript file that's actually in the helper class in here. We can also bring in a static constant, as said earlier on. This is a contacts list. We can bring that in as well if we want do some testing.

So this kind of thing is what we can all bring in to our code. There's a few things, however, we cannot do.

You can see I actually tried a few of them already.

Why can't we make a folder, let's say, in the l l b c directory, let's call it scripts, and add our directory in here. Well, that's actually not allowed in Salesforce. We're not allowed to do that.

The JavaScript file has to live inside a folder itself.

It can, however, be another component of its own right. So if we scroll down, you will see I have another component here called user, another Lightning Web Component. This one only has a JavaScript file and an XML file. If we look at the JavaScript, this is pretty much the JavaScript I showed you a few minutes ago.

We can bring that in to help our HelloBinding class by doing an import of c user, this line here. It's uncommented so you can see.

Once you bring in c user, you're actually bringing in that component and reusing the code. This gives you options in terms of scope. So you can keep a shared JavaScript file purely for your own component and not use it anywhere else, keep it pretty encapsulated, or we can make a reusable piece of JavaScript added to its own like the web component. You can imagine one called utilities, whatever the case may be, and you can bring that in, and only bring in those parts of that JavaScript in that utility class that you want to.

Again, as I said, it's only JavaScript file. There's no export on this, no import of the normal lightning stuff that you see. There's no lightning element needed in it. There's no exporting of default class extending lightning element. It's just basic JavaScript that we can use.

And if we look at that class actually in action let's see if I can find and not make everyone dizzy. Let me look at my code here. Here we're actually launching this thing on a local web development server. Let me show you how that's done. So in Visual Studio Code, we can take any component, which is this is here, little bit of binding, we can right click on this, and there's an option to preview the component locally.

If you install Salesforce SFDX extensions in your Vidget Studio code as a time of recording this presentation, it'll be already there. You can just right click and use it. Let's show you the console in action.

So in this case, I'm gonna default out some console lines and it's gonna change this field to make it happen. And you can see here it's doing a lot of calls, the calls I showed you, calling the user, saying his name is Bob, and getting out information from Bob.

So that's bringing in our own imports. And just to be clear here, all the code I'm showing you is available in a GitHub repo.

I hope you can see here. I'm trying to drag up here. Can you see Leonard, you see the stuff here that I'm showing you here? I'm just trying to make sure you can see beyond the images on the right hand side. We can cut this out.

But all this is in a GitHub repo, gitub dot com bar, use one, importables. You can grab that repo, and all the code you're seeing is in there.

So as I said, there's a few different gotchas to what you can and cannot do.

So if we try to access an invalid file, so if we import in example contacts one JS, which doesn't exist, that won't save. It'll come back with an error in your code when you save it, so you can't actually save that.

However, you can make errors in your expressions. So this is expression left hand print name e with lots of ease here as print username. There is no print name e with lots of ease method in user JS. That will actually save, but it will cause an error at runtime.

So it's just something to keep in mind of. I can also access print DOB. I've written that as an expression. Print DOB does not actually exist, but it will allow you to save it.

You just can't call it.

And as I said earlier on, your imports can come from files within an LWC folder, a static resource, which we'll show you later on how that works, or from another Lightning Web Component, which is the user component I showed you a few minutes ago.

If you try to make a dedicated folder in your LWC directory and put a JavaScript file in there, it simply won't let you save any files in that directory. It's a limitation of the platform.

So I showed you earlier on how to import in our user Lightning Web Component as a shared JavaScript file in our component.

This is actually an example taken directly from the Lightning Web Component Recipes. If you look for Lightning Web Component Recipe sample gallery, you'll find them.

This is we use one called Miscellaneous Shared JavaScript. It's an example of bringing in some functionality to do with finance.

In this case, we're actually importing in from a component called c mortgage, which is on the left hand side. We're getting in as term options and also how to calculate monthly payment based on the calculation.

So one of the key aspects to learning about component development is learning the imports that are already there. We've up to now in this presentation, we've talked about JavaScript code we've written ourselves.

But what about code we haven't written? What about code that that is already there? Well, the platform provides some, and some of these are going to be pretty straightforward now to most Salesforce developers at this stage. As we talked about Lightning Element, we talked about a few minutes ago, Lightning Element is a bit like HTML element for web developers.

It allows us to grab access to the DOM and do things with it. It's primarily used actually in testing, it is used to allow us to manipulate the DOM. API, track and wire, they're also most web developers know those. API lets you make a public property in your component that can be called from a parent, populated.

Track is almost gone now. Track allows you to manipulate the DOM and get in from and let any change to properties get immediately changed in the DOM of the component.

Wire allows you to talk to Lightning Data Service, which is either talking to Apex or talking to regular Lightning Data Service that's out there. Those four are pretty much what most developers are familiar with.

There are a lot of others, and for me to go through all of these would make for a very boring presentation. They are very well documented in the Lightning Developer Guide on the web. I don't need to go through too much of them. Just first to say it on the stuff on the right hand side, the Salesforce libraries, those are more to do with utility functions, things like getting down a static resource, talking to word translation, talking to Apex, getting what your client's form factor is, getting user ID, things like that.

On the left hand side at the bottom we have more of the Lightning libraries. These are kind of cool because they allow you to do not just getting records, getting lists, but also manipulating records, getting access to the UI record API, and getting access to what a page layout looks like and trying to constrain that kind of thing.

But the two at the bottom, LWC Jest and also the Platform Resource Loader, these are the two I want to show you some quick examples of.

In terms of Jest, we can actually test our Lightning Web Components using Jest and other libraries too. In this case we're using Jest, and this is a good example of using imports. Standard imports from Salesforce help us do a specific job.

So we're importing here something called createElement. We showed you earlier on something called LightningElement, which is getting access to the DOM. CreateElement is allowing us to take a component and push it into a virtual DOM we can test with.

And you can see the second line, we're importing hello because that is actually the component we're testing.

Then this is just Jest functionality, we're actually describing cHello is going to be the name of the test.

The first line, the after each clears the virtual DOM, and then if you go down almost to the second last line, we're actually this section line here that displays greeting lines, we're actually creating the element, see hello, in the DOM, and we're actually seeing what's in it. It's very straightforward, but this is importing in createElement and importing in another component to actually run tests with. So again, imports are working for us.

In terms then of JavaScript libraries that are out there, and this is kind of where things get a lot more interesting, if you're coming from the world of Node. Js or done a lot of JavaScript before, you'll know that for the last fifteen years, the world of JavaScript has moved on apace and there are some incredible libraries out there that JavaScript developers and Node. Js just assume, you know, you require them, you bring them in and just use them. Whereas Salesforce developers are not really used to that. So what we're doing here is we're saying, right, well there are some libraries out there you can grab.

So the libraries, some of them are quite interesting. Two of them here on this screen, Chart JS and D3 JS, they're cool because there's already an example of those in the sample gallery for Lightning Web Components. So if you want to see those in action, you can grab those and just work on the sample code. Others that are there are quite cool. Match JS is one that I've used myself quite a bit. But there's two I want to talk about in particular.

I'll talk about Lodash and Moment JS. Lodash underscore is a library, a huge utility library, allowing us to do a massive amount of functionality with JavaScript code that's been stable for a long time, and we can use those. We're gonna use this now in one of my demos coming up.

And the one on the right hand side, Momo. Js, is probably if you've done a Node. Js course in your life, it's probably the first one you've learned. Momo. Js has a fantastic JavaScript library that allows us to manipulate dates and times, and doing great things with those. So I'm gonna show you two different demos. I'm gonna show you a demo of using my own JavaScript to display some records and how I can order them, and then I'm gonna show you how to do a similar thing with these two libraries.

So the first one I'm gonna show you is one called top let's see here. Yeah. It's called fake data fetcher. Now fake data fetcher is actually a code that you can pick up in the Lightning Web Component recipes out there in the sample gallery, but this particular code here, if I show you the code behind it, this is doing quite a lot of nice stuff. The main thing it's doing is it's getting back data from an external source, and in this case, I'm able to order them. So this is where I'm gonna use my own JavaScript to order some code, get the one with the lowest balance, the one with the highest balance, change dates, that kind of thing.

So let's read that code first.

So fake data fetcher is basically the standard component. It's very simple. The template is very simple. We're simply making a Lightning Data Table. If you're familiar with Lightning Web Components, it's one of those components that will take you a while to get used to, but it has quite a lot of powerful features. The data and the columns, this is just what's being displayed, but it's really how we sort them is really what this code comes into along. And if we change them, we're actually gonna call some code.

So in our JavaScript file, we're gonna do some imports in here. The first one I'm gonna show you is getting the data in the first place. So we actually have an import here called fetchdata helper. Js.

If we look for this one, and in this one here, we're actually bringing in a call to an external web source. So this is a web endpoint we can grab some information from. It's just simply a post out there grabbing information and bringing it back. So we're actually importing that in and also the type of metadata it brings back.

So here is our code and when we do our connected callback, we're actually fetching this using the await keyword, which makes it asynchronous. We get back our data, and then we display it on the screen. Nothing too difficult there. What I'm gonna show you mainly though is how I sort it. So when I tap on a column heading, what exactly is happening here?

So when I tap on it, I'm calling update column sorting. It's a function within my JavaScript file. Here it is here. Four lines of code. It's pretty simple.

It's actually doing some it's picking up what I want to sort by, what direction has been sorted. I have to parse it out so I get a copy of the data so I can manipulate it, and I'm calling something called sort data. Now sort data is not here, but I'm actually importing it from a helpful JavaScript file I've written before, and here's my sort data function here, which is something I actually grabbed off the web a long time ago, made it work for myself. And this said, not only does it actually sort by string, it actually sorts by type as well. So that's why the numbers are able to change, that kind of thing. So remember to import in a lot of code I've grabbed from elsewhere, I went in a few lines of code on my JavaScript, I was to do a call out to an external source and sort my data out, and then reuse this in different ways for different components.

So this is the code written with my own code, my own JavaScript.

But let's look at it from the point of view of using an external library, like low dash underscore and moment JS to do something kind of cool.

So what I've done here is I've made a Lightning Web Component that I've dragged onto the homepage of Salesforce, and this is doing a particular list of opportunities.

In this case, I'm actually getting all opportunities.

This is calling Apex code, but just getting all opportunities in a random order. And then I want the JavaScript to be able to order them by amount in descending order and close date in ascending order. So you can see here the amounts are sorted in descending order, and if I look at the three of them that are a hundred twenty thousand, they're ordered date with the most recent date at the at the bottom.

So how did I do this in JavaScript code? Let's go over here and have a look. So it's called top opportunities table.

The HTML is pretty simple. I've actually got two tables here. The reason for this is that I did a second one where I'm filtering the code and only showing the ones that are closed one.

So how do I do both of these? They're both done in a very similar way. Look at the JavaScript, and we can see a couple of things.

We're actually importing in some things.

I'm calling Apex, which is another import. Just to let you know, if you wanna call Apex method, you gotta use an import. This is the Apex class and its method I'm calling in. I call this one get opportunity list.

I'm actually showing a toast if I get an error. I Hopefully, I won't get an error in this case, but you can. But then I want to bring in two external frameworks, two external JavaScript files, lodash and moment. Now if you're from the world of Node.

Js, you're normally used to making a package JSON file, installing them in, and just calling them. It doesn't work that way in Salesforce. We actually have to make these things as static resources. So that's what we've done here.

So there's two static resources where I've gotten the core JavaScript for these two frameworks. Just to confirm to you guys what that means is that in Moment JS, if I want to download, I have to go and get the Moment JS actual JavaScript file and bring it in as static resource, and the same at Lodash, and please make sure you don't do what I did and not bring in the full build I brought under COBOL and some of them didn't work. Bring in your full build and make sure you have all the JavaScript there, but it's pretty small. This is full Lodash underscore.

So we have to bring these in. So these are static resources in Salesforce, and I'm gonna use another import in, Lightning Platform Resource Loader, to bring these static resources into Salesforce. You see it's called load script in my particular function, my component here. Let's go down and see what these things are like.

In my connected callback, which is one of the lifecycle hooks within component code, I'm calling first of all, I'm gonna load in moment JS, and I'm gonna do these things serially. So moment JS is gonna be initialized, and then here is my load script. This is using that library Salesforce give us to load that script, and I'll load in moment JS. When it is complete, I'm then going to do something else.

If not, I'm gonna catch an error, and this is where I get my toast at.

My next line is to bring in Lodash, which is very same code. I'm gonna bring in Lodash, initialize it out, and assume it all works, I know everything is loaded, which is great. And what I get then at the end is I'm picking up all the records that I want to get. So all my library is loaded.

So how do we get the records? Well, that's nothing new. I'm actually using my imported Apex method here, and I'm gonna call that, And this is actually the method here. It's getting you back, in this case, all opportunities. So this is very much not a production ready demo. You don't want to get all opportunities and anything that you ask for, but in this case we're bringing them back in a model because it's a scratch org and there's a small amount of opportunities there.

Now I want to get back my opportunities, but the first thing I want to do is I want to order them. How do I order them? Well, I could have done the JavaScript file I did before, but instead I'm using Lodash, and in Lodash there's a very handy little function called order by, and how you call Lodash is used in underscore. Underscore dot, and that's calling the Lodash library, and you can go order by and call stuff that you want to call. We do a quick look over to Lodash and see some of the documentation.

So let's just talk about what Lodash can do. So this is Lodash, huge library of different functionalities that we have.

OrderBy allows us to order collections based on multiple different ways.

We can also use sortby, which is similar.

There's a few other options then to actually get arrays in terms of get the first element of an array, everything apart from some elements of an array.

Is something a number, is something an object?

It's a huge amount of utility functions you can use so that you can use one line of code to do some amazing stuff.

So if I go back to my code base, hopefully you can see this. So in my code, what I've done is one line of code, I'm taking that result, that load of records I got back from Apex, all those opportunities, and I'm ordering them on one line. So I'm ordering them by amount first, and amount is gonna be ordered in descending order, and closed date is gonna be ordered in ascending order, as I showed you. So the most recent one at the bottom. So one in the code, I've ordered all of my records, and that would have been a number of lines of code in your own Javascript. And what you really wanna do is in your own, like, web component in this area here, start coding how to order them, because there's loads of help out there to help you do all this stuff without writing all that code. And it's all tested already.

So in addition to nodes, there's a few more things we can do.

In our normal web component JavaScript, we can do a foreach over some records, so I'm basically iterating over our order data, which is great, but underscore has got its own way of doing a foreach. You can see they're very similar. I can imagine where one might have been came from the other.

Then later on what I wanna do in my actual solution here, I also wanna do a calculation based on years. So I want to know from the close date when was this? Was this a number of years ago or a number of months ago? When was this? So Moment JS has got a very powerful number of powerful functions. One of them is called from now. I'm using this to show you what it's like.

So I can do something like moment a date from now is gonna give me back how long ago it was. That's what I've done here. That there are two years ago. And that was done again with one line of code. So if we go down here, I'm actually taking up my rotator from now date. And it's moment to get the close date and do from now. So again, one line of code, give you back how long ago this thing actually happened.

One more thing just to show you on lodash is the second table. So just so I did it with the second table again, I have table here that's filtering out all of the records based on something, in this case it's all the closed won opportunities.

And now one line of code from Lodash, we're able to do it underscore dot filter, which is another function within Lodash, but to get that and filter something based on whether the stage of it, this close one, and only give me those records. You can see we're reporting an awful lot of functionality in here with one line of code in many cases. We're just bringing in one library to help us out.

And again, all of these examples are in that GitHub repo. So again, it's github dot com slash barahues1 slash importables.

There's the GitHub repo again. This slide deck will be made available to all you guys. These are some of the resources that I used. The very first link there is to the sample gallery in Salesforce, again just to show you what that looks like in case you don't know. This is a very, very powerful resource where you can learn all about LED Web Components by seeing what the evangelists and the experts are doing. Many of the code snippets I've shown you are in the LWC, the very first recipes one, which is more of a introduction, looking at how it works, whereas many of the other ones are looking at actual examples, very powerful and quite in-depth examples that you can grab there.

The Docker command library is a fantastic resource. I think I go into it every day. It's a way to show what level of components are out there, what we can use, what does an accordion look like, and also the developer guide, is pretty much our go to how we look at Salesforce, how we get components working if you're interested in life cycle hooks, what is rendered callback. All the information is there for you, and it's very very good. I use it all the time.

And then there's a lot of other things in terms of understanding JavaScript and some of the examples I took from my presentation.

And that's the presentation for today, so I will be online when this is being presented. Any questions or wondering where the good old library is or how to use it, please give me a shout out.

Great, thanks. Thanks Barry. It's surprisingly powerful as somebody who's not a Salesforce developer just use Salesforce but has done some JavaScript development. It's very powerful. So basically these are static includes, right? So if you have two Lightning components on the page and they're both using moment dot j s, you're gonna have to include moment dot j s into each one of those components. Right?

And statically push it in So in the world of of Salesforce and certainly in the world of Aura, I'm pretty sure it's the light web components.

As long as you have the resource, you include it in both, but it's only ever loaded once. So you would have to include it in the code of both components, but you only load it once.

In that case, that would be a good example of using a shared component, A separate component imports, do some code and you can call some functions from there.

And you can do no display components, They don't have to have an HTML, so you can create your own library of utility functions of your own and throw those in there.

You can import them in, like I did the C user, that C user example didn't actually have a HTML template at all. Just import it and then use it, exactly, yes.

So you can have The same thing in Aura would have been quite more difficult.

For example, if you have a custom object that you want to have a couple different Lightning component views on, just create your one, all your utility stuff for managing your custom object, then you just import that into each of your components.

Exactly, yes, exactly.

Are there any performance considerations?

I mean, can you load up, you know, twenty, thirty, forty libraries in there and Yeah.

The the bigger the libraries, obviously, is the world of the web. Yeah. It will take a little bit longer. The only thing I would say is that you've seen me import JavaScript of my own, which I import in almost directly and use this. When I did the call out to the external web source, I did await, and then for things like lodash and from moment JS, I did bring them in with the platform resource library.

I would say that if you've got a JavaScript file of any size at all, bring it in as a static resource.

Don't bring it in directly in, because it only slow down the responsibility of your code.

I haven't heard any plans yet for Salesforce to do something like add, require or package JSON or certainly CDN them in. They don't currently work.

But they are working on ways to allow us to do this kind of thing. Evergreen is certainly a way that they're trying to figure out how far we can take very advanced components and huge amounts of work. So I can imagine us being able to CDN various JavaScript plus in modern web component development, you can actually CDN at someone else's component entirely and use it somewhere else. So that all could come, it just isn't there right now.

But performance for all those Salesforce would take very seriously, that's the reason we don't have them. Salesforce tend to worry about their performance a lot. So that's the main reason you should use static resources to bring in your large jobs.

Great. Well, thanks so much for for the talk and it's interesting interesting topic and a very powerful new new really very new part of Salesforce. Thank you, Barry, and we appreciate your time.

Appreciate it, Leonard. Thank you and Casey for organizing the conference.

Best of Thank you.

‍