[00:00:00] Hello and welcome to another Xforce Data Summit presentation. Today, we have Barry Hughes who works at a Salesforce consultancy in the UK called Blue Wave Group, they're a platinum Salesforce partner, and he's going to talk about importing JavaScript to extend your Lightning components. So here's Barry.
[00:00:41] Thanks very much, everyone. It's a pleasure to talk to you all today. Big kudos out to Casey and to Leonard and Paul and to Integrate.io for organizing this great event. So, today I'm just going to talk to you for about half an hour on importing JavaScript. You own JavaScript, JavaScript is already out there.
[00:01:00] And looking at how imports help your Lightning Web Components. It's a technical session, but the general way to the Lightning Web Components, the advantages of them, and how we can extend them, is probably of interest to most people. So here's a brief introduction to me before we get into the content here.
[00:01:19] I work for a company called Blue Wave Group. I personally am based in Ireland, but they're based in the UK. We've got our fingers in many clouds. As you can see, we're a platinum partner. We’ve people who are both, not just consultants, but also instructors. For myself, I'm an application architect.
[00:01:36] I instructed for Salesforce for quite a long time. I don't do it quite as much anymore. I'm a Pluralsight author, which I'll come back to in a second. And also I organize the developer group based in Dublin in Ireland, which is going now for eight years.
[00:01:48] So as I said, I'm a Pluralsight author, so if you want to learn more about Lightning Web Components and a lot of things on Salesforce, there’s a huge number, I think it’s 50 different, I want to call, play-by-play courses and more official courses besides on all aspects of Salesforce including a free course on Lightning Web Components. One of the free ones is my own. Right now in the month of April 2020, PluralSight are offering their service for free all around the world, even if you're not a subscriber.
[00:02:16] But if you're not a subscriber, and they haven't got a free when you're listening to this recording, this course will remain free all the time. So you can go through that course that shows you how to prototype your components and go through a full example of getting Lightning Web Component suite up and running.
[00:02:31] So what I want to talk about today is Lighting Web Components. This is a subject that kind of came out of the blue a little bit because we've been developing Aura components since about 2016. We first introduced the idea of component-based development and Salesforce in 2014.
[00:02:45] Took a couple of years for Aura components to be fully available. And the main problem with Aura components and the main reason we moved to Lightning Web Components was that 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 to run on a browser.
[00:03:07] 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.
[00:03:18] So web components were born. Web components is not a Salesforce thing, it is a general web thing, but Salesforce has 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 stocks, if you're in Angular, new portions of Angular, React, Vue.js, Ionic, lots of others that are out there.
[00:03:40] 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.
[00:03:53] So Lightning Web Components were announced in December 2018 and a world tour in New York came out of the blue. 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 by the summer of that following year, which is very quick compared to the Aura rollout.
[00:04:19] At Blue Wave Group we deployed our first Lightning Web Component in June of 2019 and we've been developing pretty much exclusively Lightning Web Components since then, although sometimes we have to make Aura for different reasons.
[00:04:30] But the use and improvements of the platform for Lightning Web Components has moved at quite a pace, to such an extent that TrailheadX is coming up in June and it's virtual. We're expecting a lot more news on Lightning Web Components there.
[00:04:43] But it's been open-sourced. We can see what the guys build to make Lightning Web Component work in Salesforce. The standard components have been open source. 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 be.
[00:04:52] We can also look at Lightning Web Component and do local development on it, on our own PC without the need of a 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 on how to get up and running with Lightning Web Components.
[00:05:18] So most developers and administrators have done a Trailhead to introduce themselves to Lightning Web Components. What they've done is a bit like what you're seeing here on the right-hand side. They install VS 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 Lightning Web Components and edit them.
[00:05:41] So we're using the VS 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 HelloBinding, that's all part of a sample gallery and a lot of Trailheads that go into letting you learn how to make these components.
[00:05:59] And when you make these components with just your code, you get a folder and you get three files inside of it by default. And in this case, we're getting a HelloBinding folder, a JavaScript file, a 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.
[00:06:07] But the JavaScript file is pretty much mandatory, and the XML file is just to show where the JavaScript file or a component is available to be used. Just to note that all of the names of the files must be exactly the same, including case sensitivity.
[00:06:36] 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. [00:06:53] 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 want to do, and we are also exporting a class so that Salesforce can take that component class and use it elsewhere.
[00:07:12] 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 is kind of cool.
[00:07:30] 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, I’ll show you in a second where it’s stored and I'll give you a demo of this. But we have a JavaScript file that’s got a class, so again, if you're not used to ES6, we can make classes in, in our JavaScript files.
[00:07:52] And that class has got a constructor 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 lets us get the user's name and age and console log them. Nothing amazing.
[00:08:06] But you can see, which is kind of fuzzily underlined here, the word export. Now, the idea behind this is that we can now export JavaScript functions, JavaScript classes, and even JavaScript Constants, and other variables out. Sp that they made available to be imported somewhere else. So these ones are all exportable, we have export in front of our functions and we've got export default in front of our class.
[00:08:32] And the export default in front of the class is pretty cool because that means that we can grab it in a slightly different way on our imports. We can only have one default export in a JavaScript file. On the right-hand side, you're seeing actual import here. I just want to move down my face here. So we've got an import and we’re importing the word user and some other things from .lib/user/js
[00:08:58] 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 that has access to 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 printUserName, and we're just giving it that name for the case of the particular JavaScript file we’re in that’s called main.js.
[00:09:25] Then we can create a new user object because we've imported it. We're making a user called Bob and he's going to be 30 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.
[00:09:41] So we can make JavaScript files and we can import these things to separate our code. Very similar in Aura. We were able to make helper class 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'd like and even bring in parts of them and not bring in all methods.
[00:10:02] 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 to have a name and a weight, so we can make an elephant, gorilla, whatever the case may be.
[00:10:22] But on the right-hand side, we're importing that animal, but we're extending it in our class. So you can see that a class here, we're extending it. and now we got this class. So there's 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.
[00:10:39] And then later on we can call the gorilla, see 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 it's also calling subsequent methods in its parents animal class. So you get the idea. We can import and export code and extend that code as well if you want to.
[00:11:03] So in Salesforce, when we make Lightning 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 and this presentation, I will show you pretty much where we can do it.
[00:11:19] So for example, we've got a few different places we can have JavaScript. Here's our HelloBinding 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.
[00:11:35] So on the right-hand side you can see I can import in from the root. You can see it's actually coming to .user.js. we can also import in from the .helpers’ user.js, so you can have folder structures if you want to. All of this is perfectly possible. Let me just come out of here and show you this actually an action.
[00:11:55] 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 JavaScript file at the root, which is here. And also bringing in, we possibly could bring it in using some code and helper class.
[00:12:15] Here's a sorting JavaScript file that's actually in the helper class in here. You could also bring in a static constant as I said earlier on. This is a contacts list. We can bring that in as well if we want to do some testing. So this kind of thing is what we can all bring into our code.
[00:12:30] 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 LWC 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.
[00:12:51] It can, however, be another component in its own right. So if we scroll down, you will see, I've 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.
[00:13:08] We can bring that in to help our HelloBinding class by doing an import of c/user, this line here. Let’s uncomment 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.
[00:13:34] Or we can make a reusable piece of JavaScript, add it to its own Lightning Web Component. You can imagine one called utilities, whatever the case may be, and you can bring that in. I don't need to bring in those parts of that JavaScript in that utility class that you want to.
[00:13:51] Again, as I said, it's only a JavaScript file, there's no export on this, no import of the normal Lightning stuff that you see. There's no Lighting elements needed in this. There's no exporting of a default class extending like the element. It's just basic JavaScript that we can use. And if we look at that class actually in action
[00:14:15] Here we're actually launching this thing in a local web development server. Let me just actually show you how that's done. So, Visual Studio Code, we can take any component, which is this helloBinding. We can right-click on it and there's an option to preview the component locally.
[00:14:30] if you install SFDX extensions in your Visual Studio Code at the time of recording this presentation, it will already be 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 going to change this field to make it happen.
[00:14:52] 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. Yeah. Okay. 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 which I hope you can see here.
[00:15:17] I'm trying to drag up here. Can you see, Leonard, can you see this stuff here? 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. Okay. But all this is in a GibHub repo - github.com/barryhughes1/importables - you can grab that repo and all the code you’re seeing is in there.
[00:15:37] 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 sampleContacts1.js, which doesn't exist, that won't save and it'll come back with an error in your code when you save it. So you can't actually save that.
[00:16:00] However you can make errors in your expressions. So this expression says printNameee with lots of ‘e’s here as printUserName, there is no print name with lots of ‘e’s method in user.js, that will actually save but it will cause an error, so it's just something to keep in mind.
[00:16:19] I can also access printDOB, I've written as an expression, printDOB does not actually exist, but it will allow you to save it. You just can’t call it. As earlier on, your imports can come from files within the LWC folder. A static resource, which we'll show you later on, or from another Lightning Web Component, which is the user command I showed you a few minutes ago.
[00:16:40] 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.
[00:16:51] So I showed you earlier on how to import in our user lightning component as a shared JavaScript file in our component, this is actually an example taken directly from the Lightning Component recipes.. if you look for on the recipe sample gallery, you'll find them, this is one called MiscSharedJavaScript.
[00:17:17] It's an example of bringing in some functionality to do with finance. In this case, we're actually importing 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 a monthly payment based on the calculation.
[00:17:35] 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 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.
[00:18:06] As we talked about lightningElement we talked about a few minutes ago - lightningElement 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, but it is used for us to manipulate the Dom.
[00:18:21] API, track, and wire. They're also, most 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 I'm getting from analytics, 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.
[00:18:52] 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 will 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 for us to say it on the stuff on the right-hand side, the @Salesforce libraries, those are more to do with utility functions.
[00:19:15] Things like getting down a static resource, talking to word translation, bench, talking to Apex, getting what your client’s form-factor is, getting user ID, things like that.
[00:19:30] 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 not just getting records, getting lists, but also manipulating records, getting access to the UI record API. I'm getting access to what a page layout looks like and [unintelligible 00:19:46] that kind of thing. But the two at the bottom, the lwc-jest and also the platformResourceLoader, these are the two I want to show you some quick examples of
[00:20:00] In terms of jest, we can actually test our Lighting Web Components using Jest and other libraries too. In this case we're using Jest. This is a good example of using imports, standard imports, and Salesforce helps us do a specific job. So we're importing here something called createElement.
[00:20:18] 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.
[00:20:34] Then this is just Jest functionality. We're actually describing C-hello is going to be the name of the test. The first line, the afterEach clears the virtual Dom, and then if you go down almost to the second last line, we're actually, the section line here that displays reading lines, are actually creating the element C-hello in the DOM and we’re actually seeing what’s in it.
[00:20:56] It's very straightforward, but this is importing in a createElement, and importing in another component to actually run tests with. So again, imports, working for us.
[00:21:05] 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 15 years the world of JavaScript has moved on at pace and there are some incredible libraries out there that JavaScript developers and node.js just assume, you know, you're required them to bring them in and just use them.
[00:21:33] Whereas a Salesforce developer is 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, we can get, 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 examples of those in the sample gallery for Lighting Web Components.
[00:21:51] 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, Math.js is one that I've used myself quite a bit, but there's two I want to talk about in particular. I want to talk about Lodash and Moment.js.
[00:22:07] Lodash underscore is a library, a huge utility library allowing us to do a massive amount of functionality for JavaScript code that's been stable for a long time and we can use those. We're going to use this now in one of my demos coming up. And the one on the right-hand side, Moment.js, is probably if who've done a node.js course in your life, would be the first one you've learned. Moment.js is a fantastic JavaScript library that let’s us manipulate dates and times, and doing great things with those.
[00:22:34] So I'm going to show you two different demos. I'm going to show you a demo of using my own JavaScript to display some records and how I can order them. And then I'm going to show you how to do similar things with these two libraries.
[00:22:48] So the first one I'm going to show you is one called, let's see here. Yeah, it's called fake-data-fetcher. Now, fake-data-fetcher is actually a code that you can pick up from Lighting Web Component recipes out there and a sample gallery, but this fetcher code here, if I show you the code behind it, this is doing quite a lot of nice stuff.
[00:23:15] 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 going to 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 our code first.
[00:23:32] So fakeDataFetcher is basically the standard component. It's very simple. The template is very simple, we’re simply making a Lightning-datatable. If you're familiar with Lightning Web Components, it is one of those components that will take you a while to get used to, but it has quite a lot of powerful features.
[00:23:51] The data and the columns, this is just what's being displayed. But it's really how we onsort and sort them is really where this code comes into its own. And if we change them, we're actually going to call some code. So in our JavaScript file, we're going to do some imports in here. The first one I'm gonna show you is getting the day in the first place.
[00:24:10] So we actually have an import here called fetchDataHelper.js. If we look for this one. And, and 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, just simply a post out there and grabbing information and bringing it back.
[00:24:20] So actually importing that in and also the type of metadata it brings back. So here is our code, and when we do our connectedCallback, we are 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. Why I want to show you mainly though is how I sourced it.
[00:24:50] So when I tap on a column heading, what exactly is happening here? So when I tap on it, I'm calling updateColumnSorting, a function within my JavaScript file. Here it is here. Four lines of code. It's pretty simple. it's actually picking up what I want to sort by and what the reaction's been sorted.
[00:25:05] 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 sortData. Now sortData is not here. But I'm actually importing it from a helpful little JavaScript file I’ve written before, and here's my sortData function here, which is something I actually grabbed off the web a long time ago, made it work for myself and this not only does it actually sort by string it actually sorts by type as well.
[00:25:32] So that's why the numbers are able to change. That kind of thing. So I’m going to import in a lot of code I would have grabbed from elsewhere. And in a few lines of code in my JavaScript I’m able to do a call out to an external source and sort my data out and then reuse this in different ways for different components.
[00:24:48] 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, Lodash 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 on to the homepage of Salesforce, and this is doing a particular list of opportunities.
[00:26:15] In this case, I'm actually getting all opportunities. this is calling an apex code, we’re just getting all opportunities in a random order. And then I want the JavaScript to order them by amount in descending order and close date in descending order. So you can see here the amounts are sorted in descending order.
[00:26:3] And if I look at the three of them that are 120,000, they're ordered by date with the most recent date at the bottom. So how did I do this in JavaScript code? Let's go over and have a look. So it's called topOportunitiesTable.html. It's pretty simple. I've actually got two tables here. The reason for this is that I did a second one, or I'm filtering the code and only showing the ones that are close to one.
[00:27:00] So how did 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 want to call an Apex method, you've got to use an import, this is the Apex class and its method I’m calling in.
[00:27:20] I call this one getOpportunityList. I'm actually showing a toast if I get an error, I hope I won't get an error in this case. Then I want to bring in two external frameworks, so external javascript files, Lodash and Moment.js. 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.
[00:27:47] It doesn't work that way in Salesforce. We actually have to make these things as static resources. 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 a static resource, and the same with Lodash.
[00:28:10] Please make sure you don't do what I did and not bring in the full build, I brought in the Core build - that doesn’t work. Bring your full build and make sure you have all the JavaScript there, but it's pretty small. This is full load, so we have to bring these in.
[00:28:23] So, these are static resources in Salesforce, and I'm gonna use another important. Lightning platform resource loader to bring these static resources into Salesforce. You can see it's called loadScript in my particular function, my component here. If we scroll down and see what these things are like in my connectedCallback, which is one of the lifecycle hooks within component code.
[00:28:48] I'm calling, first of all, I'm going to load in Moment.js and I'm going to do these things serially. So Moment.js is going to be initialized, and then here's my loadScript. This is using that library that Salesforce gives us to load that script and I’ll load Moment.js and when it is complete I’ll then go and do something else.
[00:29:03] If not, I'm going to catch an error and this is where I get my toast. My next line is to bring in Lodash, which is the very same code. I'm going to bring in Lodash, initialize it out, and assuming it all works. I know everything is loaded which is great. And what I get then at the end is that 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?
[00:29:35] Well, that's nothing new. I'm actually using my imported Apex method here. I’m going to call that, and this is actually the method here, it’s getting back, in this case, all opportunities. So this is very much not a production-ready demo. You don't want to get all the opportunities and anything that you asked for.
[00:29:45] But in this case, we're bringing it back in a month because it's [unintelligible], the small amount of opportunities. Now I want to get back my opportunities, but the first thing I want to do is I want to order them. How do they order them? Well, I could have done the JavaScript file I did before, but instead I'm using Lodash.
[00:30:00] In Lodash there's a very handy little function called orderBy. And how you call Lodash is using an underscore, underscore-dot and that's calling the Lodash library and you go orderBy 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.
[00:30:19] So this is Lodash's 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 a raise in terms of get the first element of an array, everything apart from some elements of an array.
[00:30:42] 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 written one line of code and I'm taking that result, that a lot of records I got back from Apex, all those opportunities, and I’m ordering them in one line.
[00:31:05] So I'm ordering them by amount first, and amount is going to be ordered in descending order. And close date is going to be ordered in ascending order as I showed you. So the most recent one at the bottom, so one line of code and I've ordered all of my records and that would have been a number of lines of code in your own JavaScript.
[00:31:21] And what you really don’t want to do is in your own Lightning component and this area here, is start coding how to order them cause there's loads of help out there to help you do this stuff without writing all that code. And it's all tested already.
[00:31:32] There’s a few more things we can do in our normal web component code JavaScript, we can do a forEach over some records or basically iterating over order data, which is great, but underscore has got its own way of doing a forReach. You can see it is very similar. I can imagine where one might've been came from the other. Then later on, what I want to do in my actual solution here, I also want to do a calculation based on year.
[00:32:01] 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 number of powerful functions. One of them is called fromNow, I'm using this to show you what it's like so I can do something like moment().fromNow() is going to give me back how long ago it was.
[00:32:19] That's what I've done here, that they 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 rowDat.FromNowDate and it's moment to get the close date and due from that. So again, one line of code getting back how long ago this thing actually happened
[00:32:37] One more thing just to show you on Lodash is the second table, let’s just see what I did with the second table again. I have a table here that's filtering out all of the records based on something. In this case, it's all the Closed Won opportunities. And with one line of code from Lodash, we're able to with _.filter, which is another function within Lodash to get that and filter something based on whether the stage of it is Closed Won and only give me those records.
[00:33:05] So you can see reporting on an awful lot of functionality in here with one line of code. In many cases, we're just bringing in one library to help. And again, all of these, examples are in the Github repo. Again, it's github.com/barryhughes1/importanbles.
[00:33:25] There's the Github repo again. This slide deck will be made available to you guys. These are some of the resources that I used. The very first link there is to the sample gallery within 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 Lightning Web Components by seeing what the evangelists and the experts are doing.
[00:33:48] Many of the code snippets I've shown you are in that LWC Recipes, the very first recipes one, which is more of an 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.
[00:34:05] The doc component library is a fantastic resource, I take a go into it every day. It's a way to show what Lightning components are out there. We can view what an accordion looks like, and also the developer guide, which is pretty much our go to how we look at Salesforce, how we get components working. If you're interested in lifecycle hooks, what is renderedCallback(), all that information is there for you and it’s very very good. I use it all the time and then there are a lot of other things understanding JavaScript and some of the examples I took from my presentation.
[00:34:35] And that’s the presentation for today. So I will be online when this is being presented if you have any questions or wondering where to get a library is or how to use it, please give me a shout.
[00:34:55] Great. Thanks. Thanks, Barry. It's brilliant. 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.js, you're going to have to include Moment.js on each one of those components, right? It's statically pushed in there.
[00:35:26] So in the world of Salesforce, and certainly in the world of Aura, as long as you have the resource you've included in both, but it's only ever loaded. So you would have to include it in the code of both components, but you join it all at once.
[00:35:42] In that case, that would be a good example of using a shared component code, and you can call it some functions from there.
[00:35:50] And you can do, and you can do note display components, right? They don't have to have an HTML, so you can create your own little library of utility functions of your own and throw those in there.
[00:36:00] You can import them in like I did. C-user, that C-user example didn't actually have a HTML template at all. Just import is and then use it. Doing the same thing in Aura would have been quite a lot more difficult.
[00:36:12] For example, if you have, if you have a custom object that you want to have a couple of different lightning component views on, you just create your one, all your utility stuff for managing your custom object, and then you just import that into each of your components. [00:36:26] That's exactly it, yes, exactly. Yep.
[00:36:30] Are there any performance considerations? I mean, can you load up, you know, 20, 30, 40 libraries in there?
[00:36:36] Yeah, the bigger the library is, obviously it's the world of the web, will take a little bit longer. Something 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 outs to external web source, I did await. And then for things like Lodash and Moment.js, I did bring them in with the platform resource library.
[00:37:02] 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 you don't need to slow down the responsivity of your code. I haven't heard any plans yet for Salesforce to do something, add a requires or package.json or certainly CDN them in, they don’t currently work.
[00:37:21] But they are working on ways to allow us to do this kind of thing. Evergreen is certainly a way in that they're trying to figure out how far we can take very advanced components in 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 someone else's component entirely and use it somewhere else. So that'll come, but it just isn't there right now.
[00:37:48] But performance, for all of 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 libraries.
[00:38:03] Great. Well, thanks so much for the talk and it's an interesting topic and a very powerful, new, new, really very new part of Salesforce. Thank you Barry and appreciate your time.
[00:38:16] Appreciate it Leonard, and thank you and Casey for organizing the conference. Best of luck everybody. Thank you.