Microsoft Announces Windows Template Studio

Ed Charbeneau had the amazing opportunity to sit down and talk with Michael Crump and Clint Rutkas from Microsoft on Eat Sleep Code, the official Telerik podcast. Michael and Clint have been hard at work on Windows Template Studio, a new getting started experience for Universal Windows Platform.

Check out the interview in its entirety with the SoundCloud embedded player and read Michael's announcement that follows. We're excited to be part of this announcement straight from Microsoft Build. In addition, it furthers the UWP ecosystem that Progress proudly embraced just a few weeks ago with our very own open source UI framework, Telerik UI for UWP

Announcement from Build 2017

By Michael Crump, Microsoft

Today, Microsoft is pleased to announce the next evolution in your File → New Universal Windows Platform app in Visual Studio - Windows Template Studio. Windows Template Studio addresses a top community ask in our developer survey to make it easier and provide guidance to create new projects that target the Universal Windows Platform. In this post, we'd like to spend a few minutes introducing Windows Template Studio, and showing you how it works.

Windows Template Studio uses a dev-friendly wizard to get your UWP apps to F5 in no time, bringing together the pages, frameworks and features that you want. Our wizard walks developers through four steps to quickly scaffold a new UWP app:

1. Project Type: Select between standard layouts and predefined controls.
2. Framework selection: Select the structure of your UWP app with in-house and third-party support.
3. App pages: Select which pages that make sense for the app, that you are trying to create.
4. App features: Easily add features such as background tasks with one click.

Furthermore, we're open-sourcing Windows Template Studio, welcoming UWP devs to take the generation engine further – adding additional capabilities and app pages, improving the implemented best practices and patterns – and encouraging UWP devs to make the engine their own – tailoring it to their company's specific needs.

A Lap Around Windows Template Studio

We kick off Windows Template Studio by creating a new UWP app project. In the Visual Studio 2017 'New Project' dialog, select the Visual C# → Windows Universal node.

Here you'll see the Windows Template Studio project. Select the project type, enter in your new UWP app's name, and click 'OK'. Windows Template Studio will now fire up and walk you through the UWP app creation wizard, step by step.

Step 1: Project Type

You begin by selecting a project type. We've started you with the most common types such as: blank, navigation pane and pivot and tabs.

Step 2: Framework

Once you have selected a project type, you need to select a framework. You can select from Code behind, MVVM Basic or the very popular MVVM Light.

Step 3: Pages and app lifecycle features

Once you have selected a project and framework, then it is time to add in pages and features. We've already added the most common pages such as Master/Detail, Settings and Web view. You can also easily add in Application Lifecycle features such as Suspend and Resume as well as Background Work and User Interaction.

Best practices and patterns

To wrap all of this up, with a couple of simple clicks, you can wire up an app that uses the Navigation Pane, MVVM Light framework, a Master Detail page and a couple of features such as suspend and resume and Azure hub notifications. You save time, and your app is adhering to our design guidance and industry standard patterns, and practices come free.

Below is an example of an app generated with Windows Template Studio. Again, we provide the foundation of a great UWP app and get you to F5 in a couple of clicks.

Get Started Today

Windows Template Studio v1.0 is available now and you can expect updates every 6 weeks. We have extremely easy to use instructions for installing the VS extension on our GitHub page as well. A public roadmap is currently available and we'd encourage you to check out The Tips and Tricks for UWP Developer session that was shown at Build to learn more. You can get started creating your own app in three simple steps:

1. Download Visual Studio 2017 and select Universal Windows Platform development under Workloads.
2. Install the Visual Studio Extension for Windows Template Studio by downloading the VSIX from the Visual Studio Gallery.
3. Once installed, open Visual Studio 2017 and select File → New Project → C# → Windows Universal and you should see the new template that was just added.

And Best of All…Windows Template Studio is Open Source

Windows Template Studio is completely open-source and available now on GitHub. This project is community led and we're very excited to already have contributions from the following community members: Matt Lacey and James Croft. We would love for you to contribute to the project and would encourage you to read our contribution guidelines for next steps.

In the spirit of being transparent, the roadmap for the next release is always available. If you have a bug that you would like to report or share a feature request, then please add it to our issue tracker.

We would love to hear how your experiences are using it and the helpfulness of the project. You can reach Clint at @clintrutkas and Michael at @mbcrump. What are you waiting for? Go and try it out for yourself now!

Podcast Transcript for Windows Template Studio

00:00 Ed Charbeneau: This podcast is part of the Telerik Developer Network. Telerik by Progress.

[music]

00:16 EC: Hello, and welcome to Eat Sleep Code, the official Telerik podcast. I'm your host Ed Charbeneau, and with me today is Clint Rutkas. How are you doing, Clint?

00:25 Clint Rutkas: Hey, doing well.

00:26 EC: And also with me is Michael Crump. How you doing, Michael?

00:30 Michael Crump: Hey, I'm doing great. How about you?

00:32 EC: Not bad. Michael and Clint, you guys work for Microsoft. And why don't you guys give me a little bit of information about what exactly you guys are working on? What your roles are there. Clint, we'll start with you.

00:48 CR: Okay. I'm a product manager on Windows developer. My job is to try to find out what things the community wants, and what APIs are needed and give that feedback back to the engineering team, and see what can be done to help get those APIs and feature requests to help out developers. Michael Crump is on my team and I'll let him give a little bit of info about himself before we move on to what wonderful toy we will discuss.

01:21 MC: Yes. I'm also a product manager here at Microsoft, and I look after the universal Windows platform for developers. So obviously making sure if there's something that developers are looking for that they want to... That they're going to use in an application that we are building the right stuff there.

01:44 EC: This week there's a lot of amazing things being announced at Build. You guys are working on something that is coming out of this Build week. Why don't you give us a little introduction to the Windows Template Studio that you guys are working on?

02:05 CR: Okay, so Windows Template Studio is a... Helps out your File New experience. With UWP development, the templates basically that you have access to is a blank application. And for most developers, that could be a bit overwhelming and it helps... To build up a scaffolding for where you need to be can take multiple hours to just to get it functional when you're adding in, let's say six pages of background task, wanting live tiles. Let's say you wanna add in some, use the MVVM Light framework and add in suspend and resume. To do all that and to test it and validate, it takes multiple hours. We know this 'cause we actually asked one of our documentation experts to build an app and record it from start to finish. It took him about three hours. And we built out a dynamic generation tool that can do it in about 20 seconds with full clicking from start to finish.

03:13 MC: And I was just gonna add on to that last... That little piece is that I think a lot of the times that people get caught up in, "Okay, if I want to add X, Y and Z feature, I have to spend a ton of times in the documentation. I have to... " The typical developer may go and decide, "Oh, I'm gonna top this in and Bing or Google it. And it will hit me over to Stack Overflow, and I want to try to maybe find something that looks similar and then copy and paste. Or go try it, F5, and then go back to maybe some documentation." This is definitely designed to get you to that F5 experience, with the pages, frameworks and features that you need.

03:56 CR: And that's out of the gate. And the other great thing is, is that we call this Windows Template Studio. When your app is fully generated, you can F5 it. But all we do is build up the framework. We don't do everything for you because we can't assume what you, as a developer, want to do. So we have little to-dos. Like if you add in a background task. We have zero clue what type of background task trigger you want, or what that background task should actually functionally do. So, we add in a to-do that puts you exactly where that line of code that you need to start putting in stuff, and tell you this is where you need to do this. Or if you use a map control, we tell you exactly where to get the Bing map API key, and what variable you need to put that into. Out of the gate you can get quickly up and running to build out your app to do the cool stuff rather than the mundane stuff like building out the scaffolding.

04:55 EC: Let's try to visualize this for the folks listening. We're talking about Windows universal applications right now, so we're talking about the stuff that's in the Windows store, and you're running on your Windows desktop, HoloLens and things like that, right? So the UWP platform. And this is to augment the File New project experience where right now you get a blank application but it doesn't really do a whole lot. So you're saying it takes about three hours to build up something that's even moderately useful as a starter application. And in ASP.NET MVC, we have something that starts up. And we have things like Bootstrap installed, and some of the JavaScript libraries that we need. This Windows template studio gives us that experience, but there's a little bit more to it, right?

05:54 MC: Yeah, and I think... You're talking about there's some scaffolding from Yeoman, or something like that? Is that something that...

06:00 EC: Just File New projects. There's actually three different types of projects you can generate for an ASP.NET application. You can have an ASP.NET MVC. You can have a web API or a blank application, and I think what you're telling me earlier is UWP kinda starts in this blank application mode where there's really no kind of direction given. It's up to you to make what you want of it but that process takes quite a bit of time.

06:30 MC: Yeah. So if you clicked the universal Windows outs node, you only have blank app. There isn't the other additional pages top that's available for you out of the box, and that's really I think where we're trying to drop home here is that that is one of the needs that we saw also from the community. I think it was the number two ask from a community survey that we did was that, "There's stuff that was missing, it was in previous versions of Windows 8 and so forth. There was a couple of additional templates and then in Windows 10, you guys are just starting me out with blank. So can you help me, can you hold my hand just a little bit and get me up and let me actually scaffold a project with some of the things that is most common in universal Windows platform applications?" And that's why we start with selecting the project top, your classic blank to a navigation pane to pivots and tabs. To then you pick the framework what's best for you. If it's code behind which is the traditional method that if you select blank app, that's where you start from, or a third party framework such as MVVM Light and then obviously MVVM Basic. Those are the ones that's kind of baked in, and then from there, we drill down to the different pages and features that you could just select and add into your application.

07:49 EC: So you can kinda select these things piecemeal. So you're doing this ala carte. You can go in and pick different parts of the application rather than picking a specific application template type and have it generate boatloads of code that you may or may not use.

08:05 CR: Yeah, and that was when me and Michael were kind of brainstorming this, we saw Yeoman and we liked that approach where it's very ala carte. We kind of joke and say, "It's pick your own adventure." What do you as a developer want and all we do is help onboard you there quicker.

08:25 MC: Yeah, and so for example if you wanted a navigation pane and maybe MVVM Light, you may not need all of the pages that we have available. So you may want a settings page and a master details page and we also have a map that's available that maybe you're not doing anything with mapping or maybe you don't need a tabbed or a web view. So you pick the ones that makes the most sense for your application as you're starting out. You want lap tiles, you can add that in. You want toast notifications, just simple as a couple of mouse clicks and you can add that to your application.

08:58 EC: Yeah, I like that you can pick what you like because there's nothing that developers love more than generated code that you don't use. [chuckle]

09:08 CR: And actually going on generated code, one of the great things we did do is we partnered with Leron for MVVM Light along with the community members to be sure that the code that we are generating is code that everyone would want, and it's code that works for both beginners and the pros. So we worked very, very rigorously to validate. We're not doing stuff just to generate it. We wanna be sure it's the code that you guys want.

09:38 MC: And I think that's a really important message, the Clint's dropping on there and that is that we all kind of know... We've talked a lot about different tops of generated code and as developers, the first thing that we're thinking of is, "Oh no, not another one of those. Not another something that's gonna generate code for me that I'm gonna take and I'm gonna strip out." The code that is generated with this application has been talked about and tested with many different people to make sure, "Hey, is this what you would expect? If you do an MVVM project, what would you expect?" "I would expect a models folder, my view models folder, my views folder and I would expect my main page to maybe be inside of my views folder instead of out beside my app.xaml." So there's a lot of those type of things that I think that we really tried to be very careful with and make sure that we added those in in a way that was correct by at least the majority of developers, what they would be expecting.

10:38 EC: And what does this experience look like? Is there a familiar UI that we could kinda place ourselves in? Is this just like a bunch of check boxes that we go through, or is there like an experience here?

10:51 CR: So the experience is very familiar. We work directly with the community and we ask them, "What is your favorite wizard?" and the overwhelmingly, everyone basically responded with, "We like the brand new Visual Studio 2017 installer wizard." So I believe it was Matt Lacey, produced a quick PowerPoint template that kind of outlined a bunch of the ideas that we had into a kind of functional wire frame and then I built it out in XAML really quick and then we made a fully functional version of it in about two weeks. So the wizard itself acts differently than the main Visual Studio installer, but the look and feel is very very similar. So the first page is you pick your project type and your framework. So these are basically your pillars that dictate everything else. So a project type would be do you want a nav pane or a pivot tab or just a blank do it... You're gonna do everything. And then the frameworks right now, the three frameworks we support are a generic MVVM framework, the stereotypical code behind method that classic Winform developers we're used to and MVVM Light. From that, you then go to your pages and features and then once you select what you want from both of those pages, you click 'generate' and Visual Studio then creates your project for you and you're off to the races coding.

12:30 MC: Yeah and I think one thing to kinda also touch on is getting this actually installed on your machine, is gonna be as easy as going out to the Visual Studio gallery and there you'll be able to search for it and you will download a Vise X installer and run that Vise X installer. And from there you'll be able to start seeing this new template once you go to your file in your project and select the universal windows outs I think is the title there.

13:00 EC: So, we've kind of established what this is and a little bit about how it came about, but we haven't really talked about, how do we add to this? Is it open-source like a lot of other things that are in the Microsoft ecosystem these days? Or is this something that just a few people have control over and we're only gonna have these templates until that body decides that we need more?

13:27 CR: So, 100% this is open-source. It's hosted on GitHub. It's under the MIT license. We work directly with the community so we want an open and honest discussion with everyone so we don't make assumptions that aren't actually what everyone wants or feels as strongly on. So if anyone wants a new feature, our rules basically for contribution is open up an issue. Let's have a discussion and be sure that what is being built no one else is actually proactively working on the same things so that we don't duplicate effort but it's also what everyone feels is correct. So we were trying to maintain a quality bar that works across everyone. And also another great thing about this being open-source is, if your company wants to create custom templates that are very, very specialized, they can download the source code, set up their own template zip file, and point their own custom Vise X at that and then use our infrastructure basically to power that.

14:41 MC: going back to the contributing, obviously there is that CONTRIBUTING.md and I think what's important to note there is that inside of that document that's on the GitHub, that you'll see, is all about, "What do we think is a good poll request? What's the top of quality insurance therefore for poll request?" Then we have some rules and the rules aren't to be so proud or anything like that but it's more along the lines of, "Hey, check out these rules of what we think. Do not use verbs that are already used like 'fetch'. Communicate incorrect usage of APIs as soon as possible. Do use verbs like 'get'." Stuff like that and naming conventions and the rest of the documentations and how we are structuring files and folders. So I think it's a good place to look at, at least a first stop if you're going to be adding... If you're wanting to contribute to the project then we would absolutely love to have you.

15:42 EC: So let me throw a little scenario at you. Let's say you worked for a company that was known for being the absolute leader in user interface controls for Microsoft developers, and you had this amazing UI control suite that was open-source. Maybe it was called Telerik UI for UWP or something like that. And you wanted to add some templates around those controls, what would be the course of action there?

16:16 CR: So, ironically, it will not be shipped in the version that will be released at Build. But shortly after we do have a poll request right now that is for adding a Telerik chart control page.

16:33 MC: Nice.

16:34 CR: So, the community that is currently helping build this is already helping drive forward the pages and features that are required and to build basic applications and if the community feels that the page or the concept is needed, 100% we will work toward integrating it where appropriate.

17:00 MC: I think that's important there is that, okay, if you have something that you believe that should be in this product don't let us stop you. Go for it. Build it out, test it, make sure it's something that works great and then let's see, let's see if this is a good fit for everything that we're trying to do here, and make sure that it is something that the community wants and they find useful.

17:27 CR: Yeah, and the key thing, I mentioned before, is having a discussion upfront. So I'd rather have a heated discussion upfront than have someone do a lot of work and then have people go, "No this isn't a good idea," and then you get hurt feelings. So we want to have a... I would rather have a lively discussion upfront and say, "Hey, maybe this feature goes too far and this feature is perfect, this feature should be tweaked because then that makes it generic so then we're not making assumptions." The code that becomes generated is, like I said, a solid starting point not a completed application. That's where we have to have that fine line of do just enough but not too much. And that's why I think that having the discussion comes in.

18:23 CR: We wanna be sure what is created every dev would like and not is just randomly stripping out everything. And a great way we do that actually is we start pointing in the code, in the documentation for the actual generated code we point back to the GitHub on how to extend stuff out. So we have a Settings page for example. One of the interesting problems of, is how do you add in additional settings into this? Right now all it does is it changes for your theme from light to dark theme, which is something most apps actually implement. But what happens if you wanted to add in maybe an integer setting or a string setting, how would you go about doing that? And rather than have these hard coded into the templates, we actually just point back to our documentation and say, "This is how you do that if you want to." So then we're not producing code that is unwanted in the physical template.

19:24 EC: And I noticed you said something about a contribution markdown files so there's some instructions there for people that do want to contribute.

19:33 CR: Yup. Yup. It goes to coding standards, to going back to, "How do I go about actually even jumping in and saying is this a good idea or not?" and everyone is welcome to come out and talk and have a discussion.

19:53 EC: And I like that you guys have set up the contribution guidelines with that document. I wish a lot more open-source projects would adopt that behavior. It kinda helps everybody get on the same page and let people know how to contribute the best way possible.

20:12 MC: I think a lot of that runs into the own stuff. Some of the other stuff that we do is that what... If by doing this project what's some of the things that we've noticed of prior or previous work that we could add into this to make this easier for people to kind of understand, "Hey here's what's going on here, here's how you can help out and we'd love to have you."

20:31 EC: Now, is there a programming model or something that's behind these templates that you'd need to know to create them, or is it kinda like you write the code that you'd like to be generated and that just gets included? How does that process work?

20:50 CR: It's a bit more complicated than just writing a page. The Windows Template Studio is actually powered under the hood by a Visual Studio template generator that's also open-source. And basically, what we have are a bunch of files that then dictate how everything else is generated. Imagine you have a bunch of includes almost and depending on where the code needs to get injected a couple different little tweaks have to happen. And you have to... If you add in a new page, be sure that the page follows the best practices or actually works with the code behind MVVM. The vanilla MVVM or the MVVM Light be sure that you're following all those practices. It's not as complex as you might think but it does take a little bit of re-engineering how you think you build something.

21:52 MC: And even if this... You maybe listening to this and you're like, "Oh, that sounds like a lot." Again, there is documentation that goes through like the anatomy of a template. Like what's needed? Where is it needed? Give me some examples of how this would look like. Give me even the file names that kinda walks you through that.

22:11 CR: Yeah. And it's shockingly not, depending on what you need it's not that hard. But like I said, we already have two contribution pages that are pending come our initial release.

22:26 MC: So I will say the one thing that I think is important to talk about, that we haven't talked about yet, is that these templates, once you generate a template, a lot of the times as developers we kind of ignore some of the design aspects of things. We've worked with the design team here to make sure that when you generate an application that out of the box you don't have to worry about, "Oh how do I add a selection to show that this item has been selected?" or, "How many pixels does this need to be over?" or, "What is the standard colors here, what's the true light theme?" What are all of these things, out of the box it has that available for you and also, the triggers that will help you with different types of screen sizes. A lot of that is just baked in for free instead of worrying about, "Okay if I've got a small screen to a large screen, how does this application work or what have I got a wire up?" It's there for you. And also we've started some of the foundations there of adding in localization. So there is a file there that you can go ahead and you can take a look at but it will add in some of the basic for localization for you for some of the different text blocks and controls that are already in the application.

23:50 EC: It's nice to see some of the UX stuff being kind of templated out. I know that Microsoft has some really good UI and UX guidelines out there so it's good to see that being taken into consideration in the templates themselves so you don't have to necessarily know all of the guidelines. While it's still good to go look at them and understand them, you don't have to be an absolute expert on everything that's in those UI guidelines.

24:22 MC: Yeah and honestly, that type of stuff can consume a lot of your time and we would like for you to be able to at least get something up and going and start adding pages to it and obviously you may need to come back if you're adding some random pages, you need to make sure that those are also adhering to the design guidelines, but at least it's getting you... It's getting you there with at least the app that it scaffolds out.

24:49 EC: And where can we find out more about the Windows Template Studio, do you guys have a webpage, a get help project, all of the above?

24:58 MC: Yeah, I think the get help project is where you would like to go to learn more and that is just simply at aka.ms/wts, so very short, aka.ms/wts.

25:15 CR: Yeah and that...

25:15 EC: It's wts as in Sam.

25:17 CR: As in Windows Template Studio.

25:19 MC: Yes.

25:20 CR: And that will just redirect you to our GitHub page and from there we have install instructions, how to contribute, how to download it, if you wanna fork the project 100%, raise an issue, do poll requests 100%.

25:36 EC: And how do we get in touch with you guys, are you all on Twitter, do you have some webpages that we can see where you're blogging or whatnot?

25:45 MC: Yeah, you can reach me on Twitter @mbcrump, also blog from time to time at michaelcrump.net.

25:53 CR: For me the best way to get ahold of me would be on Twitter @clintrutkas, C-L-I-N-T-R-U-T-K-A-S. Yeah, happy to chit chat with everyone.

26:05 EC: Yeah, and we'll be including a little blog post about all this at developer.teller.com along with the show notes and so if you can't remember all those fun URLs we just spit out and you didn't have your notebook handy, don't worry we'll put those all in our show notes so you can just go there and click and get to their GitHub pages and follow these guys on Twitter. Clint, Michael, I appreciate you guys making time for me and coming on the show to talk about Windows Template Studio. Build has been amazing and it's been great to talk about things that have happened on the show and it's another great example of what's going on over at Microsoft.

26:47 CR: Thanks for having us.

26:48 MC: Great, thank you.

26:49 EC: Thanks guys.

26:51 MC: Cheers.

[music]