 On today's Visual Studio Toolbox, Jason is going to show us a tool that gives you the ability to create really good looking Angular apps, and then it's going to generate all the code necessary to make those apps real. Hi, welcome to Visual Studio Toolbox. I'm your host, Robert Green, and joining me today is Jason Perez from Infragistix. How you doing, Robert? Hey, Jason. How you doing? Welcome back to the show. Yes, thank you. Good to be here. It's been a very long time. Too long. Since we were together. Yes. So we're going to talk about design, UI design today, right? So if you think about the things that go into building an app, there's obviously the code. Yes. And we're all good coders, and we all know how to become better coders, right? Practice, you read up, you watch other people and learn. Pretty straightforward on how to be a better coder. There's practices like DevOps and testing and whatnot, and it's kind of straightforward how you get better at that. We've done a bunch of episodes on that recently. But the one thing that we all, I'm going to be polite, could get better at is UI design. And it is not at all clear how you start getting better at that. We can look at people who are really good at it. We can look at apps in the store that are beautiful. And in all likelihood, it wasn't the developer who designed it, because developers can't design. There's some designer who did that. Not all of us are in the position of being able to go hire a professional designer. That's correct. So as developers, how can we get better at design? So we're going to tell us. Yeah, we're going to talk a little bit about that today. Infragistics has several areas where we help developers be better at design. Today, we're going to look at one specific product that we released this year called Inigo Design. And the nice thing is it starts with a design tool called Sketch. And Sketch allows you to create user interfaces. And normally, at that point, a designer or a developer would get approval on them. And then they're kind of like, OK, what do I do next? I don't have to go write the code. So we've done some tooling with Visual Studio Code in the cloud to help get code from those designs, which is pretty sweet. Some other areas around WPF, Xamarin, Windows Forms, we do a lot of plug-ins into Visual Studio that help developers make things look prettier. So there's a lot of pre-built apps, a lot of control configurators, and things like that. But when we start talking about this really high-fidelity design, you almost need that high-fidelity tool, which is Sketch, which does. And if you're not familiar with Sketch, it's sort of like Adobe Photoshop or any graphics tool. It's a vector graphics tool. So you can basically do what you want with that. And what we've done is we've taken our web product, an Angular product, and we've created UI kits in Sketch and married the widgets with the design tool. So that means anything you design in the design tool, we can successfully generate code with that. And that's the whole point. Cool. So again, this is for Angular today. And then there will be additional areas that you probably would want to. We have a pretty rich backlog with this. We're getting a lot of feedback. We started with Angular because there was a lot of customer demand on NetNew Angular. And there was a lot of rush to, like, I'm going to move from desktop to web, which is fairly complex because a lot of developers don't know how to build Angular apps. They're coming from a rich client. You need to learn. You need to learn the whole web stack, HTML, JavaScript, TypeScript. Angular is a framework. And then how do you make it look good? It was pretty easy to create your first wind form. It was drag and drop, pretty easy to create your first WPF. Type a few things, or drag and drop. But then it looks battleship gray, right? Yeah, so it's just another thing to learn. Yeah, and we do want to support other platforms. So for example, React will come later. We've had requests for things like Xamarin for mobile platforms. WPF, we talked about a little earlier. I'm not sure if we would do the whole WYSIWYG in WPF. But we have tossed around the idea of doing resource dictionaries because a lot of the battle in WPF is you want a very branded experience. And that's difficult to do easily. Like I want to say, take this beautiful design, give me the resource dictionary so I can style my entire application. So that is something we could also do with the tooling and sketch. But yeah, why don't we go through a little example of how this works? Cool, so okay, see my screen up there. And basically to- Sign up for free, ooh. I like free. But then it says how to buy. Now I'm confused. So there's a free version, and then there's a paid version. Pretty much, obviously there's a trial version, so you can try this thing out for 30 days. But the nice thing about the paid version is that you not only get the design tools, but you get our UI controls as well. So the UI components would normally be a whole nother price. Now those are open source for non-commercial and education use as well. They're up on NPM. Super easy to get started with that product as well. But yeah, so what I'm gonna show you today, pretty much you can just sign up for free and go to town. You can do exactly what I'm gonna do today on your own computer right now. All right, cool, let's see it. What I'll do first is just kind of scroll through this webpage really quick because there's three parts to this which make, it'll clarify for the viewers. The first piece is around sketch. So you need to design the app in sketch. And you're doing that with the UI kits. And to sketch a separate product is- Sketch is a separate product. So this sketch, the reason sketch is taken off in the market is because it's 99 bucks and you can use it forever. Whereas Adobe is a little bit more expensive and you get a bunch of other stuff. Sketch is really like taking the world by storm in the last few years, it's pretty amazing. So yeah, we've created these UI kits in sketch that map to our Angular widgets. Then the next part is we have a cloud service. And in the cloud service is where you get like usability studies and collaboration with stakeholders. So the big thing is I can design something that looks good but do I know, do I know if it, will I know if it works with my users? So that's where the usability studies come into play and I'm gonna show you how to create a usability study today. And that goes up in the cloud and then finally our visual studio part where we have this cool plugin which links up to the cloud and you pick what screens you wanna generate and it splats them out. Cool. Yep, so it's, you know, there's a little bit of code you have to write but you'll see that it's not so bad. And then everything that we're gonna do today you can just download right from the app gallery here. So what I'll do first is bring up Sketch. And this is one of the pre-built apps that we ship with the products. We have a budget app and a people app and then your prototypical iPad slash desktop web or mobile app. You know, they have like maybe three to five screens. There's not a ton of stuff going on. It's more of these point-focused apps that you see today. But the nice thing about this is once you install the UI kits and if you're not familiar with Sketch, the way you install a UI kit is basically you go to your plugins and well, actually we have a plugin too, I'll show you real quick but we have these libraries here and you'll see we have three libraries that begin with Indigo. We have components, patterns and styling. So all of the patterns that map to the widgets we ship and then we've built a bunch of UX patterns like login screens, like news feeds and things like that. So the developer, the designer doesn't have to think about how do I cobble these things together? I just want to drag this onto the form and kind of get started. All right, you want a login screen that looks like every other login screen that people are used to using but why should you have to create it yourself? Exactly. And then we have styling and the nice thing about styling is that the styling library is inherited by everything else that we ship which means if you customize the styling which is all the colors, all the fonts that can be your custom brand and then everything magically changes. So this is where it gets really cool. If you're a developer, you can figure this thing out in no time. If you're a designer, you're already familiar with Sketch so it's not that big of a deal. And then we have a plugin too which allows you to sync with the cloud. So I'll kind of walk through how that works as well. What I want to show first is if in Sketch basically you don't have this toolbox like on Visual Studio which is a right click essentially you have a dropdown which is where you take your symbols and you drag them onto the screen. So we've got our patterns here which is sort of what I mentioned. We've got different avatars and different preset styles with avatars, different checkbox groups, detail forms, file upload, et cetera. Data grids of course, charts and things like that. So those are all preset patterns that you can kind of just drag and drop. And then the components is a much broader list but even the components have a bunch of preset configuration. So you don't really necessarily have to think about how all this works. You can just drag and drop these onto the screen. They're more or less done and you can kind of then see how they look when you generate the code. Now what we've done which is unique to the Sketch UI kits is we've actually created overrides on these libraries which sort of map to properties that are in the UI components. So in your typical on the right hand side here in Sketch these are your typical properties that you would get. Basically has to do with positioning and layout. There's not much more else than that. But if I look at something a little bit richer here I'll zoom in on this grid down here on this budget management screen and we'll kind of take a look at what's going on with this budget screen. And on the right hand side, you've got all of the symbols that make up this screen and sort of just kind of how it would look almost in Visual Studio. It's just rearranged a little bit differently. But you'll notice that this is IGX grid and there's this kind of like little red X next to it. IGX grid is actually the name of our Angular widget. So what happens is Sketch is a file format and we parse this file and we're looking for things in there that say, hey, this is something that we should care about. Let's go generate some code on this thing. And then we kind of decipher all the styling and things like that. What ends up happening is as we click on these individual elements you'll notice on the right hand side we've got this override section. And then the override is where you can actually either swap out the components or change the styling, change the colors. So we've actually added all those properties to the UI kits, Sketch reads it and puts it into the layout nice and easy. Some other neat things here that are happening if I click on a specific cell inside of the grid, you'll notice on the right hand side I've got a data property. So what we're doing is it's not the perfect way to work. If you're a developer it makes perfect sense. If you're a pure designer and you're not used to this stuff you might not know, but we allow you to set events and data properties right in the sketch file. So what that means is when I generate the code it'll just magically data bind. So if I have data in my app and I have like in this case it's gonna be called budget data and budget data has a property called budget. We've got a property called amount down here. Whoops, let me cancel that. We've got amount, et cetera. All of that will just flow through into my generated code. So it ends up being actually pretty sweet. All right, so essentially I would whizzy-wig this, drag and drop. This screen's already done for the sake of time which is probably better to use the preset screen here. But it does show a few things and this is why it's gonna be pretty cool, especially for a developer. It's gonna be responsive. It has a bunch of different widgets on it and it has data. And this is really kind of where you wanna get started. Do we have time to do a very quick brand new screen? With a button and a text box? Click the button and the text box says something or a button and a label? We could actually add an art board here. Yeah, let's do that. So let's add an art board here and I'm not a sketch expert. That's fine. So let's move this out of the way a little bit. But here, if I move this art board over basically what happens in sketch is you're working with art boards. And now I'm gonna drop this down and I can go to a pattern, for example, or a component. So I can grab like a horizontal calendar component and it drags out to the screen. So this is how you start cobbling together screens. And now if I wanna add, now the way this works as well, and keep in mind when I said that the properties that we're getting from sketch are basically around alignment. A lot of the alignment becomes important because when you're doing a responsive design you wanna be able to ensure that when the screen resizes the alignment's correct. It's almost identical to the way it works in Visual Studio with Windows Forms, with WPF. You're setting doc to write, doc to left, stay on the top, pin to the bottom. It's exactly the same. So yeah, we would just go through this process and start adding UI widgets. We could change colors, we could change controls. So like I said earlier, I can go ahead and start changing colors. I can change the font elevations. I can do whatever I want with these properties. So now let's say I'm all happy with this. Life is good, I'm ready to go. I want to either do some usability work with this or get it to my developer to write some code. So we have the plugin up here and I can sync this with the cloud. So I'm gonna go ahead and click publish and our plugin will pop up. And I think I'm logged in, yep I'm logged in. Now the nice thing about this plugin is it will actually let me decide what type of form factor I want to display this in. And in this case I'm gonna do iPad. Up in the cloud we have different workspaces. So in this case I'm gonna put it in my personal workspace but the way this works is you work with teams on projects. So if I'm a UX team, a lot of times in the enterprise the UX team is shared amongst a bunch of different teams. So they might have different workspaces. So I'm gonna put this in my personal workspace and I'm gonna go ahead and click publish. So now this is jumping up to the cloud and this might take a second or two. While that's happening I'll go ahead and open up the browser and I'll show you what the cloud looks like. So here we're gonna go to cloud.indigo design and this is where if I click on the login it would basically allow me to log in and take me right to here. So what happens is in fact there's the budgeting app it's already started to upload. Well what happens is it brings me to my own little workspace here and in my workspace I have all of the prototypes that I've been working on. And from here I can do things like if I select this guy I can edit this prototype and it's going to render all the screens and the nice thing is it's actually if I select this highlight UI elements on the bottom it's actually telling me all of the UI elements that were in the sketch file. So it knows that these are widgets that I can now co-generate which is actually pretty sweet. The other thing this does is in if you remember in that sketch file there was a bunch of arrows flying over the place that's navigation. So this tool can actually add the navigation or we'll suck it in from the sketch file as well. So like if I click this little guy here it's going to go to this screen on a tap fade but maybe I want to do it on a flip or something like that. So you can set these properties because the whole idea here is I want to be able to create this screen and I'm going to set this guy as my home. He's already has my home. I want to create all these screens. I want to be able to run this application and do things with it without having to write any code. So at this point I can actually share this with you on your iPad and you can go through it and if you don't like something you can actually add comments to it and say hey this doesn't make sense or whatever. And then when you get to a design you like you actually have the ability to deliver it because you're going to bang out the code for me. So this is what's going to happen now. I'm going to Visual Studio Code and what I have here is I have an app or an Angular app I did ng new and it created this Angular app and what I did to it is I added some data. So in your typical application you've got your guys working on data, people working on the UI or a lot of guys are full stack. But anyway, for the purpose of this demo I have data in my app. So what I want to do is I want to generate that main budget screen that we saw. So what I do in Visual Studio Code is I do my command shift P and I bring up the Indigo Design Code Generator. So this is our plugin. Now what the plugin will do is it will give me a list of prototypes that I have up in the cloud already or I can just paste the URL of the one that I was just working on. So I'm going to grab actually, let me do this, close this out. Let me go back to the cloud here and I'll just show you real quick how you get that URL. Let's say don't publish. So I'm back here. I've got this little link. I'm going to do a Control C and this URL is like I could email to you so you could run this prototype or I can use it to actually generate the code. So now if I bring up my Code Generator again, I'm going to paste this in, hit Enter. And it's going to do this. Is there a way to do this from the local version or does it always have to be in the cloud? Right now it's in the cloud. So we just shipped this piece in June, like end of June. We're actually looking because we have an on-prem version of this and we have a cloud version. So we're looking to get all of this working locally as well so you don't have to always have the cloud. Right, I'm on an airplane. I don't really feel like paying 30 bucks for Go-Go. The issue is, is that we... That's a hypothesis, of course. I'm always happy to pay that. Well, it was 25.99 this morning on my way from Vegas. So that was Alaska Air. But this is the issue is that we want you to be able to do this without a Mac because Sketch is a Mac app, right? So if you wanna do this on a PC, you need to somehow parse that Sketch file and Sketch has these command line tools that allow us to do that in the cloud. So there's a little bit of complication there but we're working on some things now which are completely removing the need to use a Mac for using Sketch. Oh, okay. So stay tuned for that. That's good to know. Maybe early Q1 will be talking about that. But anyway, this is actually pretty sweet. What this does is it brings me all the same screens that I had earlier and I have the same experience. As I hover, you can see on the right-hand side, it's showing me these areas that are in the screen. So now I want to create this budget screen. And the budget screen, the way we've done this is because it's angular, just like if it was WPF or any other product, you would have your own class files, you would have your module names, you would have your dataset names. So you can customize whatever you want from here. We're gonna pull things in from the Sketch file. So if you recall, the data source was called budget data. It just brings it right in. The name of the module was test module and the name of the screen was budget screen. We also allow you to change a few other things in the code generation settings, like how your linters work and all this other stuff. We're not gonna mess with any of that. I'm just gonna go ahead and click generate code assets. So what this does now is it just takes a simple JSON file up to the cloud and says, hey, here's what they asked for. Now bring me down my code. So now we're actually adding the code. You'll notice here, this folder just appeared and now I've got all this code that was just generated. So I'll format this document and you can see that this was the grid that was in Sketch. And if you recall, when I showed you the cell of field names, they all came across as well as the name of the dataset. So budget data is already in my application. And so this just brings it all up and then here's all of the other UI that's on this screen. I think that's just so cool because you, yes, there's some prerequisites. Sketch works on a Mac. But if you think about the one-time investment in buying a Mac, right? And now what you're going to get is the ability to pretty quickly, and obviously there's a learning curve, but reasonably quickly put together a screen, show it to people and then generate that exact same screen, right? You've got the colors, the padding, the height, 184 px. It's pixel perfect. Right, and you're literally delivering what you showed them. So for a modest, in the grand scheme of things, a modest upfront cost, this is tremendous. Well, here's the cool thing. The designers already have Macs, right? So the developers, they need a browser. And a lot of developers have Macs these days. Well, I go to these conferences now and all the rock stars are using Macs. Like, so I want to be like those guys. So I'm going to go buy me a Mac. Even I have one. It's not just the rock stars. Why didn't you tell me that before, man? I have one. So now let me open up the browser. I can't believe you didn't tell me you had a Mac. So now this one's running at local host 4200. And so this was the screen. Now there's no data here, right? So if you remember earlier, I said there, you might have to write a little bit of code. So what we do though is we help you along the way. So if I go to the actual code behind, the type script for this, we've actually added the import statement for you because we've read the sketch file and we know, and we're going to assume that there is something called budget data because that's what you call it. We also know that you're going to want an instance of that. So we have added that code for you in the code generator. The only thing we don't do is actually fill that object up to populate it. So here we'll just tell it to do a new instance of that guy. And there we go. And we'll just call populate and populate and we're done. We'll save this out. And now we'll go back and magically everything shows up. And in the sketch file, we actually use, we read the glyphs in the header. And based on what the glyph is, we will do something like this, which is essentially add a filter dialogue. So when you look at this guy here, if we zoom in a little bit again, you'll notice that there's a glyph here and that is going to make this a filter UI because that's what that means to this design. So essentially this was a whirlwind tour of how you can go from design to the cloud to code and it is pixel perfect. Awesome. That's tremendous. Pretty slick. So how much of what you showed so far is in the free version? So the UI kits are free forever. So you can design with free forever. The code generator is not in the free version. It's a trial version. And the cloud stuff is in the free version as well. So everything in the cloud and the UI kit. So where that helps is if you are a design team and let's say you have an agency and you have a bunch of customers and your customers are buying our products, but you're just kind of the designers. Like you don't wanna buy the product because you're not doing anything else. With this product, you get all of the design stuff, the UI kits, all the cloud stuff, all the usability studies, collaboration, plus all of our angular widgets. So if you're familiar with infragistics, like our WPF and Windows Forms products. Oh, who isn't? Yes, exactly. The angular stuff is basically the same thing. Although that episode we did on the controls was many years ago. We did something at Build like five years ago, I think. Yeah, it was a lot of fun. But yeah, so you can try it today if you just go to infragistics.com or indigo.design, everything's there for you to test out. Fantastic, that's awesome. And then if you're not doing angular, then you've patiently and impatiently wait for you guys to extend that. Yeah, and we're actively, we are racing to other platforms and racing to remove the Mac restriction. So we have many, many people working on that right now. It's a big priority for us. I mean, I understand why you would do it for places where people are green-filled. Like there are a lot of people getting started with Angular. A lot of people getting started with Xamarin. There aren't as many people necessarily getting started with WPF. There's a lot of existing apps, but it's gonna be way harder to redesign an existing app that already has UI written, already has code written than it is to start from scratch here, right? You sketch it out, you generate, there's your app, you tweak, right? You add obviously the business logic, you have to write yourself, but that's fine. But the UI, you wouldn't necessarily even have to ever code. You just go back into the sketch and remove things around and do it that way. Yes, yeah, that's what happens. I'd love to see a Xamarin version. Like I said, we're racing to other platforms, but the big thing for us, I think from the developer perspective is removing the sketch dependencies. And that's really, once we do that and I can have my PC here or whatever computer and I don't need the Mac, it'll really open it up. And so we're gonna do, we're doing that first. We're actually kind of doing that a little further ahead of some other platforms, but Q1 maybe next year, maybe around the build timeframe will. But, you know, I know it's easy for me to say because it's not my money, but if you think about it, you buy a Mac, even if you buy it yourself, right? Couple grand, 1500 bucks, I don't know how expensive a Mac you have to buy, but let's say it's a couple grand, right? Two grand. Okay. To not have to hire a designer. Oh, the ROI. It's gonna charge you more than two grand. Yeah, the ROI's huge. To be able to deliver these apps, your bonus is probably gonna be more than two grand because you're now such a rock star. It actually probably pays for it, could pay for itself, even if you have to shell out from your own pocket. The fact that, It's easy for me to tell other people what to do with their money, but. But you're exactly right. This is WYSIWYG'ing, a beautiful experience that will be pixel perfect. So the ROI is huge, 48% of development apps is spent on the UI. And then 80% of maintenance downstream is based on UI mess ups. It's also a business opportunity. If you got good at this, because you could be an independent designer working with developers, right? And especially if you know Angular, so you can talk to developer talk, just do the design aspect for them. Well, and that's why that whole part of the product. It opens up a lot of opportunities. Yeah, that part of the product is free with the UI kits and the design piece because that is exactly it. You know, Robert, you want to just design apps, right? And you're going to get hired out by these big companies. And it's like, here, I shared it in this workspace in the cloud, you guys have license, go grab it. And then you're done. Your work is done, but they save all that time. And if you think about it, going back to this code, this CSS is. Yeah, how long would it take you to learn how to do that? Just forget about it, you can't. You're never going to do it. Exactly. And then one last thing I'll just highlight is we do have tons of videos and tons of docs. So even if you are like, hey, I don't know anything about anything, we've got these video tutorials that will walk you through every aspect of being a designer, figuring how to do the code. And then by each component, we drill down and we go through every single component, how to style it, and then what the code would look like. So we're really trying to be proactive about the documentation, so you can be successful with the product. Cool, that's awesome. Thanks for showing us this. Thank you, Robert. All right, hope you enjoyed that. And we will see you next time on Visual Studio Toolbox. Thank you.