Sp-dev-docs: More documentation how to include any third party library

[rolandoldengarm]

People in our team are having a background in classic SP Dev, and they struggle to understand how to include any 3rd party library.
In the "old" days it was just a matter of including the script-tag in the HTML, and you're good to go.

Nowadays you need to know about AMD/UMD, import, node_modules resolution, include TSD (some libraries come with TSD in the NPM packages, most require separate), etc.
Because the bundling with webpack is black-boxed in SPFX, it would be good to provide an even more thorough overview of adding 3rd party libraries.

I'm aware of the documentation already available here, but still the team is struggling how to include for example a jquery plugin, or any other plugin the find online. How to know the difference between a non-AMD package, and an AMD / UMD package? And when to include TSD, and when not?

[waldekmastykarz]

Another interesting scenario is when you try to mix and match AMD with non-AMD, for example Angular (non-AMD) with ngOfficeUIFabric (UMD).

[patmill]

For JQuery - follow tutorial 5 (https://github.com/SharePoint/sp-dev-docs/wiki/jQueryUI-Accordion-WebPart). But fair point on more documentation.

If you have example libraries that you are trying to include, we can try and list them explicitly, as well as how we decided to load them as X or Y or Z.

[waldekmastykarz]

@patmill Angular + ngOfficeUIFabric for one. Then jQuery and non-AMD jQuery plugins.

[rolandoldengarm]

Yeah keep in mind that most SP devs come from a non-AMD background. To be honest, non-AMD has its issues, but it's much simpler. Just add a script tag and you're done.
With the "new way of bundling JS", you need to do a lot more. It's not that trivial, and most certainly completely different from non-AMD where most SP devs come from.

Maybe a good article explaining non-AMD vs AMD/UMD would be good. Good starting point (courtesy of @waldekmastykarz ) is http://davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/ . Missing piece here is what is exactly the difference between non-AMD and AMD/UMD.

[mike-morr]

AMD used to be the standard for browser based JavaScript applications. CommonJS used to be mainly for NodeJS applications. UMD is universal, it will load with an AMD loader like require.js, or it can load as a CommonJS module via NPM (Node Package Manager).

Fast forward and the web has been taken by storm by libraries that will take any code written for NodeJS and make it usable in the browser. The most common ones are Webpack, Browserify, and SystemJS which I believe is supposed to load any format and is an early implementation of how you will be able to load them directly in the browser once they decide on a standard. The idea is in the future, you be able to use script tags again by specifying it like:

<script type="module" src="jQuery" />

There is definitely a learning curve when it comes to loading modules, however a general guideline is this:

• Always try to find a package in the NPM registry first. Like npm search jquery.
• If you are browsing the web and come across a library you want to try. See if they have an npm install command in the getting started. If not, search for it using npm search.
• If you can't find it that way, check to see if they provide a UMD module.
• If you can't find that, search for "+use library X in node js" and see if someone can help.

[VesaJuvonen]

Since we have following guidance and plenty of sample around 3rd party JS library usage, closing this one from here. If there's any additional requirements, please open up a new issue, since situation has been changed significantly after GA release.

https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/use-existing-javascript-libraries

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues