Microsoft 365 Community Viva Connections & SharePoint Framework, 8 Sep 2016

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnP SPFx and JavaScript SIG Weekly Meeting - September 8, 2016

Description

See https://techcommunity.microsoft.com/t5/SharePoint-Developer/SharePoint-Patterns-amp-Practices-JS-amp-SP-Fx-Special-Interest/m-p/11406#M349 for detailed content.

Presentation available for download from http://docs.com/OfficeDevPnP.

A

Whoa this is the SharePoint framework and JavaScript special interest group weekly meeting for September 8, 2016, I'm, Patrick, Rodgers and I'm joined by. They say you hope, you've owned in pardon me both from the patterns and practices, core team and we're going to talk this week about the latest stuff and the sharepoint framework. I got some good demos coming up and a little bit of an update on the JavaScript core library as well.

A

So what's the javascript special interest group, all about um with the release of the public preview for the SharePoint framework, we sort of expanded a little bit more. Officially, we've been covering SharePoint framework stuff, but now we've made it a much more explicit part of the weekly meeting, which I think is good for folks that have an interest in that area, and so we've got a good update from basic coming up on the SharePoint framework and the client side of development patterns around that SharePoint framework in the public preview.

A

We also talked about the JavaScript core component, which we've been working on now for oh boy, six months, maybe I think and I've got a few little updates around that, and so those are our two main areas of focus now in the weekly meetings and again, all of this is under the larger SharePoint patterns and practices group. So, as always, if you're looking to get involved, we've got two links there at the bottom left. Some additional links coming up the first one is to our new community, which basic and jump in.

A

If I'm wrong, I think we've moved yet again to a new spot out of the network on well.

B

Technically, it's the same platform: they renamed the URL. I think it's, the tech community microsoft com, which is high too confusing. Hopefully they they keep on using that URL for now so I.

A

Hope so I hope we haven't lost anybody in the translation, because I know I can barely keep up with where we're moving right now so we'll get into that lockdown. But that link will remain good. We'll keep that updated. That AKA link will go to wherever the actual community live. So that's one to save and the second like there is the to our github repo, where we've got our source code.

A

That's for the javascript core on it library, that's a great place to get involved as well, and we welcome anybody's contribution from wherever you are in the world and whoever you might be. You're absolutely encouraged and welcome to join us both in the social aspects and the community aspect as well as if you want to contribute code or submit issues or ideas as well about improvements or enhancements. We can make to the library smoothing on this week we're going to cover, as I mentioned a little bit earlier.

A

Sharepoint framework latest updates their upcoming guidance things like that sort of the open discussion around the SharePoint framework. At this point, the public preview- and then uh you know, as as we move forward it'll, be as the releases happened, will continue to discuss those releases. New features that are added capabilities. There. I will have a quick update on the Jazz core component, as we have in the past on those slightly condensed, and we've got two great demos.

A

This week, one from waldeck using angular and the office you I fabric for angular, which is another open source project out there in the world and discussing how to use those things and have you use that with the CDN and then elio Struth.

A

Pardon me if I've said that wrong I, really apologize, has got a great demo of a search web part with some client base functionality as well in the public preview. So look forward to those two demos a little bit later in the call and then, as always, we'll have our open discussion open forum for kind of the the ending part of the call.

A

So anybody if they have questions or comments specifically around the SharePoint framework or the J's core component around your projects or things you're trying to do with the you know with the framework things you wish, you could do things like that great open discussion opportunity. So if you have questions stick around for that as well, so moving into the SharePoint framework I'll pass it off to basic to take over and give us a great update on. What's new with SharePoint framework this week sounds.

B

Good thanks, Patrick I, know on the call, let's say, mechanics what one thing dimensioned we do record this calls. We are planning to expand to audience within this course as well, but obviously need to get the attraction on going. We're not let's say we're not getting hundreds of people. Yet what dissipating on this weekly calls, which is one of the reasons why we're getting these calls recorded, so people can actually go and have a look on the demos afterwards as well, and will crow on that.

B

This week has been super busy for us on random topics, so we did into significant amount of marketing again on this one. But let's work on that and thank you a leo and while they call ready for the for the upcoming demos, few things around the SharePoint framework, which I wanted to pinpoint around the develop that lets say the movement on that one before we go there, just to make sure that we understand where we are and what's the BNP relationship on the SharePoint favor.

B

So, first of all the SharePoint patterns and practices- it's not really the classic patterns and practices in the sense of this is the academically fine-tuned only way of doing stuff. What we do within the sharepoint B&B is that we provide absolutely also deep dives co2 and deep dive samples, but we also provide getting started samples so that people are unable to understand how to get started. We provide tutorial videos and all of them.

B

So in some sense you might say that the sharepoint patterns and practices is the community side of the sharepoint engineering and like that, what the shipment engineering means in that sentence is that the BNP is owned by up on the engineering. So exactly the same people who are responsible of releasing the shipment framework so and that's the reason why we actually want to have this weekly discussion. So if you have any feedback which you don't want to put in the issue list, you want to read mention that in the call or you want to have.

B

You have question which you need urgently and answer, and these calls are for that purpose. So we can absolutely get those questions answered unless it's something which we can talk about yet, but will be open and transparent on the messaging cool on the SharePoint framework signed a few updates, not a significant changes within the last week, but I'm going to reiterate some stuff, which happened after the last Thursday.

B

So, first of all, right after the last Thursday I think it was two hours after that, like mentioned in the weekly call, we went live with the death toll of calm, / sharepoint and that's the new sharepoint developer, landing page, where we have right now. Sharepoint framework topics really really really soon that it's it's not a typo, that the really really is there twice. There will be information about the web hooks because we open that one up up for contributions and then I missed the URL for the contributions are welcomed.

B

So the left office that comes the SharePoint and all of the articles, they do have a contribute button or contribute link that points directly to the article in the github. So if you find it by a typo, if you want to find a mistake, if there's something what you don't like and you can report an issue or you can actually do even a pull request and we'll go through all of those those suggested change this within the framework.

B

The other thing what has happened within the last week, there is a new drop I think this happened on Thursday, as well as part of the release of the left, Gotham / upon so there's a trope number, two on the SharePoint framework stuff, this deed chains or introduce some of the new capabilities. So a ball deck is going to demonstrate. Some of that today, at the gay Lewis elio is also demonstrating some new capabilities, or at least some areas which are touching the SharePoint framework, and the release notes are right now in a key top.

B

Most likely will move the release notes in the future, also the left office, com, / sharepoint, and but what we want to do with the release notice that we want to explain if there's any breaking changes. What are the key chains is. What do we need to do for your existing solutions to make them work, together with the latest update and kind of a reminder on that one? So we are still in a deaf preview that the SharePoint framework customizations arnett, not meant to be used in production.

B

Well, first of all, they only work within the deaf tenants right now we're looking into expanding that so pretty soon they will be working in the first release, denounced as well, but they're not meant to be used in production, because we can't guarantee right now that we wouldn't introduce any breaking changes. So we want to make sure that the platform is stable enough and then we'll make a proper announcement.

B

It's using directed of stuck on blogs and other social media channels whenever the stuff is stable enough to be used in production, and we don't have an exact date for it. I can. I can predict that we can probably provide some level of a schedule or a roadmap in the ink night time frame. So the ignite will happen in three weeks or two weeks well by end of September and in the ignite.

B

We're going to talk about slightly the road map for the SharePoint framework and, more specifically, for the client side with boards and that's kind of a slightly well I'm, going to run both slightly but shape a client-side web part is just a small piece of the the really the bigger picture of the ship one framework and we kind of keep on releasing new capabilities new ways of expanding sharepoint and customers in SharePoint.

B

The client-side web part is just the first phase and first way of customers in SharePoint, using the modern techniques so more to come, much more to come, shape and remember, clipart sample repository. This was opened at the same time as last week as we open up the depth of stuff on SharePoint, so the SharePoint framework, webpart sample repository, is open for community contributions.

B

So if you are creating samples, for example, you something like elio is showing today the search web part that could be just as well taken underneath the official, the sharepoint samples, repo and then we'll get all of these people acknowledged and credits within our monthly BNP calls so that people are sharing their knowledge and sharing their samples to this centralized repository.

B

The really the key thinking on that one is that you, when there's a new person who wants to learn about the SharePoint framework, did the easiest way to get started is to go to one repo, pull it down start playing around with the with the stuff and we'll expand on this exam sample site.

B

Quite soon, there will be more and more samples on that Reaper right now we have one sample and the tutorials outcome in the Reaper available, but it's already open for contributions and the final thing kind of a mentioning on that one getting started webcasts in YouTube. So if you go akms it s, BB&B / videos, you will learn to our YouTube channel where we have actually getting started webcasts we do have tutorial recorded. We have videos around this stuff as well.

B

The bmv video channel has also stopped for a shipment adding model, because we absolutely understand that right now, today, you are already working in sharepoint online and you need to have guidance with that one as well. So it's not about all about the future. What's coming up quite a few things around I'll quickly going to do a quick screen sharing so just to show some stuff from the repo perspective and I lost the skype window. I have two mini screens. Give me one.

B

Second, let's actually start up a one browser and then I'll start sharing there. We go so from a repo perspective, just to walk that. True. Let me share my desktop and my monitor.

B

So in the key taps, the sharepoint- and let's wait for somebody to confirm that you're able to see what I'm sharing at least it goes to the recording, okay good. So so in the github. If you go to the github com /a point, this is the the main location for the future sharepoint stuff, all of the existing PMP stuff. What we have, for example, in the BMP repo, is underneath the office dev, and this might be highly slightly confusing. The existing PMP Reapers will still remain with people and updating this filter will open up.

B

The contributor will keep on taking contributions on this side as well, but the new stuff around the SharePoint framework goes to the market hub, calm, /, everyone. We don't want to kill any of that system repos, so we don't transfer them over, at least for now we're kind of a debating on that decision.

B

Right now we have the S PDF docs, repo open and the lift of repo is really around the documentation. So whatever you see in the deaf dogs, repo is exactly what's available within the sharepoint def central. Whatever we call this sharepoint deaf center or whatever, and so if I click get started, I can say, they'll get a opens. A framework related information right now, the sweat pots there's going to be information around the web hooks quite soon here, because that the information is partly already visible in the in the repos.

B

So if you actually go to the staging branch, you can see already information around the web hooks because we have this brunch blessing. Automated way of doing stuff. To keep on here. Just to kind of a pin point is that if you find an issue, if you want to contribute, if you find a suggestion on the page, you can always go click here and say edit in a guitar and boom.

B

You learn to that exact kata beach and then what you can do is just such as the chains or submit a change in my case that the experience is slightly different and we'll work on the I have such a high permissions on on this github repos, but we'll work on the guidance on on how to submit those changes and how to do submissions.

B

Actually, if I remember correctly, never mind we'll work on the on the links on that one and the other thing. What I wanted to quickly kind of a pinpoint was the SPF FX webparts. So this is already visible like nations, we do have the tutorial code available. So this is a one sample or solution which is essentially the tutorials, which we have videos as well ready to be combined in a single solution.

B

So what you will have if you follow up on the tutorials and that's going to help you on, if, if you run into issues around any tutorial steps, you can always pull down this example, which will show how to get started. The other section in here. If you go underneath the samples folder, we are planning to start expanding this one right now we have a one contribution from waldeck on the angular side into you, I office fabric, to do web part and we're looking into water, we're open for pull, requests and submissions in here.

B

So we in the same way as within the pnp side. We have samples and salute oh well. We have samples- maybe we maybe have too many samples in the in the classic PMP we're looking into kind of collecting some of the great samples what people are building in the in the new SPF exile as well, and maybe kind of a fun final pinpoint I've mentioned about the whip hooks so relatively soon, not going to say well quite soon.

B

Let's put it this way, we'll open up the SPF samples and underneath this, the Deaf samples we have samples and we will release a lip hooks list sample, and this is essentially what we recorded together with Burt Johnson around the sharepoint web hooks.

B

So we will release the diff preview for sharepoint web hooks quite soon, and this sample is going to be released at the same time and then you're able to start testing this functionality and this one there's a video which is explaining all the steps how to get started and what does doing all of that good, probably not missing, actually anything, except where was the videos so akm SF s, ppmv videos and you'll land directly under on the YouTube channel. So we moved our videos.

B

I mentioned this plot kind of like five times already within the pnp calls, but there's always new people, so we're moving into our video portal from channel 9 to the YouTube, and from here you can find the latest uploads popular uploads monthly community calls BMP webcasts as the effects tutorials sample videos by weekly office hours. For example.

B

These calls will be shared as a recording and channel in the in the YouTube and also old stuff, like the bill in quotes all stuff in in production stuff like how to use the PMP season core components in the existing check on Derek model or using the remote a penis.

B

I'm going to switch back on the few slides so and yes, absolutely chase core. We should actually do a few videos on the chase core usage as well, which is a good point Patrick to raise so I'm, going to switch back on the slides and I think we kind of share I'm going to hand over the discussion to metric, and that is going to do a quick point actually alter the opportunities to contribute around the sharepoint effects like mentioned, and obviously the easiest thing to contribute is to test the tutorials.

B

The tutorials are available in the depth of home /a point. If you finally choose something doesn't work, you can report that using the github tooling have a discussion in Stack Exchange or in the network to office com. Well, nowadays, it's the technical tech I can't remember that the location name anyway, if you write network that office.com you learn to there as well this the platform and demo your stuff in the BN basic goals, essentially in this call I, would absolutely welcome and open for suggestions for your demos submit changes to existing my tutorials.

B

That's open up submitted samples really really. We welcome all of those samples, the intopia individual samples reaper as well, and obviously we are really really opened for your feedback. So if you like something, if you hate something, if you knew, if you don't like something, let us know we'll figure it out if it's a messaging issue, if it's a technical issue, if it's a tooling issue and Wilbur conduct, and because we really want to make sure that community has the needed guidance and hear that needed information around the ship and framework.

B

Good, I think that's it, let's hand over to Patrick for a quick summary on the PMP chava script, core component and the library status, and then we'll move in the dish upon framework demos.

A

Great thanks is a great update on the public preview. There of the SharePoint framework. I hope folks are getting that out. You play with that a little bit and a great sort of tool you can use when you're doing your SharePoint. Rework development is the core component, so hopefully uh it makes things a little bit easier and helps you not have to remember all the little rest URLs and things like that so encourage folks. If you haven't, have a look at that, we've got a the github link down there at the bottom.

A

As we mentioned earlier, there's also an NPM package. We've released 104, we'll talk about that here in a second we've also got the git er uh I still know to call get er. Hitter chat, um I caught a forum right, the Gator chat area. So that's a great place. If you have questions or comments around specifically the core component, that's a great place to sort of get that answered or get some feedback there.

A

So moving forward again, we want to thank everybody. That's contributed. We haven't had I'm privately viewing. Why take over as presenter? Can you move to that law today, sir yeah.

B

I can bow or you can take the presenter it away. Okay, I'm your.

C

B

Assistant, just let me know, oh god, nevermind no.

A

Sorry technical, my presenting, can folks see yep pocket all right. Sorry about that. One of these days, I'll learn how to use tech nology. So thank you to everybody. That's contributed really appreciate everybody's work, as we've mentioned a few times in the past. If you would like your listing in the author's file updated to reflect a company name, baby I've got you know your name slightly wrong or, if you'd like to add an email or a github hand, bull or something in there. Please, just let me know we will make that happen.

A

The least we could do is get you as much recognition as we can I'm privately viewing again. It tells me so everybody should see the Thank You screen. We are okay, confusing um great thanks. So thanks to everybody, they contributed without you. The project would not exist and look forward to folks contributing in the future.

A

So now we should see the Yammer and get er discussion. Slide has been pretty quiet this last week, a few small questions and that's great so I'm, assuming everybody's using the library and everything's working very very well um again. If you have questions the hop onto the Gator, let us know a couple of winks again down the bottom around getting to the community and also getting to the git er. So that is um you know, that's the way to really engage.

A

If you have questions the folks, both myself and in our community here, do a great job of helping each other out. So really, uh you know like to see that love to see that so moving forward.

A

What's happened this last week we did get a 104 released last week and I got a blog post up, describing that it was a smaller release but I think a valuable one and had incorporated some really good fixes um in that release, as well as a couple of uh new methods getting fields by both the internal name and uh display name as well as the batch not execute, now returns a promise that were resolved once all of the the child contained promises of that batch resolve stuff.

A

It will allow you the opportunity to sort of uh once all those promises resolve. Perhaps you a timer to refresh your data or do some other UI updates, or things like that, once everything's resolved so I think some some great updates there and all of those came out again a direct feedback from the community requesting features so love to get that feedback, love to see that feedback and we're trying to incorporate as much of that as we can I have gotten mostly caught up on processing, pull requests and issues.

A

This few issues still there certainly welcome help resolving some of those um you know, but I think we're mostly caught up on that and all the pull requests that were out there were included in the 10 for release. So all of those did make it in I should mention those of you that were on a call. Last week, a bill during his demo had mentioned. There is a problem when packaging, the jas core framework in the ship in sorry, the James core component within the SharePoint framework that is also resolved in 104.

A

So we got that fixed in as well, so that should all be good to go with the SharePoint framework, so opportunities to contribute, write a web part and demo it on this call. Just let us know, we've got like I said two great demos this week certainly look forward to more demos in upcoming calls. So if you want to do a demo, all you need to do is write a web part. Let myself let vaison! Oh and we'll get you on the agenda for the call.

A

So we typically have time for about two demos, a call so you know it might not be, might not like. If you let us know Monday, you might not get that week. You might be the next week, but just let us know we will get you on the agenda. We're really excited to see the stuff that the community is coming up with and then sort of a plug for the library. Absolutely encourage you to use the JS core library in those web parts. You develop.

A

uh It's not going to get you in any sooner but love to see that love to see how folks are using the library and I think it helps the community understand how to incorporate that into your SharePoint framework projects as well, and then the other opportunities are kind of the same. We talked about testing. Let us know if you find issues report.

A

Those issues folks have been doing a great job of that and we're trying to hit those result as they come in help writing tests still working on that and then again still lookin for some help on styling. Our docs website have some initial interest there and then not. A whole lot really came through with that. Quite yet. So looking for folks that are really good with CSS and have some time and want to use the kind of handlebars stuff and get that working certainly encourage some help with that cuz I'm, certainly not a CSS wizard.

A

So that was a quick update on what's been going on with the javascriptcore now I'm ready uh for some demos. So let's I think waldeck is gonna go first. If I'm not mistaken, no you're, not waldek I'm, not Wow. So do you want to take over presenting and let's see what you got, yeah.

C

Let me know when you can see my screen, it should be starting any moment now got.

A

Loading on my side.

B

Let's say how your skype version is working right now, so.

A

B

C

Awesome so the one thing that I wanted to show you today, guys or I, want to actually talk a bit about, is the ability to load external scripts from CDN or any other external place when we build I'm shipping framework client-side web parts as an example I'd like to use the web part that you might have seen already, which is the to do part that I've built with angular and which I stalled using the ng office, you wife a break initiative which is basically an open source set of angular directives that implement the office you I've ever extols.

C

So that's the web project that you can see now on the screen, but today, instead of talking about what the web part does, we will talk a bit about how it does that right. So initially in the past, when the SharePoint framework has been initially shipped, the only way for us to work with angular was actually to include it within the bundle, and that was actually that applied both to angle and ng office. You I fabric right.

C

So if we go to the code which you can see now, let me quickly remove that and let me build the web part, so I will go to terminal which is basically command line, and here in, let me call Val bundle and let me increase the font size, so it will be easier for you guys to see the build stars and it should be done within a few moments. And the one thing that I like you to have a look at is the file size.

C

When we actually include both angular and Angie office, you I fabric will within the bundle. So we go to the mac explorer thing. And here, if you look at at the files that we get, we get one point four mags for one single wet. What effort? Well, obviously, that doesn't really apply to the thing that you would ship in production because then, instead of golf bundle, you would call golf. Let me zoom out of it golf bundle that ship right.

C

So that's the way we can distinguish whether we want to have debug build or production build right. So here, whenever we call that's the ship web pack will actually optimize. The bundle will minify it and we'll remove the comments, so that will save us quite some space and if we go to the bundle now we see that it's 300 k right. So it's, but still a lot I mean the web part doesn't really do that much and the size that we get is due to the fact that we include both angular and Angie office.

C

You I fabric within the bundle. So that means that, if you add the web part or are you or you would have fuchsia fuchsia fewer parts on a page that all use angular and Angie office, you I fabric, you would have that overhead for every single one of them. So that means that you, you would load 300k about for every single half part Oh as overhead.

C

Only because of the fact that you actually embed these dependencies within the web part so think about it in the context of a whole intranet where you have quite a few web parts pages incidence of of them. So that way, you would basically have a lot of overhead to bandwidth that would actually slow the whole internet down so another a way to deal with external scripts.

C

When we build SharePoint framework client-side web parts is actually to load them from an external URL, and it's really easy and the great thing about it is that you don't have to change anything about your code right, and the only thing that you have to do is to say that some resources that you're using your code should not be embedded but should be pulled in from an external URL when the webpart runs on the page and that that's it and at that point is actually up to you to choose whether to you want to use public, CDN or location, where you store your files internally right so a place day that you manage your yourself.

C

So the way this works is you do that by going to to your project, then you go to the config config Jason, and here in externals you use, for you, add a state, or you add entries for all scripts, that you want to load from external URLs. So in our code, if we go to the web part, we, for example, loud angular right and then in angular app.

C

If we go here, we load the ng office, you I fabric, so in order for us not to include them within the bundle but to load them from an external URL. We go to our config, and here let me put back the entries that that I and delete it initially. So here we add two entries one for angular and one for ng office. You I fabric. The key thing is that the way we spell these entries has to match exactly the require and import statements that we have in our code.

C

So here is a angular, because here in a code, I have angular and the same way, because here in my angular app I import and g dash office dash uy dash fabric. It's exactly what I have to say here right and with that. The only thing left for me to do is to put URLs of these two guys right so I say that ng office, like average she'll, be shot.

C

Shh would be pulled in from this URL and angular from here, and if you look oke oke cozy up at that, you will see that actually, the way they are defined is not exactly the same. We're here I only have the URL here I have the path and a name, and that has to do with the fact how that script that I am going to use it actually build, and it touches a bit to the thing that that's called the module.

C

So you might have heard that they are AMD modules, UND modules or none AMD modules and that basically didn't defines how the script is build. So, for example, angular is a non AMD module. So that means that whenever you would pull in that script- and you would run that in browser, it will just attach in your global scope on window. So in angular you would get windows annular variable that contains angular.

C

On the other hand, the ng office, you I fabric, is built as a UMD module, so that's contained within its own scope. So whenever you want to load external script that way in the shape sharepoint framework, you have to know what kind of script you want to load and based on its type, you either only need to specify the URL or you have to specify URL and optionally, its name right so for non AMD script that attach to your your your window, scope. You have to always specify the name right.

C

So with these two guys, we will now love both scripts from these URLs and let's test that what that will do to our code that we that we would ship so once again let run a build, and that will take a moment or two the last one to 15 seconds that actually pretty long, but it is actually, if you talk through it, it will be done in no time, and we should actually see the code now and remember. First time we had over 300 k.

C

Now, if we go to the mech e Explorer, now we actually have do we have yeah I didn't save it. Oh darn, my bad guys, sorry now you're gonna! Now you need to actually put up with me for the next 15 seconds. Sorry, Oh, where's. Anybody think I 12 back yeah. Yes, it's always that way. It's like yeah, so now you're going to see the cool thing, and that is gone so now, if you look at this now, we actually went down to 13 k. So that means that we saved over 300 k.

C

Well, not really because the web parts still need angular and ng office, you I fabric, and now the difference is that it will pull them down the first time you add the web part to the page, but here's actually the trick. It will do that well, depending on where these scripts are stored. If they are start correctly, these scripts would be pulled down. Only the first time user sees a web part on an Internet that uses descript whether they would go to to another page another web part that will use exactly the same script.

C

These scripts would be already pulled in from local passion browser. That's already there right. So the browser would never make the call to load these groups because- or it already has them in its cache, so so that way we can really easily optimize the way our internet works and the way we build the web parts to actually improve how the whole thing's works right and the best part is. It doesn't include from us any single change in a code. Our code is exactly the same.

C

The only thing that we have to do is to go here to our config and include the external scripts are actually specify the the scripts that we want to load from external place as externals right, and that does not need to be a CDN. It has to be any or it can be any place, that's ex hex accessible user. So that could be your document lock, I'll library, that could be your blob in Azure. That can be anything right.

C

So as long as users can load scripts from scripts from these URLs you're good to go, and you you'll be able to optimize your internet for performance with that I give it back patrick or directly to leo. I.

B

Think a nurse with ilya will take over from here then well earlier starts the sharing just going to be 1 comment on what you showed on here and that's that's a really good point in Oh Bertha.

B

We need to provide some guidance and documentation around this considerations around using this external javascript, because it's really really important that if you use, for example, angular or jQuery within your web parts, you are using the exact same URLs within your web parts, because otherwise, if you have let's say 10 different web parts within the front page of the intranet and all of them are randomly referencing, whatever javascript files in the internet and the page size will get extremely big. So, yes,.

C

I've, actually, even then there would be actually even worse because you would have ten additional calls to another domains on the internet, so you have actually additional penalty out of that. So that would actually be even worse right. Absolutely.

B

Absolutely and we'll work on the guidance on that one which will go to the deathbed of circumstantial pond and elio. We can share. We can see what you're sharing. So it's an integrated thing that that's a pretty big picture, but what I go through yes, but take it away. Thank you.

D

Okay, perfect, so what I did for the share from framework I built some search web parts? So it's basically simulating what the content search report in the moment, SharePoint environment does so here we have the SharePoint a workbench. If I go to my web parts, that is going to load me, some results so is going to by default. Load 10th results for stark worry. If you go to edit physical parts, then you have a couple of properties that you can define. You have a title, yet the query you can do so.

D

If we change this to I only want to have talked x-files that we can change it and accredit changed and you will immediately see all documents, so you can also change the number of results. If you want, you can also do will be sorting. So let's see the sorting change and you have a templating functionality. Now I started from the beginning, with an internal templating system and internal templating system, I mean that that everything is built from within the SharePoint framework.

D

So all the templates are in the same project and once you build it, it will become available in your web parts. So here is another example. Just not now.

D

Specify a title: you will see that it looked so that's great, of course, if you are using this web part- and you have different templates like with the content search report, you had the ability to create the display template and the display template was just up ahead. You just needed to upload it to the emulsified gallery, ones that was a over there. You could start using it in your application or in your web part now to simulate this I build something that can do something similar.

D

If I switch this a toggle, then I can say: okay, I just want to use an external template and that we copy URL. So this rose to a template. It's not a real special one. You will see the missing ones I applied now. It's loading the template from that URL. So this is loading insides mile apart and you can do different kind of things. Here is a template with jquery in it so with as the kicker a dependency, and it is also a dependency on styling.

D

So it's just the same template, but you see that hickory updates title and it will put it in rats and all the links are in blue and underlined so, but you can do other stuff I yesterday, I made another one. Let me do another query: I thought the carousel. So if I put this going on give me only cheap x, so now I've only cheap place, and if I this URL, you will see a carousel loading. So I refresh trips be working again so and ok it works now. How does it work? I?

D

Put it on a quick slide show so by default. You have the web part itself. So it's the typescript web part file in the typescript report file I'm, going to check which type of template has to be loaded. So you have an internal and.

C

External templates.

D

So internal templates, you define everything in the internal template, so if you have an external link or a dependency on a script or framework, you can in the internal templates, that's all covered from within the SharePoint framework. Of course, if you have an external templates and your template will live externally, so I, if you are going through the script, your SharePoint framework, application or web part needs to be aware of it.

D

So I build something in it that you can define which scripts to be loaded and with style sheets have to below it, so it loads the template. Then it's going to check if there are any scripts or CSS file to below that. Once that is done, then it's were loaded. It's will pass through the vampire pass through the element or the template to the web part and the web part will load the elements. So this is just how a default to react.

D

The part in the SharePoint framework works now once your template has been loaded, it loads. The elements. The element is aware of your templates and then the only thing that needs to happen is retrieving the results and rendering the components. Now we can dive into the goat if I could too quickly just shadows, I, don't know. If there are any questions, that's feel free to ask them so.

B

Here we are just at this point pataki earlier I think this is packaged paid, yep, okay,.

D

Perfect so here we are in the bad parts, so there are a couple of things that have been changed.

D

Here we have the property settings, nothing really special. The only thing that has been changed in the property settings is the double that there is a check, do I need to load the external version or internal version, and then it's going to show you that, so what I mean by this is, if you go to do that part, and if you double this, you will see that there is a drop down shown points off when it's on you have the text box option.

D

So when it's on the text box is for inserting the URL to the file when it's off, you can choose from the internal template.

D

As a property section, then the render in stake center section had the rendering fits all buttons checking if its internal or external. So that's the first thing that needs to be done, then also what's a lot like has been talking about, is module loader, it's not using any code any more coat anymore, but here are using 2 modulo de to load my external template.

D

If it needs to be little bit of course, once it's loaded, then I gets the elements I check, which scripts have to be loaded. Once the scripts have been loaded, then the elements can be loaded. Now you see where the element gets loaded, and then we go to the elements file.

D

This is built with the flux. Veteran flux is all about you than a unique directional data flows. It's not only for reacts. It can be used in whatever application, but it's really useful. If you're working with data flows inside your application and it's you need to get used to it, but once you get used to it, it's really simple to do so how it works. It works with actions dispatcher in a store, so all your components can call an action that action can contain something I like getting or retreat or saying.

D

Oh I want to retrieve search results. The action is center with dispatcher and the dispatcher will send that requests to all the source that are available. If there is a store that is available, and that has a task then it will pick up and that dust and it will retrieve or will do the task you are still for so here in my search, xpx element or component I start with no results, and once my web part is loaded, then I'm going to get new results.

D

So give me the results based on the properties I got from the web. Part itself, so this is being sent to the search action and to skip everything we jump directly into the circuit store and the search store is nothing more than this. You see here an action get me the search results here. I build up the URL for retrieving all the search, a search results.

D

Of course I like retrieving and based on the query units, so here I check, which type of curry you want to do then, which properties do you need to define by default? All properties are defined in the templates. You will see it immediately. If I open up an external templates, you can also define the role limits.

D

You can do the sorting and that's it once the URL is complete. Then you will do the gas circulate action against earth data action uses the context HTTP client, which is by default available from within this sharepoint framework.

D

Once that is done, it retrieves the Jason. You do some checks if you retrieve the correct results and there's something really special here. Setting search results I'm not going to cause through every type of result, because if you're going to do search query by the rest, URL you get more manage properties, then you have defined in your web part or in your template. So what I do I will format? Everything and I will only give you the elements you want order, manage properties and the values you want from within your templates.

D

So if you want to file a title or the file in the parts, then your object object will return as a result set of only the titles and the parts of your files you retreat.

D

So once that is done, the store will emit a change, and this emits page is really special and flex.

D

Everything is based on an thats, so once it emits a change, you can put an event receiver or a listener to it's in your component. So if you're going back to your component, you will see this kind of things. Search, store, that's change listener and also in the component will announce. You have a remove change listening so once there is something changed in my store and there is an emmy change, then it will give trigger to my to my element or to my component, and it knows that it needs to adduce update its component.

D

So once this is done, then it's will go to the unchanged. It checks which type of changes didn't happens. Is it a change in the properties or is it the change in retrieving a new set of search results? And if this is happening, then all the news search results will be put in the state of that current component and then we can go to the rendering of that for the part itself. So here we have the web parts rendering and the only special thing here is these two dots.

D

So here we check if it's an external template or if it's an internal template once that is done. If you know what you have to do, then, then you can just return that component cause through the properties and the results and you're done. So what does a template? Look like if I just open table templates? It's nothing. Really special, if you knew anything about react itself, so if you have a couple of functions from within example that are important for the template itself, and here you have the rendering components.

D

I loathe CSS file, which is coming from the office fabric for a loading component style of the table layout. This is for showing the title above my other part. So if I switch this back to table.

D

Okay, so this is my template, as this is my title of my template. This is what you see there and all the results are being rendered from within this now. This is all for internal templates. As I said, you can also use external templates. External templates I created these in another folder, which is not really part of the SharePoint framework. I still need to build something for rebuilding or for creating these templates test. For now.

D

This is still a group of concept: don't work so it's not production-ready a sample web part or let's dive in into the loading one. So you you see an object external template. This is an object that always needs to be defined like they, so you, external template and external template as to other objects, property object and a component objects in these property objects. You will find key text mapping scripts and styles, so the only important properties are mappings.

D

These define, which properties and properties that needs to be you treat from search and which are going to be used inside your templates, which scripts you can define which what you want to load for rendering your templates and the same goes for style. So here you can define styles and everything will be done in the search reports itself. So the loading it doesn't need to be hasn't been done in the template itself.

D

It's only in the depart, so the web part will do all the looting of your external scripts or styles, and once that's done, then you can render your element here. You see it's around elements or from reacts. You can also build it with gsx for the time we need to create another compiler for that. So it's as I said it's just a row or a proof-of-concept template. So the same goes for the carousel template.

D

You see that I defined to script dependency other scripts with the script dependency, so you have chick very and you have kik race. So cycle is doing. Oh, the carousel rotate. So, first you will lose in jquery Fulk, and that is finished that loads the cycle foul. So this is how my I web part were so feel free to port door, contribute party like it, and that was it for my report to my scientist.

D

B

You area, thank you, cried Emma on the functionality and how it's actually built and one thing what I wanted to kind of a from a obviously from a Microsoft perspective. This might be pretty obvious for everybody in the call, but let's get it recorded as well. So obviously, as part of this journey, when we move into the SharePoint framework, we within the Microsoft, we are actually building custom, new custom, out-of-the-box web parts as well.

B

None of those are yet available, and most likely by the time when we release, let's say the new portal experiences and all of none there will be no doubt and out-of-the-box native search with part, but in ilius case he's essentially already demonstrating how to do a really really nice and flexible as a custom search web part before microsoft has its own implemented.

B

I. Think that's pretty much understandable for many of us in the call, but just wanted to pinpoint that's not it it's the sharepoint favorite churn.

B

It doesn't mean that you need to write all of all of the even out of talks, web parts from scratch, or whether there will be new stuff available sooner or later, because it's the same framework, what our engineers are using for future customizations, which is by the way, crate and I, know that alias web part is one of those examples which are actually being looked internally in engineering like oh, this is superb, so showing nice techniques sewing nice functionalities, showing them templating model as well.

B

There's a question from Russell will Microsoft release the source of their web parts when they are created? The answer is actually yes we're looking into exposing or giving at least some of these web parts as an open source, it might be that we first release some of the web parts and at all of the web parts, but that's definitely the intention we're also looking into sharing the, for example, the yeoman templates as an open source relatively soon there will be other elements in the SharePoint framework, which will be open source.

B

Not all of the things will be fully open source, at least when we start and when we move forward, but there will be more stuff available in the ship and organization in a github sooner or later, any other questions we're quite soon running out of time, create image by the way early on and Volvic and I know that while they had to go because he need to pick up pick up his his kid from kindergarten. So any questions for Elio or anybody else.

B

We'll webhooks be for this data, only crate questions. So when we start to web hooks def preview, they will be only for this data for the typical list. Data element so attachment that at least item create it, and it's only for a synchronous, Evans and we are looking into expanding the web.

B

Hooks capabilities also for list created event and all of a sorry sight to create at events and all of those things and but we'll always have to start from somewhere and we'll start with the list, the death preview and then we'll continue introducing additional web hooks as I journey going forward.

B

We need where's the best place to ask SPF X questions, so I would say that the best question is pissed. Location would be right.

B

Now is the issue list within the SharePoint repo and I'm, going to paste that one in if it's anything related on the documentation, if it is system also stack exchange, is a good location for for those questions and our engineers are following up on the stack exchange questions, but to be fair, I think the issue list right now in the S PDF docs is the most active and most closely watched and on the we need user created event. I think that might be coming at some point.

B

I can't confirm that and I can promise that at this point, because things have not been locked down, but it's it's understandable, ask and understandable event, which most likely will come at some point. No, the user created event, though, isn't really for SharePoint, that's, probably user-created somewhere else, or if the crews are created or added to the site. That's a different, even but we start with the list. Events anyway and then we'll start introducing additional things and we'll start with the dev preview, which again means that it's not ready for production.

B

But we want to have your input to your feedback just work. What's broken, what's what doesn't work if something is horrible, we can still adjust them before. It goes global available. Oga, like we say in Microsoft, but usually I'm going to use those upper variations. People can follow up on what we're saying cute I think that's it Patrick any last words from your site, nope.

A

Some great demos great to see that stuff look forward like I said before. If you guys want to do anybody out, there wants to do a demo. Just let us know we're excited to get those out for the community thanks to everybody for your time. Thank you.

B

Everybody and the video will be available in YouTube within 12 or 24 hours, so check out the video channel other YouTube channel whenever is there, but thank you. Everybody for joining Thank, You Lily unwell, like one more time for the riad, great demos and hope hoping to see you next week and will do definitely more social media advertisement for this weekly calls as well, so that we get more people in and more, let's say, active discussion on.

B

Only the capabilities but and and a wonderful final reminder tomorrow, we will have a monthly must emerge on the classic, BNP stuff, I, wouldn't say classic that the bmv stuff, what we've been doing so there will be a monthly communications, new samples, new functionalities for existing in production capabilities, as well so check out the lifted off scot combs last blocks for announcements on that one and deftly office that blocks / blocks announcements around the web hooks as well. But thank you everybody for joining and hoping to see you next time.

B

I smoked, cheers thanked all right.

A