SP-PNP-Js Vs SharePoint API

Brief about SPPNP Js

 

SpPNP Js is a JavaScript framework that makes life easier for SharePoint Developer. We can definitely use the operation using Sharepoint Rest APIs but using SpPNP js the code becomes much easier and readable for other developers and Support Engineers. It gives us the flexibility to use the concept of typescript. For better understanding, I am putting an example of creating a list item in both the Technology.

 

Create Operation Using SharePoint Rest API

private addListItem(): void {
    var SoftwareTitle = document.getElementById("txtSoftwareTitle")["value"]; //Value Fetching From Dom Element
    var SoftwareName = document.getElementById("txtSoftwareName")["value"]; //Value Fetching From Dom Element
    var SoftwareVendor = document.getElementById("ddlSoftwareVendor")["value"]; //Value Fetching From Dom Element
    var SoftwareVersion = document.getElementById("txtSoftwareVersion")["value"]; //Value Fetching From Dom Element
    var SoftwareDescription = document.getElementById("txtSoftwareDescription")["value"]; //Value Fetching From Dom Element
    if (SoftwareTitle !== "" || SoftwareName !== "" || SoftwareVersion !== "") { //Checking for null values
        const _url: string = this.context.pageContext.site.absoluteUrl + "/_api/web/lists/getbytitle('Software')/items"; //SharePoint Rest API URL Creation
        const body: any = { //RestApi Body Creation
            "Title": SoftwareTitle,
            "SoftwareName": SoftwareName,
            "SoftwareVendor": SoftwareVendor,
            "SoftwareVersion": SoftwareVersion,
            "SoftwareDescription": SoftwareDescription
        };
        const spHttpClientOptionns: ISPHttpClientOptions = { //Rest Api Option Creation
            "body": JSON.stringify(body)
        };
        this.context.spHttpClient.post(_url, SPHttpClient.configurations.v1, spHttpClientOptionns) //SharePOint Rest Api Calling
            .then((responce: SPHttpClientResponse) => {
                if (responce.status === 201) { //201 is responcecodefr Created Checking that if the item created Successfully
                    let statusMsg: Element = this.domElement.querySelector("#StatusDiv");
                    statusMsg.innerHTML = "List Item Created Sucessfully";
                } else {
                    let statusMsg: Element = this.domElement.querySelector("#StatusDiv"); // Checking For Any error during creation of the list item
                    statusMsg.innerHTML = "Something Wrong Happens Please contact Dev Team WithFollwing Details " + responce.status + " " + responce.statusText;
                }
            });
    } else {
        alert("Software Title, Software name, Version aremandatory field Please fill out and try Again!!");
    }
}

Create operation Using SP-PNP-JS

import * as pnp from 'sp-pnp-js'; //importing pnp js as pnp
private addItem(): void {
    var title = document.getElementById("txtSoftwareTitle")["value"]; //Value Fetching From Dom Element
    var name = document.getElementById("txtSoftwareName")["value"]; //Value Fetching From Dom Element
    var vendor = document.getElementById("ddlSoftwareVendor")["value"]; //Value Fetching From Dom Element
    var version = document.getElementById("txtSoftwareVersion")["value"]; //Value Fetching From Dom Element
    var desciption = document.getElementById("txtSoftwareDescription")["value"]; //Value Fetching From Dom Element
    pnp.sp.web.lists.getByTitle("Software").items.add({ // Calling Add fuction which expect a JSON object to post the data
        Title: title, // The format is- sharepoint column name : variable
        SoftwareName: name,
        SoftwareVendor: vendor,
        SoftwareVersion: version,
        SoftwareDescription: desciption
    }).then(() => { //checking if sucessfull
        //StatusDiv is a div which defined in Render method
        document.getElementById("StatusDiv").innerHTML = `<div>Item Added Sucessfully</div>`; // Checking For Any error during creation of the list item
    }).catch((error: Response) => {
        document.getElementById("StatusDiv").innerHTML = `<div>Error Code: - ${error.status} Error Msg:- ${error.statusText}</div>`
    })
}

as both codes, we can see by using PNP Js we can achieve better code readability as well as lesser code.

 

But as PNP js supports typescript, so behind the screen it basically converts the function to Pure JavaScript.Which comes with a performance penalty.

 

Converted Java Script For SP-PNP-JS

CrudWebPart.prototype.addItem = function() {
    var _this = this;
    var title = document.getElementById("txtSoftwareTitle")["value"];
    var name = document.getElementById("txtSoftwareName")["value"];
    var vendor = document.getElementById("ddlSoftwareVendor")["value"];
    var version = document.getElementById("txtSoftwareVersion")["value"];
    var desciption = document.getElementById("txtSoftwareDescription")["value"];
    sp_pnp_js__WEBPACK_IMPORTED_MODULE_3__["sp"].web.lists.getByTitle("Software").items.add({
        Title: title,
        SoftwareName: name,
        SoftwareVendor: vendor,
        SoftwareVersion: version,
        SoftwareDescription: desciption
    }).then(function() {
        _this._clear();
        document.getElementById("StatusDiv").innerHTML = "<div>Item Added Sucessfully</div>";
    }).catch(function(error) {
        document.getElementById("StatusDiv").innerHTML = "<div>Error Code: - " + error.status + " Error Msg:- " + error.statusText + "</div>";
    });
};

Converted JavaScript For Rest API

private addListItem(): void {
    var SoftwareTitle = document.getElementById("txtSoftwareTitle")["value"];
    var SoftwareName = document.getElementById("txtSoftwareName")["value"];
    var SoftwareVendor = document.getElementById("ddlSoftwareVendor")["value"];
    var SoftwareVersion = document.getElementById("txtSoftwareVersion")["value"];
    var SoftwareDescription = document.getElementById("txtSoftwareDescription")["value"];
    if (SoftwareTitle !== "" || SoftwareName !== "" || SoftwareVersion !== "") {
        const _url: string = this.context.pageContext.site.absoluteUrl + "/_api/web/lists/getbytitle('Software')/items";
        //document.getElementById("StatusDiv").innerHTML=""+_url;
        const body: any = {
            "Title": SoftwareTitle,
            "SoftwareName": SoftwareName,
            "SoftwareVendor": SoftwareVendor,
            "SoftwareVersion": SoftwareVersion,
            "SoftwareDescription": SoftwareDescription
        };
        const spHttpClientOptionns: ISPHttpClientOptions = {
            "body": JSON.stringify(body)
        };
        this.context.spHttpClient.post(_url, SPHttpClient.configurations.v1, spHttpClientOptionns).then((responce: SPHttpClientResponse) => {
            if (responce.status === 201) {
                let statusMsg: Element = this.domElement.querySelector("#StatusDiv");
                statusMsg.innerHTML = "List Item Created Sucessfully";
                this._clear();
            } else {
                let statusMsg: Element = this.domElement.querySelector("#StatusDiv");
                statusMsg.innerHTML = "Something Wrong Happens Please contact Dev Team WithFollwing Details " + responce.status + " " + responce.statusText;
            }
        });
    } else {
        alert("Software Title, Software name, Version are mandatory field Please fill out and try Again!!");
    }
}

As we can see in the comparison For REST API calling browser does not perform any conversion so it renders faster than SP-PNP-JS.