 Hi, welcome to Visual Studio Toolbox. I'm your host, Robert Green, and joining me today from the brand new Channel 9 studios. This is my first show here. It's my guest, David Cattouille. Hello. You pronounced it correctly. Absolutely correct. Excellent. That's the French way. I love it. I like to pronounce people's names correctly when they, if you're going to come on the show, I should get your name right. Thanks. I appreciate it. And David's joining us today to talk about the UWP Community Toolkit. Correct. Which is a set of some controls, some helper functions that is just released on, as a NuGet package recently. Correct. Yes. And so you're going to show us what's in it. Why was it created? What does it help me do? OK. Fun stuff like that. So perfect. So UWP Community Toolkit, the important point here is community. The idea since the very beginning was to involve the community with us to help us figure out how to simplify UWP development. So today you can grab the SDK, get Visual Studio, and you can start working on your application. But sometimes you may have to deal with plumbing. Or sometimes you may expect high level controls that you don't find in the SDK for good reason, obviously. And to fix that, the idea was, should we create a toolkit just on our own and then give that to the community? Or should we just be more open and just start with the community? And at the very beginning, we handpicked several MVPs, the most involved. And I can think about Scott Lovegrove or Morten Nielsen from the community. They are really active guys in the community. They are helping the community to build UWP applications. So the plan was to start with them, think about what we could do for a V1. So when you say we, who exactly is we? It's Microsoft. In my team, we are four people. My team is inside Windows. The name of the team is Partner Application Experience, PAX. So it's Windows slash PAX. You and I used to be colleagues in DX. Correct. I used to work. Developer evangelism group. And the folks in your team were doing such impressive work that Windows drafted you. Thanks. And Mike, you're over there. Yeah, my work here is a kind of an extension of what we did in the evangelism world. The idea is clearly to help community use our tools and create fantastic things, fantastic applications. We are not creating applications for them, but at least we provide required bricks that they can use to build their own applications. So it was the case back in DX. And it's more Windows focused right now, obviously. So here you enter the UWP Community Toolkit. I can probably show you, we have a sample application. The toolkit itself is based on a GitHub repo. So if you want to go to the GitHub repo, which is right here at Microsoft slash UWP Toolkit, you will find all the code of the toolkit itself and of the sample application. The sample application, you can find it as well under UWP Community Toolkit Sample App on the store. So even without dealing with Visual Studio, whatever, you can still download it and use it. And we have four buckets, Controls, Notifications Helper, Animations Helper, and Services. So I won't go through all the control that we have here, but basically the idea was either to fix a missing thing, think about the range selector. We have sliders right now in the SDK, but you have no way to easily create a control that can specify your range, like mean and max value. So that's why we provided this control, which is a double slider, actually. And we also have kind of control that you can already do today with the SDK. For instance, hamburger menu can be easily done using a SpeedView. But for the developer, we are thinking about beginners or people that don't have too much time to create an application. Thinking about hamburger menu is not just using the SpeedView. It's also thinking about this button, which has to be on top of everything. And you have to deal with it. And you have to find the right font icon that you're used to have these little three lines. It's doable. That's not the problem here. So the hamburger control, there's no such thing as the hamburger control. You do a rectangle. You do a box at the top with three lines. And then you do a menu. And it's all put in a SplitView. And then you've got to understand, when is it on top? When it's not, when it's like that. So it's a lot of plumbing. It's not that hard to do. No, it's not hard. But it's plumbing. And here, what you have to do is just say, hey, I want hamburger menu. This is my foreground. This is the item template I want to use. This is the option item template because you have here the menu. And we also have a setting at the bottom that you can also use. And for the user, it's just defining values. Instead of defining how the control should work. That's the point here. And that's the point for most of our controls here. They are all doable because we did it. I mean, we are just using the SDK. And then presumably the code for that hamburger menu looks pretty similar to the stuff you'd have to do by hand if you were just doing hamburger menus by hand. And there's probably, obviously, stuff in there that you can learn because it's really about code consider. If you are interested by the plumbing and how it works under the hood, you can just go to the GitHub repo and see the code. But when we were discussing with developers, they think about developing for Windows as a easy task. They just download Visual Studio. And they want to drag and drop. Somebody who's been a developer for a long time, I never used the word easy. Yeah, it has to be easy. Things are straightforward. Things are doable. Nothing's easy. But we try to make it easier, let's say. Easier, yes. So they are really happy to have a Nuget packages because if you are a developer and you are not interested by the code, you just need to grab it, the toolkit from Nuget. Also gives you more consistency across applications. Correct. Because the default for that hamburger menu control is this. And if you just slap it in, this is what you're going to get. And you have just two tweak colors or just presentation. That's true. And developers think, OK, I want a wrench selector. I get this toolkit and I have my wrench selector. That's it. Obviously, I can think about, OK, I need a double slider. You know what I mean? It's easier right now. We are not fixing all the problems of the universe, but at least we provide a first start. So we have controls. We work with the notification team. They were publishing the notification extension on a separate repo on a separate GitHub. And we decided to merge everything because it's part of what we want to do, like helping people achieve more by removing plumbing code, let's say. So if you want to deal with lifestyle or toast, you have to deal with XML and XPass. And that could be 20 different templates. Thanks to this notification extension, there is an object model on top of that. You just deal with the object model. So think about a toast. Here is a code of a toast. You create a toast content, which is an object and not XML path. And then you specify properties. What an easy that is. It's really easy. And then with that, you can pop a toast easily. Same thing, obviously, for lifestyle, et cetera. Then we also have animations. We introduce with Windows 10 something extremely powerful, the Composition API. Composition API is here to help you re-achieve fast and fluid animations. But there is a drawback. It's not that easy. You have to understand that you are not at the XML layer. You are at the composition layer. You have to deal with that. You have to deal with sometimes complex expressions if you want to do animation or whatever. Here, the toolkit just provides you. Let's think about offsets, for instance. I can play with the offset of my object. See, that moves. Exactly what happened. We have two options. First, if you are more a Blender-oriented guy and you want to deal with drag and drop stuff, we provide it for you here, a behavior. This behavior, just specify. This is the offset I want. This is my duration. Thank you very much. Apply that immediately. If you are more a code guy, then you can just use extension that we added to any UI element, offset, fade, whatever, where you specify the values. It's a nothing function. When you wait for it, the animation is done. Cool. And obviously, that works for all kind of services. Always the same thing. I can rotate it. So that's a little bit too much. Don't forget this degree. And the same. You rotate. You get the values. You don't. And you can even use the freed API. You can say toolkit.logo.rotate.offset.blur.startasync. And they will be merged and start for you simultaneously. And you can wait for it if you want or if you don't want, you can just run it. And then it's like find and forget stuff. The goal here, it's always the same thing. You can do the same thing by yourself. But here, it's Y9 of code, like myobject.rotate. Easy to do. And that's our motto. You can do it yourself, but it's an awful lot of code. It's an awful lot of learning. And you have to maintain it. And you have to fix bug if there are. It's an awful lot of learning how it all works in the first place here you just get. And as a beginner, you want to start simple, but beautiful. And then perhaps in the future, you are interested by how animation and composition works. Then open the box and see how it works. And finally, we also provide services. And in services, I mean connection to network services. One of them, the easiest one is clearly Bing. You can say, hey, Bing, I want to request async a search. This search will be done here on the United States for this specific text. And you can get results from Bing. And then you, oh, cool. But you'd still need to go get an account and have your app API and all of that stuff. No. There is a completely free, no account version here using just REST API. For other services, I agree, like Twitter and Facebook, you have to create your account on Twitter and Facebook. This is where our documentation could be really, really interesting. If you go to services here and for instance, you think about, OK, I want to publish something on Facebook. Then here we get for you a complete recipe. This is what you have to do if you want to get your app ID. And even the settings that you have to set with the values. So it's a no-brainer. So this would allow you to publish to Facebook from inside your app? Exactly. Services most of the time, at least Facebook and Twitter, are read and write. You can read from it. You can get your wall. Let me show you for Facebook, for instance. Here's the code. First, you initialize with your app ID. And this is where you need documentation to go through the process to get your app ID. Once you have it, you can log in, log out, obviously, with one line of code. You can get your feed, for instance, with one line of code. But you can also get your picture. More interestingly, you can post to your feed with a dialogue to confirm, OK, this is what you will see because being silent and publishing on the wall could be stressful for people because they don't see what will be published. So with the dialogue, at least, you say, OK, this is what I have on my wall. I validate it or not. So you have both options. And you can also post picture. That's for Facebook. We have exactly the same for Twitter. For Twitter, same thing. You initialize it with the required value. Then you can log in, log out. You can get user. And obviously, you can tweet just a text. Or you can tweet a text with a specific picture. Up to four pictures can be tweeted. So it's like one line of code. And you don't have to deal with OAuth, security, and all the rest APIs that could be there. You don't have to deal with updates of your app. You know they are updating their API services every time. This is done for you by the toolkit. Fantastic. Yep. This is it. Great. So how many people contributed to it? So it was unexpected, I would say. We launched it one week and a half ago. And we are already at 637 commits. Wow, with 25 different contributors. 25 different contributors. We have 47 issues open. Some are bugs, because we also have bugs. But most of the time it's feature requests. This is the idea. Add drop shadow in the animation library. All that kind of stuff. People in the community is responding tremendously. I was not expecting that much. Like I spent all my day just checking the PR and the pull request and checking if everything is fine. And responding to people. They are happy that we, Microsoft, and the community works together to provide a high layer on top of the SDK. And we already have 40, more than 400 stars. Moving forward, do you see a continue that will develop some, community will develop some? Will it ultimately just be all the community? I would love to be able to remove the toolkit completely. Because obviously in the future, the SDK, we get more and more features in it. But in the meantime, I would say that. I mean contributions to the toolkit. I mean, I'm expecting 80% community, 20% Microsoft. We are, we, Microsoft, are here to keep quality and to work on things that are not easy to work on. Like for instance, I'm planning to add more accessibility to the controls. So, and that's not something easy to do. And people are most of the time reluctant to do that. But we, Microsoft, we need to ensure that everyone can use these controls and be able to create application with it. So that's part of the thing we will do. And then it's, I see that as a project management job for me. Like people are coming, hey, we think about this. They discuss between them. And at the end, we need to take a decision. Then Microsoft can come and say, hey, this is our opinion. Community say, this is what we think. At the end, we find a common way, let's say. And then someone can develop that. It could be Microsoft. And it could be community. Cool. So what, if you know what additions are currently being worked on, what could we expect to see next? It's easy because we have a flagging our issue. We actually know. The community provided a blade control. I love this one. You see the Azure portal, the new one. When you click on a button, a new blade is added. And then you click on this one, a new blade. So you have this kind of tree view. It's like a tree view, but with blades one after the other. We have this control right now, ready for 1.1. So 1.1 will be end of September. We also improve various things like bugs. We will have drop shadows, a new option. So we have blur, rotate, scale, et cetera, in the animation library. Drop shadow will be there. What else we have like you see here? We have a carousel with composition. We have a wrap control. We have a Bing services supporting for video. And you see, that's a lot. Fantastic. Yes. And that's just end of September. So for V1.1, we plan. We hope to ship a version every month. Every month. Every month. Interesting. This one is going to be huge. Because community response was so, wow, that a lot of people came and say, yeah, obviously, I'm using this in my own toolkit. Why not sharing it with everyone? And then we need to polish it and integrate it into the toolkit. And that's 1.1. I hope that for 1.2, it's going to be smaller, because that's a lot of work to maintain that and be sure that everything is working fine with the right quality. Cool. Very cool stuff. So if anybody is doing, for people who are doing UWP development, everybody doing that should absolutely take a look at this. I think so. I think so. I've done hamburger controls before, and I got the code from Shen's blog. And it was understandable. It was easy enough to figure out. Just one control to drag and drop? Well, going from never having done one before to finding his blog, to reading his blog, and playing around with it, it's several hours worth of getting started versus just being able to get this tool, can say, bam, hamburger control, let's move on. So that's really, really cool. And today, to be honest, I thought the controls should have been the most exciting part of the toolkit. And to me, that's my own opinion. It's not. I'm extremely excited by animations, because you can merge them. And that's extremely easy to do wow things with it and services, like publishing to Twitter or Facebook was always a pain. And now. Well, the thing about animations, that would be the difference between having it in your app and not, because the amount of time it would take to learn how to do that is probably daunting. So you'd say, oh, well, in the next version, or somewhere down the road, I'll add animations when I have time to learn how to do it. Now you don't have to learn anymore. You just get it. I had an application, and I wanted to add a blur when I display a message box. And I was, but now it's like background blur, display my message box, that one, but remove the blur. Done. 3D end of code. Cool stuff, awesome. All right, so people building Windows 10 UWP apps, get the toolkit, download it, play around with it, let you guys know what you find. Come, create issue. If you have a question, if you have something that you want to add to the toolkit, or if you want to contribute, just create an issue that's clearly open to everyone. We are accepting all PR. Excellent, we'll have you back sometime in the fall to show us what's new. Excellent idea. Cool. Thank you. All right, we will see you next time on Visual Studio Toolbox. Bye-bye.