Microsoft 365 Community Using PnPjs v2, 3 Feb 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Deep Dive on Selective Imports - PnPjs v2

Description

In this video David Warner discusses the new selective imports feature in PnPjs v2. PnPjs provides you an easy and intuitive way of accessing information in Microsoft 365 when you are implementing your solutions using JavaScript/TypeScript.

Video demonstrates following different core scenarios:
- What are selective imports?
- How to use them, and the impact on bundle sizes
- Understanding and using presets

Presenter: David Warner (Catapult Systems) @davidwarnerii

You can find additional documentation and other details around the PnPjs from following resource:
- https://aka.ms/pnpjs
- PnPjs GitHub repository - https://github.com/pnp/pnpjs/

If you ran into any issues on using this library, please do let us know at the the GitHub issue list - https://github.com/pnp/pnpjs/issues

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

A

Welcome to the p-n PJs version deep dive on selective imports. Video in this video we're going to begin by taking a look at the updated documentation specifically for selective imports. Well, then, dive into the details surrounding selective imports, we'll look at an overview of how to take advantage of selective imports when using PN, pjs version.

A

2 we'll also look at the performance improvements between version, 1 and version 2 of PN pjs wind, using selective imports and then we'll wrap it up by taking a look at custom presets and how we can combine multiple selective imports into a single import statement. Let's begin by taking a look at the updated documentation for version 2, you can always get there by using the AKMs /pn pjs URL, we'll begin by navigating to the documentation available at AKA, ms forge /pn pjs.

A

We can then locate the selective imports documentation by locating the transition guide found here on the left clicking on it and then looking for the selective import section in the table of contents here on the right and if we click on selective imports, it will take us to that section within the documentation. We find a short description identifying the benefits of using selective imports with the n pjs version 2.

A

We also find a couple of very simple samples that identify how to take advantage of selective imports, we're going to dive deeper into the Nils and benefits of selective imports and our demos, but in short, selective imports. Allow us to identify the individual pieces of the pn p JS library that we need at that moment in time. For example, what if we were building a web part or extension that needed access to the properties about our web or our site collection?

A

We wouldn't need the components of PN pjs that give us access to the lists or the fields or the content types, but in PN P, J's version 1. It all came as a complete, singular package and because it was imported into our SharePoint framework solution as one singular library, all of the code was included, whether we were using only one piece or not. This, of course, would unavoidably increase the size of our SharePoint framework solution and could have a performance impact. Also included in this documentation is information about presets.

A

Essentially, presets are a way of combining multiple selective imports into a separate file and then within your SharePoint framework solution, you can import that preset in a single line and we'll show how to use a preset file as part of our demos within this video. Now, let's jump into a demo of how we can take advantage of selective imports when using PN pjs version 2 in this demo, we'll begin with a simple out-of-the-box web part and we're going to accomplish two tasks.

A

The first task is creating functionality that will allow us to obtain web properties from our site collection. The second task is to increase that functionality to include lists data from our site collection. Now, I've already installed, PN pjs version 2 for this solution. So the first step is to include the import statements now similar to PN pjs version 1. Our first import statement is simply importing the espy object. We can do that by pasting in our code and while this was all we needed to do for PN pjs version 1 in PN pjs version 2.

A

This is simply an empty object. So if we wanted to access the web properties of our site collection, additional import statements are required to help further illustrate this point before we include those additional selective import statements, let's paste in the functionality for accessing those web properties. First I have a simple function that I'm going to go ahead and paste into our code and briefly review what this function is doing. It's making a simple connection to our web. Looking to obtain the title and URL of our site collection.

A

We then add that to an HTML string, which is then returned to an element within our web part to display that data that we requested, but you'll notice, we're already seeing an error occur on the web connection request. This is because, as mentioned earlier, when we imported PN pjs, the SP object is empty. It does not include any code required to make a connection to the web, so we can fix this error by including the selective import for the web object.

A

We see, the error has now gone away and our function should execute successfully. Now, let's say we want to replace that functionality where we're connect to the web in retrieving properties with additional functionality that connects to the web and retrieves list data we'll go ahead and accomplish that by pasting in another simple function. This new function now makes a connection to our web and requests a collection of lists available.

A

It then cycles through all the lists and updates our HTML object with that list of list names, and once again we see an error occurring on our request for the list data. This is because the Selective imports we've included so far are not requesting any of the code needed to connect to our website and obtain list information. So then, to correct the error, we would add the selective import statement to include the pn pjs functionality to connect and retrieve list data.

A

So let's go ahead and add that import statement drop them down to multiple lines, and we can see that the error on our lists object is no longer present.

A

Now, let's look at a demo that compares the performance improvements between using PN pjs version, 1 and PN pjs version 2 we're going to accomplish the exact same tasks that we did in our original demo within the pn pjs version 1 sample we're going to make a request for the web data and then we're going to look at the bundle size we'll do the exact same secondary request for list data and again look at the bundle size.

A

It will then look at a pn pjs version 2 sample where we accomplish the same tasks, we'll make a request for web data, look at the bundle size and then look at list data requests and look at its bundle, size you're, going to see a significant difference. We'll begin this demo with a simple out-of-the-box web part. That's using p and p j s version. 1 we've included our import statement. The only import statement needed to accomplish the desired task of connecting to our site and obtaining web data.

A

This function is accomplishing the exact same task as our earlier demo did in this video. It's retrieving web data, the title and URL and then updating an HTML element with that data. So let's now execute a gulp production bundle and examine the resulting javascript bundle file size of our solution. We can do that by calling gulp bundle ship in our command prompt and now that our bundling is complete, we can see the file size is 201 kilobytes.

A

Now, let's replace the simple web connection request with a list connection request well paste in our function with the new updated code and then we'll update the request. Now what we've done is we've increased the logic of our component instead of just requesting the web properties. We're now requesting information about the lists within our web.

A

So let's re-execute our GALT bundle request and see if the resulting javascript file size has changed for good measure, we'll go ahead and manually delete our bundle and we'll clear our screen and we can go ahead and execute our gulp bundle, production request, and now we can see even though we've increased functionality. The file size is exactly the same as a reminder with p.m. PJs version 1. It doesn't matter how simple our functionality is, even if we're using the smallest piece of pn, pjs functionality or logic, the entire library will be bundled into our solution.

A

Selective imports, though, available in pn p JS version to change all of that, because, with selective imports, we are identifying only the areas of the p and p j s library we need those are the only areas that get bundled into our solution.

A

So now, let's flip over to a demo of a web part built using pn, p j s version, 2 and selective imports, we'll include the exact same functionality and make the same gulp bundle, production requests and then we'll compare the file sizes to see how they differ in this demo, we're again using an out-of-the-box web part. Now I've already installed, P n PJs version, 2 I've included the import statements to connect to the web properties and I've included the functionality necessary to accomplish that task as well.

A

So let's go ahead and execute the production, gulp bundle request and see the resulting file size of our javascript bundle. We can do that by pasting in our golf bundle request and executing the command. The bundle is now complete and we can see that the resulting file size is significantly smaller than it was with P and P J's version 1, where everything in the library was include.

A

This no doubt has a significant performance improvement impact that we'll talk a little bit more about in a moment, but first, let's update our web part to include functionality that requests lists data from our site, we'll go ahead and replace the existing function with the new code necessary to make the list connection. Of course, we see an error occurring on the list object because we did not yet include our selective import. So we'll do that now and then we'll update the feature function request.

A

So now we're ready to really true good measure and we'll clear the screen. We can now go ahead and paste in our goal. Bundle. So now that the bundling is complete, we can see that our new file size is only slightly larger than it was when we were only requesting the web data. Initially, you may be thinking, that's not a huge differential to go from 201 K down to 65 K or 74 K, but let's jump over to a slide and take a look at the actual percentage differences.

A

Let's take a look at the file size, comparison side-by-side, starting with P and pjs version ones. We know the file size was 201 K. When we were selectively importing the web in list objects, it was 74 K and with only the web, object 65 K when you include the percentage changes, it's astounding, 63 percent decrease in file size for the web and list objects and a 67 percent decrease when we're only needing the web object. Imagine if we had multiple webparts or extensions on a single page, all using PN PJs with PN pjs version 1.

A

That would have meant a complete redundancy for the library in every solution. Each web, part or extension, would have included a full copy of the pn p JS library. Now, though, with p and p JS version 2 in selective imports, each sharepoint frame, rich solution can include only the necessary parts of the p and p j s library to accomplish the desired task. Let's now take a look at a demo of how we can include multiple selective imports into a single import statement using presets in this presets demo.

A

We'll begin with the same web part we last used in the previous demo we're already, including the selective imports to request the web and list data, and our functionality is already there in place as well. The first step necessary to set up presets for our selective imports is to create a preset file, we'll go ahead and do that here, new file and we'll paste in the name P and PJs presets ts in this typescript file, we're going to include the import statements of the components of P and PJs that we need they will be.

A

The SP rest object, the web's object and the lists object. We'll then export a new copy of the SP rest object. We can go ahead and save, and now we can go back into our primary typescript file for our web part, remove the individual, selective import statements and replace it with an import statement from the preset, so we'll go ahead and click on our web part typescript file we'll go ahead and delete the import statements and, of course we see an error is now occurring on our SP object within our function.

A

It's to be expected because we removed the import statements that include PN pjs, so to fix that we'll go ahead and paste in the import statement for our preset we're simply pointing at the preset importing the SP object that we had exported, and now we see that our request to the list object is no longer throwing an error. No doubt this is a very simplistic example of creating and using a preset the PN pjs github. Repository, though, includes additional samples that show deeper functionality.

A

When it comes to presets, you can find those samples by going to the root github directory 4pn pjs, that's located at github com, /p NP for /p n pjs. Once you're, there you'll locate the samples folder as seen here, click on samples and you can find another folder called project preset. Thank you for watching this pn pjs version 2 video on selective imports for all the latest and updated documentation on p + pjs visit AKA, ms forge /p, n PJs.

A