Table of Contents

Introduction

In the modern tech world, most of the applications are revolve around client-side development. SharePoint also concentrated most on client side development from SharePoint 2010 onwards by introducing the different type of Client-side APIs. Below are the commonly used APIs for accessing SharePoint objects from the client side. They are

  • Managed Client Side Object Model
  • SharePoint JavaScript Object Model
  • REST API
  • Web Services
By developing the applications by using the above models requires the developers to spend a lot of time in development. The client-side models require the below process to retrieve the result
  • To establish the connection to SharePoint site.
  • Queue and bundle the request
  • Sending the bundled request to the server
  • Retrieves and renders the result
To simplify the developer life instead of writing too many lines to the process above steps, PnP (Patterns and Practices) team created a lot of helper and utility methods and named it as PnP JS Core Library. PnP team creates a special interests group for JavaScript and comes with a JavaScript core library and this is an open source project, so anyone can contribute to improving this JavaScript core library. Currently, it is fully developed based on SharePoint REST API using Typescript. SO we can develop client-side applications using JavaScript or TypeScript.

PnP JS Core in simple words -Trimmed version of JavaScript API for SharePoint

Refer the repository URL https://github.com/OfficeDev/PnP-JS-Core which contains the source of PnP JavaScript core library for SharePoint. We can clone from this GitHub location and start contributing to improving this library. This library supports from SharePoint 2013+ on-premises & SharePoint Online environment.So far the PnP team released a 1.0 major version and also released up to three minor versions. Find the details from below location about each version of PnP JS Core library,

https://blogs.msdn.microsoft.com/patrickrodgers/2016/06/06/pnp-js-library-1-0-0/

Complete Major Version

https://blogs.msdn.microsoft.com/patrickrodgers/2016/06/13/pnp-jscore-1-0-1/

JSON light for all environments, Bug fixes and additional features

https://blogs.msdn.microsoft.com/patrickrodgers/2016/06/28/pnp-jscore-1-0-2/

Caching and Batching, Bug fixes and additional features

https://blogs.msdn.microsoft.com/patrickrodgers/2016/07/27/pnp-jscore-1-0-3/

Support for Node, Bug fixes and additional features

API Comparison

The following examples in each area will return the title and description of the website

SharePoint Native JavaScript Object Model

function getwebdetails() {
    var clientContext = SP.ClientContext.get_current(); // equivalent to SPContext.Current   
    oWeb = clientContext.get_web(); //Gets the current Web Object   
    clientContext.load(oWeb, 'Title', 'Description', );
    clientContext.executeQueryAsync(new function() {
        var strmsg += "<b>Web Title:</b> " + oWeb.get_description() + "
";
        console.log(strmsg);
    }, onFailed);
}
 
ExecuteOrDelayUntilScriptLoaded(getwebdetails, "sp.js"); 

SharePoint REST API

//Include jquery file to the SharePoint page   
$.ajax({
    url: _spPageContextInfo.webAbsoluteUrl + "/_api/web?$select=Title,Description", //THE ENDPOINT   
    method: "GET",
    headers: {
        "Accept": "application/json; odata=verbose"
    },
    success: function(data) {
        //RESULTS HERE!! 
        console.log("Web: " + data.d.Title + " - Description: " + data.d.Description);
    }
}); 

PnP JS Core code?

Using this PnP js library, we can achieve a lot of complex activities in a minimum number of lines and easier for developers to achieve complex requirements. The below example returns the web information in a single line of code. For simplicity, let's break those into three lines.

//Include pnp.js file to the SharePoint page
$pnp.sp.web.get().then(function(web) {
    console.log(web.Title + ' - ' + web.Description);
});

Additional Points:

Download Required files to use PnP-JS-Core library from the below links and upload that to the library to use it in PnP code,
  • Download pnp.js  PnP JS file
  • Download fetch.js Used by PnP js file to handle web requests and responses (Required in IE)
  • Download e6-promise.js Used by PnP js file to handle web requests and responses (Required in IE)
Using PnP js file will not work properly in an on-premises environment due to not enabling JSON light options. The on-premise environment returns the REST API response in XML format instead of JSON format. The fix for this is provided in 1.0.2 version of PnP JS.

Use the below code to use PnP JS in different environments,

//Set response type in headers
$pnp.setup({ headers: { "Accept": "application/json; odata=verbose" } });

Conclusion

From the comparison of each model, PnP JS Core simplifies the code and eases the developer's life.

References: