Microsoft 365 Community PnP Webcasts, 7 Nov 2016

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnP Webcast – Reuse your existing JavaScript libraries with SharePoint Framework

Description

In this PnP Webcast, we concentrated on covering the steps on how you can reuse your existing investments on JavaScript when developing with SharePoint Framework solutions. Lot of customers and partners have developed their existing plan JavaScript libraries, which have been used with custom web parts or using script editor web part. You do not need to rebuild these to be able to take advantage of them with SharePoint Framework solutions, but there are few steps for making them usable, which are being presented in this webcast. In general we do recommend usage of TypeScript on development time, since it provide multiple benefits, but that's not a hard requirement and you can use your existing plan JavaScript customizations as such also with SharePoint Framework.

See more details from http://dev.office.com/blogs

A

Welcome everybody: this is sharepoint balance and practices webcast. Then, this time we kind of talked about. How can you reuse your existing JavaScript libraries with SharePoint framework and in practice this means? How can you reuse your existing or investments on JavaScript, which you actually have done before we from Microsoft introduced the SharePoint framework? So how can you use those within the context of client-side web parts and also with other elements which are coming as part of the SharePoint framework in the future? My name is Lisa.

A

You wanna I'm, a Senior Program Manager from sharepoint engineering and with me, is well deck master cards. So waldeck will you do the interest sure.

B

Hi everybody, my name is Alec mosquitoes I'm office developed an MVP. I work as a developer, angkor and today I'll be your deaf guy. This.

A

Time, you'll be the devil guy, let's see. What's we will be next time so I'd anyway. So let's concentrate on the on the presentation. So first thing what we always do with this webcasts, just to clarify Chevron patterns and practices, is owned and coordinated by the ship and engineering from redmond and what which I'm part of as well and but we work together with community.

A

So what we want to do is build a community around sharing and your samples and sharing your learnings between the other people in the community, so that everybody else can benefit and and will benefit out of the common knowledge of the community. The PMP provides code samples call me a balanced documentation, monthly, monthly and actually by beta community course. This case, that is, the themes, are in the SharePoint framework and that's still in preview when we're actually recording this webcast and then the in production stuff around SharePoint adding model.

A

So how do remote customizations in SharePoint, using data model techniques, also Microsoft graph office, 365 APRs in general, are touched by our guidance and remote provision and clients are development in general AKA. Ms sharepoint B&B is the one URL to find more information around the sharepoint B&B good. Let's actually get non going on today's topic.

A

So what are the options for me to use external libraries in a SharePoint framework solutions, and obviously, at the time when we recall recorded this, the only option available is the client-side web parts, but there's other alternatives coming in the future as well. We basically have three different options to use existing JavaScript, so you're able to reference exchange, not JavaScript's from a URL and like you, would be in a classic classic javascript implementation as well or playing javascript implementation as well.

A

You can absolutely include JavaScript files as part of your SPF X as solution and technically you don't actually need to even well the slightly when's. Only on your JavaScript implementation do you need to adjust them or change them our flat before you start using them within the SPF X solution. All then, depending again on the package, if the chava script is available or the library is available from nvm, you would reference that from the NPM as a package. And then you start using that within the typescript and within the SPF x implementation.

A

Those are pretty much the three different options: right, waldeck yeah.

B

And I guess that that that we didn't actually include the most important part here, which is you don't have to rewrite everything to type script right, so you can absolutely reuse what you already have and build on top of that, and if you will as you go, you can upgrade that too I've script modules to everything else, but actually the key point is you don't need to rewrite the scripts that you already built?

B

You can reuse them, you can invent them them them reference them and actually include them in your new web part said that you build an SPF x. Yes,.

A

Absolutely, and that was actually on the following slide.

A

You did forgot about that folic, but anyway so and really, if you think about the considerations, those three options which represented in a previous slide our options. How do I use the JavaScript libraries? And then, if you think about those things like well dimension, you can use plain JavaScript directly in Times Square. You don't have to adjust your existing JavaScript. If you don't want to- and you might need to do some modifications in your script and markup to support modular, multiple or access.

A

So you can more easily execute stuff from those JavaScript libraries which do exist, and this essentially means that you can easily reuse your existing investments in plain JavaScript, which means that if you do some implementation right now, which isn't using the let's say, modern web stack development ways using NPM you're, just writing a Java Script directly on JS files and that's not waste of time. You can adjust that to be then available for SP FX customizations in the future, pretty much exactly what you want: accent right, yeah,.

B

Yeah and then the point that I I tried to make was much more than that, no matter if your existing scripts are on NPM or you and that don't already reference them from URL, you can reuse them exactly as we say here that when you choose to not have your scripts available on the internet and you include them them them in project, you might need to adjust some some some things, but actually the the biggest part of the code you'll be able to reuse right.

B

So actually the reduced part applies both the scripts that you, including projects as well to the same script, I that you would reference from either a URL or mpm yep.

A

Absolutely makes sense, but now we kind of a told that you need to adjust some of the scripts and you need to consider some of the things. So let's actually have a live demo on that one. So how do I actually reuse your Excel? How do I reuse my existing investments on plain JavaScript in the SharePoint framework?

A

So how do you actually take all of that existing goodies in to use and what I need to consider and let's actually get give waldek again the stage from doing the live demand this one so we'll take it away.

B

All right so to illustrate how you can reuse existing investments that you might have done in the past in sp effects uh we have built a really simplistic, a slight inscribes, a little bit of client-side customization that we include here on a page. So here you see it, it is a button and when when, when we click it, it shows a greeting like. How are you you you you you you doing how you doing? How are you doing? How did you do that?

B

So the way it's build is that if we edit the page, you will see a script editor what web part and if we edit that you will be able to see the exact code that we embed it on a page. So what if we added the snippety, we see a reference to a script and then some HTML all right. Let me grab that already too liberal later and then let me stop editing the page. Discard changes. I haven't changed anything. Let me stop editing the page it again, because apparently you have to do it twice.

B

So here's the script that that reference- and it only shows so it only has a function that shows an alert. So we have all of that I, don't that on a page yeah.

A

So quickly on this one, this is a relatively typical scenario right now, in a sharepoint online or in on premises where people are using the script editor web part, but just as well, the script itself could actually come outside of SharePoint as well. Obviously so absolutely.

B

Absolutely so this especially the point here is that you have some HTML that um met on a page which creates the elements in which you in inject the content right and then you load script either which is stored in your side or it can be stored on on on on on the internet, or it can be actually both right because you could use jQuery knock out with your own script, in that you have internally and to put them together under there on a page to show some cool stuff right yeah. So we have this.

B

So how would you go around that and migrate that, through a SharePoint framework, client-side web part, so I've already created a project which, which is new Putin's your project, which is new SharePoint framework project, place on the drop five, as recorded and I've already added that script to project?

B

Now, if I go to web part, let me start with replacing the HTML with the HTML that I just grabbed from a page and if we're run this, let's see what happens if we try to run this so here I go to command line, and let me zoom in on that, and here.

A

B

It's so pretty small. Is it? Is it like this? That's better much better. There you go so here we say gulp serve and we also now webpack. We actually build the project. Zomboid combine all that and will create a bundle in three two one.

A

Whenever it's actually doing about Tamiko yeah.

B

There you go, it took a bit to start, but once it's art it, um it's going good, and now you can see actually that we get two warnings about um about hostiles that we still have in web part, but but because I replace the ad HTML I. Actually don't use CSS anymore right, so I just got rid of all that and we're almost done there. Yes, we are done. Let me go back to browser and let me now open the workbench.

B

We I can do from HTTPS localhost five, four three two workbench, so there it is. Let me zoom zoom in on that little bit and let me open console because that's important for us to see as well. Let me clear it. Let me try to add the web part. So there is a button and it when we try to click that, as you can see here, will get an error right. So the function that we are trying to call is not available. Right makes right.

A

B

Yeah, yes, because the one thing that I that I didn't do is so here I have the script improv, but I actually don't use that yet in web part, so that the easiest way for me to include it is to type here require- and here I can say, dot dash way, which is a current directory and then my dash script right and I don't need to add the Jays extension here. All that is being done for me. So let me save that.

B

Let me go back to command line so that I can see that the project is being rebuilt and refreshed.

B

So and the page is being refreshed as well. If I go back to the work bench now, we should be good to go and when I click that we still get error right and that has to do with the fact with how external spreads that you add the project are being actually embedded.

B

So if you look at how do we call the function in encode, we actually only specified its its its its name and with that we assume that is available in the global scope on a page. If we go back to our original script that we have built built here, if I open the command line and I go to console, let me clear all that, and here I will type window greeting.

B

Then you can see that our sorry for that greeting greeting stereo, so there you can see that the function is exposed to the whole page. Any element on the page can access it. Now. If we try to do exactly the same in the web, part that we have built, you will see that the function isn't there, so greeting enter its undefined.

B

So, let's first check that the script that we actually use is actually embedded in the bundle. So for that we go back to project we go to the distal folder. We open the greeting bundle. Gs, we scroll almost all the way down, and here you can see our script. That is embedded right, so the function is embedded. But if you have a look at how it is embedded, you actually see that is embedded in in in of a function.

B

So with that, the variable that we have is apparently or suddenly it's no longer exposed on window the global scope. But it's now a local variable in a function, and this is exactly why we cannot access it directly. The way we did in the past right. So typically, there will be the point that you have to expose some of that script externally and when you do that, you have to keep in mind these two arguments that we have available here: module and exports right. So let's try.

B

The first expose the function that that we have here in web part. So we go back to our script and we change it or we actually extend it with module about exports, and here we assign an object to it and we say greeting is calling hitting and with that instruction we actually choose which element of our script. We want to make available outside of the script in our case to web part. So here, for example, we could have another variable, AE equals one and that a wouldn't be available outside of this script.

B

If we wanted to make it available as well, we could hear edit as a equals a or we could even say V is a right, so we can pick any name. You want here on the left-hand side and assign any objects that we have in our script to make that available outside of the script.

B

So with that, if we go back to web part right, we include the script here on a page, but we actually have to do more right, because if we just embed it, then we will still have the function that is exposed, but we don't really use it. So here we can read it by saying Const and then we call it my script and we don't have any types for it, so we just use any, and now we have a reference to any objects that we expose here.

B

So let me just grab it to the right-hand side, so here now we have a reference to everything that we expose here. Basically, this object. So what we can do now is say we have to change change this right right right, because we cannot assign the function that we have in line here. So instead, let's change that to this Dom element, because now we have to get a reference of this input.

B

So we can do it by saying query: selector we can get input and to that we will add a event listener to the event, click and we will assign it to greeting. Do my script greeting because that's the name that we have here.

B

So let's just save this and wait for a moment for the project to rebuild, and if we did everything right, we should be able now to see the script actually work. The way it worked in the past, so the page is refreshed, already reload it and win. When we now click it there is he there. It is so now our script works the way it works exactly in a past.

B

So the key thing is that if you have a legacy script, a plain JavaScript script, it's being embedded in function is being embedded, is being wrapped and you you have to choose yourself which pieces of it you want to be available externally, and you do it with this company. Well, with this construct. So.

A

Are you yes, yes, so just kind of elaborate, obviously you're just about the finalists at Point, which is where we used to export and then we're exporting that function to be available really, when you think of it. Just over simplifying again things create a great clarification, why it isn't exposed and if we go back on the SharePoint, the classic script, that a the wet bar thingy and- and it's it's actually really important to realize that the Creedence in here was in a global level.

A

Yes, which means that what if you would have two of those script, editor web parts with the same greeting definition, you would actually have a collect collision and well.

B

So so, if if they were exactly the same, you wouldn't see any issues right because they would be exactly.

A

The chocolate assignment- yes exactly if they attended.

B

This, if they were not the same so if you would have two functions called exactly the same, but they would do another thing yes well. In that case, you would only see working the one that's added to the page as last, it was basically override any other function, with the same name where she function or any object with the same name defined previously yep yeah. So.

A

This way we actually bring, let's say, isolation based on the instance of the wet park, and that's really one of the one of them well and there's a lot a lot of one of the many many many benefits of using SharePoint framework comparing the script editor web part, because that's a classic scenario and people are asking hey, what's the advantages of using this? Well, you actually get this proper isolation, you're able to build in a more mature way, this customization.

A

So it's not just in baiting JavaScript on the page, using script editor web part where you don't actually know what else the other people are doing. So this way you li you can care, indeed, that the script is exposed only for your web port and you can actually rely on that. So really great clarification. Yeah.

B

Yeah- and the key point is that we haven't changed anything about the original script, so it still works exactly the same. It worked the only bit that we added was the part that exposes this the functions that we want to use inside the web parts as an external piece. That's the only thing that we had to really change right and also the way we assign events right, because here we don't have there's no way for us to do the directly in inline.

B

So with with that, we can get first reference to our external object to our exposed objects, and then we can use that to assign them as event handlers. Two elements on a in web part yeah.

A

But that's just classic shape on a JavaScript to almost so it's it's def! Nothing really that special. So that is an absolutely.

B

Absolutely so that how about we go to the slides and we wrap it up sounds good.

A

Good and that pretty much sums up this webcast, so we went through the well, we kind of a mention the individual options of referencing external javascript.

A

We didn't really concentrate on that one in the demo in the demo, we're more concentrated on what, if you have your existing investments on JavaScript, we do have an alternative, webcast or another webcast, where we then reference a jQuery files from the from the URL or NPM packages, and what does it actually mean so in this one we wanted to concentrate more on existing JavaScript customization, what you have and how can you actually reuse them within the ship when framework our customizations anything, you want to add, while the Condor on the demo and what we went through yeah.

B

Sure so I I would stress that you should keep in mind that you don't need to rewrite the script that you already have in order from to work with SPF X they were, you might need to change a thing or or or two, but actually the biggest part of the code will still work, just as it used to work in the past. So P doesn't add in mind as you explore the new framework of web parts and.

A

That's a really really great reminder because I think they're there has been some people who freaked out by the fact that hey. Why are you introducing this typescript complexity on the on the trouble screen and there's multiple reasons why we do that and let's have actually drill down on those but typescript always compiles to JavaScript, and the whole point is that everything is JavaScript in the end.

A

So whenever the client-side web part is executed, everything is still JavaScript and that it's really important to realize that if you have existing JavaScript functionalities, you can use them as such within the within your customizations and in the end, from a pro so perspective, I everything is JavaScript right measure, but select right, I think that's pretty much sum something webcast. So thank you for watching and we'll come up with a new one. Sooner or later. Thank you. Bye.