ASP.NET Community Standup - Material Design in Blazor with Material.Blazor

[Music] [Music] do [Music] [Applause] [Music] hello everybody from all over the world i am so excited to have you here today at the december edition of the blazer community stand up my name is sofia i am a software engineer on the blazer team and i'm also the co-host of the stand-up um who is my co-host you ask well it's the wonderful john galloway hello everyone uh happy to be here and i'm excited to learn more about material blazer and i'm still learning i'm still getting acquainted with this i'm a uh introducing myself every show now i forget to do it i'm a pm on the.net community team so yep awesome speaking of material blazer we've got two folks who are here with us today mark stega and simon zegler and they're going to be talking about their open source library material blazer in a little bit i'm super excited for some of the demos they have to show in the slides and everything it should be a pretty fun community stand up all of the community stand-ups are pretty fun but this one's going to be particularly fantastic as you know we always love to start the community stand-ups with community links this is a collection of stuff that i've seen around the internet related to blazer that i thought would be interesting to show you guys today so i've picked about four things that i wanted to share with everyone that i thought were particularly fun um so the first is this advent of code project that a community member kristoff has been working on implemented in blazer so if you're unfamiliar with advent of code it's actually a really fun exercise to get into it's around 25 or 12 days i forget how long an advent is but it's a series of days where there's programming exercises that you can complete in any programming language that you like whether it's c sharp or maybe you're trying to get into rust or python or what have you and it's just a fun way to learn something new and kind of keep yourself accountable with a challenge so we've got a community member that's been working through these exercises in blazer um you can see all of the days that have been completed so far seven days um for the seven days of september that have since passed or december i totally know what month we're in it's december not september so yeah this is a pretty cool congrats kristoff for having this up i love to see people kind of bridge blazer with other things that are going on in the wider software community so this is pretty neat and i'll have these links up in a bit next link is actually a youtube tutorial so if you have watched steve and i's um dot net conf presentation from last month you might have figured out that i'm the kind of person who likes to build demos that aren't traditional crud applications i like to kind of build interesting interactive apps or things like that so i was really excited about this youtube tutorial because it actually showcases building a music pad app in blazer um so you can see you've got pianos and strings and snares and kicks and all that fun stuff and you can kind of click through and it'll play the sound associated with that instrument and you've kind of got a little music pad uh implemented in blazer web assembly um it does showcase some new things that we shipped in blazer as part of net5 like css isolation as you can see it's around 11 or 12 minutes long so this is a great thing to share with folks if they maybe have built something with blazer a long time ago but haven't recently used blazer and you want to show them what's kind of new in the framework another thing that i think is actually really cool is that this developer is building their blazer um app in vs for mac which i think is really awesome seeing like the diversity of ides and editors that people use um when building blazer apps is you know i'm a bit of a sucker for vs code um we've got people who use vs and we've got people who are building tutorials with vs for mac so i thought that was another neat part of this this is cool timing wise because uh the latest release of yes for mac just shipped in november and it includes uh blazer wasm debugging so it makes it a little easier to build this yeah yeah i'm particularly excited about that because i do a fair bit of work on blazer was i'm debugging when i'm on the team so yay cool so the second thing i wanted to share is this blazer rupple project so i've seen a few type of laser fiddle blazer um kind of interactive coding environments out and about um this is a new one that cropped up that i thought was really neat to showcase it's open source this is a great way if you're ever opening an issue on the asp net core repo or on blazer and you want to demonstrate a repro you can pop it into a fiddle in addition to a github repo just to showcase what's going on or if you want to write up some code for a quick component or showcase something to a co-worker or someone on the internet i guess technically now every co-worker is someone but this is a this is a great way um to do that again i love to see people making these little interactive web-based editing environments for blazer apps um in addition to um some of the ides and stuff you could use with laser cool and last but not least this is actually um another kind of audio based thing that i wanted to demonstrate and here's the demo site for it so this is actually a blazer library for interacting with the browser's speech since the speech synthesis api turns out this is a great situation where you would want to use the speech synthesis api there you go you're not saying certain things um but i remember when i was younger one of the things that i love to do was open the little um robot sam thing on windows xp and make it say silly things that was like the highlight of being a 10 year old with a computer and now you can reproduce that experience with this blazer speech synthesis library so it's got multiple voice sets that you can use um there's daniel or sam which is the traditional one that people here kind of like the mail based bouncer there's sam and there's a variety of different um different speech voices that you can use you can adjust the volume the rate all of this fun stuff you can make it say silly things like i love blazer and it'll speak it i don't think anyone will hear it i just had a robot whisper i love blazer into my beard headphones um but yeah i think this is a cool a project again i love to see like the connection of blazer um with different um kind of new technologies that are coming up so those are the four links that i have to share um thanks to everyone who's been working on making these open source projects and these demos and stuff like that i do lurk on the internet and see things so sometimes i look at your stuff that was a weird thing to say but everything that you do and yeah definitely don't hesitate to at me on twitter which is captain sofia if you think there's something that should be showcased as one of these community links i'm always looking around reddit and twitter and the github blazer topics to kind of discover these things that people are producing um another thing that i think is really cool is that this mix of links is fairly global we've got links from community members in japan we've got links from community members in brazil so it's super cool to see everyone around the world contributing to blazer sweet speaking of being from around the world um i have another global audience or global um pairing with us here today um switch over we have simon ziegler who is based in the uk he's a blazer community member in the uk um and we have marcus here with us in the united states um really excited to have them on here today to talk about material blazer which is an open source library that they work on you know i'm not even going to start describing it because i think the best thing to do is to hand over the mic to simon and mark who will start talking to us about material blazer and let us know what it's all about simon mark we've got your slides up do you want to take it away yep good day i am mark stega i'm a founder at a startup right now by the name of optimium health my background is fairly varied i trained as a medical physician but fairly quickly change from clinical practice to healthcare i.t i have to say i'm old i've got 40 plus years of experience now including taking one startup uh from inception to an eventual sale to ge medical uh the startup that i'm involved in now optimian health is basically control working to control the chaos in the perioperative process what is what does that mean we'll get into it in a bit when we uh actually demo but if you think the tv shows are correct where the operating room is a nice quiet environment and everybody is studious it's not it is um uh absolutely a uh an environment that is frantic uh we'll we'll share more later so over to simon for his intro thanks mark yeah so i'm simon ziegler also a founder like mark i've got quite a long and uh odd career so i started out in tech when i left university then i spent pretty much 20 years as an investment banker i was trading things called interest rate derivatives on one of those enormous trading floors that you see on tv and in film and uh unlike mark uh with his uh medical background uh we don't hide the chaos very chaotic environment in the last 10 years or so i've been working in real estate development that came out of my banking career and then in the last two or three years i've just been rounding the three together with founding diopter which it datra which is a fintech proptech um startup and it's bringing i'd say investment banking quality financial analytics to institutional real estate investors so you know it's an enterprise product and my clients would be the likes of pension funds and reits and people like that so material blazer something that mark and i have been uh working on together since march um obviously we're both founders uh mark's the cto of his firm i'm the only person in the director at the moment and what we both felt around about the start of this year as we were building our uh two different very different products as you'll see on blazer we both found a need for a competent component base that would would deliver what we both needed for our um uh uh for our businesses um and we had uh we found that we had similar requirements we came together in march to join forces to deliver material blazer and there are various things we wanted one was we obviously wanted a very high quality set of components and we like to think that we've got there with material blazer secondly we both found this existing commercial and open source offerings just work quite to our taste now some of them are absolutely fantastic for instance telluric gets an awful lot of love from the development community and recently i've seen ant blazer i think that's right name for the project which you can find on awesome blazer that's a very very good looking um open source uh project with a very large team building it i've got a lot to recommend them um but we found that we wanted something very specific and this is where material theme comes in now uh i would thought everybody watching this stream is going to be familiar with say bootstrap which is obviously originally twitter's framework for uh web components and for managing grids and so forth well google have their own equivalent called material theme used to be called material design now it's called material theme as they've brought us into a sort of new generation and um it differs somewhat from bootstrap in that they're both incredibly powerful but bootstrap relies on you to deliver a look in the field so uh either you have to be a very good web designer yourself or you have to hire one or you gonna have to you have to go and buy a an off-the-shelf package which is something i did in the past with the prototype and it kind of didn't work too well with blazer enter material theme which is far more prescriptive than um the bootstrap uh pretty much the entire google catalog of online catalog users material theme whether it's on their websites their apps on android or ios we're all used to their input text fields that have borders around them and little labels that float up the style of their buttons that have a certain amount of ripple effect on them it's a very nice looking thing and as i say they're very prescriptive so somebody like me who's got to build their own uh project their product front to back all the way from blazer right through to database handling can pick up something like material theme and not have to think quite so hard about design as i would have had to with bootstrap so that's what drew me to material thing i also had a few other uh requirements and mark had some as well for some extra components which we got in material blades we call them plus components so we've got core components which are standard material theme components and then some plus components which mark's going to show you a little bit of where we've either extended basic material themed stuff or built our own stuff in the style of material theme a little bit about the project firstly mit license so take the code use it as you will go sell it it's yours to use as you wish obviously we'd love to have a little bit of attribution if you do that um we've we're currently at version one of material theme which we released a couple of months ago we're working on version two mark's going to show you a little bit of the difference there that probably won't see the light of day this month maybe january is what we're hoping and version two is going to bring a few extra components it's going to bring upgrades to existing components and also we're going to move to the latest iteration of google's javascript library which is called material components web and we're going to move to material components web version 8. as we move forward into the future um our principal objective because we've we're both uh b2b enterprise tech companies relying on this stuff our principal objective is to keep things stable so we don't want this thing to move all over the place we don't want to be developing you sad infant item we want to keep it stable but also up to date little link at the bottom of this page is where you can find our website uh and there's a link on that to our documentation this does also on the front page of this presentation if you wind back to it along with our github repo i i know you'll be going into that a bit but i just want to commend you on a really great website that um actually can you go back to that slide it's it's it's really uh it's really useful in showing what your product does and the documentation and like hands-on samples are really good so as with anything i always like to go and you know update myself i think we've shared material blazer possibly before as a community link in the past but i wanted to update myself over the past few days and i'm just it was great i i look at a lot of open source projects you know i'm always scanning what's coming up in the blazer feed and what's coming up on hacker news and everything and a lot of them are like well here's a repo and you have to dig through to try you know what i mean you have to do some detective work so anyhow congrats on the site thank you we we had to document it like that because we kept on losing our way until we did um so it's big enough that you know we had to leave breadcrumbs for ourselves um so what are we going to be talking about today obviously there's a substantial q a at the end of the session but between now and then there's one key technical challenge that we face building material blazer that i'm going to take you through then i'll hand over to mark who's going to show you the website and show you how to link from the website through to our github repo with uh some code samples uh then he's gonna show you his product then i'm gonna show you my product and then it's gonna be q a so our big challenge um we initially faced a little bit of a nightmare in the difference between how blazer and a javascript framework such as material components web handle the dom so obviously with blazer we're all familiar that laser sits there doing diffs on code coming into it and periodically obliterating and reconstructing parts of the dom for different components against that material components webb's approach is that you render a component or a suite of components on a page and until you want to get rid of them you need to leave them alone because it's going to take control you call a little bit of javascript to initiate uh the component it takes control and then it starts adding classes and styles and sometimes a whole bunch of other stuff to your rendering which means with material blazer if we allow blazer to go and overwrite the dom the whole thing's going to collapse in a heap and until we work this out we had some really really strange behavior in material blazer once we had this worked out which is managing this clash which i'll show you in a moment um we got ourselves to a place where um where material blazer can present you with components that just behave like any ordinary blazer component you do two-way binding they'll behave as every other blazer component should but behind the scenes they're kind of paddling really hard under the water to make that bridge between blazer and material components web now i want to i hope here show you what's going on with this so although mark's going to um although mark's going to be taking you through our website i've just got a little bit of it here um so on the left i've got a couple of text fields here in the two-way binding box and on the right obviously i've got our you know our usual f12 i've got developed tools open and so we can see here this first thing here this label label block is this uh first um field and then the second one here is the second both of these fields are bound in blazer to the same component so if i go and type something into the first one and tab out you can see as we would expect the value comes into the second but a couple of other things happen this label here floated up to the top of the field so if i go and delete that and come out you can see the labels drop back down again and that's what material components web is doing for you is doing all of these little micro animations that make these components what we expect from a google website if we look over on the right here let's do the same i'm going to go into the first component but i want you to have a look at this area here in developer tools as i click into it onto developer tools zoom in a little yeah yes i'm at the edge of my seat watching out through okay slight problem is i need you to see both of those both of those fields but let's go into the first one because we will be able to see stuff happen in the second one as i click in did we see anything go on here as i typed something in we saw an awful lot going on yeah that's material components web taking control of everything in the dom adding a whole lot of classes that you could see in pink for a little while there adding a stack of style as well um so it's you know got all of these you know mdc ripple fg size 128 pixels whatever that means means a lot to them but what it does of course is it gives us a very nice looking google style um component now what i'm going to do is if i can get this screen to respond it's just like online demonstrations not responding well i'll go and do the second one yeah absolutely absolutely so again oh there we go thanks very much for that up here we've got first um the first field so i'll go and then edit the second one as i take out the text watch the watch the first field here as i take out the text from the second field nothing because i'm presenting it online there we go there we go what you should have seen obviously or what you will see is that as data that we have bound in laser goes into a material components web or a material blazer rather component one of our blazer components and we pass that data into javascript uh through js interrupt pass it to material components web material components web then goes and changes a um uh it changes the dom for that component so if i can change component one as soon as i tab out two-way binding component two changes and it still changes so what we had to do going back to our presentation we had to get blazer out of material components whips way and the key thing that we understood eventually was this should render so when we first render a component first thing that we do obviously laser renders component thereafter we return false from should render so we don't let blazer touch that component again until we move away from the screen and the component comes out of the dom altogether um we then also as a separation from on the left here your consumer code on the right here we've got the javascript framework for material components web and in the middle there's us material blazer mediating the conversation between the two uh we've got a rather particular um methodology for two-way binding we know it's good because steve saunderson wrote it he put together a project about a year or 18 months ago called i think is razor components dot material design we've got it referenced on our documentation pages and attribution um that was our starting point for material blazer so we we had a great starting point obviously um and he used this technique whereby you do some two-way binding onto a material material blazer component you bind to a practical value no great surprise there so at bind hyphen value equals you know whatever you're passing in um so here we go i've i'm going to try and zoom in a bit see if we can see what's going on so consumer code puts in a value that goes in the usual method to the usual way to value parameter we then in on parameters changed i'll show you this code in a moment or two in on-premises change we then pass this code via js intro into material components web it's a vast javascript library we don't know it google maintain it it's therefore very high quality and at that stage material components web goes and messes around with the dom and does whatever it needs to do at some point so there are api calls then that you tell the material components you say hey i've set this value yeah um john i'm going to ask you to remind me to show you some of those api calls okay thank you maybe at the start of the q a or something i'm going to forget if you don't remind um so we've sent this stuff into this nebulous cloud of material components web and at some point later the user goes and changes the um the component materials component material components web then notifies us we've given us a call back through js interop we get a call back in blazer we change a different component value um and we do that for various debouncing uh reasons to give us um an update if that is different to the value that we've got saved up here we then emit the value by calling value changed the code gets a value back through two-way binding we've then got a little bit of extra um stuff going on in the middle um to remove bouncing because sometimes blazer will give us uh the same value two or three times uh especially if we're inside a cascading value block we don't want that to go into material components where again and again again it's quite an expensive process of course and also can create some oscillation events on your web page so we de-bounce that by making sure that the right stuff only is going to get through to um get through to material components web if you want to see this chart obviously you can rewind to this point of the video it's also based on something in our docs which i'm going to update to this chart the link's down here you can find it if you go to our docs there's an articles link scroll down until you get to the two-way binding article and you find this so it seems like that's that is very important work you've done it seems like something where if somebody's going to contribute or do you know like get involved at the at that level they're going to have to understand but hopefully as a user i can kind of use the components and not need to worry about that that's some of the work you've done is to take care of that for me completely completely in fact i i was meant to show you some of this code um that's the whole point the idea of material blazer is as a consumer you don't want to know any of this stuff you just want some nicely behaved laser components that behave exactly as a blazer component should uh by and large we think we've got there but if you want to get into it a bit or if you feel that you want to uh fork the repo or use it maybe potentially for a um a bootstrap library we've got something here that you could that you could use and if we if we just go and have a little look at the code um just to show you where it is if you go into our repo our repo's got both material blazer the razer class library and our website in the same solution if you go into the material blazer project here and then into this foundation into this foundation folder we've got a thing called input component foundation this file and this is where you can see this hard work going on every component that takes input uses descends from this class so there we go we've got our publicly bound we've got a cached value which i mentioned we use for debouncing down here we've got our value changed event scroll down a bit here we've got component value and component value has a complex setter which then does all of this stuff looking to see for instance if the value of this it's been passed here differs from its cached uh backing value if so that's when it's going to call value uh changed invoke async down a bit further this is where we've got on parameters set on parameter set async so we use both they both call this thing which again as your consumer code passes value in to material blazer this thing sits there again looks to see if the cache value is different to what you've passed in if so um down here it calls javascript so how does it do that this is where we're going to take a look at one of our components this is the select component so that thing where you you know select a bit of texture menu drops down you select the value and uh bingo so in mb select in uninitialized we set that set component value callback so this thing here from input component foundation we select that to a local function here and here we go here it is as i scroll over to the right you can see there's a js runtime call so that's where we're squirting data into um into the material components web javascript library the this is um this is really good that you're digging in at this level because it's it's it's it's a lot of time it's easy to think oh okay you're just wrapping this css library or whatever but but as you're showing here these components have this rich interaction there's this whole kind of they're handling the control the updating and the cascading and all that kind of stuff yeah so you've done quite a bit here yeah to begin with we were just wrapping a javascript library and it didn't work it didn't work in a big way it took a couple of months to work out this process and then it um then it got good um just while i'm here um [Music] mark's going to show you the website in a moment you're going to see that there's another thing to do with uh material blazer which is that we've as well as wanting on the one side to keep our components to being pure blazer components as a blazer developer you don't want to know that there's javascript but then if you've got a web designer who is expecting to get a material theme website they'd like to know that they can style uh ala google that website exactly how they would normally do so whether or not blaze is there and um so we've deliberately kept everything to do with styling way out of material blazer so you can style it a quote material blazer web app exactly as you would any other material components web web app um we've done a couple of styles they're not beautiful but they're styles um and if you want to see them there in this project here material blazer website if you go on styles you can see some um some sass if i quickly open that you can see it's uh oh there's the default one mark's going to show you a rounded one that's it that's all you when you see the rounded star versus the standard the standard material theme one it's 40 lines very short how do you integrate in how do you call scss are you using like um npm tooling or ground or gulp task and knows marshall i'll let you answer this one uh it is npm tooling uh basically we're using uh dart sass and putting together the material css scss and our sdss and uh i'll i'll give a quick example when i'm in the website itself so you can see what the result is as we switch over do you mind if we take a few um few questions yeah that's good yeah um so one is people are are wondering like how it relates to some other material libraries and i always like to tell people like hey more than one open source library addressing the similar same thing is okay right like don't don't get uptight about that but but obviously that is a question as you kind of looked at your options and you're running businesses so you don't want to write code you don't have to right so what what kind of led you to kind of do your own shall i take this first mark uh go ahead yeah um in my case i had some specific needs that i'm going to show you when you see my product that's just about to be deployed to the first client called vectus um so i had some very specific component needs these plus components and in particular the ones i needed were an autocomplete text field at the top left i needed a date picker i needed um this thing called a page data list um where we've stolen uh code methodology from several of the people on the gita channel the laser gita channel and then one or two others and in order to have those i needed to have um a material theme um uh razor class library that would support those as well as everything else so if i was going to produce those i kind of needed to produce everything else also i think one place where we've maybe departed from other component libraries is that we've deliberately kept out of your way when it comes to theming so material blazer isn't going to do anything for you about style or theming it's just going to give you blazer components when it comes to style of theming it's what i mentioned a moment ago which is you need to know the material components web sas and you go and style yourself but what we have added and mark's going to show this to you is a thing called the density the density subsystem down on the bottom right of this screen and again i particularly need that because my app is dense there's a lot of data going on on the screen and i can't have big bulky buttons and uh text boxes i need them to be quite slender to fit more into the space cool and i'm curious to know um i as someone who's unfamiliar with the internals of both matte blazer or material blazer are you aware of any distinctions in the implementation under the hood between the two are they kind of barely doing the same thing don't know i never got into matt blazer mark did you look at matt blazer much uh i did and um material matt blazer uh tends to use uh its own javascript it is not quite as up to date with material and we found that uh i i actually started using that for my product and what i found was that uh the enthusiasm in the community was fairly light and there are many many open issues uh and they were show stoppers for me and that was part of the impetus uh to become material blazer it's a good it's a good product uh but it just didn't meet um my particular needs and you know in fairness to map laser i think i could conceive of projects where i'd rather use map laser to material blazer and it comes back to what you were saying john which is just because there are two seemingly competing uh razer class libraries out there it doesn't mean one's good and one's bad far from it it gives you choice uh and we we give links to mac laser we give links to other um other libraries because for different users different consumers they're going to be a better choice than material blazer got it um we actually had a question from the audience which is some of the reasons that um material blazer would shine or be used over map laser it seems like what you're calling out is certain things like the ability to have these density subsystem utilities and then the fact that material blazer calls in directly to the material design javascript library there's kind of no intermediary javascript that's being invoked yeah yeah although matt blazer also uh isolates the javascript away from you you don't need to know javascript uh for map laser um there you know from a user's perspective they uh or coding perspective they kind of look really similar um and i also use map laser for quite a while but i found i just needed you know my case the the thing that pushed me over the edge to build my own toolkit was i just needed some very particular things and you'll see you'll see them when i show you vectors that i couldn't guess if i rolled my own so i did um it was born out of need rather than design yeah i will say as someone who works on the blazer team the fact that there's multiple libraries kind of helping people solve the same problem is actually a good thing because it means that blazer and razer class libraries are kind of this really accessible way for people to solve their own problems and then share that code with others so love that yes definitely one other one other question that popped up just while you're sharing exactly this on the screen is i i don't see like a chart component or pie charts or that sort of thing are there uh material are there material components for charting no um google does have um a whole bunch of charts and in fact i i use one or two of them in my product um i haven't got my head around whether i'd want to be part of putting google charting for instance into a razor class library i don't know whether google charts necessarily would be by choice or something like say chartist i haven't decided um but they're not part of material theme um okay we've probably covered 70 80 of what material theme can give so far and it is all strictly components uh so input output components if you will cool got it mark do you want to take it away you've got a chart that shows what that 70 to 80 percent uh coverage looks like i i do and simon made me promise not to talk about every single one of them although i was looking forward to that but it was would have been the 12-hour community stand up so uh this is the representation of the components the one thing that i will uh point to you is there is a small orange plus sign next to uh several of the components those are the plus components that do not correspond to something called out in material uh from google they are additions that uh simon and i have made to material they're themed uh uh they are styled uh often using uh the base components um but they are visually going to be in this essentially indistinguishable from a base component uh so the base components are things like uh the cards the check boxes the buttons and uh the plus components are the specialized elements that we needed either for vectors or for optimizer our two products okay let me switch screen real quickly okay so this is the material blazer website again material hyphen blazer dot com i'm only going to stay on this for a moment uh basically what you find on our website is the current release of blazer uh material blazer so in this case the current release of material blazer is 114 and our website uh based on the time frame at which we built the website was hosted on net 5 release candidate and we're running the website on in the browser uh with wasm and that's all i'm going to show you because we are going to do the always dangerous we're going to dog food and i'm going to show everything else in 2.0 2.0 in this instance is hosted on uh net5 release and i will say that this is pre-alpha so uh that's my excuse when things don't quite work we know and there are some there are definitely some drawing oddities that that you will see um okay uh it's it's work in progress okay so this is the website and the menu right here at the upper left drops in place and there is that long list of components for every single material component there is a corresponding demonstration page so let's take a look and let's pick something simple to start with and that would be the button uh how how simple can you get uh button okay so there are there is a card always at the top of the page for the component it calls out the component name and then there are four important links uh that are given to you for the component first of all there is a link to the article that we've written about the component uh that article uh for a button of course is pretty simple um it's got the four styles of buttons uh it's got the ability to have a leading and or trailing icon you can say which icon foundry you want to use it could be material it could be font awesome and it applies density so again there'll be an article for each component the api is the next link and here are all of the members that are uh either uh uh inherited or uh composed for the particular uh component we're not going to try to teach you the api for button if you want to see the actual demo page source that's the next link so here is the uh link into our repository and you can see the demo page is a standard at page with a navigation helper we inject the toast service because our pages uh use toast to show that you've done an action on the page and then comes the uh that table and that table is actually itself a component that we've written for the website uh so we didn't have to repeat that uh table code 35 40 times yeah okay and last but not least we show you what google says about a button so this is the google material button page and it shows basically how you would install a button from npm uh how you would use it use the styles how you would write javascript to access it and basically all of the markup that you need to use uh for buttons now this markup for example this one that markup is what we have done for you in material laser yeah so it's all google's markup and that's also your opportunity to tell us when we've got something wrong if you see a discrepancy yeah okay so let's take a look at um uh and then the uh i just have to ask because you're showing this hopefully that's a lot of information you're generating for each or you're showing for each component so hopefully some of that is is generated so you're not having to manually keep everything up to date or how do you do that i'm curious about your docs setup as well okay uh okay thank you outlook go away i didn't even think it was running now so basically the docs are getting generated um from uh triple slash the api is getting generated from triple slash comments that are in the code um the so it's getting generated each time we do an automated build uh the actual uh component articles we wrote and so they are dot md files that are part of the repository uh the github link is just that it's it's a link to the source for the demo page and of course the last one the google is is created we're using doc fx to generate the documentation in the links so when you go to the component article you can see that we have uh both the uh list of components so you can pick each one but at the top there are also some standalone articles such as uh tell me more about uh femi okay so here is the theming article and it tells you how we how to use um google's theming with sas um is that good john yeah that makes sense okay okay so let's take a look at density because that's that is a big deal to both simon and to me it's a big deal to me because i think i need to have things non-dense because my application is actually running on a series of 42 to 85 inch touchscreens and you can't jam stuff together when you're running on touch screens um it's also particularly impressive i wish i had a photo of the 85-inch touch screen with somebody in front of it when you're using a touch screen that is bigger than you are it's an interesting experience okay so the way google does um uh density is the default density is the wide density we're going to be looking at this button styles card i'm going to go all the way to the densest option and you saw everything we drew and these buttons are now smaller and they are closer together and likewise in the middle we can work our way back to the default density and while we're on this page i'm going to take the opportunity in the website the themes are accessible in the triple dot menu on the upper right corner i'm just going to pick one of the alternative themes i'm going to pick the rounded theme you notice that the title or the app bar changed color the font changed into a uh an interesting font i i don't remember what what it is and here are the button styles because the button buttons all now became these very rounded buttons uh and with different colors okay these things are a great advert for why neither mark or i should have seen something for you matter of fact you get things like our so-called asymmetric theme and that has okay so it's uh the the world is your oyster feel free to theme don't come to us for style hints i'm going to show one other component and then jump to uh real life this is the sliding tab bar sliding tab bar again table uh oh i'm also going to go back to a rational piece okay the sliding tab bar has the same table uh as all the other components and i'm going to start with this one this is the simple uh component and uh or a simple sliding tab bar and for this tab bar i basically have text for each tab it's not particularly useful text but i've got text for the tab and i'm picking the tab just by pointing with the mouse you can also control the tab bar programmatically so here i have a button which is going to basically tell the tab bar to go to the alarm okay so it's it basically simulates a user touching the tab or or mousing on the tab okay this tab uh control is a more complicated tab in that the first tab is an edit form the second tab is text but we are going to stay on this first tab for a minute and uh remember we said that we were doing laser validation so we followed all the asp.net validation so validation rules etc are exactly what you would uh expect so this is a an autocomplete text field i happen to know the type the a i'm going to pick the first item and uh just auto completed avocado uh nice i approve of that okay yes if i put in a number like minus five come on mine minus minus five and i say submit okay couple things happened the two text fields turned red at the top and this is materials notification scheme uh so we're doing uh getting this rate we're doing blazer uh validation but we're using material to signal issues now what you can't see because it's the demo is when i uh said submit with this minus five uh we get the message at the bottom of must be from zero to one the numeric double and the field outline went to red but the numeric double shuffled right and left about three times uh to draw your eye to it also and that's just a google thing that's a google thing okay so that is an overview of our website we had a few questions about the fonts so you're using font awesome uh people are asking if it's possible to use like paid font awesome or how the font awesome like integration works um yeah go ahead simon yeah okay uh just because i had the pleasure of coding that bit um we don't know if it takes font awesome uh paid because we haven't tried we neither of us pay for font awesome um the standard um icons that you would generally want to use with material theme would be google's own material icons um but in one or two situations mark particularly wanted to have open iconic icons so we've built those in um there's this component called icon where you can set foundries and you obviously have to link the um icons uh the icon files in there are examples in the code and there's also an article about it um font awesome i would have thought you can use the paid libraries it would be interesting to know if somebody's going to try it out perhaps they can let us know typically though there are one or two components where you want to be very careful of font awesome so material icons are all square frontal some icons are often not they're wider than they are tall so if you put them into a tab bar for instance you'll find the icons sort of bleeding into the text of the tab so you've got to be a little bit careful um there are circumstances where i use font awesome mart uses open iconic a lot and as long as you're kind of careful about your usage you get a great result cool okay so i'm going to continue this is now the product which is called optimizer and outlook is really attention-seeking yeah really is tell you what give me a second please because this is very annoying um we are going to find out look i'm not even running the end user application of outlook which is what is so annoying i'm also not finding it in it's obviously one of the okay i guess i'm not going to kill outlook outlook wins today so let me give you the situation what we're trying to solve here uh like i said in the surgical process uh it is a uh an interesting process we're working with a small local hospital group that has four operating locations with 40 plus operating theaters scattered across the four locations they're doing about 150 to 200 surgeries a day and that takes a an immediate support staff of about 350 people well you can imagine all the moving parts of getting patients in place getting operating rooms cleaned getting the right supplies instruments etc in place and typically what has happened is the staff is uh absolutely overwhelmed communication is a big problem and there are faxes emails text messages phone calls past notes uh it's it's a it's a very complex environment so what i'm going to do is show you a dashboard which has been built to uh help with this issue this is the dashboard that is showing for each operating theater what the scheduled cases are and i grabbed this data this morning at about six o'clock before cases had started so none of the cases are underway and someone recommended just moving this window and not closing it no okay i will take them up on that there we go um thank you whoever whoever did that that was that was helpful um so this is the view of the upcoming cases for or1 we see the times and um uh we basically have uh information about each case and uh in this day and age this first column is the most important one this is the covid19 test status for uh this case or for the patient uh that is going to have the case and you'd like to see green checks all the way down but there are the occasional uh yellow hyphens uh which indicate that the test has been done but the results have not yet occurred uh or been uh entered and so the that is signaling to the pre-op staff in the or suites that that is something that they have to do before they let that patient go beyond uh the registration area um one of the things that you may find somewhat amusing is it's kind of hard to tell if the anesthesiologist and the surgeon are around for the case so we have a check-in process for both and what you do is if you're the anesthesiologist you come up and you tap on the screen you get detail about the case and uh simon you'll be happy to know and properly removed the pmi the anesthesiologist clicks on anesthesia and they basically have to say yes i'm here somewhere in the uh physical location and i have verified the consent forms uh for the anesthesia and that gives me an overall anesthesia status of good um mark i'm curious this app is a blazer application it's a blazer application got it and it's it running as a pwa on these tablets or how is it um at the moment i am running it uh as a server-based app as we start but the plan is to move to a progressive web app because uh i'll show you one quick feature that is going to require us to use the app on phones actually in the operating theater itself so if i am surgeon and i walk up and i tap on this i get prompted for a pin because the you know i won't go into the details of why but the surgeon has to identify himself or in this case herself so i enter my pin i'm allowed to go through the surgeon you can see i had a uh laser material blazer pop-up indicating that successful login so the surgeon has to check in has to verify the surgical consent forms and most important of all has to physically mark the site of the surgery uh this is all to do with not starting a case and uh thinking you're going to operate on the left knee and the right knee gets prepped and the surgery is done and wrong site happens more often than you would want to know about oh boy okay so that's that's the step again for the surgeon well if i go back into this case and go to the room tab again this is all this is the surgical safety checklist it is a three-step out and it's done at specific times it's before you start the anesthesia before you make that first skin incision and before the patient is leaving the or so if we look at this the patient actually has to confirm their identity the site has to be marked the anesthesia system has to be checked pulse ox has to be on we're going to say no to everything and you notice that when i uh or when i finished this you probably didn't see it because red x went to a green check because we we have completed this part um okay that oh sorry what i started to say is this checklist is going to move to the phone and at that stage we will be uh doing the pwa i can build the application uh with i'll show you one quick thing here's the about and the about has that very familiar we're in debug mode net5 uh windows 10 and that says we're in server mode yeah so on this topic mark um sure you've the demo site is in blazer server the your current app is the laser server no the blaze the website is in wasm awesome great sorry um there's a question here um about what the support ability is for material blazer um probably supported in both server and wasm for production environments is that true correct so you're watching it run in server remote here i'm going to just say let's go over stay in debug but go to webassembly i hit control f5 and now we're about to see that same app in wasm yes wow so as you're bringing this up a question is since as a web application that's being used in in medical where things are going to be time sensitive and stuff how do you handle things like if there's some sort of outage an internet outage or network outage or stuff i guess that's part of where pwa helps um it will help some but believe me when the network goes down basically within a few moments your entire operating environment will be down uh you're totally dependent so we are actually running the app um uh on a locally hosted uh so here we go here's our web assembly we're on an internal network which is isolated from the internet got it okay and uh redundant power redundant servers redundant just about everything but uh again you don't want to be around so i built that in debug mode but here where browser wasn't and if you look at the dashboard the dashboard works just as it did before and there is i cannot tell any difference in performance of the ui between the server mode and the web and the wisem mode at this point but we don't have uh you know if you if you think about it this is a pretty small application if you've got 40 operating theaters with a pc in every operating theater plus let's call it 10 or 12 of the big touch screens we're talking about a very small number that is easily handled by server side likewise that was yeah okay so i i think maybe one thing i didn't say um material blazer since somebody asked this question in 1.1 and 1.0 is an at standard 2.1 and quite happily runs on either wasm or server material blazer 5 is dual homes and is net standard 2.1 and net 5.0 so your nuget package will have both packaging so to speak and so if you're in a uh three a net three environment you'll get the net standard 2.1 if you're in a pure net fi if you're in a net five environment you'll get the net five uh version so and with that i'd like to turn over to simon unless there's a specific question about uh what you see on screen no i think we're ready what's simon i'm aware that time's moving on so i'm going to try and race through this is uh we've been going a bit over an hour already so uh this thing that you're looking at uh sapphire are you on my screen now yes you are on your screen excellent so um this thing that you're looking at my company dioptra this is a thing called vectus which is a loan management and risk management system for a real estate lender what you're looking at here is a fairly late prototype almost complete a little bit more work and i'm going to be deploying this for my first client later this month this client they lend money to uk uh property developers people who develop small units of housing either houses or apartments and this is going to be their dashboard to manage the entire business um the reason for them to have this uh product is it allows them with a very small team to scale from a relatively small loan portfolio to a much larger one without having to hire a whole bunch of analysts to manage vast spreadsheets that a captured the data wrong and be taken off a lot of uh personnel power to uh to drive so here we go um i'm going to focus in on why material blazer on this thing rather than showing you the product per se so as my user comes in they can have a look at their borrowers they can have a look at developments on the system so one borrower one of their clients might be developing more than one location they might be developing some apartments in one town and um houses in another and as i just zoom out a little here this is where we've got one of the plus components a thing called a page data list so i can just page through data you can't see the nice um uh animations because of the uh online demonstration but there's a something like a 30 millisecond animation from one page to the next it's tempting to think that that's there to make it look nice for the user and it is but actually the reason is to mask my database access that 30 millisecond enough time for that to go to the server to ask some more data for the server to grab that data page it up and sort it and form it into a nice view model and return it to the app while the app is still fading out one um one slide so this is part of what i need the material blazer for is to have the various animations that would allow me to mask what's going on with um uh server access so i don't need to have spinning waiting uh uh progress indicators all over the place we had a question on how you do animation in general is that something that that material provides for you or something that that you're doing manually or however in in the vast majority of cases material does it um none of us are very good at css with this thing um yeah we sweated blood for a couple of weeks trying to slide out and fade and fade in from the other side so we've done a little bit um all of our css is co-located with the relevant components so if you want to have a look at the page data list that's what you're looking at here and you want to see how we did the css it's in the mb page data list directory um we can also have a look at the borrowers and this is where we get the next component that i needed which is a debounced text field so that i can do searching so if i type in a particular borrower name this is fantasy data we go 30 second timeout after my last keystroke and off to the server again to get a reduced data list and i find that i've got this borrower click through and this is the point at which yeah live demos so well and so just to be fair to you what's going on is we're using a browser-based application for our screen sharing so it but it practices the internet and tackles your browser pretty heavily yeah it's taxing me as well let's see if we can get that back there's a couple more material blazer bits i want to show it's not so much to do with the details of fintech or proptech here we go so here's the details of a particular borrower we've got a map of uh where they're based and now here are their loans we've got another little search box they're not going to look at that i can click through to a particular property so there's a loan here and here we go here's the dashboard page for a loan it's got some stuff that's very relevant to my client which is over here there's a map of the locality which shows publicly available data for how much different apartments and houses have sold for in the last 12 months within a one mile radius this is a little bit of northeast london over here we've got some financial metrics so we get to the next um component that's particularly close to my heart which is numeric fields and again this is why i needed new uh material blades because there aren't numeric fields that were quite what i needed in other in other component libraries so this one here it's to begin with a normal text field which has formatted numbers in it as soon as you click into it we then do a little bit of javascript and turn that text field from a type equals text field to a type equals number so now i can't type in letters i'm trying to type lots of letters not working uh i can put in a different figure two to the power six that's two million pounds acquisition price for this piece of land rather than one million and if you look over here that the financial metrics as soon as i click out there's an update and that's data zipping off to the server going onto the database whole bunch of calculations happening on the server coming back to me and i display them if i zoom out somebody asked about charts didn't they so i do use charts there we go there's one uh if i make this a ridiculously expensive piece of land at 10 million pounds expensive for what's being built on it and as i tap out if you watch this chart on the bottom right we fall oh there we go you can see uh what this means is all the lines on the right hand side end up below uh uh below the origin which means this project's comprehensively losing money um that is pretty much it the last thing that was particularly relevant the autocomplete we've already seen that um going back to this map i'm curious to know simon what are you using to render the charts in your application um if not they are google charts okay um and i've just got to kick down into javascript so i've got to get a load of data in blazer format it correctly do a js interrupt call and then handle the charts from within javascript same with the map here which is a open maps map this thing is linked through to a autocomplete down there so if i click one of these sold units up pops this postcode that's a british term for a zip code in the us so now we're looking at the one cell that's happened in that postcode i can click that and we've got our autocomplete again i can select a different postcode some different sales and our location has jumped as well these are the co oh there's one last thing to show you which is a confirmation dialogue if i change the status of this thing i've i'm the lender i've decided it's a terrible project loses money hand over fist i decide i want to reject it but i can't change the status i can't click it because i've got to do that thing a bit like github put in number release the status changed button and click it and that's the thing that we've put into material blazer called confirmation dialogue these are the reasons why material blazer wow cool we had a couple of questions on the hosting and i think so there's a few things is is it a server or web assembly and then also like where you're hosting it uh so uh you'll be delighted here it's all on azure um so i've got a cosmos database sitting behind it uh event sourcing so it's just any old data store i've got a server app so just a normal web api um sitting in front of that using azure b2c for security because obviously you know this is um a financial institution using this stuff they've got to have security so i've got tight security b2c um and then the blazer app i'm using blazer server at the moment because my usage of blazer is heavy enough that um interpreted webassembly isn't really going to cope very well i'm looking forward to the point at which you know hopefully it's in dot net 6 i'm not quite sure when you get to aot webassembly at which point i'm going to hurriedly move over to using assembly instead awesome i gotta say as someone who works on blazer it's so cool to see these applications that are being deployed for different industries like mark's demo with a blazer app in the operating room just totally blew my mind because a it's a problem that i never would have thought needed to be solved um and b it's just it's really interesting to see what happens when you give people um who have knowledge about certain problems and backgrounds there the technology to build a solution and then you have all these super cool things happen so thanks for for sharing those um those demos with us yeah i mean what i'd say about my business is it wouldn't exist without blazer i couldn't put this together in javascript or any other uh platform i i know c sharp i i've got a common data model between the clients and the server this is the only way for me to do it wow that's so cool and i'll jump in with the same type of comment i uh in basically a c-sharp uh not only but c-sharp primary uh primarily developer and the ability for me to have a data model uh that uh was identical between the servers and the client was uh just absolutely critical to being able to build this app and you'll you'll love this uh the reason that laser was so attractive to me is that we're coming from a silverlight application am i allowed to say that and silverlight did share it had its share of problems but it did share the code between the client and the server also and that is just unbelievable when you can do that compared to having to have one model in javascript typescript and another in uh your server-side language yeah totally taking that cognitive load out of the developer makes you so much more productive when you're busy yes no doubt i mean it's great to have the option you know somebody's like i bet you could use angular and it's like you could or you can share your code and your data model on client and server there's great applications there's tons of people building great angular apps using asp.net core on a back end great do it if that works well but as both of you said in your cases this has been a great solution for your business needs so yeah i mean think of angular don't you think i've got enough gray hair already yeah neither of us had gray hair before we tackled combining blazer with uh material unfortunately i'm mostly gray here you vanquished the phone and made it out here i will say i've gotten a few gray hairs in my day you you know yeah but it started wow wow well thank you so much for joining us thanks for sharing the demos and answering all of our questions your abs and your doc set up and material blazer and other alternatives and all of those things um your knowledge was super valuable how many for everyone was excited to hear what you had to say also if you are watching this live or maybe you're watching the youtube video after this was live streamed thanks for taking the time to watch this video um and we look forward to seeing you at the next edition of the blazer community stand up which will be the second tuesday of january yep sure what the day is but you can look it up on the calendar um we're gonna have some super exciting guests once again and it'll be a fun time awesome for having me yep thanks so much wonderful all right i guess i'll drop us to the uh goodbye theme goodbye everybody bye [Music] folks [Music] [Music] [Music] you

Channel: dotnet

Views: 11,172

Keywords:

Id: yzLDvQ-bOw8

Length: 85min 5sec (5105 seconds)

Published: Tue Dec 08 2020