>> Hello and welcome to Web Hack Wednesday. I’m Martin Beeby.
>> And I’m Martin Kearn.
>> And today we are going to be talking, well, what are we going to be talking about?
>> We’re gonna talk about packages.
>> Okay, Like Amazon packages?
>> Package managers.
>> Right, that makes more sense.
>> No, that would be weird. We’re not a delivery company. [LAUGH]
>> Let’s move on. [LAUGH]
>> [LAUGH] Yeah, we’re talk about package managers, and specifically, in relation to ASP.NET but there’s a few changes. Package managers is one of the main changes in terms of the workflow around ASP.NET Core. So we’re gonna talk about that.
>> Because in terms of package managers in the ASP.NET world, NuGet.
>> NuGet is king, yeah.
>> Yeah, but it’s no longer just NuGet.
>> NuGet’s still there but there’s-
>> Absolutely, yeah.
>> Some other things as well.
>> So there’s three really, there’s NuGet, npm, and Bower. But we’re gonna look at all three of those and just have a look at building up, working with them, how to edit the package files themselves, where to use one versus the other.
>> So how are we going to get started then?
>> So we can get started by, I’m gonna just to go into Visual Studio here and we go File > New Project. And we’re just gonna create an empty .NET Core application, I will call this WebApplication4, seems like a good name for this one.
>> Is that only the fourth application you’ve ever done?
>> Yeah, it could have been, [LAUGH] it probably is, it would be the fourth best as well. I’m gonna just choose the empty one, so if you choose Web Application here, you will get a lot of this stuff baked in for you. So you’ll have npm there by default and other things, well maybe not actually, but you’ll have a lot of stuff there. But I’m going to choose empty just so that we can show how to-
>> How to add the stuff yourself. Okay, that’s gonna create an empty project for me. And so, the first thing we’re gonna add is we’re just gonna look at NuGet. So people will be familiar with NuGet, it’s been around for a long time, but we’re just gonna take a little refresher on that and just sort of figure out what that source. So NuGet, it’s really about .NET packages.
>> Third party .NET packages.
>> Yeah, and first party.
>> Well, yeah, we got a lot of stuff in the NuGet.
>> So before, .NET itself used to have everything built into it. Now, .NET is very small and it’s all NuGet packages. So stuff that was previously in the framework, things like HttpClient, that kind of stuff.
>> Static file handing [CROSSTALK]
>> Static file handling, yep.
>> A new game package.
>> You have to, what?
>> New game.
>> Okay, could be. Okay, fair enough.
>> Yeah [INAUDIBLE]
>> And you have to download the package to get that stuff now. So it’s a change just in terms of NuGet and that you’re gonna be using that a lot more than you were before cuz stuff isn’t in framework, it’s the package in NuGet now.
>> And so-
>> This looks like it’s installed.
>> It has installed yep, so we’re gonna start off here, we got this file called project.json. Now, this is what manages, this is kind of the underlying-
>> How small is your font?
>> Yeah, let me change that, using our favorite little trick. This is me being not very well prepared. I should’ve done this. Apologies viewers for-
>> If you watch this, it’s probably the fifth time [INAUDIBLE] that we’ve done that. And so, this is kind of the project.json is the way that NuGet packages are managed at the moment. Now with release candidate 2 right now, and I think there’s some changes coming to where this is gonna work.
>> Yep, right now, release candidate 2, project.json is where you manage NuGet. You can also right-click on the project and go to Manage NuGet packages and use this kind of user interface that we’re kind of all familiar with. But they’re basically the same thing.
>> And also you can also use the package console command line thing which is-
>> [INAUDIBLE] that’s next level stuff.
>> Well, it’s package manager, if you’re talking package manager, it’s a part of Visual Studio.
>> But you can just do it by text.
>> If you’re like you, and you like using command lines.
>> Yeah, if you’re like me.
>> And you can definitely do that.
>> Yeah, exactly right.
>> If you like, there’s three ways. There’s probably four.
>> There’s probably endless ways, you can probably write an application to do it.
>> Yeah, exactly.
>> And so, anyway, so we can locate, so we’ve got this interface and we’ve got this json file but they’re both the same thing. They both control what packages are stored on the NuGet.
>> So by default, even though we chose empty, we’ve actually got three packages in here. So, we’ve got-
>> The old famous empty, not empty-
>> Yeah, the empty, not empty thing. Yes, we’ve got Microsoft.NETCore.App, I don’t know what that is. I’m hoping you do.
>> Which one?
>> This one, this first one. Microsoft.NETCore.App, do you know what that is?
>> Yeah, I think that’s the platform you depend on [CROSSTALK] .NETCore
>> That’s the framework, you’re using rc2.
>> So that’s, and it’s a type of platform, that’s the dependency.
>> Okay, so that’s what that is cuz-
>> I’m just reading off the screen, I’ve got no clue.
>> It’s important though.
>> Yeah, of course.
>> But I think that is the way in rc2 now, that we’ve declared the platform this thing’s running on.
>> So we’ve also got this IIS integration in Kestrel, which is basically combined to make the web server that’s gonna serve this application. There’s details there that we can go into, but we’re not gonna go into that. I don’t wanna get you started on Kestrel.
>> Cuz I know that you’ll be here forever, talking about that. So we’re gonna move on from that. So this is, so what we wanna do, if we wanna add the package to this. We’ll start just in the user interface. So let’s say we wanted to add entity framework, for example.
>> Now what you need to do is be very careful about what you search for here. Both in here and in the JSON file, cuz you can quite easily have the wrong version of things. So if I do Entity Framework, If I can type properly. Okay, I’ll just let it type for me. No I should be in Browse, sorry. You would think EntityFramework, there we go, I like that. But that’s not the right version, Because this is EntityFramework 6, which is for .NET. I could definitely use this.
>> You could use this actually.
>> And actually, in reality that might be the best choice for the moment.
>> It might be.
>> Yeah, but for the point of me making the point of
>> What your trying to do, yeah.
>> So I want EntityFramework Core which is the new version.
>> Because you want it to go cross platform.
>> Exactly, cuz this the cross platform now. So you just have to be a little bit careful to search for the right thing, so I’m going to search for EntityFramework Core instead.
>> It’s probably-
>> It’s pre-release.
>> Pre-release, yeah, well done, there it is. Let me just make sure choose the right one, SQL Server is the one that I want here. And I can see that that’s version rc2.
>> Final. And I can click Install. And what’s gonna happen now is, just Accept all of this. It’s actually gonna go off to NuGet, it’s gonna download that package, and install it for me. If I then go into References, .NET Core we’ll see, I just spun that out there, those are all the packages. We can see now EntityFrameworkCore is now one of my core packages now.
>> If I go over to project JSON and we can see that that has also been updated in there as well, okay? So it’s all updated in all the right places. So that’s the UI way of running things. If we want to we could just type directly into here as well. So if I want to say, let’s say I want to add json.net.
>> It’s one of the most popular packages, so I happen to notice this is called Newtonsoft.
>> I think NuGet just got to 1 billion downloads.
>> Did it?
>> Of NuGet packages, yeah.
>> And I think all of those was me, downloading Newtonsoft. [LAUGH]
>> It could’ve been, and every other developer as well. So I’m gonna choose the latest version there. And now, notice what happens here. As soon as I click Save here, it’s gonna go off to NuGet and do exactly the same thing as what happened here.
>> UI so you click Save.
>> Installing packages and that’s it, it’s done. So that’s now installed Newtonsoft.json as well, right. So a lot of people will have used NuGet before this will be familiar to a lot of people, but the point here is that you’ve got project.json. Which is a new thing, which might be going away.
>> But for now, that’s what we use. We’ve got the old for the UI as well.
>> And you will need to use NuGet a lot more. So stuff that was previously in the framework is going to be in NuGet now.
>> So if you’re trying to write some code and it’s not working, it’s probably cuz you haven’t got the right packages installed.
>> So go into NuGet and also be careful which version you install.
>> Sure, all right.
>> Especially for the first party Microsoft ones, cuz there’s different versions of things.
>> So, that’s that one. So, the other thing we’re gonna look at is a thing called npm. So, npm is Node Package Manager.
>> And it’s a way of getting packages for nodes.
>> So, this is new to ASP.NET?
>> It is, yeah, yeah, so-
>> Yeah, potentially. You might be wondering, why are we using Node here, like why its ASP.NET. Why are we interested in Node? Well, npm is basically the way the packages. It’s the main package manager outside the ASP.NET world. So somebody that is using any other platform, node or any of the other ones they are going to be using npm to download and install their packages.
>> It’s mainly for node packages, so things like Gulp tooling and those kinds of things. But people also use it for front end packages as well like jQuery, bootstraps, so we’ll come to that in a little bit in terms of the conflict there. But node is very important to ASP.NET, so if you want to use Gulp then you need to use node because is a node package. So what I’m gonna do here, this is empty. We haven’t got Node, I’ve got Node installed on this machine but I haven’t got an npm set up here. So we’re gonna go into here and we’re going to right click and do Add New Item and I can just search for npm, and it’s gonna find me an npm configuration file. So notice that’s called package.json, so by convention that’s what this file is called. You can change that but I would say you could keep it as that by default. Click out and that’s gonna settle this package.json, so this works in a very similar way to project.json with NuGet.
>> You just type in your dependencies here, which are the packages that you want to add. So I was, so there’s literally tens of thousands of packages here for NuGet. But not NuGet npm.
>> I was thinking of trying out something new.
>> Okay, right.
>> I was gonna use Gulp, originally-
>> Which is a task runner. I thought, why not use Broccoli? Broccoli’s a task runner too and I keep hearing about it. So is it quite cool?
>> Yeah, but there is risk with Broccoli.
>> Well it’s pretty new and
>> It’s cool. [CROSSTALK] Yeah, very cool. So much so that we are both of a 30, we shouldn’t be using it.
>> Shouldn’t be using it? Really?
>> Yeah, really I’m serious about this. We should definitely be using Gulp.
>> Now, I’d really like to try it out.
>> Well, you go for it mate but I’ve told you there’s risks.
>> There’s risks. I think we’ll be okay.
>> Go for it, go for it, okay cool. So all right I’m just gonna type in here. I’m gonna type in broccoli. Now, one of the challenges first is being able to spell broccoli.
>> Then put it on the right line.
>> Definitely, don’t do that. And I want the CLI as well, which is the command line interface. What it’s gonna go, what it’s gonna do here, is I’m just gonna just type in the version I want, which is 1.0.0, if I spell that right.
>> You keep doing that.
>> I keep doing this, I’m having some typing difficulties here, I don’t know what is happening. Think you’ve also you’ve lost off the
>> I’ve messed it, I’ve messed it up, haven’t I?
>> You just need this, you need one of these. Put it there and you need one of these.
>> I only need one.
>> Cool, okay. Yeah, that’s what it was. So I want versions, there we go its working now [INAUDIBLE], so what I was hoping to show you guys, if I, if I do this it’s going to go off to
>> MPM and get the versions right
>> so it’s doing that polling
>> through MPM on my projects to through J.
>> So I’m gonna choose this one which is, basically, just means the latest version.
>> Yup. That’s what that long arrow means.
>> I saw that we actually did bring it up.
>> And as soon as I click save, just like you did with Nougat, it’s gonna go to MPM this time, and download and install the package. So I’m gonna click save. So you’ll notice dependencies we’re storing there.
>> And that’s not installed. That MPM is working and I explain that out and i can see that got broccoli. And I can also see broccoli it depend on the synched resolves. I can see that that’s installed as well as MPM is much of the practice for me.
>> Are you feeling, what I mean?
>> Actually, you’re right. I’m feeling a bit picky. I don’t quite feel myself. Thank you. Is that broccoli package? I’m going back to Gulp.
>> Yeah. I would too, might as well.
>> You might just take that broccoli all the way out. Just get rid of it. I’ll leave it there cuz we’ll see what happens, but.
>> I feeling back to myself.
>> I could.
>> Yeah, that was weird. So, I think it happen.
>> Strange isn’t and I told you
>> We’re too old to use broccoli.
>> You did say that, I didn’t listen.
>> Gulp or grunt’s is fine, broccoli
>> I’m too old-
>> Not cool enough for it.
>> Not cool enough.
>> Well you learn something new every day, don’t you? But we’ve got a Gulp now, and we feel happy about that.
>> Well let’s leave Broccoli for the kids and let’s get back.
>> So, we’ve got a Gulp hereyou can see the Gulp is installed
>> Gulp has got a lot of dependencies. Actually, it’s a whole kind of dependency tree here we got. So you can see there’s a thing called Chalk that depends on, Chalk has it’s own dependencies, it has strip ANSI, it depends on ANSI, I don’t know what any of these things are. There’s probably hundreds of packages that are installed here, but you can see there’s a tree
>> I like how you got fancy log there
>> Yes, a fancy log as opposed to just a log.
>> Don’t do a normal log, make it fancy.
>> Make it fancy.
>> The point here is what MPM’s done here, I said I want Gulp and it said okay I’m gonna intall Gulp
>> so all the things that Gulp depends on as well and those things themselves have their own dependencies and this is interesting. So bear this in mind, when we come to talk about Bower later on
>> this is relevant, the fact that we have this tree of dependency.
>> Because what happens here with Goulp is every time you install, with MPM sorry, every time you install a package, it will install everything that it depends on and put that on disk.
>> Bower doesn’t do that, it does it in a slightly different way.
>> Right, okay.
>> That’s what’s important to remember when we look later on.
>> So we’ve got the package dot json there. We’ve got the dependency tree in Gulp so in MPM, sorry. So that’s how MPM works. And you will find things like jquery, bootstrap, those things were in MPM.
>> Which isn’t really what MPM is intended to be used for, those kind of front end packages.
>> I mean, I could go in here and I could type in jquery and then it’ll be here somewhere.
>> It would not, not start with a query. You want j.
>> Yeah, it’s good to know there’s a package called query there. In fact, this brings to one of my favorite games.
>> There’s a game called pick a noun dot js?
>> Yeah, I know.
>> And I think you came up with it?
>> I think, I invented the game.
>> Yeah, invented for you so
>> So if you can pick any noun.
>> And we’ll, see if it’s an MPM package.
>> Water. I’m sure that’s a package so let’s try it. Water. There you go, there is an MPM package called water. And it’s available for you to download and install so let’s install it and see
>> Don’t do that, you don’t know what it is.
>> No, should I not do it?
>> No, that’s probably not wise.
>> It sound’s pretty clean though-
>> That’s where they will hide them.
>> Busters okay, so we can do jquery, you’ll find bootstrap, you’ll find all of the other packages on here
>> But MPM isn’t really intended to be used for that.
>> So then I guess the clue’s in the name. It’s nodes package manager.
>> Yeah, but it definitely has become that. And lots of people are very passionate about the fact that it should be used for that.
>> Yeah, yeah. Absolutely. Two schools of thought. So the alternative is something called Bower.
>> Right. Bower.
>> That makes a lot more sense.
>> No, not Bowie Bless him, rest in peace, he’s a very different thing to Bower.
>> I’m talking about Bower, which is-
>> This thing. This is the Bower [CROSSTALK]
>> Yeah, this is Bower. Well this isn’t Bower. This is a Bower nest
>> Yeah, because they be like magpies. I think they take like plastic bottles [CROSSTALK]
>> It’s a bird nest, yeah. Yeah.
>> No, because the bird came first.
>> But it looks
>> It looks a little bit like this.
>> There he is. That’s our Bower bird and what these barrel birds do in real life is they build these, the male birds build these nest structures and they fill them with brightly colored objects and do the guys behind Bower though that’s a nice little metaphor. We’ll use that because that what we’re gonna do, we’re gonna build this structure and decorate it brightly colored java scripts frameworks
>> Right, okay. Very similar to [INAUDIBLE]
>> Yeah yeah. Kind of. Right, anyway that’s the story behind it. And that’s the story behind it. And that’s why it’s called Bower.
>> Fair enough
>> So what we’re going to do now is add Bower into the mix and see what we can use Bower for. So it works in very much the same way. I’m going to right click on my project here go to Add, New Item. This time, I’m just gonna search for Bower. And there it is, Bower configuration file. Again, by convention it’s called bower.json.
>> You can change that. I wouldn’t. I’d just leave it bower.json. And so Bower is really for front end framework. So let’s think of, so say, something like bootstrap, is what Bower is for. So this the bower.json file. I can go in here, I can just like we’ve done a million times already, I can type in bootstrap and there it is, bootstrap. So we go off it, we get the version numbers
>> just like it did before with MPM, with Nougat as well. Its 3.3.6, the latest version of Ridgestar. Click Save so we go off the Bower download the packet, restore it on my system, all is good. So also, let’s just have a quick look at that. So there’s MPM, we can see that we got Bayer there as well now.
>> And we can see that Bootstrap is installed, and again just like with Bower bits it depends on jQuery so install jQuery of course as well.
>> Right, okay.
>> So look at bits in a second and the other way to do this is rather than edit, it’s file when you close that file, in fact I’ll close all these files, and you look at your project structure you won’t see bower.json. They’re quite hidden and the way you get to it is you go to dependencies right click. And you do openbower.jason, and it’s a hidden file basically.
>> Or you could just show the hidden files.
>> Or you could do that as well, yeah, or you could do manage bower packages and you’ve got a whole UI for it. [CROSSTALK] Yeah, so there’s different ways of doing it, happens to depend upon what you want to do with it. So let’s say, in this one for example let’s talk about one of the foundation sites. Foundation is one of my favourite. Front end packages.
>> Well, we all have those, don’t we.
>> Yeah, we do, yes. The same mistake there. Hit install. And it’s gonna do the same thing, it’s gonna go off the Bower and it’s gonna update that Bower with some file folders as well so foundation also has a dependency on jQuery. So you’ve got two packages there with dependencies on the same thing, jQuery.
>> And this is where the difference between an MPM and Bower comes into it. So what MPM would do there is it would install Bootstrap and jQuery and all of the things that they basically depend on in one folder. And it would install Foundation. And then jQuery again, and all the things that it depends on in another folder.
>> So you have got a lot of duplication there of packages. What Bower does is, it thinks, it realizes, I have already got jQuery. I am not going to download that again. Even though two things depend on it.
>> Much more optimized for Front End Delivery. Now, there are things that you can do in MPM to kind of get around this. There is an MPM package called Browserify, which does some of this stuff. But Bower is much more suited for front end packages whether it needs to be delivered down to a browser rather than a MPM package.
>> So let’s just take a little look on disk here and just see what this looks like on disk. So the first thing to look at is we’ve got node underscore module, so this is where all the node modules live, so you can see we’ve got Broccoli. Brocoli is still there, that didn’t uninstall properly, we better not go into at all.
>> Yeah, I think that caused enough problems.
>> So we got Gulp, then we go into node modules and Gulp has it’s own dependencies and we can see the four dependence tree there. If we go into-
>> And this is actually one of the longstanding issues with NPM two On Windows, is that dependency treatment goes so long, it’s larger than the character limit of a Windows file system.
>> Which means that it causes problems. MPM 3 doesn’t have that problem. I don’t quite know how, but they fixed that.
>> They fixed some of that stuff.
>> The other slight issue when we’re talking about delivery in front end packages, is that where you want your front-end packages, there’ll be a route?
>> That’s the kind of distribution folder for the front-end bits. Now, MPM doesn’t put things there. It puts it in modem’s node modules?
>> So, you would use Gulp or Grunt or let’s not use Broccoli.
>> But you could use Broccoli.
>> You could use Broccoli. What Bower does, is it installs directly in the wwwroot. So, you can see that I’ve got-
>> I imagine this is all configurable.
>> It is, yeah, but it’s just nice kinda default that it puts it where you want it straight away through the front-end. So I can see I’ve got my four things, I’ve got bootstrap, foundation-sites. And you see I’ve got a single version of jQuery. And even though both bootstrap and foundation-sites [INAUDIBLE] installed one version, I only reference one version.
>> This is quite important, the foundation references as well. So the idea is in my HTML I just reference these ones directly in my wwwroot and that’s all there is to it, Bower’s taking care of it for me. So, I’m not saying one’s better than the other but there’s different ways to do it and there’s a consideration. If you’re just doing front-end stuff, Bower probably is a better choice.
>> If you got a mixture and you’re already using MPM for other things, then maybe [INAUDIBLE].
>> I think for ASP.NET it makes sense to have, from my point of view, I quite like the idea of having MPM and Bower rather than using MPM for the front-end stuff. Purely because it feels like Bower is where front-end packages are placed first.
>> So they’re more likely to be, and maybe this isn’t true anymore, but they’re generally used to be more likely to be inside of Bower-
>> If a new framework gets updated, it gets updated on Bower first.
>> Yeah. Again, I’m not sure, I think we’re a bit of a convergence point with that. So foundations, for example, they tend to put it on both. So, yeah, I don’t know.
>> It might be the MPM becomes the one to use in the future but right now definitely I think I’d look at Bower for front-end.
>> And also, yeah, there’s a separation sense. One of the things I like about this separation between NuGet being now just solely responsible for third party libraries is it that, like a separation, it does that thing. It doesn’t have to-
>> So, for me, I quite like having this split of NuGet, C#, third party libraries, and Bower for front-end stuff, and then Node MPM for Node modules.
>> Yeah. [CROSSTALK] We did used to be in this ridiculous scenario where NuGet used to have front-end stuff on it. Cuz in the old ISP, that was the only way you could get [INAUDIBLE]. So, there is a virtual jQuery on NuGet and, [INAUDIBLE] you put it there?
>> Well, I don’t know if, I think it’s Angular actually, what you were gonna say.
>> No, it was actually jQuery.
>> Right, okay.
>> It’s quite interesting. So, you heard of a guy called Damian Edwards?
>> Yes, I have heard of him.
>> He’s one of their main guys behind ASP.NET and the guy that owns the jQuery package on NuGet is Damian Edwards. So literally he has to, every time a new version of jQuery gets released. It’s one of those owners, damiendwards, rustd, or outercurve Foundation. One of those people’s job to go and get the stuff from jQuery and [CROSSTALK]
>> Package it up and then [CROSSTALK]
>> It’s ridiculous to have to do that.
>> And it’s down to, well I don’t know what the scenario is with jQuery, but I certainly know it with other frameworks. They just don’t put them on you.
>> No, they don’t.
>> Someone else has the responsibility of doing that.
>> And that’s why in ASP.NET, we’re now just using Bower and MPM. Because that’s where the processors from Microsoft download and get repackaged and put it on our package system.
>> Because that’s the place where people put their stuff.
>> Exactly, yep.
>> And now, we’ve just decided to embrace Bower. And then all of a sudden, they’ve decided to go use MPM as well [LAUGH].
>> Yes. The great thing about .NET Core is that whatever it’ll be in, we can just plug that in, it’s fine. If it does end up being MPM, well, some new thing comes along. We’ll just, it’s easy to-
>> Let’s just hope it’s not as cool as Broccoli.
>> Yeah, cuz otherwise we’d be in all sorts of trouble.
>> Yeah, exactly. Right, well, that’s it for our introduction to package management on ASP.NET, thanks for joining us. Join us next Wednesday for another peek into our web topic. See you then.
Martin and Martin look at the three main package managers used in ASP.net Core. Bower, Nuget and NPM explaining what each are used for in the context of an ASP.net core application.