ASP.NET Community Standup - Exploring MudBlazor

[Music] [Music] so [Music] [Applause] [Music] [Music] hello hello how's everyone doing today doing great doing great thank you hello all right so uh my name is tony um we and welcome to the october edition of the blazer community stand-up so this is essentially where we showcase a bunch of amazing things happening within the blazer community and today we have with us two very special guests hannah and johnny who are the co-creators of the mud blazer framework so uh would you like to introduce yourselves let's start with to say johnny yeah okay sure my name is johnny larson from sweden i started this library together with hanon last year i think in the end of the summer so it's been a quick journey awesome um great to have you with us and hennan do you want to introduce yourself yeah um thanks to have us um my name is manuel riches from austria and i'm very excited to be here and show our library yeah awesome thank you for joining us um i don't believe i fully introduced myself so i guess i'll do that now uh my name is tanay and i'm an engineer on the blazer framework within microsoft and we also have with us john hi i'm john i'm a pm on the.net community team awesome thanks john uh okay awesome so uh let's start off with some community links so this is just a bunch of amazing stuff that's happening within our community uh within blazer so let me go ahead and share my screen okay so i hope you're able to see that now let's start off with the first link uh the first link is for ahead of time compilation for blazer wasn't now this is a feature that was actually introduced i believe uh in preview 4 of dot net 6 but it's fully available now and it works pretty well so this article essentially goes through what exactly ahead of time compilation is and how to use it within say visual studio some of the advantages of ahead of time compilation is it's a bit faster to run and you get a lot of performance benefits but at the same time there's of course a trade-off of uh since everything is compiled ahead of time uh the actual compilation times are a bit longer and you're also loading some more dlls and such as there's more network uh bandwidth that you need to account for so something like an intranet environment where everything is being served locally would be a great great use case for this because loop times and stuff like that isn't as big a concern so that's just one possible example so this article just goes through how to use it and how the this amazing feature works so that's basically it for that one uh the next link i have here is a article explaining how to secure an api uh using azure active directory so again this is a pretty straightforward article it also has the associated github code for actually how to use it and so on and it just takes you through the step-by-step instructions on securing the api how to integrate with azure 80 and microsoft identity and all that kind of stuff so it's all pretty straightforward and if this is something that you've been thinking about doing i definitely recommend you check out this article so let's move on to the next link here damian does a great job with those by the way he's been doing different series on integrating integrating with like microsoft graph and you know all these identity things and a lot of those um it's easy to find docs that'll give you like just the beginning hello world level and he usually takes them a good amount deeper and then includes a code at the end so for sure um okay so uh let's move on to the next one uh now i found this article to be really really interesting because they're actually creating uh creating a game within blazer so they're using this framework called babylon.js they're wrapping the framework so providing say typescript definition files as well as dotnet interfaces and then communicating with it to actually create a fully fledged game i believe this article series is still in production uh so like if you click through the next articles you can see where they are right now but uh it's it seems really promising and uh it's a really interesting use case for blazer where uh some may think uh blazer is primarily for say uh line of business applications uh this shows that it has a lot it has a really wide ranging application set so i found that to be really interesting for this article uh one of the things that this article actually highlights is this additional framework or project that they've tweeted which is a typescript interrupt generator so as i was mentioning earlier uh to create the game they're using babylon js but to actually use babylon gs with blazer they're actually wrapping the library so this includes the associated typescript bindings as well as the net interfaces i believe that's actually highlighted over here so yeah so you see the typescript interface as well as the dotnet interface so this allows you to work with it a lot more directly in a type safe manner okay okay let's move on to the next one uh this is a github project for the blazer transitional route now essentially what this does is it provides ui and ux animations to move between blazer pictures uh and just to create a more uh a smoother experience for users so i've uh i've seen a lot of people asking for something like this so i really wanted to highlight this amazing community project that achieves just that wow that's so how is that easy to implement that it's just set up as a route i believe so um so the other instructions right here um it requires adding the scope service and from there um i saw this a couple of days ago so i don't remember specifics but yeah it seems to be fairly easy to implement you just uh set up the appropriate robe templates and so on and you're on your way wow that's nice yeah okay um from there uh let's move on to this this is a github issue and it's a bit meta uh this is our internal or sorry our public call to action for the esp net core 7 ideas so uh internally we're starting to do some of the planning uh for uh course seven and we wanna get all the community feedback and ideas and stuff like that that you wanna see for course seven and we're gonna be using all these ideas to help our planning and our decision making on what we actually want to be delivering uh for not seven so uh to start off i would recommend you just head over to the espnetco repo go into the issues tab and here you're able to search issues and so on or apply the area blazer area blazer label to see some of the issues that are already there and if this is something that you would possibly be interested in seeing 4.7 i'd recommend you just give it an upload so we can engage the community interest in different areas and figure out where the interest is okay and um i also wanted to highlight dot net conf this is about a month out now but it will be uh the actual launch for net six so right now we're going into the final release candidates and so on so this is going to be about a three-day conference and you're going to see uh presentations from a bunch of amazing speakers to showcase a lot of the great functionality of dot-net sex and speaking of the final release candidates the rc2 release literally just got released yes i wasn't even sure if the page was going to load or not but i just got released a couple of minutes back so highly recommend you check this out as well uh shows all the great features that are coming in uh dot net 6 or c2 and a lot of things that on youtube laser as well so yeah i i will send this link in the chat i don't even believe i got a chance to include it in the url list it's right hot off the press okay that's a good that's a good thing you know to point out for people um because we're on this yearly release cycle like your previous we've got you know the.net six release candidates and.net conf coming out soon and then.net seven following soon after so dotnet six pretty much wrapped up and dotnet seven like if there are things you wish were in dot net six now's the time to say hey let's get it in there for seven yep for sure for sure man it's it's a really exciting time and yeah i'm really looking forward to getting that community feedback as well okay so that is basically it for the community links i'm going to stop sharing my screen here and from here we're essentially going to hand it off to johnny and han who are going to be showing a lot of the amazing features for my blazer so johnny do you want to start it off for him yeah i will start with a short introduction uh do you see that good yeah great so what is my blazer for for everyone doesn't know it's a blazer component library we have around 70 components today it's [Music] been pretty quick journey a lot of new features and future requests coming in um but around now we kind of feel future complete component wise we're missing some but uh we would like to focus on a more stable product and not make and too big changes to our api so now we really need to focus a little more on stability maybe we have this uh no dependency kind of policy uh we don't use any other libraries like uh and we're not dependent on them for let's say specific component stuff like a date picker or some javascript library or whatever it can be we develop everything ourselves either from the ground up or we start from a base from some code that's been donated to us and it's pretty much entirely in in c-sharp racer blazer do you want to say something about that handle yeah um that's i think is our um usb i think um because um i myself come from a wpf uh background and i just i used some some javascript libraries for web development and and what i hated about that was that i wasn't able to to go into the components and fix bugs myself so and i saw that many blazer libraries just use off-the-shelf javascript components and wrap them and then when you have to go in and debug and fix bugs then that's a huge problem for a c-sharp developer yeah so um what we wanted to have is a fully uh a library that is just entirely in c-sharp we couldn't do it a hundred percent but it's it's ninety-nine percent sharpened only some special things in javascript and we are seeing that this is uh what a lot of net developers like about our library because they can set breakpoints in in the library and then debug it if there is an issue um they can easily extend it and we are seeing a huge amount of contributions from the community which is attributed to that nice okay yeah yeah um i think and we had a few questions in the chat about whether it's free and so it's 100 free right yes absolutely yeah so i will jump to the next uh it's built why we started this was maybe because uh one year ago i was doing some like hobby development for for where i work for application and i noticed i spent so much time on doing uh i spent time on doing buttons doing css for buttons and building components and at work i didn't want to waste time on that i want to do cool functions for production so i started my own and i didn't i tried like every other library out there i didn't feel like anyone looked and felt and behaved how i liked it and and some of them were really like over engineered or very hard to get into component wise or when you try to contribute so the base of my blazer is kinda that it's we built it with the thought that it should be look good and feel good and all components are pretty much connected today with a theme provided with the theme provider uh some stuff is still missing and we're trying to to implement it better with the theme provider the default theme that my blazer comes with is based on material design but you can change like border radius elevations uh fonts uh only thing missing is like density or sizing options if you wanna compress it a bit because i i noticed myself and i know henron told me as well that material design out of the box isn't really that great for like uh software for companies where you need a lot of data in the same page and the teaming is entirely done in in c sharp you don't need to know any css or whatever if if you following the basic stuff if you want to do custom things it's always good to know css of course and this is says in the next simple css framework we have built our own css framework i would call it uh now we don't use bootstrap or anything like that but we still provide the css utilities like spacing padding margin these default classes this some of you are used to they are very handy so if you want to quickly add margin to a component you can just add a class uh i want to have a top margin of say 16 pixels then it's uh mt um mte4 yeah or if you want more and it's mt5 so margin top five and the same for padding uh then for flex and corners and so on there's some very simple css classes very handy yeah i'm gonna show them a lit a little bit later but other than that since we do the css and we do the framework we don't need to spend time updating it or make it work with the new versions of a third-party css framework [Music] this can seem intimidating uh if you don't know css but but you don't need to know much about it at all it's pretty straightforward and really well documented other than that we have full rtls support now right left should have uh we have some guys that have been working really hard on on making that work okay awesome uh we actually have a question in the chat uh if you don't mind uh someone's asking is it mobile responsive yeah it is of course it also kind of depends on how the developer utilizes our tools and components but it totally is yeah we have a hidden and we have breakpoints i can actually sh sheet a little and show you here now on our documentation page i don't know is this good yep so we have all different break points that is implemented in several components yeah you can configure them if you don't like the sizes we chose you can configure it um then there's the grid component which automatically um wraps the the columns for you and some components have it built in like the table awesome thanks yeah so i'll show you more more of this a little bit later yes this is for you hello okay so um what what's nice about our inputs like a text field select autocomplete checkbox switch radio group numeric field slide and so on and so forth is that they can all they are all generic so you can you can directly bind your model to them uh doesn't matter if it is a double or it is a nullable int or whatever all the primitive types and their nullable versions are supported by our input components and to make this work there's a converter which automatically converts the primitive type to string for for display like in a text field uh and when the user enters the value then it is automatically converted back to the to the to the primitive type um and this this is also customizable you can set your culture you can set formatting options for instance if you like let's say a double with um with uh with um with two uh two two digits then uh use that that formatting like you know it from c-sharp with a c-sharp formatting string and it automatically does that and also of course you can supply your own converter your own conversion functions if that is not enough okay next slide you know that's that's actually a really big deal what you just showed there i mean that seems like a minor feature but always having to handle conversions going back and forth is is frustrating and it gets in your way and so that's a really really nice feature yeah okay the next is date pickup which we are pretty proud of um it's it supports different calendars where you set your culture and what you see here is the persian calendar right now they are in year 1399 and we spent quite some time to get this right so we had to show it awesome uh we actually have a question regarding uh the dates so let me just pop it up here uh someone's asking uh so in dot net sex uh there is a new date only and timely types so someone's asking if there's support for the date only for the date picker component um i would say please post an issue and we're going to look at that awesome sounds great so and uh just while we're at it um there are actually a few questions in the chat asking why it's called mud blazer does that stand for something no no it it doesn't really mean anything i i made a completely different application a long time ago with that had a reference to to military radars and and when i started with this project in my free time uh to kind of be used on that other project i i i picked a similar name oh awesome sounds good well there you go with those uh sorry hannah and it really doesn't really matter how something it's called that's my opinion uh as long as it's good then yeah for sure doesn't matter what it's called matters whatever yeah yeah for sure well uh yeah go ahead thanks yeah should i go with next let's go to the next part please yeah okay so here's a little history lesson maybe when we were implementing the pickers they'd pick your time picker where the first pictures we had in uh malplacer uh i think hello said that we will need to add javascript to to create these uh if you looked at the materials specification and what other libraries how they looked and felt uh this was kind of not how they looked uh now these pictures are from my blazer but it was what we were going for so i don't know if i can ask you two a question how do you think we made it how did you like create this yeah yeah how is it made like technically we don't have to go in the depth deep steps i would be tempted to use svg svg yeah yeah i would say svg though uh i guess you could do it via just pure css uh just to get a smaller file size perhaps simply because we're working with a couple of ellipses a line and a larger ellipses around it so not quite sure let's take a look at it uh first i just want to say i'm sure there is probably a better way of doing it when you look at performance but uh yeah i said we are going to need a javascript for this and tony proved me wrong yeah yeah i like when people want to add more javascript into the library i always kind of like why why why can we do it in another way can we think outside the box why do like everyone else have not done in like years try something new so it have all the basics you have the drag functionality uh have the click one so you can open nice 24 hour mode now it looks a little weird because i zoomed in but and it have action buttons and so on yeah you can have 24-hour mode you can have 12-hour mode which was by the way quite heavy to implement it's a night especially for a european let's gonna do this to have a little more clean by the way this is something several people asked or talked about in the chat you're showing try mud blazer now yeah yeah sorry i'm showing it a little too early we have i'm gonna talk about it later but try modblazer is something hannah created from the start it's based off blazer reptile uh their source code and since then we have pretty much changed it a lot to suit our needs better but it basically every code example on our website is uh automatically works with this i think uh mike did that it's the code is in the link i think something like that yeah um and it's really useful it saves us tons of time when we're helping people with issues and trying to help people like implement what they want yeah and for for issues i mean uh people we encourage everyone if they have an issue to reproduce that issue in triumph laser um because uh when they find out if it's their own issue or if it's our issue and we can look at it and see exactly what's wrong if there is a bug it's very interesting and we can just copy paste this code uh in a trimod blazer paste that into a unit test which i'm gonna talk later and and make a test from that and fix the buckets really awesome but uh kudos to the place the rebel guys they implemented this we just styled it a little bit um so we are very happy that they allowed us to use it so now i'm just gonna show real quick uh how this is made up do like that so that's a lot of tips that's a lot of divs that's a lot of this so it's no svg right [Music] just deals with the border radius yeah rotation let's go oh nice oh i can't code all of the sudden but i say let's don't spend too much time on how it's made no of course not i i will just show a little them behind the [Music] so here you can see every minute in this case every hour here have these divs so when you drag when you click and drag and you go over them it updates and this circle once is when you click so it's made up of a lot of divs and it and so then i'm guessing based on how you describe things this is all the logic for this is then in c sharp yeah yes all of it and browsers are very very fast so a lot of tips don't really matter performance wise so i will jump over to the next slide which is also picker it's our newest picker uh the color picker and again we were at this uh decision making how will we make this uh spectrum field or color field and uh beno said to me oh we will do with the html cameras which is great but the problem with cam was again we need javascript to make it work right and then we came up i googled google read the on about callers and whatnot and to get this uh field it's actually i don't know if any one of you know it but it's actually just three divs three days with different uh background uh color blended over each other yeah right oh wow well nice i didn't know oh yeah gradients just overlapped right yeah yeah so we have one black one and we have one that's pure white and then we have the one with the actual color that you're picking wow so uh this is still i assume fully rgba compliant in terms of the color space but it's achieved via three uh dibs instead of say having like whatever the number of colors is 16 million or whatever i'm not sure but but i'm sure you're right yeah i haven't tested this like i wouldn't every pixel is maybe not in there but you can have uh hlla hey hex rgb and we have zoom in and you can also change the if you want alpha or not so that's really nice yeah really full featured but and and incredibly responsive that looks i mean yeah and it's basically a lot of math behind it i didn't do the math but uh ben did it and then it's just divs divs and some css [Music] it's available in in different if you don't want your users to have access to to all colors in the world you can use a great one compact or just have a preset palette does so and one place i've run into that where you need preset pallets is for things like um accessibility that there's certain like accessibility ratios that you have to have in colors yeah nice so uh and we will get back a little to the color color picker later uh and uh teaming in general uh but now we're gonna jump over to the next slide for and on okay so we have full edit form support and we implemented fluent validation support but we also added our own form implementation um in originally we wanted to have something a little bit simpler than edit form which is you can just add a validation function to every input that you have you don't even need to have an input model if you don't need one and that was the idea behind matt form but later we discovered that edit form doesn't really do async validation uh and that was the the that was the point where we said okay now let's add uh model-based uh validation also to to not form and thanks to a contributor who implemented this we now have that and it's basically you can either have the very simple form or you have a little bit complete more complicated with uh with uh hierarchical up to hierarchical models you can have models which contain sub models like for instance if you have a a form that for for a let's say in a web shop you have a form where you you will have different addresses like delivering a shipping address and the other address where your invoice is going to then maybe addresses is a sub model uh and you can do that with uh with nested forms in in our framework so you can have a form model address and you have a subform mod form that is in a mod form that has a model that has the model of the address and it validates just that so um it's uh pretty popular okay next slide next slide what's the time how much time left do we have uh we have about say half an hour or so yeah [Music] then we will do this one now hang on and i can okay yeah uh our table is um has client size data or server side data so um you can either have all the data uh downloaded at once and show everything client-side then the paginator will just split it into pages or you decide to leave the data on the server because it's maybe too much to download it at once uh and then uh you have just a a function that you define to get data for a specific slide uh for a specific page and it will download that and the paginator will know from the beginning how many pages there are and and when the user taps on the pages then everything is downloaded from the server on the fly and that also works with sorting filtering and so on yeah and the table is what has virtualization support um it has inline editing support so you can click on a row and some an editor will go i will open you can edit the values and you can cancel that or you can accept that edit and there are lots of hooks in there you can use to to to support that um but it's pretty simple i mean we have lots of examples on our web page and it should be very easy to to get that working and also there is multi-level row grouping support so um i i think most people will only need simple row grouping but we can do multiple levels of that groups within groups yeah mud table is a huge uh component it's it has grown a lot uh there is there have been so many contributors who have just expanded on what i built in the beginning and and that shows you that our code base is uh is really friendly to to contribution okay next slide please yes i will jump a little here you know [Music] or do you want to continue with dialogues now yeah let's do it so um dialogues our dialogues are pretty cool because when you come from a desktop background you usually just open a new window when you need it and we build just that i mean you can you have your dialogues in a sim in a single razor file and there is a dialog service and you say please open this in a dialog i want it full screen or i want it this width and then it will overlay over your application you can have multiple of those dialogues i mean you can have dialogues that open from dialogues and will just overlay the other one they can be model or or not so you have the backdrop click or you can there's a lot of options with which are well explained in the documentation um you pass you can pass parameters into dialogues of course and you can return those uh return the values from the dialogue when when it closes um and uh that's the most most of the time that's pretty okay but sometimes you want just a very small dialogue which is uh which you can just inline in in another component and for inline dialogues we even support direct data binding into the data so you can either have it in a in a known component then you have to pass data in and pass data out out or you have a inline dialogue which you place in your component which is it is not visible at first but when you say um i want it visible then it will pop up and the data is directly bound into the with with two-way bindings um and of course we also have message boxes which i find very interesting because you don't have to define a new razer file for every little uh dialogue you want to open uh if you have some standard things standard dialogues you just you can do that just from the code it's a message box open and it will open a message box with a number of buttons like yes no or cancel and you get back a nullable boolean and you can use that with this await and directly continue in your code it's pretty awesome awesome uh we have question in the chat from dan rob he's asking does the mug table implement its own virtualization or is it using the virtualized component that's provided by blazer we are using the virtualized component but we have noticed that it would be great if virtualize would have an and then a switch to enable it or disable it um because it was uh it it created a nasty if branch in our code uh if you wanted to virtualize it or if you didn't want to virtualize it which for some uh content you need to disable virtualized reversalization and we avoided that uh nasty if by creating a mod virtualized component which just adds that that the boolean parameter and then embeds virtualize okay fair enough uh that's great feedback if there isn't already an issue for that on the esp net core repo definitely feel free to open one cool okay yeah and for people who maybe don't know what dialogues is it's also known as models in like bootstrap i believe but it's the same thing basically [Music] testing oh yeah yeah do you want to talk about that now or or yeah let's do it testing i mean that's uh that's a major factor of our success is that the library is very very stable and we managed to to have only a few breaking bugs then but mostly uh users can expect it that things are just working when they get a new version and we manage that by having incredibly high test coverage we have over 1 1 400 tests for every component somewhere even other generated by a c-sharp generator and it it just makes the the library very stable because i mean uh a source code in especially in an open source project is always in flux and there's always someone who is adding stuff for changing stuff and i wouldn't be manageable without tests so it makes it also very easy for contributors if you want to contribute and you you feel that you might break something you will immediately notice when you do a pr um you will see our continuous integration server will run your code against our test suit and you see which test cases didn't work and you know exactly if you broke something or not and that's why we for every pr um we um we want you to write a test case that really that tests all the code that you added uh and that's the test coverage when when your patch is applied will not drop and that really protects also it protects your addition or your change or your bug fix against the accidental breakage by future contributions so and it's also we noticed that it is very easy to do big refactorings if they are necessary like we had we have a new popover um which is a lot better performance wise which we will be releasing soon and it needed changes to almost every component but thanks to our extensive test coverage that was really easy to find all the breakages okay to the next slide to the next uh here we go uh so this is the slide i was talking about before my blazer ecosystem uh currently trimod blazer is uh like we said it's a lifesaver for everyone for for users developers if you wanna test something quick help out a colleague help out another developer using modblazer it's amazing you can save your code and build your own components and different files and as i said before it's fully integrated with with our documentation page so if we add a new example you just click the link try modblazer and you can play around with the example there now i already showed it off a bit before but it's uh very straightforward and it technically doesn't have to be my blazer in there you know it can be regular uh html divs whatnot so it's really been helping also i think it's one of the reasons why we've gotten so popular in the first place is is just the access and use of this tool then we have the templates anyone can install them it's regular.net templates it works from with net new and they also show up initial studio if you're using that we kind of have our own take of uh this default blazer template everyone is uh used to see with the counter and the table with weather dota it's basically that but mod laser variant and then we have a admin dashboard template which looks a little more like this it's not exactly the same version as this one but pretty much with some examples of how you can structure your your application isn't that radiation sorry again uh i i saw a three-point sync uh 3.6 ronkin isn't that radiation oh is this reference to you know on my blazer documentation page and here it's you can find several small easter eggs uh well that's a really nice dashboard like so this is one of the templates just kind of yeah it is and you can easily use it with uh if you install our templates now i didn't write the name of it but it's uh modblazer. templates then you can just specify the template you want when you write dot net new uh a nice kind of overall theme i'm picking up here like you build in general you're gonna build different sites with blazer than you would with just you know like if i'm gonna go and build an html css javascript site right so a lot of a lot of blazer sites that i'm seeing are more kind of like line of business applications where you're going to need forms and grids and dashboards and and input pickers and and you know handle validation and all those sorts of things and so this this like what i'm picking up here in addition to the fact that it's a from scratch all css or i mean all c sharp based um but it's also this kind of like it's built for that sort of the kind of apps that you'll likely be building yeah yeah and i can show it i don't have a specific slide for this but like i said in the beginning we wanted to or or i wanted to create a really beautiful looking component library out of the box where developers can focus on functions and not sit with css you know and in this demonstration i'm going to show you how it can be done without any css uh this team manager is not really meant for production in any way but it's a great tool to showcase so you can change default elevation currently in this setup it's using the default 25 string array elevations but you can customize it yourself you can change out elevation 25 to 10 if you want that you can change like font whatever you like if you want to build something a little more modern let's see what we can do yep and just as you're doing it it's reacting instantly it's extremely responsive wow so then as you go through and do this this is nice for previewing can i grab the like code that you know so that i can use that in the app then not yet okay not yet but yeah that would be really nice right yeah now it won't let me reopen it for some reason that's great yeah um we uh we i i personally used uh javascript frameworks like uh beautify um and uh johnny probably used the react framework mgui and we used a lot i mean we reused a lot of good ideas from those frameworks because they are also very awesome and they inspired me much blazer in a way they also like just you can just take the library start off add some components and it just looks good you don't have to invest a lot of time in styling things because it looks good just off the bat yeah and it has [Music] we have all font settings i will show you how it documented here so you have the palette you can set the warning successful color uh primary text primary background colors uh this can all be set by you by default it's loading our default mod blazer uh team and here's the shadows i was talking about so basically you can you can swap this out you can create your whole uh shadow suit in your team and have your own shadows oh yeah show the dark mode yeah we have a dark mode it's uh the best mode yes the best mode it's not a real dark mode uh i really want to add that later on uh like a real torque mode scene in the css itself but that uh that's a task for later uh if you don't mind uh i'd just like to interrupt there's a question in the chat uh someone's asking uh is mud blazer compatible with eot uh and if there were any refer reflection related issues i would say i would say alt is not something that we have been striving for we have one of our team members has checked it out if it if it helps and we found out it just makes the library bigger it doesn't make it much faster um so it really for us aot is not not really something that helps a lot right fair enough yeah uh so definitely with eot that's definitely one of the trade-offs that you have to encounter that uh you definitely get some more performance out of it but of course that comes with the trade-off of larger dlls and that kind of stuff so um yeah i think for a ui um iot is not really what you need i mean a ui doesn't need a lot of performance you know okay yeah [Music] but yeah so what i want to show with this is it doesn't have to be material like you can change the border radius our grid component have spacing [Music] that we determine the spacing between the grid items if you change all of these together the fonts the the border radius the elevation you can create a totally different app at the moment you can't we don't have anything implemented like density or size but it's something we want to add down the road because that will really and truly allow my blazer to for example just change the team to create something more like and design okay so uh someone's asking uh does my player support animations yes we don't have animations built in as a component yet but it's coming this fall oh we have transitions we have i think we have a we have a transition component uh if i'm not uh yeah yeah for for uh here is built-in yeah yeah yeah it's built-in but uh that's definitely something that we could add in the future more i mean transitions are not documented right now the component is not public um i think could be something for later yeah i i plan this fall to add maybe probably a animation component and also just to do it with css classes if people prefer that way do you have any more questions regarding teaming there's a well not theming there's a question about charts oh yeah shoulder charts oh yeah we have homemade shorts yeah they are not very well documented i started with this last year i think as uh see how far i can go with blazer oops yeah i mean if you if you expect this to be a copy of chart gs it is not uh this is uh this is a very simple implementation without animations um but uh for many applications uh some charts uh really make uh if they are available that makes a huge difference if there is a simple chart component available you don't have to to add another package for that if you just want to plot some data come on yeah exactly and and i know one of our team members really wanna he have created a new branch with new shorts but uh we all the time find something more important to work on than and then to finish the new shorts but hopefully it's coming i don't want to say a date or anything like that but uh yeah i think it's great to have them in the library and ready to use like this yeah for sure this is awesome and sometimes you uh like short js is great great framework uh but sometimes uh when you're already working with the existing framework uh mixing two three four different frameworks into one can just lead to additional bloat and stuff like that so it's really nice to sometimes have everything in one space so you can load everything in advance and yeah work with it directly yeah yeah and and i know we we halted all development for the current charts uh but now we said that if people want to uh we we will start accepting prs on this uh current chart implementation and there's actually one guy who who went through to add a better test for all our shorts so when we approve a new pr we we can be sure that it doesn't break current behavior or anything so that's really great yes contributors i think malplacer has a open source library has really shown itself because we have a lot of contributors and and a lot of people want to help pr fix bugs and so on and without all the contributors we we wouldn't be where we are today yeah and uh i'm really um i'm so happy that uh this baby has started to fly um it's it's it's practically running on its own now even if i drop that tomorrow it will live on because so many people have adopted it and there is a huge amount of support from the community and we want to thank uh those people we showed here on the page who made substantial contributions um and helped us a lot and let's thank you very much thank you i believe dan was asking in the chat so this is a really amazing project but for uh contributes a lot of amazing stuff to the blazer community so for people who want to be involved in this specific project uh do you have any startup documents or stuff like that on how they can start contributing to my blazer yeah yes yeah i think we both have contribution guidelines uh contribution code of conduct uh and we have just recently updated all our uh issue templates uh pr templates uh with some more general guidelines yeah we have something more to add um yeah it's it's it's really easy i mean uh we we don't we we really appreciate it if you want to help um because we are every one of us is doing it in our free time uh and of course in the long run this is uh gonna be very tedious um so when it's possible then um [Music] i mean if when if people want to help we will accept this help gladly the only thing that we do is we we have some quality guidelines i mean we have some quality criteria but there must be tests and the code style that we have in the project should i think we may have lost tannen there yeah okay i'm still here yeah you're back yes so just pierre that's it just create full requests um we have a very helpful community they will help you contribute yeah and in a if if it goes two weeks three weeks and no one ever answered uh like don't take it personal we like like hannah said we we all do this in our free time and we have a lot of things to do yeah for sure i think i did a small just talks pr a couple of uh weeks back and uh their turnaround was less than a day so uh yeah i definitely see the community is really active in there um awesome uh there's someone asking have you tested this with dotnet six yes we have awesome um okay there is steven i think we i think we have a we have it even on the internet yeah yeah one second i'll see if mike have done something to it yeah and for the future um it is it is clear that um that a open source project can only uh be sustainable if there is some business behind it so i have encouraged johnny to to start a company and provide commercial support which is going to be available soon matt place is always gonna be free for everyone it's always gonna be open source but we're planning on having a business model uh in the background so that this is also sustainable for long term yeah yeah that makes a lot of sense and um i'm sure uh there are probably many many businesses who are really interested in the framework but uh probably want that little bit of extra support to ensure that their specific use case or uh their their support questions can be answered in a priority fashion so that's awesome and yeah i can always support um ensuring that open source projects are sustainable and yeah fulfilling yeah yeah sadly i can't share more information about all that now but we will put it on our website and twitter and github when when time is ready sounds great uh well um thank you both i really appreciate everything that uh hannah and johnny you have shown off today i think my blazer is amazing framework and these are some awesome functionality um before we go though we actually have a very special surprise guest that's going to be joining us uh i'd like to welcome dan rock to the stream who reached out and said that he has a short demo that he wants to show off oh my goodness i'm intimidated johnny whatever i'm gonna show like will pale i'm gonna just let you know in comparison to what you guys just showed like mud blazer is amazing like fantastic work what a what a just a fantastic contribution to the community thank you so so much for for doing that and sharing your work and everyone else who contributes to the mud blazer thank you for doing that great stuff guys i just had a quick little demo uh of something we just released that i thought people might be interested in seeing which is we just released on it six rc2 minutes ago like like just a few minutes ago it's out there you can grab the sdk you can download it install it um and it has one last thing one new feature that we added to blazer web assembly that i thought people might be interested in which is support for native dependencies i'm gonna share my screen real quick uh let's see click the button and it's not working share your screen and i'll share my yeah perfect and we're going to take a look at what a native dependency looks like in uh blazer web assembly so this is just a default blazer webassembly app um but you'll notice over here in the solution explorer we have this strange thing we have someone forgot the s in uh in c this is a c file i had to write some c code in order to do this demo which i haven't written c code in like like at least over a decade so i was like what's going on with where the brackets are for arrays and stuff this this is really weird to go back to c but this is some c code and then in the project file we have this special native file reference that's pointing to that c code and i want to use that c code in my app in order to do that i'm going to use the dotnet webassembly build tools this is an optional workload for net six that you can install via vs or you can install it on the command line to like tack it on to your sdk the wasm tools optional workload and what that will do is i would bring in inscription and the aot tool chain all the fancy tools that we can use at build time to process web assembly in our application so by having this native file reference we're going to compile that c code into webassembly and link it into the running app okay and then in my blazer code here's index.razer you can see i have a normal dln port for uh linking up to doing a p invoke into that that c code and up above in my rendering logic i'm calling that code calling into c code so that's what you're seeing over here on the right and so uh let's let's change it so that factorial of five uh i don't know if i can really find it we'll go ahead and save that into a hot reload and there we just you know calculated the factorial of five using some c code that we linked into the net webassembly runtime so that's pretty cool and what why would we do this like well there there's libraries of native functionality that's portable that can run on um on webassembly and you might want to use those libraries in your blazer applications so one example um we worked with the maintainer of sharp uh skia sharp is a here i have actually have the the package referenced in this application let's pull that up so skia sharp is a dot net wrapper around the skia drawing library which is a native library schema sharp gives you like a c-sharp api for calling in to schema for doing custom drawing and so now with this new support for native dependencies uh we can actually link in skia into your blazer webassembly app and do custom drawing uh to the browser via the c-sharp like by calling uh.net apis so this package was updated with a native file reference that native file reference we saw before in the project file this guy right here and it pulls in ski a sharp and then links it into the to the runtime when you build and we can do custom drawings so that's what we're seeing in this part of the ui right here this ski is sharp text that's not actually like html content look up here there's a i have this sk canvas view which is a component provided by that package which is just a canvas that we're doing rendering to it has this on paint uh surface event that i've hooked up and then down below i'm using the skia sharp apis to paint some text kia ski a sharp with particular you know size font and and uh and color so that's custom drawing with schema sharp by just adding a package reference uh using the new.net web assembly buildable so that's something you can try on rc2 uh i hope you enjoyed that quick demo a little extra extra bonus at the end but uh yeah mudblazer is awesome.6 rc2 give it a try yeah for sure thank you so much dan that was a great great surprise demo uh we have a quick question just uh with regards to proof i guess uh what's the speed with the native intro so native interrupt like you're taking native code and you're compiling it right to webassembly so you know there's no um dotnet il interpretation happening there like this is native code just being turned into webassembly so it's very fast like near native speeds with that with that code so you can do very if you have some um some logic that you really want to optimize this might this be a way potentially that you could do it if you want to write it and see or or you know you're you're a tool a language that uh the inscription tool chain can handle uh then you can compile it right into the webassembly run time p invoke into it to get a little birth boost uh in terms of how how fast it executes uh so yeah very very excellent performance awesome that's awesome thank you so much dan no problem that's awesome um before we go there's uh one final uh i guess community link that i wanted to share uh i didn't get a chance to share this at the store but this is i wish i still looked like that like like it's a spitting image so uh this i didn't get a chance to share this at the store but this is the asp.net core specific uh blog post for the dot net 6 or c2 release so this feature that dan just showed off as well as the other features and improvements that are brought forth in the rc2 for esp net core are all detailed here and i will be the link to this in the chat as well so you can so everyone can check it out it looks like the visual studio update also just dropped so visual studio 2022 preview 5 which contains dotnet 6 rc2 is now available so you can update to that latest preview um there's also an update coming to visual studio 2022 for mac um that's i think i think they're playing do that tomorrow or later this week that should be coming shortly that will also have support for dotnet six rc2 as well okay that's awesome yeah that's the really exciting thing about doing the uh doing this community stand up on the tuesday that it releases uh the release either goes out the minute the stand up starts or we're continuously refreshing the page in the background to see if this is something that we can show off to the uh to everyone because the page uh is still going through the steps and so on so yeah that's awesome um i don't think there was anything else that i wanted to show uh but again once again thank you so so much to johnny and hannan uh this was an amazing uh presentation for mont blaser i'm sure the community uh really enjoyed uh seeing all the different functionality that oneplace has to offer as well as like how it actually works under the scene seeing how say that take time or clock widget can actually work just with this without any javascript or anything like that it's really interesting uh and thanks for giving us that behind scenes look yeah thanks no problem thanks for having us yeah and then can you can you add us to that slide in your presentation uh for the community project the great community project when you show roblox absolutely and i i thought i actually already had but i will if i haven't already i will make sure that i have it there yeah you guys are awesome we are not yeah we need some publicity that's awesome and of course thank you dan that was an amazing surprise presentation i don't think anyone expected it and yeah that's basically it thank you john for joining us and thank you for everyone watching i really appreciate you tuning in and seeing all the great work that's been happening in blazer this month well thank you all thanks everyone bye-bye [Music] you

Channel: dotNET

Views: 7,950

Keywords:

Id: GtLIpITqznA

Length: 76min 10sec (4570 seconds)

Published: Tue Oct 12 2021