{"id":4054,"date":"2020-01-29T07:45:44","date_gmt":"2020-01-29T15:45:44","guid":{"rendered":"https:\/\/developer.microsoft.com\/en-us\/office\/blogs\/?p=4054"},"modified":"2020-01-29T07:45:44","modified_gmt":"2020-01-29T15:45:44","slug":"announcing-pnpjs-2-0-javascript-libraries","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/announcing-pnpjs-2-0-javascript-libraries\/","title":{"rendered":"Announcing PnPjs 2.0 JavaScript libraries"},"content":{"rendered":"<p>We are so excited to announce the release of <a href=\"https:\/\/pnp.github.io\/pnpjs\/\">PnPjs 2<\/a> JavaScript libraries. This release is the culmination of months of work to re-architect the PnPjs JavaScript library to support better modern development standards such as selective imports, to refactor inconsistencies in the implementation, and to update our testing and documentation to provide complete coverage of the entire code base. Although we\u2019ve had some bumps along the way we are proud of the efforts and are excited to get the feedback from the community. As always, this work could not be done without the commitment from the community and we would like to thank all of those who contributed to getting version 2 out the door.<\/p>\n<p>PnPjs is a collection of fluent libraries for consuming SharePoint, Graph, and Office 365 REST APIs in a type-safe way. You can use it within <a href=\"http:\/\/aka.ms\/spfx\">SharePoint Framework<\/a>, <a href=\"https:\/\/nodejs.org\/en\/\">Node.js<\/a>, or any JavaScript project. This an open-source initiative and we encourage contributions and constructive feedback from the community.<\/p>\n<p><iframe title=\"Introduction to PnPjs v2\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/FkLkRGlKGKA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<ul>\n<li>See <a href=\"https:\/\/www.youtube.com\/watch?v=FkLkRGlKGKA\">Introduction to PnPjs v2 at YouTube<\/a><\/li>\n<\/ul>\n<h2>Simplified Installation<\/h2>\n<p>First, lets start off with the improvements we made to installation. In the past the version 1 library had peer dependencies, which may be logically correct, but leads to confusion and a lot of extra work to install each of the required libraries. For version 2 we decided to change to a dependency model and so going forward you only need run:<\/p>\n<pre class=\"\">npm install @pnp\/sp --save<\/pre>\n<h2>Selective Imports<\/h2>\n<p>Let\u2019s be honest, we all tend to code first and optimize second. But when it came to optimize for version 1 you didn\u2019t have much choice as the monolithic libraries offered no way to minimize them short of forking the repository and managing your own build. In version 2 we\u2019ve implemented modern ES Modules that <a href=\"https:\/\/pnp.github.io\/pnpjs\/concepts\/selective-imports\/\">supports selective imports<\/a>. This allows your bundling code to only import the bits of the PnPjs library that you\u2019re using therefore reducing your bundle size significantly.<\/p>\n<p>Of course, for those of you doing Node.js development (verses SPFx development) this becomes a bit of a problem when using older versions of Node.js that don\u2019t support ES Modules, and so we\u2019ve addressed that to with a set of modules built in <a href=\"https:\/\/requirejs.org\/docs\/commonjs.html\">CommonJS<\/a>. You can read more in our <a href=\"https:\/\/pnp.github.io\/pnpjs\/nodejs-support\/\">updated article on working in Node.js<\/a>.<\/p>\n<p>Speaking of presets, we\u2019ve created a <a href=\"https:\/\/pnp.github.io\/pnpjs\/concepts\/selective-imports\/#presets\">set of presets<\/a> for easier transition from version 1 or getting started quickly, if bundle size isn\u2019t of critical importance for your project. And be sure to <a href=\"https:\/\/github.com\/pnp\/pnpjs\/tree\/version-2\/samples\/project-preset\">checkout our sample on creating in-project presets<\/a> or <a href=\"https:\/\/pnp.github.io\/pnpjs\/concepts\/custom-bundle\/\">create a custom bundle<\/a> to support your projects.<\/p>\n<h2>Invokable Objects<\/h2>\n<p>Another enhancement from version 1 is the <a href=\"https:\/\/pnp.github.io\/pnpjs\/concepts\/invokable\/\">use of invokable objects<\/a>. Previously you would need to finalize any command to PnPjs with .get() to execute the query. Going forward you will just be able to invoke the object itself: sp.web(). Not only does this make your code more readable but it also allows for default actions that are not get but instead might be post. For backward compatibility all .get() will continue to work.<\/p>\n<h2>Factory Functions &amp; Interfaces<\/h2>\n<p>We\u2019ve been hard at work refactoring all the exports. We\u2019re no longer exporting the objects themselves but rather only exposing the factory function and interfaces. This allow us to decouple what developers use from our internal implementation. So, going forward instead of using the \u201cnew\u201d keyword to create an instance of the object you will simply call the object and its type will be based on the interface not the object.<\/p>\n<h2>Extension Methods<\/h2>\n<p>One of the more exciting enhancements to the version 2 library is the <a href=\"https:\/\/pnp.github.io\/pnpjs\/odata\/extensions\/\">introduction of extensions<\/a>. The idea is that you would be able to override or add functionality to an object without altering the underlying classes. This can be extremely useful for debugging and testing but also adding some custom functionality to the library based on your personal requirements. Better yet, extensions work with ANY invokable object. Which means, you can customize the behavior of just about anything in the library.<\/p>\n<h2>Bundling<\/h2>\n<p>Because of the ability to do selective imports, a new benefit will be the ability for you to <a href=\"https:\/\/pnp.github.io\/pnpjs\/concepts\/custom-bundle\/\">create your own custom PnPjs bundles<\/a>. These bundles can have specific pieces of the PnPjs library you want to make available to your solution, or development team, but also allows you to bundle in any extension methods you created thereby building the perfect stand-alone library.<\/p>\n<p>Well that\u2019s a whole lot of great new functionality and we hope everyone is as excited as we are to try out the new library. We have a series of videos coming to help you get started, so be sure to check out our <a href=\"https:\/\/www.youtube.com\/channel\/UC_mKdhw-V6CeCM7gTo_Iy7w\">YouTube channel<\/a>! Please take the time to review our <a href=\"https:\/\/pnp.github.io\/pnpjs\/transition-guide\/\">transition guide<\/a> as it\u2019s really going to help you make the move from version 1 to version 2 a lot smoother. And if you have issues please submit an issue to our <a href=\"https:\/\/github.com\/pnp\/pnpjs\/issues\">issues list<\/a> so that someone in the community can assist you!<\/p>\n<p>Also, if you feel like you\u2019d like to contribute we\u2019d be more than happy to have you, please see our <a href=\"https:\/\/pnp.github.io\/pnpjs\/getting-started-dev\/\">contribution guide<\/a>. You can also check out the \u201c<a href=\"https:\/\/aka.ms\/sharing-is-caring\">Sharing is Caring<\/a>\u201d initiative, where you can benefit from live hands-on guidance sessions on contributing to a variety of the <a href=\"https:\/\/aka.ms\/sppnp\">Patterns and Practices<\/a> projects. Additionally you can watch the video, \u201c<a href=\"https:\/\/www.youtube.com\/watch?v=xFRy6gK3yZA\">No Code Microsoft SharePoint PnP (Patterns and Practices) Contributions<\/a>\u201d, which provides an introduction to PnP contribution guidance principles.<\/p>\n<p><em>&#8220;Sharing is caring!&#8221;<\/em><\/p>\n<hr class=\"wp-block-separator\" \/>\n<p>SharePoint Team, Microsoft &#8211; 29th of January 2020<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We are excited to announce the release of PnPjs 2. This release is the culmination of months of work to re-architect the PnPjs library to support better modern development standards such as selective imports, to refactor inconsistencies in the implementation, and to update our testing and documentation to provide complete coverage of the entire code base.<\/p>\n","protected":false},"author":69078,"featured_media":4058,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11],"tags":[],"class_list":["post-4054","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-office-add-ins"],"acf":[],"blog_post_summary":"<p>We are excited to announce the release of PnPjs 2. This release is the culmination of months of work to re-architect the PnPjs library to support better modern development standards such as selective imports, to refactor inconsistencies in the implementation, and to update our testing and documentation to provide complete coverage of the entire code base.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/4054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69078"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=4054"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/4054\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/4058"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=4054"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=4054"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=4054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}