Microsoft 365 Community PnP Webcasts, 26 Dec 2016

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnP Webcast - Using modern web stack with SharePoint on-premises deployments

Description

SharePoint Patterns and Practices (PnP) webcast on using modern web stack development with on-premises without SharePoint Framework. More details around the covered topics from http://dev.office.com/blogs

A

Welcome everybody: this is the SharePoint patterns and practices webcast and this time we're going to talk about how to use modern web stack development within the SharePoint on premises and deployments so something slightly different from our typical set up of webcasts and more concentrating on the on-premises sites, and there are reasons for that and we can walk them through together with Waldeck. So my name is Rosanna I'm, a senior program manager from SharePoint engineering site and with me, as my lovely sidekick.

A

Yes, it's this time is well back. So what actually do my interests? Well, your.

B

B

I ran core, and today I'll be your Deb dude.

A

We're always switching the roles bit between wall deck, so this time, I'm actually gonna do the demo for this one, which is pretty rare. Typically, it's well deck, but I'll. Let well deck, actually ask the questions when we go through the presentation, but before we go to the actual contents, just to quickly clarify SharePoint Patterson practices is a open source initiative coordinated by SharePoint engineering, but we work together with MVPs and the community at the share, the best practices and and guidance and reusable components and samples for others to reuse.

A

So the theming czar on the ownership, one framework shipment that ins much of Graf office, 365 api's development and remote provisioning and remote API, is, in general, a kms. A SharePoint PNP is the one address. What you're going to remember. We have all of the webcasts all of the resources and way too many resources actually on that location. But that's a different challenge. So today, like mention we're going to talk about modern web stack development, and we wanted to actually start by explaining what is modern, West stack development.

A

So, first of all, these are kind of at three pillars which we came up with. What does the modern web stack? Development actually means. It means that you're using open source tooling so using stuff like the the noches yeoman generators gollup, as your build built or tasks tool, and so on, it is a cross-platform development as well, so you can actually do development in Windows or in Linux or in Mac.

A

So, in our case as an example, what X is using while Vic is using a Mac I'm, always using Windows machine and it's a matter of a preference, so the technology isn't actually limiting factor and in your system the monitor web stack is kind of an industry standard as well we're more and more heading to this direction to among the web's development. So when you have a look on the on the internet around the web, development, more and more stuff is hitting the dissimilar kind of a direction.

A

So it absolutely absolutely can be considered the same industry standard as well. Anything we want to add there actually waldek. So no.

B

No, you have it all. Thank.

A

You thank you, so what does it mean? What does this actually mean in practice? So what does it mean that we want to use web stack development or the modern web stack development within on premises? So so, first of all, let's be clear on this. Sharepoint framework is actually using a modern web stack development, but you can do modern web stack development without the SharePoint framework as well, and the SharePoint framework will be released on SharePoint 2016 during the calendar year of 2017, so it will first go live within the SharePoint Online.

A

When we're recording this webcast, it was still in Developer Preview and then it then it went thus go will go, live pretty soon in the GA for SharePoint Online, then after during 2017, it's gonna learn on on on-premises as well and explicitly for SharePoint from the 16, even though SharePoint framework isn't in on-premises, you can actually align on the development thinking already today, so you can actually take advantage of the open source tooling, of the open source, libraries, open source communities and the way of doing development already today, and that's really what we wanna kind of a pinpoint today.

A

You do not have to wait for SharePoint framework to be present in on-premises to be able to start you and aligning your way of doing development for the future of sharepoint as well and kind of a pin, clearly pin polling this one out as well. So SharePoint 2013 share one 2016. They actually have a pretty similar API surface, meaning that you're using the season well explicitly actually wrist when you're doing a web stack development, but they have a pretty similar.

A

Excuse me a pretty similar, remote API surface, if you're using an older version of SharePoint like 2010 or 2007.

A

Theoretically, you can actually take advantage of the web stack in those deployments as well, but whatever you would be implementing if it would be talking against a sharepoint in the case of sharepoint 2010 as an example, the communication channels or in 2007 2010 2007, the communication channels to worship on would be different in 2010. You would be using a SMX web services or the the classic. The first level of a rest implementation, vti beam rest was it with their been all that what was it.

B

A

Yes, absolutely list data SVC and then in 2007 you would be using the ASTM X, essentially web services as the reference, and then, if you would do that, whenever you're moving to a newer version of SharePoint, you would have to obviously change that particular implementation, but in SharePoint 2013, 7 2016, the rest API surface is pretty much the same.

A

There are certain differences, additional things in SharePoint Online, additional things in 2016 compared to 2013, but the implementation style is exactly the same, so you can take advantage of the web stack development in 2013 2016 and aligning already on the way, for example, if my creating the sharepoint online, your customization today- and that's really the key purpose of this webcast as well show you in practice. What does it mean in point the opportunity?

A

It doesn't mean that you have to do that, but we want to make sure that people are aware of this option as well.

A

Me rambling, quite a lot well doc. Anything you want. Oh, yes,.

B

L, so an interesting point that you hit a bit is that that, with this approach you, actually you don't need to wait to start using the the patterns that that that that you will use in cloud soon in in production right, because if you are in 2007 or 2010 I mean you could wait for a really long time, but framework will not be available there. Sure, however, that that does not mean that you can really align already with what might be a reality for you.

B

What one day when you either upgrade on premises or move to the cloud right, so you can already start doing exactly the same approach. Even if you work in 2007 or 2010 yeah.

A

Absolutely absolutely so you might be wondering okay, what does it actually mean a few slides, a lot of us chit-chatting? So let's actually have a look on this. So what does it actually mean that we're using a modern web stack within one of our staff development within on-premises? In this case we're gonna use SharePoint 2016. The experience is almost identical. It is actually identical which happened 2013. If we go to the older versions and then the API surface is completely different and actually the capabilities on the UI side is is slightly different.

A

This sample is available from the ketta becomes less sharepoint, less s, PDF samples in the s/pdif samples repository and, like mentioned quite a few times. This is not cheap and framework. This is how do we do modern web stack development in on premises without sharepoint framer, but let's actually have a look on this one in practice and what does it mean? What's the benefits? How do we actually get started?

A

What's the tooling what we use and then let's come back on the slides in a second good, so let's actually get started on the on the demo side, and this is something what we prepared and which is also downloadable for you from a key tab as well. So you will find the link and everything else from the video notes, but let's first have a look on how this actually works.

A

So in my case, I've already downloaded the sample and the setup and I've actually installed the noches, so I'm running I'm running actually an American version of the keyboard. So let me find if I can find the right character there. We go so in my case I'm running noches 649 in the machine which is one of the requirements and then, after that, installing running the npm install to get the stuff actually installed on the machine. In this case, all of this has been done because the npm install does take a slightly longer.

A

So we're not gonna. Do that and then what I'm gonna do is then I'm gonna start the visitors to their code. So we can quickly have a look on the on the solution itself. How is it built, and what does it actually do? It actually popped up immediately the webparts, but let me actually quickly explain what we have here. So the setup is pretty similar, as which, as with typical SharePoint framework, set up as well. So this is kind of a mimicking the similar situation, so we do have the source folder.

A

We do have the components his. This is where we actually have the fellow which will be rendered and that might have been properties. It might have been stylings and all of that- and it's then actually rendered as an HTML yep.

B

Yes, so this seems a lot like SPSS. Yes,.

A

This does seem quite a lot like SP effects, but it is not it's not chiffon framework. So what we're doing here is that we are using the type script we're using the the well in this case, we're using react and then the way we have set up the necessary necessarily with pack settings that when we compile when we do get serve, it will actually serve the stuff. We need to update on the on the code. It will refresh the page or refresh the Java Script, which is compiled from the type screen.

A

Hopefully that did make sense as well.

B

Yeah so, in other words you you can use similar similar developer flow, as you would use in SPO factual right exactly.

A

Precisely so, the experience is exactly the same and what you mean with that one is that well in this case, because this is not a class shape, one favor, we can actually test the functionality itself first within our solution, and this one is is built in a way that the web part or in this case in quotes. The web part, is actually resolving these kind of a div definitions which have a webpart script example as the class, and then it's gonna actually read.

A

This parameter sizeable entry from the element as well, and what we mean with the similar kind of a tooling as with SharePoint framework, is that I can actually go now and do called serve and we can actually see the functionality in practice. In our case, if I switch back on the on the here- and we can say that we should have to in quotes webparts and the first one should have, what are we whatever we want?

A

And second one have: does it work and let's see when the cops serve, will be actually compiling and essentially, what happens here is that we're starting the Noches to host our website in quotes and it's going to actually spin up a browser as well. There are certain TS, lint warnings there, certain other things which we can address later on, but the overall setup works pretty seamlessly if it would actually start the prozer.

A

So let's say every now, and then there are some compilation delays, but- and in this case, what I'm doing is that we we have a shipment 2016 hosted with inertia, much softer sure, which is now the one which is actually hosting the functionality and.

B

What it actually works, it seems like it's. Are you there yeah.

A

So let me actually get that URL or most likely it is actually already opened up in here. Yes, this! Yes, yes, didn't notice that so this is actually right, yeah. It was so fast too fast. So this is what we essentially got. So we got two different in quotes, webparts, which both of them have a unique parameter site parameters; resized entry, which is invisible within the you are okay.

B

Yes, you see here is an HTML page on your local web server. That shows two part components and let it on a page. Yes right.

A

Absolutely correct so and really the key point here is that the setup itself understands when we are doing any modifications. So if I come here and I do welcome to welcome to SharePoint B&B and let's save that, what will happen is that actually, the the web pack itself will recognize that hey. There was a change within the code, so I will refresh my JavaScript and I will recompile and if I come here, we can actually see the chains on real time. So I can do that one more time site by site.

A

So let's actually do this, and let's put that one there, and let's put that one there and now: let's do a small modification, because we're gonna go to SharePoint when I say stay in a second I'm gonna switch that back on the shipment on a 16 save. We can see that the setup is actually recognizing the chains and voila we have a refresh. We can actually say the chains immediately reflect that in New York and that was audience clapping yay.

A

No, how do we actually use this within the SharePoint, Online them or not, sharepoint online in our SharePoint deployment? So let's actually move into the SharePoint 2016 hosted within the same machine as well and.

B

A

I want to do is that I actually want to add a script editor web part on this page, so I'm gonna go insert I'm gonna do a web part I'm gonna do a median contents and script editor and and then we need to add the actual certain scripts on the page and let's have a look on. What are we adding there in a second so now I'm going to switch back on the visual studio code and let's have a look on? What did we have on that HTML index.html page?

A

So what we have here is that we are referencing the fabric style sheet and then we're referencing certain JavaScript files, because in this case we are actually using or we have a dependency on the react. We could actually reference them directly from CDN. That's absolutely a possibility as well, and then we are actually referencing. Our compiled includes JavaScript file from the dist folder. So whenever I'm doing a change, I will save and that will actually regenerate. This react. App.Js file to the dist folder, so.

B

From these scripts and references, what do you have to embed or include on a page per web part, and what do you do once per page? Yes,.

A

So in this particular case, this is kind of a mixture of things. The web part implementation itself is to react up chairs. So this is the one customization in here. What we can see, the reaction and Dom are actually react. Libraries, but this is actually also generic and what I mean what we mean with that. One is that in this particular case, it is actually recognizing div with the class with a certain class, and then it actually goes and makes that one particular instance unique based on this parameterization.

A

So it means that if I want I can reference this only one time in the page, for example, using user custom action or reference in a one, separate script area, the web part, and then only put this one in a separate script at a web. Part and I could have multiple of them in the page, and it would still work for the simplicity of the demo. We've actually included the script editor txt file in here, which is essentially using the exact same settings and exit same two URLs, so I can just copy this.

A

One and I can switch back on my browser and paste that one to my script, that is a web part and do insert, and essentially what we are doing, is that an okay and we still need to save, and in the best-case scenario we can actually say the chance in the UI and as we can now. What we're doing is that we are referencing, essentially the JavaScript files, which are now hosted from no jeaious hosted in my local host.

A

Hopefully that kind of made sense in certain level, but.

B

So is it exactly the same as in SP effects that you can have or you can you can host them? However, you want so you could you you could upload them to your side. You could upload them to as your CDN, whatever you like. Absolutely absolutely. You.

A

Could actually put those JavaScript files anywhere you want host and from there directly, but the form and development the experience perspective, and you probably don't want to do that because you want to have that connectivity pointing to the files which are right now hosted from your local box.

A

So I can actually do welcome to what are we going to call welcome to Seattle and save that one, no before I save that I can show that one side by side, so obviously the save itself will be refreshed or recognized once again by the set up it's going to recompile the the file to the dist folder. The problem is that SharePoint itself or Bursa is unaware of this chains, so the SharePoint, the prowl sir itself, doesn't refresh automatically.

A

But what we can do in here is quickly do an f5 and after that we can actually say the chance, because it's it's hosting from my local host, that javascript file, which have been refreshed so I, can actually pretty easily do than development in the context of SharePoint as well.

B

Cool, so you mentioned a few times that it is webpart in in in quotes. What does that mean? So so is it a wet part or not? Yes,.

A

So so, technically, that's a fair question and a question what the what people might be asking about watching this. So the reason why I don't want to call this as a wet part is that this is not really a shape on framework. Once again, we are just using the web stack. The modern web stack in the context of the on premises and we're referencing the JavaScript files directly from the script editor web part. We.

A

This is not really a web part as such, but then on the other hand, if, if you think about it, yes, it's a script. Editor web part it references, JavaScript files which are hosted somewhere else, so it's kind of a web part as well. So it's a once again it's kind of a debatable discussion.

A

It's not a web part in the context of SharePoint framework because we're not using shape one framework in here, but it's a web part in the context of shape one because hey it is a web part if I go to the spades and if I edit, this I can still do all the typical modifications for that web part.

A

The only thing kind of a P one of the key advantages over when you're using SharePoint framework, which is available on my SharePoint Online and and during calendar year, 2017 in SharePoint 2016 as well. Is that there's the custom property paying experience and that's no doubt something. What with what is missing within this kind of a setup. So if I go.

B

You you are able to set parameters in UI or what are the only way to do that, for you is in code and which is exactly what you said. You can only do that in code right. So, yes, you go back to the mark-up that you have and in there we can see parameters that you pass into your code. Yes,.

A

So in this particular case, where do we actually have they? We have believed essentially in as part of this div. We do have this one parameterization on, which is the text but I'm actually visible. So I can flip this here to say hello from a modern web stack.

A

Modern web stack development and that will be then reflected up and, let's click the insert and that will be then reflected within the UI. So that's essentially the way the parameter size. Then it's not really aunt user-friendly way of doing that, and that's really the one of the key benefits out of SharePoint framework, then within the SharePoint Online right, oh cool I, think that's it.

A

We, we went through the kind of a development stack and then obviously, if you haven't followed up on the under development, how to get started on SharePoint framework, please go and have a look on those, because the tooling is exactly the same: we're using the Noches we're using the NPM we're using the gallop within this kind of a set up as well. So getting started on understanding that tooling, you can actually use the SPF X as getting killing started, tutorials as well, but I think that's it.

A

Let's flip back on the on the slides and talk slightly more about the topics and close up the webcast. Now coming back on the slides. Let's go through a few slides and few pinpoint view different areas still and then close up the webcast so like you could see in the in the demo.

A

What we were doing is that we're using the script editor web part to host your JavaScript from your local machine so that we were able to do development within your local machine and then you're able to refresh and see the changes within the UI.

A

The scenario was pretty simple, so we were just essentially using the office UI fabric to render and nicely looking UI there, and it didn't actually have that much complexity from a functionality perspective, but it really shows the modern way of utilizing the tooling and doing then development using the web stack in on-premises as well like mentioned before the demo. You can do this in a SharePoint when it's a 2013 environment as well, which is pretty much identical experience as with the SharePoint 2016, you would be using the script editor web part as well.

A

Now, if you would go further down on the historical journey, you can theoretically use the same model in SharePoint 2010 as well. We didn't have a script editor web part at the time, so you would have to use a content editor web part, and it only works in a way that you actually create a txt file or a a file where you have to embed your script and then in the content. Editor web part. You point that web part to render that file.

A

That way, you can actually have their scripts embedded on the page without any problems, but like mentioned in in SharePoint 2010, the API surface or in 2007 is completely different. So, if you're looking into kind of moving into this direction and then hey, if I, do my stuff implement them now using the modern web stack I, don't need to do anything and it will work in the future in SharePoint when assisting or in SharePoint Online.

A

That's not really the case, because the api's are completely different, so my personal preference, or how would I put it recommendation, would be maybe looking into this way of doing stuff if you are in SharePoint 2013 shipment 2016, not necessarily if you're in all the versions. On the other hand, why not, if you are really into this model, it does work within the older version as well, but the api's are slightly different. What's your take on that well like by the way, I.

B

Would actually say that, no matter where you are so, what are your in 2007, 10 or newer I would actually say that that's a good way to build the web parts or build the things that you do because, as you said, it allows you to prepare.

B

What's what's going to be available in a cloud soon, and a very interesting thing is that when you build web parts that way, one thing that you would want to do is you would want to isolate how you get get the data in order to be able to test the web parts right, because you when, when you when it went and you build them, you build them. You might build them not directly in your site, sure. So with that, you might start doing your work with a mock and then moved to SharePoint.

B

At that point, if you I, if, if you have the data access separate from the UX, it will be easier for you to switch from 2007-2010 to the new api's, because the only part that you will need to replace is actually the api calls and that's separate thing already true sure. So with that, I can actually say that, even if you work on 2007 2010, there will be an interesting thing for you to look at and to see how that would fit. Everything that you build today, yep.

A

Absolutely- and one thing also to notice here is that, even though we showed the demo using a kind of a script, editor web part embedded scripted in the web part, you can actually use the same stack if they use in call it user custom actions or, if they're, using any other JavaScript extensibility point in SharePoint. So you can absolutely do the same same development style with those endpoints as well cute. So we kind of a con true and having a discussion on this one already, but just kind of a sum.

A

It up sum up, the the let's say the recommendations or the Y, which you use a web stack. Well, obviously, it simplifies my creation to SharePoint framework in the future, and so, if you are looking into, if your on-premises deployment is heading to SharePoint, 2016 or you're, looking in the moving the shipment online- or you might even not know about it yet, but it's still the future of development in SharePoint, so you would be more easily adaptable and the same way of during development.

A

As with chapman framework, you would actually learn and use this in technical, snack, a cron across different versions, and this has been kind of a promise of the future for for many years already in SharePoint right once, and it actually works in in all of the environments sure there are some differences within the remote API as an on-premises and in in SharePoint Online and that's on us and on our site, which is causing some challenges. But technically you can use this exactly the same process and development model in on-premises, an issue online in SharePoint Online.

A

You would gain additional benefits out of the SharePoint framework and additional development experience improvements, but the development stack, the actual technical stack is exactly the same, and it really it is around consolidation of your technical implementation and aligning those the industry standards so once again moving moving away.

A

How would how would we put it a SharePoint isms to a model where the SharePoint that's just a data source for your implementation, so you don't actually need to have, let's say, a deep down understanding of SharePoint in channels as long as your web stack developer, you can actually do this or if you are a shipment developer. This way you will learn how to be also non ship on developer. With this.

B

A

Well so, which is a good thing? No doubt I.

B

Think that that I am interested in is, if you think about migrating the web part that you have built in the demo on-premises in a non SPF, X environment, you actually to move it to SPF X. Do you know what the the effort would be.

A

Well, in this case, the web part itself is such a super. Super super simplistic thing so that the effort itself would be super minimal, even though it would be something complex like angular or react based real application which have actions and functionalities in it.

A

Technically, you can take that application and hosted in SharePoint framework relatively fast, and we do have those webcasts available in SharePoint PNP guidance as well, which are showing how to do that. So how can you take an existing JavaScript implementation and put it in a hosted in SharePoint framework without any chances, and then the follow up thing would be okay.

A

How would I actually then evolve this to be more natively part of the ship one framework, so cool obviously depends, but in this it would be a matter of minutes, but in in if it's a complex case, I wouldn't say that's matter of maybe hours again depends on a scenario, though absolutely cool whatever you need to get started, so you would have to install the let's say the similar tooling. As for the SharePoint framework, so that's noches and the typical typical other web stack tooling for development.

A

We're gonna reference this in the individual nodes as well. Then you would probably start with some sort of a starter kit, starter kit solution, which essentially, what we mean with that one. Is that some sort of a template which will have the automatic refreshing of the files and compilation for wetbacks? And all of that, so you can just concentrate on the implementation when it's safe to change this it will recompile or transpile the typescript javascript an and then you're good to go.

A

You would probably want to choose javascript library to you it's for your customization and with that one mean that you would choose, do I want to use.

A

Angular do I want to use react, and you probably want to be pretty consistent with that one and the reason why you probably want to be pretty consistent on that one is pretty simple and if you were not inaudible, these kind of customizations to your site, then they're using random frameworks from here and there and there and there you would be downloading a lot of stuff when you're running on the page.

A

If you are consistently using angular or react as an example, you would be loading those libraries only once from the CDN and they're good to go, and we have a lot of additional information on the using the JavaScript files from CDN and not bundling them in and all of that, but that's a different topic. Let's not even start that discussion and one kind of an interesting scenario or additional dimension on this one is that you can do this development remotely. So you don't actually have to have a your dad. Every developer.

A

Doesn't have to have a dedicated sharepoint server to do this kind of a development. It's absolutely true that it might be that it will be there's some of the same developers who are then even doing some level of a server-side development for your own premises, because every now and then that still required, then maybe it does make sense to have a dedicated sharepoint server. But if you do only have dedicated developers for the UI, those people don't necessarily need to have a dedicated developer post.

A

They can actually share a one box and do this kind of a development with a limited set of tooling or yeah. How would I put it? Software and hardware requirements which is critical, cool I think that's pretty much sums up the webcast and one more time. We've mentioned this quite a few times, SharePoint framework it's going to land only in SharePoint, Online and SharePoint 2016, so obviously we're never gonna say never to any other versions.

A

But this is the current plan, and so, if you're using SharePoint 2010 2007 2013, you can still do modern web stack development, but that's not chiffon. Framework SharePoint framework is also used in modern web stack as the lastest tomorrow, but it actually further enhanced and gives you additional benefits when you're, using that as the model within the SharePoint Online or within SharePoint 2016, and for Chapman 2016, it's going to land during the calendar year 2017 and that's the current plan. I wanna be super clear on that that anybody gets that couch I.

A

Think that's not that's some sub podcast anything one at Quantic on the topic. Yeah.

B

Sure so, if you are developing things, on-premises I would encourage you to check out the projects, give it a try and we'd love to hear from you to what extent that would support you in things that you are doing now and to what extent there are things that you would like to see. There are not available in there, so, in other words, gaps. Can that prevent you from from building things that that you need today in your environment, on-premises yeah.

A

So and that's a really good point, so what kind of guidance? What kind of samples you would need to have to be able to adapt this kind of a model because III think everybody who's watching? The webcast clearly understands that maybe well, it is beneficial to actually do that to align with the future direction. Now the question is: how do we help you guys in the community side to adapt the model? And what do you need so? What kind of samples what kind of guidance? What kind of videos?

A

What are the gaps which we need to address? And that's really really super interesting. So please, let us know using the social media and community channels for that, but please have a try and hopefully it works out point for you and don't don't be ashamed of asking assistance, for example in Microsoft Excel, sir good stuff, but thank you, everybody for joining and we'll come up with a new webcast sooner or later, buh-bye.