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
  1. private addListItem(): void {
  2. var SoftwareTitle = document.getElementById("txtSoftwareTitle")["value"]; //Value Fetching From Dom Element
  3. var SoftwareName = document.getElementById("txtSoftwareName")["value"]; //Value Fetching From Dom Element
  4. var SoftwareVendor = document.getElementById("ddlSoftwareVendor")["value"]; //Value Fetching From Dom Element
  5. var SoftwareVersion = document.getElementById("txtSoftwareVersion")["value"]; //Value Fetching From Dom Element
  6. var SoftwareDescription = document.getElementById("txtSoftwareDescription")["value"]; //Value Fetching From Dom Element
  7. if (SoftwareTitle !== "" || SoftwareName !== "" || SoftwareVersion !== "") { //Checking for null values
  8. const _url: string = this.context.pageContext.site.absoluteUrl + "/_api/web/lists/getbytitle('Software')/items"; //SharePoint Rest API URL Creation
  9. const body: any = { //RestApi Body Creation
  10. "Title": SoftwareTitle,
  11. "SoftwareName": SoftwareName,
  12. "SoftwareVendor": SoftwareVendor,
  13. "SoftwareVersion": SoftwareVersion,
  14. "SoftwareDescription": SoftwareDescription
  15. };
  16. const spHttpClientOptionns: ISPHttpClientOptions = { //Rest Api Option Creation
  17. "body": JSON.stringify(body)
  18. };
  19. this.context.spHttpClient.post(_url, SPHttpClient.configurations.v1, spHttpClientOptionns) //SharePOint Rest Api Calling
  20. .then((responce: SPHttpClientResponse) => {
  21. if (responce.status === 201) { //201 is responcecodefr Created Checking that if the item created Successfully
  22. let statusMsg: Element = this.domElement.querySelector("#StatusDiv");
  23. statusMsg.innerHTML = "List Item Created Sucessfully";
  24. } else {
  25. let statusMsg: Element = this.domElement.querySelector("#StatusDiv"); // Checking For Any error during creation of the list item
  26. statusMsg.innerHTML = "Something Wrong Happens Please contact Dev Team WithFollwing Details " + responce.status + " " + responce.statusText;
  27. }
  28. });
  29. } else {
  30. alert("Software Title, Software name, Version aremandatory field Please fill out and try Again!!");
  31. }
  32. }
Create operation Using SP-PNP-JS
  1. import * as pnp from 'sp-pnp-js'; //importing pnp js as pnp
  2. private addItem(): void {
  3. var title = document.getElementById("txtSoftwareTitle")["value"]; //Value Fetching From Dom Element
  4. var name = document.getElementById("txtSoftwareName")["value"]; //Value Fetching From Dom Element
  5. var vendor = document.getElementById("ddlSoftwareVendor")["value"]; //Value Fetching From Dom Element
  6. var version = document.getElementById("txtSoftwareVersion")["value"]; //Value Fetching From Dom Element
  7. var desciption = document.getElementById("txtSoftwareDescription")["value"]; //Value Fetching From Dom Element
  8. pnp.sp.web.lists.getByTitle("Software").items.add({ // Calling Add fuction which expect a JSON object to post the data
  9. Title: title, // The format is- sharepoint column name : variable
  10. SoftwareName: name,
  11. SoftwareVendor: vendor,
  12. SoftwareVersion: version,
  13. SoftwareDescription: desciption
  14. }).then(() => { //checking if sucessfull
  15. //StatusDiv is a div which defined in Render method
  16. document.getElementById("StatusDiv").innerHTML = `<div>Item Added Sucessfully</div>`; // Checking For Any error during creation of the list item
  17. }).catch((error: Response) => {
  18. document.getElementById("StatusDiv").innerHTML = `<div>Error Code: - ${error.status} Error Msg:- ${error.statusText}</div>`
  19. })
  20. }
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
  1. CrudWebPart.prototype.addItem = function() {
  2. var _this = this;
  3. var title = document.getElementById("txtSoftwareTitle")["value"];
  4. var name = document.getElementById("txtSoftwareName")["value"];
  5. var vendor = document.getElementById("ddlSoftwareVendor")["value"];
  6. var version = document.getElementById("txtSoftwareVersion")["value"];
  7. var desciption = document.getElementById("txtSoftwareDescription")["value"];
  8. sp_pnp_js__WEBPACK_IMPORTED_MODULE_3__["sp"].web.lists.getByTitle("Software").items.add({
  9. Title: title,
  10. SoftwareName: name,
  11. SoftwareVendor: vendor,
  12. SoftwareVersion: version,
  13. SoftwareDescription: desciption
  14. }).then(function() {
  15. _this._clear();
  16. document.getElementById("StatusDiv").innerHTML = "<div>Item Added Sucessfully</div>";
  17. }).catch(function(error) {
  18. document.getElementById("StatusDiv").innerHTML = "<div>Error Code: - " + error.status + " Error Msg:- " + error.statusText + "</div>";
  19. });
  20. };
Converted JavaScript For Rest API
  1. private addListItem(): void {
  2. var SoftwareTitle = document.getElementById("txtSoftwareTitle")["value"];
  3. var SoftwareName = document.getElementById("txtSoftwareName")["value"];
  4. var SoftwareVendor = document.getElementById("ddlSoftwareVendor")["value"];
  5. var SoftwareVersion = document.getElementById("txtSoftwareVersion")["value"];
  6. var SoftwareDescription = document.getElementById("txtSoftwareDescription")["value"];
  7. if (SoftwareTitle !== "" || SoftwareName !== "" || SoftwareVersion !== "") {
  8. const _url: string = this.context.pageContext.site.absoluteUrl + "/_api/web/lists/getbytitle('Software')/items";
  9. //document.getElementById("StatusDiv").innerHTML=""+_url;
  10. const body: any = {
  11. "Title": SoftwareTitle,
  12. "SoftwareName": SoftwareName,
  13. "SoftwareVendor": SoftwareVendor,
  14. "SoftwareVersion": SoftwareVersion,
  15. "SoftwareDescription": SoftwareDescription
  16. };
  17. const spHttpClientOptionns: ISPHttpClientOptions = {
  18. "body": JSON.stringify(body)
  19. };
  20. this.context.spHttpClient.post(_url, SPHttpClient.configurations.v1, spHttpClientOptionns).then((responce: SPHttpClientResponse) => {
  21. if (responce.status === 201) {
  22. let statusMsg: Element = this.domElement.querySelector("#StatusDiv");
  23. statusMsg.innerHTML = "List Item Created Sucessfully";
  24. this._clear();
  25. } else {
  26. let statusMsg: Element = this.domElement.querySelector("#StatusDiv");
  27. statusMsg.innerHTML = "Something Wrong Happens Please contact Dev Team WithFollwing Details " + responce.status + " " + responce.statusText;
  28. }
  29. });
  30. } else {
  31. alert("Software Title, Software name, Version are mandatory field Please fill out and try Again!!");
  32. }
  33. }
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.