Beautiful Sortable Drag & Drop Lists for your Blazor Apps

[Music] [Applause] welcome back everyone to on.net I'm your host James Mont Magno and today I am talking to two of my favorite people in the entire world Mr Burke and John how's it going fellas what's up am I am I on on.net that's unbelievable you are on.net now these two are world famous for their series Burke learns Blazer which is right here on theet YouTube uh and if you've been following their Journey they've been building out an awesome website called I call it the earlist is that wrong no that's yeah it's like saying Jon instead of just Jason right or saying GIF instead of GIF it's it's the UR list okay so I didn't want that name that was just the only domain that I could find CES and I agonized about this you know you should have called it Burke you should have called it Victorious forest in retrospect but I mean we have the opportunity now yeah now you two have been doing really cool stuff like this was not AET website you've been converting it to Blazer Burke has been learning Blazer hence the name of the series which I'll put a link in the show notes below and what's really cool is that y'all not only have been converting this website but also creating really cool Blazer components for features that Burke like needs and wants in this web application and one of them that like blew my mind that you just put a blog post out which I'll put a link in the show notes below is this sortable list which seems like super fundamental to a lot of applications so I figure first maybe we could talk about the earist show it off talk about the feature talk about the component how's that sound fellas yeah let's do that uh you want to throw my screen up there we go bam all right John yeah okay so this site is awesome for tracking a list of links so the idea is let's say for instance like on this show we want to have a list of links to show off maybe you know link show have a URL it it uh youtube.com. net so actually let's go to the live site here and we'll do it on the live side what is it youtube.com youtube.com what.net net do NE like And subscribe like And subscribe yes okay so what it does so then let's just put in do. NE let's add another URL there oh I gotta prefix we fixed this by the way in the new site so this is an example of something that we have fixed in the newer version of the site right so some of the neat things it does there is you can give a a link title you can publish it and you can share it with people you can um It Go uses open graph to go and look up that you know not just the description um which you can edit later but also the images again like our newer version of the site does a better job because it implements like it digs through open graph data a little better um part of what got us looking at this was the login uses Twitter o which is flaky at best right now and we were like wanting to fix it and then we realized that the source code was not up to date and it's actually like some of it dates back to like uh 2019 and so we're like let's do this using modern static web apps and Blazer let's you know learn on the job so um so we've learned quite a bit of stuff you can see there as he's going through and adding them now one of the cool things we wanted to do was make it possible to rearrange that list of links so here so our newer version fixes this but so see now um Berke can you show the drag and drop yes yeah so this was I was very spec so let me just preface this by saying I am not I would not call myself a net developer although I've done it in the past I'm a front-end developer and so I get really obsessed with the the little things on the front end like being able to there's a lot of ways to reorder but there's no better way and just being able to like drag stuff around to where he want it to go and there's like this nice easing as things move out of the way and I just really like that and John and I got in a huge verbal argument because I was not willing yeah it was bad there was shouting we we should find that episode well here's why I said Burke there is built into HTML now HTML 5 has Dragon Dro I said why don't we just use that and Burke forced me to compare sortable JS which is butter smooth and just works like like you'd expect in a desktop or something it's beautiful HTML 5 Dragon drop is super janky it it does not move smoothly it doesn't animate and also it doesn't work on a on like uh Safari and you know so it's it's not near as good it would have been a huge step back yeah that makes a lot of sense and this is cool too because like one this website you've probably actually seen a lot if you watch any of the live streams here because every single Community standup uses this website and I noticed Burke that you flopped between the live one and then the this is the live one this is the one we're rebuilding which is why said Victoria Forest it looks identical by the way exactly great J I've already added some links here so that we don't have to go back and do that again cool but this is how the behavior looks in the this is the Blazer site right and this is the behavior in the Blazer site right which is nearly identical to the one in the live site and that's because they're both using this underlying sortable JS library to do the Sorting that's the magic gotcha so now that is a JavaScript library open source on GitHub and obviously the beautiful part I have to imagine is that well you could use the HTML stuff it's really cool if you're able to use the same exact functionality and then take this JavaScript thing and turn it into a Blazer component right correct and I I keep forgetting we're not live here so I'm drinking my water I apologize viewers forgive me but this is sortable JS and the great thing about these JavaScript libraries is that like Dragon drop on the web is a solved problem like 10 years ago and so they're battle hardened right like people have beat these things and then found all the bugs and so now and they have fallbacks right and so you don't have to reinvent this wheel it's already been invented and if you look at the sortable so this is the sortable um this is their site you're going to see our site looks very similar because I have not had an original thought in a long time but this is the behavior and it's fully customizable but this is sortable JS right it's just a really great Library so what does so we saw the the earlist side by side of it and you said you have a demo site that's similar to this as well that people can check out we do right so if anybody wants to check this out you can go to Blazers sortable.js did that work did that work that did work yes right and you can see me searching for refrigerator and um shoes for plantar fasciitis which I now have awesome soic shoes what are you gonna do all right so you also we have the drag and drop feature but you show it on the the sortable JS that there's other features too so did you buy in some of those other features as well yeah and we can so we can show that let me go to mine here uh John John and sorry John doing this and click on code there so we can yeah this is the code behind and we can actually get into this we'll get into this and like I'll show you how to implement this in your own project cool but you can see there's not a lot to it right there's basically like the component and then there's you you doing the Sorting because um the the catch here is that Blazer needs to control the front end and it's we're very specific like if if you read the docs it says uh please do not mutate the Dom in any way shape or form so here's the code we'll we'll talk about this code here it's very short you can see this is the component all of the Dragon drop magic is encapsulated pretty much here the only thing that you as the developer have to do is to sort the actual items and this is because Blazer needs to control the UI it needs to control the Dom the document object model and if you mutate that with JavaScript then it's going to get out of sync with what Blazer has because Blazer keeps like a copy in its internal uh in it in its internal memory or whatever that is those things two things will be in conflict and you'll get crazy behavior which is exactly what happened to me and that's where Steve Sanderson actually is part of this as well because he came in and was like oh yeah here's why and I'll explain when we actually show off how to use the thing what we have to do to stop that from happening so that was great by the way to be able we used our phone a friend we called Steve Sanderson we're like what's going on here and he basically talked through what Burke was just saying that Blazer needs to own the Dom because it does all the The Binding and the change tracking and all that stuff so so you can use JavaScript libraries with blazer Works awesome the one catch is you basically and Burke I'll show this but you basically need to you use the JavaScript library it does all the beautiful animations and right when it's going to change the Dom you say no thanks Blazer please change the Dom and you you kick it back over to Blazer very cool exactly what happens you cancel the event on the front end and you pass it over to Blazer and so I'm just going through the demos here but we've got you know you can move between lists here um you can do cloning cloning is where instead of actually moving the item you're you know you it clones it on the second list cool uh in this case yeah they're cloned from in both directions things like disabling sorting so in this case you can't sort these items but you can put them over here but you can't sort them here and likewise you can't drag into this list nice and then things like drag handles this is important when like you have text that still needs to be highlighted here but if you if you the dragging would override that so by putting a handle on it then you're able to to implement that and then things like filtering where this item is not draggable but the rest of the items are oh cool so there's a lot of functionality there not everything from sortable JS has been implemented here but a lot of the core features have cool do you want to show off how to get it into an app doesn't seem like a lot of code let's head over to your favorite ID I don't know that's right you may have heard of it it's called Visual Studio code I'm using the uh C dev kit by the way nice beautiful the only way it's the only way to big I've talked him into it yeah all right yeah so this is an empty Blazer web assembly app also we should clarify and be like what I'm doing today is Blazer web assembly I have no idea how much this transfers to Blazer server because it's Burke learns Blazer not Burke knows Blazer to find someone who knows Blazer to answer that question all right so we have this hello world let's add a component and I've just got this this dummy component we want to add the um sortable list to this project so I've downloaded it if you go to GitHub where's my where's our look look look where's uh there it is so go to the top just click right here and then you can go to releases right and then just get the latest release it's all the source code I don't know how better to deliver this because again could do a new get package package I don't know how to put it into a class Library John said he's gonna do on his vacation so I'm looking forward to that coming soon right all right so I've downloaded it here now let's add them into the project so let's open this folder here and we're just going to drag this stuff over and now we've got them in our uh shared here so you can see here I've got file nesting turned on in Visual Studio code which puts like like files underneath I've configured this that's why it shows up like this because these files are related to this one so okay let's use this thing so instead of saying hello world so first of all let's let's do this let me go into the WW rout and let's add I'm going to add in a couple things here I'm just going to add in um some CSS to make this pretty uh and I think maybe that's all we need oh and then I'm going to add in sortable JS so the first thing you need to do is actually add sortable JS because we don't we're not delivering distribute it yeah yeah you need sortable so you can just add it there from a CDN like I did and then in our index file here uh we should be ready to use this thing so let's write a little code what I'm going to do is I'm just going to create a um some markup here uh and this is you know this is not important this is like just Bulma classes and stuff so we can have a nice interface while he's doing that all explain some neat things he's using EMT here um which you can basically type in the selectors and it'll write out the HTML for those selectors which is awesome and then Bulma is something that Burke turned me on to and I'm a big fan now it's a really nice kind of it's a lightweight CSS Library um yes uh I like it yeah so you can see there we've got some nice like spacing and this is uh cool we like Center the text it's like this you know it's a CSS Library you can do all kinds of cool stuff with it okay let's let's make a sortable list and so we need our sortable list and then we need some items to put in that sortable list so like let's just make a class like a it already knows what I'm going to do come on come on co-pilot come on co-pilot and then let's like get a list of children's books maybe need a bar or or is it a oh there is smokes gave us a bunch didn't it yeah it's beautiful now now it's like I can't I can't I can't see where the what am I missing it's maybe too many books this too many books do I need welled yeah that's a lot of books no that's still wrong I tell you what let's take out like half these books yeah there you go okay may it's possible to have twoo many books figure out what's going on here uh so what do we got I you just need one more squiggly one more where where where right there squiggle yeah right there yep and then sem me calling miss me calling yep there you go yeah that looks good I don't know why it's not why isn't it formatting format my think because I must have an error up here yeah it doesn't like this so on our sortable list we need some items so one of the properties is items and then let's add our books and then we need to have a pass a context and the context will just be book we could call this anything right we could literally call it anything it doesn't matter this is just like the name that the thing will be inside of for each item right like in a for Loop you or like what's another good example like four item of items then the thing is called item that's what this is we'll just call this book yeah and then let's just make this a sortable item template is the inner template thing that you need and then in here you just put like whatever you want uh so in our case like let's just sprad out let's just have a div and inside of that we'll do like book. tile um and then that should is it still mad I think you're I think so rud a rude edit yeah so rude Burke is the rudest of editors yeah John said that this morning he like this is the rudest of edits that was hilarious I still don't know why it's on format format my document all right it says no um so assuming that there's no errors which I I don't think there are let's see if this is rendering us books cool it is uh and are they sortable they are now let's do this I'm just G to add like styling here because this doesn't look great it's like let's just put make this a box and like set the margin to two or something uh that should look better there we go so now this but notice like when I drop this it just goes back to where it was yeah so like it it does that interaction with BL right we we let JavaScript do the the pret and then we tell Blazer okay now do the work right so how do we do that so we need to handle the method um specifically what we want to handle here is the uh on update so sort of there's two methods there right now on remove and on update on remove is good for when you're removing an item from a list and putting it in another on update happens when you uh when you sort a list so in this case like let's just have a function called sort list going to call and then let's implement it um copil is probably going to try to do it for us uh yeah do something with the sorted list yeah co-pilot great idea how about you sort uh I don't actually know if to sort so what we need to do here is what you get from the uh sort the sort operation that happens in the browser is just like primitive integer type so you get like this old index and then you get uh a new index and it comes across as a tupo because because it's being called it's being passed back up and that's just you can't that's how you pass multiple compon multiple parameters in Blazer but again maybe not Burke learns Blazer we've established okay okay um so yeah now we want to sort the list so first of all we need to deconstruct the tupo uh and I'm again I'm just doing this so that co-pilot will help me out a lot here and then um I think I'm gonna make a copy of the list just so that I'm not working with it directly um and then let's get the item that we want to move which is going to be the item at the old index Coop Pilot's catching on and then let's remove it um we'll do items. remove at Old index it's not called items what is this like this up books books books all right and then what we want to do here is um I mean in fact let's go back and look here so if we do this we'll probably just remove it so it does so now it's gone so now we just need to put it in the right place which seems pretty straightforward um all you really need to do here is add a check so what you want to do is you want to check and say if the new index is less than uh items. count right so you're basically saying if the index is less than the number of items in the list then just drop it at whatever index and and what we're doing here is checking for the case that it's at the very end yeah we're gonna do items. insert at the new index and item to move whoops items. I think that code's right isn't it kind of it's close else items. add yeah that code is right I should just take that thank you and then I think we need to call state has changed but I don't know so let's try it without state has changed we just sprinkle state is changed on it when we're not sure right if if something isn't working in Blazer just ad state has changed and it will magically there we go whoa amazing yeah so now we've got an actual sort that's taking place uh and if you were to go and like you know log out the list that you got here the books your model is in sync with the with the UI which is important very cool so super simple just a very lightweight component and probably you're ordering and sorting things already I come from the the the mobile world so sorting lists is very SAR like that where you're kind of controlling it and getting the updates on drop basically and changing it locally uh which makes sense because not like the JavaScript world knows about your C list of things right so you're kind of making that exactly right it's two different worlds that need to coexist they need to to to play nicely and the thing that's great about this is that I don't know if we want to go back into the implementation real quick and just show this off but this is not that hard to do right uh anyone can do this if you find a JavaScript library you can absolutely do this I think that'd be super cool yeah because one my biggest takeaways there was that like basically you can any JavaScript library plays pretty nicely with blazer once you know what you're doing there there you go yeah so yeah I would love to take a look at the implementation and maybe some lessons learned too because sounds like you learned a little bit of the how the Dom and the shadow Dom stuff works yeah absolutely so let's talk about this real quick so in this case there's a lot of stuff in here that's like render fragments and and this is because I made it into a component that you don't need any of this stuff okay this only for a reusable component what's important here is that if you had a list that you wanted to turn into a sortable list then you need the JavaScript to do that and this looks like a lot but this is all just sortable js's stuff and so basically what you do is you have a function this is what I did called a knit and then you just pass it anything you want to pass it from.net and how do you do that well when you uh after render if it's the first render you're going to use this net object reference you're going to create it here and then you're going to invoke and import that Javascript file you can see I'm pointing it right here and what's nice about this is the JavaScript that's doing this is collocated with the component yeah so that if somebody else comes in they're like where's this JavaScript it's right there yeah which is which is awesome yeah that's awesome and then I'm calling that a nit right from the JavaScript and here's all the stuff I'm passing and then the last parameter is just a reference to this this uh component right here and that's it right to get the stuff into JavaScript that's all you have to do and then here you can see on update this is this is really what Steve helped us with is revert the Dom so basically we're just canceling the JavaScript event and then notify Donnet about the the change so we call on update we pass the old index and the new index and we handle that in this JS invocable right here it is old index and new index and that's it and and we have a component so again I'm I'm bubbling it up here but if you were just doing this and not trying to create a reusable component just handle your sort right there or whatever doing so that's cool that's these two worlds talking back and forth so your C talking to your JavaScript your JavaScript talking to your C back and forth that you're going to use exactly talking across the bridge the the JS Center up and it when you first get to using it you're like oh this is going to be hard but then once you understand how to get the JavaScript in which is to import it put it in a module and then call this little a knit method it's very straightforward that's awesome any like sort of Lessons Learned on this thing too yeah so a couple of things that I've learned and this is not necessarily a sortable thing but for instance on this on this list if you do so so let's come to our index page it's probably the best way to do this and create I'm gonna add a new file here and call it uh um oh that's right Raisor razor no I don't want a template how do I do it without a template custom file okay index. razor. CSS so let's say that we wanted to style these items here right use this item here so let's give this thing like a class of um book okay and then we wanted to style it in our scope CSS so if we did normally we could just do this you know and say you know Blazer background color what are the odds that co-pilot knows what this is something hopefully purple no no that's totally wrong um I would do net background color net background oh that's probably better uh let's see here come on get out of here get out brand background color or something yeah net brand we've been doing this with like GitHub or Facebook or whatever and it picks the right CSS colors for us yeah it typically knows uh so what did it give us here corre oh oh see that is the correct color by the way in case any was yeah y James has it memorized so we we've applied this and just to be sure um because well let's refresh and just see but you'll notice here that like it doesn't take and when you're if you're creating a sortable list like this you remember a style and you're like why doesn't it take and the reason is because in Blazer it only applies the style to this thing it doesn't apply it to this stuff down here and if you want it to do that then you need to add the um it's called The Deep modifier so let me see here it looks like this so if you come in here and say like this oh interesting right and we save it now it should and sometimes you have to so it's uh rud at it yeah with styles with um scope styles sometimes you need to rebuild I've seen but that makes sense there's some intricacies in the the deeper RSS or CS in styling yeah and generally I've learned this when you're working with blazer like if your style isn't taking try this we've been using the scope CSS very heavily and and it really keeps the the Blazer like otherwise you end up with this huge CSS file okay beautiful that kind of work and so now it's applied it looks terrible but very cool John sound like you had something that you also learned during this well yeah one thing that was interesting to me was Steve told us like so number one mutating the Dom JavaScript and the framework are confusing but he also pointed out to us that people in sortable JS have been running into the same issues when using like Vue or other JavaScript libraries basically any library that controls the Dom is going to conflict with a JavaScript libr that's also changing the Dom right so I had I had this thing in my head that it was like this is a Blazer web assembly thing it's like not just multiple things interacting with the Dom so I think that was a big part of it yeah it's very cool it's great also that you know it's just since they're just files currently and eventually it will be a nougat right that you could modify any of this stuff to your liking right so if you want to change any of those default csss or stuff in the JS file like you could technically if you wanted to add more other features to it you can just grab those files and go um one other thing as burk's writing this is so fast man this is great um one other neat thing is that it is an open source Library we've got the the link to the um Java or to the GitHub project if people want to improve it add other features in or whatever they can you know they along with the URLs we open for po request too so yeah so all I'm doing here is I'm creating like a I'm just handling the case where we want to have two lists that we can drag and drive between I'm doing this on the Fly oh it's rebuilding I'm doing this on the fly so if it doesn't work don't be surpress at all but will it work yeah uh almost actually the problem is you know the problem is the div is like a zero height so it can't I have to change that but that's how you would do that right you basically pass in just the group name and then you can drag between these two lists there's one other thing that I wanted to talk about James while here um and I believe it was this so there are some decisions that I make for you was sortable and that's specifically it's that a certain visual experience and so if we go back here you can see that see how the thing like moves out of the way this is not the default experience and I'm doing this with styling here and so if you take this styling out like this refresh um you'll see a different you see this here this is what the default is where you have this like ghost element and so some people might like this and it might be better like okay so it's better here because now I can see that I can actually move the thing right now provided I'm hand I'm not handling the events so the events getting cancelled but before we couldn't see it now we can see it yeah and so the other thing is I've made that um and the other the other decision I made is that I always force it to fall back to H to uh JavaScript but the library itself is designed to use HTML 5 drag and drop by default and to fall back on your behalf when the browser doesn't support all the events that it needs however if we do that then we get HTML 5 drag and drop Behavior which it's like some people like this I'm not a huge fan uh like the transparency of the element here and so I like you literally cannot the thing that I'm dragging cannot be styled at all what you see right here is what you get so if you want to be able to style this element you need to force the fall back which is what I do just some small flexible though flexible I like to say well thank you yeah well thank you gentlemen for showing this off I'm sure that it would be very useful and I'll will put links to everything in the show not as also cool and you can are you continuing your journey do you still have like a long ways how far how long until Burke knows Blazer well we're we're we're doing our series a actually coming up pretty soon James on that but nose Blazer like never but we are we're getting really close John are we not I mean we've got more features on our site than we had in the original so it really is now we're into a point of like heyy how do we manage how big the the page load is and some stuff like that right so exactly well cool well thank you both for showing this off I appreciate it and of course you can check out Burke and John on Fridays on the net YouTube and on Twitch as well well thank you so much for coming on show this off we'll put all the links in the show notes we'll catch y'all later and we'll catch you later right here on the Don at YouTube thank you so much for tuning in don't forget to jam that like button ring that notification Bell because you've hit subscribe and you get the notifications whenever we put out a new video right here on theet YouTube thank you so much for watching I'm James and this has been [Music] onnet

Channel: dotnet

Views: 8,319

Keywords: .NET

Id: DdsD1j8a-DA

Length: 32min 10sec (1930 seconds)

Published: Tue Feb 06 2024