Introduction To Simplified JavaScript Library For SharePoint

Introduction

In the modern tech world, most applications revolve around client side development. SharePoint also concentrated most on client side development from SharePoint 2010 onwards by introducing the different types of client side APIs.

Below are the commonly used APIs to access SharePoint objects from the client side. They are,

• Managed Client Side Object Model
• SharePoint JavaScript Object Model
• REST API
• Web Services

Developing applications by using the above models requires 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 the SharePoint site.
• Queue and bundle the request
• Sending the bundled request to the server
• Retrieve and render the result

PnP-JS-Core – A JavaScript Library for SharePoint

To simplify the developer's life instead of writing too many lines to process the above steps, the PnP (Patterns and Practices) team created a lot of helper and utility methods and named it PnP JS Core Library.

The PnP team created a special interest group for JavaScript which comes with a JavaScript core library and this is an open source project, so anyone can contribute to improve 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 to the repository url which contains the source of PnP JavaScript core library for SharePoint. We can clone from this GitHub location and start contributing to improve this library.

This library supports from SharePoint 2013 onwards on-premise and the SharePoint Online environment.

So far the PnP team released a 1.0 major version and also released a 1.0.1 minor version with minor problems fixed.

Find the details at the below location about each version of PnP JS Core library,

• Patterns and Practices SharePoint JavaScript Library 1.0.0
• PnP JSCore 1.0.1

API Comparison

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

SharePoint Native JavaScript Object Model

function getwebdetails() {
varclientContext = 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() {
varstrmsg += "<b>Web Title:</b> " + oWeb.get_description() + "<br/>";
        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

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

Conclusion

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

References

 

• SharePoint Patterns and Practices Core Component Wiki