Microsoft 365 Community Community Demos, 25 Apr 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community demo - SharePoint Library Components – Introduction and optimized bundling

Description

This community call demo is taken from the SharePoint Framework community call recording on 25th of April 2019. In this video, David demonstrates.

Presenter - David Warner II (Catapult Systems) - @DavidWarnerII

The code sample is available from https://github.com/SharePoint/sp-dev-fx-library-components/tree/master/samples/js-optimized-bundling

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-framework-community-call-recording-25th-of-april-2019/

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

A

All right, my name is David Warner I try to be as active as possible, so here's my contact, information and work for catapult blog vlog feel free to reach out to me. If you have any questions so today for my demo, we're going to talk about library, components specifically optimized, bundling so for those that are not as familiar with the library components yet we'll have a brief overview just so.

A

You have a good awareness in context for what they can provide and then we'll take a look at some of the awareness and gotchas that you'll need to know when you're building it right specifically how much you load it up with. So with that in mind, we'll see how we can optimize the bundling of our SharePoint library for the best page performance when our web parts are extensions, use them alright.

A

So what our SharePoint library components, it's the ability to package up using the SharePoint framework, third-party libraries or custom functionality within a hosted library component within our SharePoint tenancy. So, for example, in this demo, we could include in our library, jQuery or a moment so they're, both fairly large libraries were including them in this demo. For that purpose, but they're also pretty popular. The middle icon here represents maybe perhaps custom functionality that we would use across start in NC.

A

Maybe for our organization, that's custom to us, but we use it across a lot of webparts or extensions, and so you can put them into a singular package file that we can see down here. That can be deployed just like we would an extension or a library. Excuse me an extension or a web part and access it from those extensions and web parts. So, in the end, what benefit does it provide well within a SharePoint site collection, for example? Here on the Left?

A

We have our SharePoint page, and these little boxes here may represent our webparts or extension or something like that and they may need to access our library. So typically, these would be bundled directly within our web part or extension, or we would reference them externally. So maybe that would be in a CDN. We don't own. Maybe it's in a SharePoint library that could accidentally be deleted.

A

This allows us to package it all up and have it stored in our SharePoint tenancy available for all site collections and available to all webparts and extensions we build, and so they are loaded once on a page and that's a huge benefit. So multiple webparts on a page can access the component, which is only loaded once so, that's exciting right. So we want to go load it up, and so we go and we start learning more about libraries, there's some great documentation and tutorials on how to do that.

A

So then we start pumping it full of functionality, and then we pump full of more functionality and before you know it, we've overloaded with functionality, and that can make it a little big so so maybe provide another illustration: is there any wreck-it, Ralph fans that are on the call today, if you remember, if you're a parent or you like wreckit-ralph in the last movie at the end of the movie Ralph, the hero was playing a little video game. He was inside of it.

A

He had bunnies that he had to feed or a bunny that he had to feed pancakes too. So imagine if that bunny were our library and imagine if those pancakes we're our custom features, and so then we just start loading it up and loading it up and loading it up and then eventually what does it look like?

A

Well, it's a little big, it's hard to keep filling and if you make it that big and that gets loaded on the page, our users experience is going to result in yelling and screaming and they're going to be shocked. And it's not a good thing right.

A

So we want to see how we can optimize the bundling, we're gonna, take a quick look at non optimized, bundling and and why you might want to optimize the bundling and and you'll see what that means, because we're gonna put them in two separate J's files in the bundle all right, let's dive in so to set the context here, I've scaffold without two different libraries: one is a non optimized, bundling library and one is an optimized bundling over here.

A

I, just simply got a das command prompt open to that non optimized because we'll start there- and here are our two libraries so we'll start with the non optimized and just kind of look to see, what's included so we'll open it up and we've simply just imported the three things that we identified in our slides jQuery moment and we created a couple of simple functions here for an alert and a console log, nothing very complex about as simple as you can get and using the template tutorial that is available to the Microsoft documentation.

A

We just returned these inside of functions or in this case, actually do work inside the functions.

A

So if we go into the non-optimized bundling we'll want to bundle these right and so I'm gonna go ahead and kick off the gulp bundling bundle and we'll do it with a ship to get a good representation of what it would be like in production. Now, I've already pre bundled these this morning. Just for sake of time, and we can see that our bundle here is 355 K right and so that's pretty large.

A

Imagine if your webparts, your extension, only needed to access one of these two guys just want to write something to the console log and just want to alert, provide an alert on the page, but because we've also included moments in jQuery. Well, now we have to pull down the entire bundle like it or not. Right you get what you get. You don't throw fit it's kind of that scenario, but there is a better way. So, let's look at the optimized, bundling I'll go ahead and close that open up the optimized bundling close this.

A

The first thing you may see is we have more typescript files, so I've separated out into each set type script file. What it is that we want to have done. Here's our console and alert here's our jQuery, similar to the exact same functionality that we saw, but now this time, instead of just simply returning them close this we're using some async and await properties on our functions to provide that information back to our webparts in our factory origin in extensions.

A

So if we go back up to our PMP demo, we'll go into optimize, bundling and let's go back in their distribution file and I won't Reeb undle here, just because of sake of time. I want to leave plenty of time for the other demo, but you can see now when I bundle this this morning. Instead of one big bundle file, we actually have separate bundle files right. So I can tell just by the size that this Tootoo is my custom functions right.

A

They are very small if I open up my custom function is here close it. We can see it's just two small functions that do have two very simple things that is only one kilobyte and then I can tell just by knowing jQuery is 88k and moment is 267 k. So if I wanted to now pull in just this functionality to my web, Harter extension I'm not having to load all this other stuff with I can literally just pull in this singular item.

A

The singular import custom functions TS and this class and the functions that are available in it and that's only going to be a payload at runtime of one kilobyte right. So, let's see what that looks like on an actual web part.

A

I've got a web part set up here, I'm not going to go in how you consume that there there is information on the documentation on how to consume from a library, I, just kind of want to show the pay off here. So I've set up a simple web part that allows it to import the various pieces that I just identified: I've pre-loaded the library in my tenant and I've pre-loaded this web part in my tenant with buttons that will import each individual one.

A

So keep an eye down here: I've scoped or filtered my network panel to pop warner. So that way it only shows what is going to be served up from my actual site here from my tenant and so we're gonna go through and kind of import each of these individually.

A

So we'll start with jQuery, so you can see BAM I've actually used jQuery in this instance to not only load it but then update this little panel right here and you can see that that was the only thing that was loaded was the one dot one, which is where that jQuery library is included. So now we know there's an alert on the custom functionality. We see. It's called my alert. We see that right here and we see that 2.2 was called in at only 1.1 Kay. So now we benefit there and then moment now.

A

If anyone saw my tweet before the call I had mentioned, that I was going to give a sneak preview of the next great superhero if you're excited about Avengers, so that moment has come. The moma are all waiting for or dreading one of the two. So we'll go ahead and import moment and would have known it Parker the next Avenger operation, PNP right, but we've imported moment right here. We can see that being pulled in at 0-0 and we were able to utilize it right here right.

A

So we show the actual time that was the exact moments that Parker became the next Avenger, so very cool stuff. It really opens up the ability to utilize library components, but I have to create a million if you don't want. If you want to create one library component, that includes a lot of functionalities. So it's easier to maintain. Then you can optimize the bundling of it. So go build some libraries go optimize, your bundling and see Parker and theater soon and I'll. Just leave you with one last slide.

A

There is a ton of links here, I'm going to include them in the blog post that I make, but there's the overview. There's the tutorial and there's the pnp repo that is now available and a lot of other community people have been creating some fantastic stuff. Sir Guy Sergei has created a really good blog. Vardaman has a really good sample here. So these guys are awesome, check them out as well, and thank you that's a he just pasted in that sample. That was just uploaded that you saw today is available in the github repo.

A

Now for you to go, check out and play with and add to or modify so thank you guys, great stuff. Thank you David. For that always excited to see a new Avenger appear.