Examples used in this talk include sorting data in Salesforce, using forReach to calculate how long ago a Close Date was and display this information in Salesforce, and using _.filter to filter data in Salesforce. Viewers can follow along with these examples by using the provided resources, available at: github.com/barryhughes1/importables
What You Will Learn
- Introduction - Barry Hughes [00:00:41]
- Introduction to Lightning Web Components [00:02:31]
- Lightning Web Components file structure [00:05:18]
- LWC - Creating Our Own Imports [00:11:03]
- Launching in a local web development server [00:14:15]
- ‘Gotchas’ - things you can and cannot do [15:37]
- LWC - Standard Components [17:42]
- Imports at work - Jest Tests [20:00]
- LWC with Lodash and Moment.js [00:21:51]
- Fake-data-fetcher demo [00:22:48]
- Bringing in Moment.js and Lodash as a static resource [00:27:00]
- What Lodash can do [00:30:19]
- Using forReach to calculate how long ago Close Date was [00:31:32]
- Using _.filter to filter data [00:32:37]
- Resources for this presentation [00:33:00]
- Using shared component code [00:34:55]
- Performance considerations when loading libraries [00:36:30]
[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: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: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: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: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: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: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: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: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: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: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: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: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: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: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: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: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: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: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: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.
About Xforce Data Summit
The Xforce Data Summit is a virtual event that features companies and experts from around the world sharing their knowledge and best practices surrounding Salesforce data and integrations. Learn more at www.xforcesummit.com.