Blazor WebAssembly: Inside/Out

okay we should be live now hi everyone just to make sure that people are actually there can you just post a post in a comment that you can hear us that everything works fine streaming those 27 of you watching this hey okay thanks thanks ben i guess this this works so i guess we can start so once again uh hi everyone uh welcome to our june session uh today we have a very special guest uh conrad kokosa uh he's yeah brix thanks uh conor is a well-known speaker in the net community and also the author of a well-known book on performance one of my favorite books by the way and he's gonna talk about blazer today and guess in his style going like deep enough and showing us how other things how the things work with blazer um i would now hand over to bend for our standard introduction in the news about the group and then afterwards thank you for the introduction so i will keep you trust but there are a few things to mention um this meetup today is sponsored by microsoft and uh i want to highlight two offers from microsoft austria this is on the one hand side the microsoft discover workshops and on the other side the azure dev docs if you click on or click i open one of the links we post it here you will find the microsoft discover workshops on this page you will see different kind of workshops that are offered by microsoft partners so take a look if there's something interesting for you and the second offer is the microsoft azure dev talks so this is a regular podcast with a discussion about different topics eager and i had also the pleasure to participate in one of the deaf talks about laser with our customer andrizaki and yeah we talked here about porting a project from angular to blazer so if you're interested check out here um this series of azure dev talks then next thing um maybe you have noticed our meetup group is also part of the net foundation meetup organization um so if you take a look at our um meetup page you will see that our meetup is uh sponsored by the dotnet foundation and there are a lot of different meetups and so you can take a look and find a lot of different meetups with top topics about net in general and yeah just check it out and you will see all these meetups worldwide and can join whatever you like okay this is um yeah the dotnet foundation virtual music group and that's it already from my side and so there's nothing more to say and we can finally start with the topic so we can't wait to see what comment has to share with us and yeah one of the stage is yours maybe just one more remark as always we will have a q a session at the end so please just ask your questions in the chat if there is some really interesting question maybe i will interrupt conrad but uh the talk will take you roughly one hour and after that we will have a q a question so feel free to ask your questions bombas in the chat thanks so conrad please stage is yours hello everyone then uh as i was introduced i'm a dotnet guy so i really like dotnet stuff in various forms and recently i discovered blazer and i thought it would be nice to share some findings and in general how it works and how it was created so that's that's the goal for this of this presentation and it is all about the project that i'm creating in fact i'm creating two projects in blazer and one will be open sourced one will be commercial one both are not yet publicly available but we will return to that so in general maybe just a few words from about me then uh as you may know me already and as igor has said already i'm an author of this book productnet memory management which is over two kilograms about memory management in dotnet and in general a.net freelancer trainer consultant speaker and title three internals performance and so on so uh that's that's the thing i'm counter of dotnetos initiative which is all about the same thing so we provide premium let's say content about.net like conferences and to even met with igor on our conference we were thinking about how many years ago it was because the time is passing by so fast so it turns out it was a few years ago at our dotnetos conference and i'm also still prototyping this out of memory game which is a game about dot net internals and performance and it is a card game so if you like card games this is something for you because it is all both for about microsoft and dotnet and the card game and it was a physical game so you can go to this site and download it even and print simply because it is physical so you need to download the pdfs print them cut them and then you can apply there is a whole instruction how to play it but i was thinking okay but that's pretty tiresome like no one will probably do that like no one will download it no one will print it and the potential of it is much bigger so i thought let's make an online game about the same thing let's create an online multiplayer game uh which will be out of memory online game and with the same rules and so on and then the idea was to use blazer and that's why i'm talking here today because i decided to use blazer and i felt it super nice and working so uh that's that's the first project out of memory a game which is simply online game will be online game and um it will be free as far as i planned today and all but also for sure it will be open sourced so we also will be able to play with the source code contribute let's say suggests new cards and so on and all this in blazer and other stuff that i will cover later on a little so and that's why blazer and in the end if you are interested in such things that i'm doing you can for example follow me on twitter and that's all about me uh recently i published this uh pre-sale pre registration for the course which is the next level after the book if you don't like reading or if you want to have some more interactive way of learning and also with much more practical say ways of learning about net memory there is dotnet memory expert you can look around and that's that's the let's say marketing site i will do i will make a living from that so i'm just a little excuse of saying about that so i'm coming to the presentation let's say uh blazer and i assume you know something about blazer because there was other talks about blazer here and there are many other talks about blazer all around the world but in general just to have a super nice intro super fast introduction about blazer it was about being tired let's say a little bit tired of angular react view and other javascript frameworks so you will be able to write something in dotnet ecosystem instead and that's the technology for net ecosystem going to front end i would say so when we look at the definition we will see that it is a framework to write rich uh web ue ui experience using html and css that's uh still we need to use it but instead of javascript eventually we can use something different like c-sharp and that's super nice because we have all the tooling and other stuff so there is this super popular demo about that stuff that was presented many times and it was even something like that at the very beginning when the first prototype was shown so this blazer in general is single page application so and it is designed to be single page application and there is this demo which is just showing us super awesome index page hello world there is a counter which just reacts to the button and increases the counter and there is this weather forecast api being called somehow to simulate calling the server database whatever and and this demo is maybe not super sophisticated but super nice thing about all that stuff is it is written in c sharp and that's super important for dotnet ecosystem i believe because we can write pages um in c sharp simply so how it did it started because probably you all know the thing that the blazer is and it works and so on but the history of blazer seems to be pretty interesting also so blazer was created as a kind of let's say playground prototype and showed at ndc oslo and this is one of the most well known conferences around net microsoft although recently it is changing slowly but pretty popular conference about software development in general and uh stephen sanderson was the and he is still working in microsoft he was presenting this demo about various technologies that are coming to web applications and one of those technology and there were some standard ones like losing as far as i remember kind of localization or so but uh he also showed the experiment something for you to be amused by something to show and see the reaction whether people find it interesting or maybe totally not so blazer was a kind of experiment shown as we see four years ago we can say almost my yeah almost exactly four years ago probably so uh the goal was uh of this demo um and to to to provide something that is more advanced that is not advanced but something that allows you to write some the whole thing in c sharp and what i found it super nice is also that the outer with the steve sanderson is not a guy that has come from nowhere but he was a he he is an author of knockout js super popular and well written library for binding in javascript so you have ever used knockout.js i was really impressed by this library so i was super happy to see that this guy now created something new which he has coined the name blazer and if you haven't watched that talk it's really worth to see it especially that part when he was presenting the blazer and for me it was just a mind-blowing experience to see that he created that and he that it works because what we have what the steve has done there was to take a runtime.net runtime which was called.net anywhere because it was the smallest working runtime available at that time it was the runtime written by chris bacon a guy from google that has written uh the whole dotnet runtime in c because he wanted to and he did it uh so it was working and it was pretty small so it was uh pretty easy let's say easy maybe it's not a good word but it was easier to use this runtime instead of something much more bigger than a dot net core for example and he take he took this runtime.net anywhere and recompile it to webassembly to run simple console application and that was printing hello world to the console in the browser so he what he literally did was he took this runtime he recompiled the whole thing that was written in c to the web assembly and he ran this runtime inside the browser and then the simple console.writeline call was translated to printing something to the console in the browser and that was something like mind blowing experience as i said because it was the whole dotnet runtime running in the browser in web assembly so super super nice and also he saw he saw he presented the blazer itself so above this thing that was just printing something to the console he presented the whole framework the initial prototype of the blazer framework that added the whole thing needed for making this a web app so printing html in javascript interrupt in general pre you know rendering razer views and so on and so on so it was really impressive for me as a kind of demonstration of pretty mature technology like it was really working and it was doing what it was supposed to do and mike so people were impressed and microsoft probably was also impressed so um internally there was a hackathon next month uh that they were participating in and they decided to play with display blazer thing so microsoft itself and some people related to them has created has a participate in this hackathon playing with this blazer prototype simply to see what is in the end possible and uh since then we we hear about blazer more more and more because it seems to be it is becoming pretty um important technology for microsoft so since this 2017 we heard about blazer many times in various conferences.net cones built and so on and so on they were all the time announcements about blazer being improved being published and so on and so on and uh finally in september 2019 uh one of this blazer technologies was announced as a available uh for production let's say it was blazer server and it was on the dot net conf when the dot net core 3 was announced also and this blazer server was not exactly the thing that people were expecting it is another technology that we will cover soon but it was something that under the whole umbrella term of blazer because the whole blazers since and during those two years has become something more than the demo that the stiff has presented it was become kind of let's say architecture how the runtime can in cooperate with the other components to create web applications and not only web applications as we see in the current announcements and then only late one year later the blazer web assembly was announced at the time of dotnet core 3.13 and that was the production ready blazer web assembly technology which was eventually after those three years the thing that the steve presented and for me blazer web assembly particularly is the most interesting one not the blazer server but the blazer web assembly because it is the whole technology that is running inside the browser as we will explain soon so uh that's like one year uh of march 2 of being on being production ready since it was announced and now we see the future of blazer like more things are coming like blazer desktop blazer mobile and um i have a little bit elaboration about that later on but we will see that now it seems that the whole blazer becomes pretty big stuff which is covering various technologies under the same term but today and mostly i would like to explain this difference and stay and concentrate on the blazer web assembly so first of all blazer server as this aerial technology is a kind of client server technology where all the logic of the of handling the user interface is inside the blazer we still call it a blazer because it is let's say core of the whole concept so we have this blazer it is responsible for rendering razer views it has all the handling of the ui handling and user interface events and so on but it stays on server it is hosted by isp.net core application and the browser becomes super thin layer which is just responsible a kind of proxy which is only passing some messages to the server and it is just rendering responses from the server but the all things are is happening on blazer site and we have this two directional connection uh in form of signal r which is just sending all the stuff so the browser here is simply really really thin proxy uh if someone clicks something on the button this message is going to through signal r to blazer the blazer reacts to this event calculates what should be changed and increment and informs the browser about the changes in dom let's say in in a kind of difference what has been changed uh with respect to the previous state so that's the blazer server and that's interesting technology we can we we must say they ask uh use cases probably for that uh because it is everything on server here so that's nice and the browser is super thin layer so there is nothing much happening in the browser in the end the problem is about the signal our connectivity here because if we are in a high latency and scenarios now we have a problem because the ui may become a little bit less responsive because as i said every reaction to every you know everything that the user does is just sending we are having run trip to server and then back so if we have high latency we will see some delays in the user interface itself because of the connectivity problems so that's risky and the benefit is that the download size is small because the page is small it is a thin proxy hold only everything is kept on server so it is safe you have full security you don't have to be worried that someone will decompile something on the client side while still it behaves kind of single page application so we are somehow connecting both words here and performance is also nice like it is mostly the performance of the asp.net core and signal r which is nice so we should be not afraid of the performance itself and the scalability but as i said the problem is with the latency so then what we should do probably if we are in scenario when the users are using our app in high latency scenarios and environments we should not use this technology and obviously we don't have enough light support because everything is hosted and the whole communication needs server to react to anything so we need to be online all the time and for me and that's kind of trademark of this quotation here it is not that fancy it is not the thing that steve has shown for me it is kind of an additional possibility but not the one which i perceive as a super interesting what i'm perceiving a super interesting is blazer web assembly which is super easy from the architecture point of view because it is just the whole application being uh and running inside the browser so we have the browser the browser downloads all the stuff downloads the whole application and this application is executed client-side so we have fat client that in the end if we don't have to does not require any server communication dot doesn't require to be online because everything has been downloaded so that's nice and it can be hosted as you wish so there are some benefits of that and for my game particularly so for example fat client computation because now we have fat client which is just uh anyway sorry whatever we want to have we can calculate on the client everything will be written in c sharp so it is nice and we don't have to be worried about javascript and all the building of it and all the pipeline of handling javascript and so on we everything have in c sharp and it will be executed on client side so it scales up indefinitely in fact because the clients are paying for our calculations we don't paying we don't pay because we are just offloading it to the client so we in the end those calculations doesn't cost us nothing so it is super nice and what is else nice is that it compiles to static files so you can compile your whole app host it somewhere uh with the help of for example static web apps and that's all and hosting such static files is also much cheaper than the whole isp.net core for example to host some spa applications so that's super nice also benefit over that and obviously it may support offline if we don't need to communicate with the an api or server and then it may just work offline and we don't care so that's nice and obviously more those benefits can be somehow said that okay the everything here is the same for fat clients written in javascript or typescript that's true but for me that's not the benefit because i don't particularly like javascript or tyscript and now i have everything in c sharp and i can share everything between the client and server i can have some data structures being shared between client and server i can have algorithms that are shared between client and server everything is in c sharp everything can be shared if i want to so that's that's super nice everything is in dotnet unfortunately there are some problems currently the first problem is about payload and overall size of the page because we need to download in the end the whole runtime as i've explained so that may increase the size of your page and also currently the speed is sometimes people are complaining about the speed because everything is running in the interpreted mode as i will cover so that's not the thing for probably for super cpu intensive calculations but on the other hand probably clients in the end are not super cpu intensive applications so that not every time needs to be a problem and by the way both problems are going to be addressed by microsoft they are thinking about it they are aware of that so dotnet 6 has some announcement and i will cover that later on so in the end because the introduction is as let's say long there are not so many applications written in blazer web assembly i especially in like production ready production available manner i've met one company in poland which is writing this modulation software which is for modeling software with the help of the ui based application and here this modeling is happening in a mode which is using blazer web assembly and they found it super convenient because uh they are implementing the whole thing with the help of event sourcing so even sourcing is nice uh because now they have possibility to make calculations and projections and everything may be done all both on client or client the decision is this so they can easily move calculating some things from server to client and they will offload the calculations obviously and then they will again benefit by from the cost because the client is buying by the cpu power and not you by your hosting payments so that's one of the examples of applications that you can see uh and probably you will be able to see because as far as i know that's something to be published in few weeks days maybe in a month or two so you can look around and then you will have a opportunity to see something that is production ready already written in uh laser web assembly okay so just a few words about the web assembly itself because i'm saying web assembly web assembly web assembly but what in the end is web assembly is so a little bit of a history again because i really like to explain things and not only what they do but how they were created and how they are invented and so on because it helps us to understand things so in the in general the concept of web assembly uh is to run code on browser on the client side in the browser efficiently uh we want to execute code on the browser obviously since many many years we need interactive applications so if you want to execute some code on the browser on the browser in the browser on the client side the javascript is the obvious choice and the javascript is the kink and we know all that but there were other attempts like everyone remembers probably rest in peace i will be flash or silver light from microsoft so they were technologies addressing similar problems they were about a little bit uh different scenarios at least at the beginning because they were about interactive nice graphical things with animations and so on at least in case of the adobe flash and silverlight was something that was trying to be plug-in for for hosting.net applications with the nice user interfaces too and the problem with both of those approaches was that there was a plug-in for a commercial product in the end because both they even they were available for free they were driven by a single company that was as somehow you know driving this project by itself let's say and in the end there were plugins and we because of the security reasons we are afraid of plugins and because plugin may do everything in the browser in the end so it may be very harmful so there was this the gap between the javascript that is okay and it allows us to do a lot of things but it is not super efficient mostly because it was not written from the scratch to be efficient and that's by default let's say and on the other hand we have we had plugins which were just insecure so the web assembly was an idea but before that even uh people tried to fill this gap somehow what could be done to run efficient code on the client side and there there were some sim inter super interesting projects that i wanted to mention because this is a talk by me so i'm always giving myself a kind of you know a privilege to talk about low-level stuff let's say so there was a project which is called smjs it was a trans pillar from c and c plus plus to javascript and that's something that is really scary when you see that idea but in the end it was it was and it still works really nicely so the idea was okay we have a lot of nice programs in written in c or c plus plus like games for example and um what we what if we could recompile this code to javascript and then execute it client-side sorry so there is this compiler which is called temp script and it is based on the super powerful super powerful tool set for compilers called llvm and it was working pretty nicely you can even now use this m script and for recompiling your c or c plus plus project to javascript it was working pretty let's say surprisingly so surprisingly well because this javascript that has been produced by this uh tool was really efficient in terms of that it was the code fine-tuned for performance for example and for sure it was not the code that the regular javascript programmer would write so for example it was the zero alloc javascript because we were recompiling things from the c or c plus plus so from the languages that doesn't have man or doesn't have automatic memory management so the javascript could do a similar thing they can just pre-allocate huge buffer let's say byte array and use it as a memory uh without any gc because everything was pre-allocated every also there was a some tricks for better handling of types and in the end that was working so we can play doom with the help of it unfortunately uh it is still downloading but as you see here in interactive you you can see here doom that was recompiled from c to c plus plus to javascript and it is running in our browsers currently uh really really uh without any delays so that's pretty impressive and this project was in the end is still pretty impressive it was able to hit half of the native spat speed sorry so pretty close to the native speed of the applications so there is freedom there is even the dos emulator that you can you use and run in browser with the help of this project but it seems as a scary idea in the end and it was postponed and duplicated in favor of web assembly that was introduced in the meantime the same idea was created by google so they wanted to create something that will be able to run any native application in a sandbox inside the browser so it seems like kind of plug-in that will be really sandboxed so it will be secure and so on and so on and the goal was to execute any code that is for example intel or even the irm code or even the llcm directly intermediate representation of the binary code of the llvm itself so it was designed to be pretty flexible but it was a google google project google's project so in the end it was also deprecated in favor of web assembly because the nice thing is and what i'm trying to say here is that they were approaches to this problem with various from various parents from various even important players like google that tries to solve this problem but happily and fortunately this web assembly standard was created so the huge benefit of it is that web assembly is standardized it is not a project driven by microsoft google or anywhere on any community it is simple standardized by the uh proper bodies let's say a binary instruction for a stack based virtual machine so it is kind of ill.net if you know net il is an intermediate language describing your program in an abstract instructions for an abstract machine that it then will be somehow interpreted or recompiled to native code so webassembly is something really similar so we have some set of instructions that describe your application in term and to be executed by some a virtual machine that is stack based and then there is only your the choices of particular browser how this web assembly should be executed the thing is that it was from the very beginning designed to be fast like it was designed to execute applications on brow in browsers in the almost native speed so the whole concept here is just for that it was designed to be portable to and then uh to be fast and those instructions should allow to execute your application in a fast manner uh so the first goal here or and the standard that is already agreed is that you have possibility uh to compile your na low level or high level languages because low level for me is assembly but and the cc plus plus is intermediate level or let's say high level event so you can take any program that is written in c c plus plus rust any native application in the end and compile it to this web assembly format and then it will be executed by the engine which is just embedded in the browser so the browser will be able to execute this web assembly and it will be a they should be able to do that in a highly optimized web manner because that's the goal so we we really need to understand that because i sometimes see some confusion because now we have two runtimes in the end and two intermediate languages because we have dotnet which is just um the whole ecosystem and the dotnet in the end compiles c-sharp f-sharp whatever language to intermediate language which is then executed by dotnet runtime so that's the first dotnet first manage runtime that we have in mind and on the other hand we have web assembly which is the second managed runtime which is able to execute in browser at the web assembly code the those binary instructions created for the separate virtual machines that will be executed by the manage runtime of webassembly we can call it probably web assembly manage runtime so we have two managed runtimes and how it is cooperating in the end so let's move to the blazer part and the thing is and what the steve was has shown you and us in the ndc talk we want to run c-sharp code so we need dotnet runtime to do that but web assembly is generated from unmanaged languages like say like i said from cc plus plus and rust so although this is slowly changing and and kind of spoiler that's not totally true here but let's say and assumed and especially three years ago it was true we would we were limited to compile only and manage languages to web assembly so we have c or c plus plus program and then we can manage to do that to compile it in web assembly so what the stiff has done was to compile the whole runtime and that's again needs um emphasizing because that's mind-blowing he took the whole run time which is written in c and compile it to web assembly which was this dotnet or anywhere at the beginning but it was too limited so decision was pretty fast to change it to mono because mono is a language is a runtime which was for the very beginning um designed to be multi-platform in opposite to net framework and all the consequences when it was ported to net core so for example mono has much better interpreter which was well tested because mono was used for submarine and zamarin was used for ios and ios is not allowing to jitas so we need to interpret so in the end interpreter in mono was pretty nice nicely working and it was available out of the box so now the mono is being used when you use laser web assembly and uh that's how the final process looks so uh at the pre-pre-built time you compile the whole runtime to web assembly obviously we don't need to do that and that's good because it takes a lot of time and we have mono compiled to web assembly then we during the build time we simply built our dotnet app as a any regular application with obviously some dependencies which allows us to use razer views and makes all this application a blazer application but it is a regular compilation all the assemblies are compiled to the il code and they like producing assembly assemblies assembly files as any other um build on 4.net application and then when the runtime starts when in the end when the when we go on to the page which is just hosting blazerweb assembly there is this bootstrapping javascript that downloads and executes executes this mono which is running in webassembly and so now we have this first stage in which we run the whole runtime running being executed by the first runtime the runtime being able to execute webassembly which thanks to that we have running dotnet runtime inside the browser and because and because it is a regular.net application regular.net runtime uh it is able and with the help of this javascript bootstrapper it is able able to download the all additional dependencies like the old assemblies required for your application and then the runtime starts executing this code so you have the dlls inside those dls you have an assembly and inside this assembly you have a regular il for your application and mono with the help of interpreter is starting thing to simply and execute it instruction by instruction and that's one of the let's say problems of the current approach is that unfortunately we need to interpret interpreted so we look inside our assembly and instruction by instruction i want to be more specific il instruction by il instruction we are executing our application in interpreted mode and that's pretty a lot of work as you see but what is nice that it is simply working so if it goes to a sample site that we we would be at this hosting in the end the application in blazer uh i don't want to use okay so we will see here that when we go to the stage a lot of stuff is being downloaded so we see here that although this application is really a simple application as in any demo that is presenting blazer we see a lot of those resources being downloaded so we see bootstrap of the of the whole blazer hosting let's say that we'll be able to start executing the mono runtime itself and obviously it is a little bit of cryptic here because it is maybe not minified but at least all not all the names are super readable but what we see in the end is that this mono runtime is downloaded so we have the mono.js bootstrapper that is kick off in our mono runtime which is mono.wasm and that's exactly what i said it is the whole runtime being compiled to to the to the web assembly and then because our app starts to execute we see that it is here the dll the assembly itself that it starts to exist contains our application all together with all the dependencies so we see that out of the sudden our page starts to download all the dlls of regular dotnet applications uh and they contain il code as an irregular dotnet application so we if we see inside the micro app dll which is the main assembly for this particular application and when we look inside the result of the content of this file we see simply that it is in the end a regular dll that it could be even used in the console application it starts with those name m and z which means simply it is executable library the dll library for windows for windows application and receiving this message that is in every application that is be to executed inside windows so this is a regular library that is being used because mono is simply downloading not downloading but it's simply populated with this dll and starts to execute it so pretty sophisticated things are happening here in the end uh because we need to do a lot of kick starting let's say and then imagine uh that this mono which is now interpreting various things we need to interpret a lot of code because it needs to interpret our application which will call probably a lot of other dependencies so we start to interpret lincol and other collections and other libraries that are just all together join going to be used with our application so in the end if you realize how much things is happening here underneath i'm still pretty impressed by the speed like it is really working nicely and taking into consideration how much stuff is going underneath so in the end the blazer and what i like it the most is it is maybe hosted in standalone mode obviously you can host it in sp by isp.net core your millage may vary because you it is up to you how you host it so you can host some static files from asp.net core app but standalone hosting is super nice and that's because i really need this connection of technology so if we can host everything statically we can use static web apps and we have client which will execute some code on the client side and if i need an api i can use other functions and then i have this super nice combination of technologies which are super scalable they are pretty cheap if you are hosting it wisely and you don't have any server to host your application which consists of those elements that's that's super nice and that's exactly what i'm using for this out of memory game and if you would like to play with that that was probably even presented before when the blazer was presented at the talks here so there is a template that you can use for exactly such kind of deployments that where you have web assembly application which is just calling some azure functions with some additional shared library inside and then you can create static web app inside the azure portal and there is a preset that will configure everything so you will be able to work with that out of the box and i really like it so in the end my particular game looks like that at least at the moment and probably i will add some more elements here but currently it looks like that so i have my a web application which is a game which is a blazer web assembly uh which is written in c which i like and it is being downloaded to the client and it is then inside the browser and everything happens there i need some authorization so i'm using also authorization as a service currently i'm using out zero service to do that i will think maybe i will use something else uh but doesn't matter what is important that i don't need anything like and again i don't need server to make authorizations and then i get some kind of authorization providers and provide the provider that will allow me to authorize myself so for example then obviously my application is an online game so i need a kind of communication with a server and this server is just an api exposed by azure functions so for example every time a player plays a card and there is a comment for a particular azure function that to issue this command that a player has and wants to play a card so there is an api on that level uh with the token that i obtained from the authorization provider and then i store the whole purse this state of it is persisted in cosmos db so the whole through about the current state of the game is in cosmos db because why not like cosmos db is another nice fancy stuff that we can play with so and also super scalable so if i will if i suck i will succeed with this project and millions of people will start to play i have scalable technology at hand at least with the database also and because i have a comment here that is issuing i'm issuing a command to the other functions i'm calculating what is the state update of the game and then i have some events that will inform all the players what happened including the player that has issued the comment whether it was what are the effects of this command and for that i have this bidirectional communication with the help of signalr i have signalr service for that which will be just all again in a scalable manner able to inform the clients the connected clients about the updates of the game so they will be coming events coming from the signal signalr to the client which most i mean almost all the time they will be issued by the other functions just informing about the consequences of a comment so what i like here is that i obviously that everything everything here could be written in javascript uh for example if i would be pretty pro efficient in javascript probably the client could be written in javascript but it would mean that everything here and the whole logic of the reaction to the event the whole logic of issuing a command would be written in javascript moreover i would i need to share some definitions of card of the game uh because that's pretty convenient and then i would need to somehow duplicate it or serialize to json to get it to the client and so on so i don't need that because i can have a shared library which just informs and is embedded both to the in the client and server not the server but error functions and that uh what is the definition of the current game like what are the cards what are the rules of the cards what are the consequences and so on and so on so that's super nice thing and everything here is in c sharp so again uh format is super nice but the question is whether i was really be able to get rid of javascript and the question is whether it is in general possible so for sure microsoft really tries to force and maybe not forced but encouraged to use blazer in that manner so you will not use javascript at all because if you have a lot of components and a lot of community driven components for various things like calendars date pickers uh even graphs and so on so for most com for most of your needs probably you will find already some component and the commercial commercial companies like devexpress for example also already provides [Music] paid components for the blazer but unfortunately sometimes there are some components that you need still to write somehow and probably you will not do that from scratch but you will be a you will be interested in somehow reusing already existing um already existing javascript library because probably there is already something in javascript that is already available uh so there are some projects like charge.js is wrapping the popular charge is library inside the blazer component so now you can just download it as additional nougat and start to use this component that's nice what i was forced to do was unfortunately or fortunately because it is some fun uh to wrap my uh to wrap additional library which is not already wrapped inside any component for blazer which is called phaser ao because out of memory game is a game so it requires some animations fancy movements of cart and so on so i would really not be willing to write it from scratch in javascript or even in blazer so i decided to use phaser io as a well tested really nice library for writing something in the client with the help of javascript so we're returning to the js interrupt because i have a phaser io which is just doing [Music] some drawings and i need to wrap it and somehow communicate with my blazer code inside which is written in c sharp and for that we have js interrupt and i will show you in a minute just a super simple uh flow how it is happening but luckily blazer is providing us this this javascript interrupt so you can wrap around somehow javascript component and communicate in both sides with your c-sharp code that's nice so that's a kind of because i would like more to show you some code instead of describing uh the let's say strategy of the microsoft but the goal for microsoft is simply to make a blazer faster and faster and smaller and smaller to address those two problems that i have described previously because they want to give you something that will be able to fight for um for attention with people not only from dotnet ecosystem but from everywhere when the front-end technologies are used so they're really trying to think about fighting with javascript we will see for sure to do that they need to improve the pre the speed and for that uh they are introducing uh ar i o t uh technology which is coming to dot net six and that's something that i really like also because it is something which will really change how your application is running because as i described it so far we have this interpreter inside which interprets your application because we need somehow to execute the il code but the iot technology which is just a shortcut for ahead of time compilation is super nice technology that will compile the whole application the whole dotnet application to the web assembly during compilation ahead of time so the whole application will be prepared uh in form of web assembly and that's why i said uh that's not entirely true that um only unmanaged languages can be compiled to web assembly so since dotnet's 6 preview 4 already we can play with these technologies in which not only the mono is compiled to web assembly but all dotness assemblies that we would like to use are also compiled to web assembly which is again next level of mind blown-ness because um you know it is not trivial like if you think about c-sharp and e-i-l that is produced by c-sharp and then you need somehow to translate all the intermediate language and instructions to the web assembly instructions and that will additionally call web assembly code from the runtime itself so it is really not trivial but it is mono is able to do that eventually so we will have this technology there will be no jit there will be no interpreter simply the whole application will be already in form of web assembly that will be executed by the browser that's that's super nice and i'm really interested also how it will speed up things in terms of my game unfortunately i was not able to do that so far but we saw i saw already some benchmarks that the speed up is orders of magnitude because getting rid of interpreter and having him execute that having your application executed in web assembly directly really can produce a lot of speed up at that stage so uh dotnet 6 preview 4 in the end i have a typo here at least i believe it starts to really work in preview 4. so you can find it if you have any dotnet blazer apps and try to play with it okay um i would like to show you only some codes so uh just one slide above the future of the blazer because i said we have blazer web assembly we have blazer server but recently microsoft starts to talk a lot about a future of blazer which is about desktop applications because now under this umbrella term of blazer they see the space for improvements how the blazer can be incorporated for with desktop applications and mobile applications because what the blazer in the end is is this speed between the blazer which is the core about the ui handling and the layer of interpreting and let's say printing showing you displaying you those changes and this client server split in terms of architecture is allowing to move it to a desktop also so we see not only plays or progressive web apps which is just a kind of small extension around the regular application but we saw and the microsoft is showing previews of blazer desktop you can play around it already so you have an um nate it appears as a native application it is something like electron uh in terms of javascript uh word so you have a native application which is just uh have all these frames and the title bar and so on uh but the difference is that inside this application you have an embedded blazer web server and then inside this application you have a control which is just an html drawing control and because of that you have the blazer web sorry the blazer server uh inside your single application that is just providing you a native capabilities like any native desktop application so it is kind of hybrid solution and it really assembles the you know electron technology which is then you used in the same manner so that's the technology that microsoft is now presenting and for it is targeting.net 6 for for making it available at as far as i know and also blazer net is native because if we can change the presenting layer to anything else the next step would be not to render html but render the native ui of a specific platform so android ios have some libraries for rendering obviously rendering controls and the whole ui so the next step would be to exchange it from html to be able to render native look and native ui of the app with the same architecture so laser web server probably embedded and then ui rendered in the native technologies so that's the whole technology that is going and we will see it covers a lot of possibilities we have laser web server we have blazer web assembly hybrid solutions which is also known desktop and in future also native for rendering and native apps so it seems that it is pretty um there is a chance it will be popular technology like it will not it will survive longer than silver right what that was created for a specific particular use case that unfortunately didn't work and maybe now the future of blazer is a little bit better than the future of silverlight for example and above all that we have the support for ahead of time compilation so this speed of it it should be also pretty nice so i'm really hoping this technology will evolve to something that will stay in dotnet ecosystem and with not the only kind of experiment that people forget about in few years and just to show you this interop because this whole application will be open sourced but it still needs a lot of code to be added so i'm not having here a lot of code that i'm super proud of already but one thing i would like to show you is this interop because this is the thing that is pretty interesting how things cooperate so uh that and one one more thing just to emphasize it is not a regular way in which we should program in blazer that i i really need to be shout shot out here to not mislead you so when you program in blazer typically you should use only components so like for example the chat example that is somehow still in the repository because i haven't deleted it yet and that's the typical code when you program in blazer you have a code in the razer view and you are injecting some additional dependencies everything is html everything is just a view and then you inject some reaction you inject some comments you set some parameters via properties and then you can have code behind behind that will be responsible for handling some additional logic that's the typical way obviously if you are lucky and you have those components already available i don't have them available for this phasor i o so in my case i'm creating this layer of presenting the game with the help of phaser io that will contain some code only for presenting reactions to events so unfortunately this code still needs some polishing but was like um let's say one of examples here is that uh where it is okay so here uh when i'm creating a card that the player can use obviously the player can drag and drop cards as i will show you in a minute and when the dragging ends i'm invoking a code from my blazer code so when here we are inside the javascript and this is just passing and right the comment let's say the fact that the card has been dropped somewhere and and this event then will be passed to the client like not the client but the code behind let's say here and uh in the end the c-sharp code will be executed on the client side that will be responsible for handling that and for me that's super nice because i can validate some in some things at that moment on the client side as i said without paying and then i can just send the comment and wait for result and so on and so on so uh that's um that's the plumbing that you can have from the javascript to the to the code behind the written in c sharp unfortunately currently requires some plumbing because to make it easy we need to use static field so in the end we are calling a static uh event static method that is just calling a function that is wrapping our method here so it requires some unfortunate plan being that i don't like that's why i plan to make code source generator to plum bit automatically so every method just will be that i will make with this attribute will produce this plumbing and that it will be available from the clients from the javascript but that's let's say second level of improvements and from this and this interrupt probably would be also nice to to follow uh how it is working but in the end the thing is simply working and that's important at that moment maybe without getting even further and what's nice we have also the second uh second direction so then i was calling javascript from javascript i was calling c-sharp code but from the c-sharp code i can call also any code in the javascript it also supports modules so it is maybe pretty nicely organized so i'm calling from a particular module inside my javascript client's code a particular method and then i can pass parameters and javas javascript interrupt will do the magic we'll find it this method inside my module and it will be called and so on so that's working in both directions and i really probably in a few months i can give a second talk about only this layer because it will be really nice you know experience to produce and consume javascript only as a super thin layer that will be a responsible for calling phaser io methods like move an object add an effect stop an effect and so on and so on but that will be super thin layer of the javascript inside the game and the whole logic will be happening inside c-sharp because that's i like to have and just to show you the current state there is this blazer that is being hosted statically and there is this other functions that are for game for games and i can join some game by hand currently and that how the game will look so when the game is presented here from the client perspective from player one perspective i can play some cards i can drop those cards unfortunately this move is not legal at this stage so i'm getting information about that obviously i will have also a lot of nice play with the user interface and making it fancy with all the animations but that's the the last stage probably because the most important part here is the core logic okay we are slowly should probably slowly end because we are above one hour of the talk and i am also seeing some questions so to give some room for questions uh let's stop at that moment uh just as i said all this will be open source so if you if you find it interesting stay tuned and you will have an opportunity to download it and play yourself good thanks to the game i can have only i can say only one thing ship it is not just you know just press the publish button good uh thanks for the documents very interesting i also have a few remarks couple of remarks but uh let's go through those which are asked in the chat uh first they cover different different different aspects and also for the other socials there's still 40 plus people here if you're interested in something please feel free to ask questions uh there was just one small remark from bernd uh that the newest version these files are renamed so yeah yeah uh the one from uh tambien is very very interesting it's it's actually architectural question in general so you were talking about this nice thing that you do not need a server which is a great benefit and so on and uh interesting thing is this the the performance or scalability in both directions so if you can add a burden to them that yes so in general as um what i find nice is that if the blazer web assembly app will be running good enough and after iot technology probably it will i really don't care about that because it is the client executing it so i only need to make sure it will be smooth enough and probably it is already so it will be so at the client side there is no problem about the sp both vertical or horizontal scalability on the server side let's say api side obviously i'm really counting on the scalability of other functions so if there will be bigger load i will be able to to to scale it simply to to to handle that and that that's my approach that i will try to take obviously i'm also performance let's say uh twisted so i will benchmark it for sure uh so it will be try to be efficient from the day zero but that's the let's say second story like not trying to allocate there like a crazy or so so uh we but currently the logic is pretty easy and i don't feel a need for any sophisticated optimizations there but for sure i will keep in mind about that so the main problem here i see is the scalability of signal r which is may be pretty costly and i need to i i need to simply think about that in future whether it will just be worth to use this particular service for for this uh solution because as far as i remember from my calculations the main cost cause the cost may come from this or from cosmos db but mainly from from a signalr service so if not signal r maybe paying for azure hosted simply isp.net core hosted up so that will be azure uh also signal our hubs will be just enough but i must admit i'm not thinking about that as much now because i really don't know if anyone will play this game so you know i even i don't like this quotation premature optimization at this moment maybe a you know but it's it's an interesting question in general definitely absolutely absolutely that's the use cases opens a door for a second talk like how we can approach that but yeah yeah and maybe a a question which goes in the same direction i'm personally a huge fan this is a gem stack and also like static pages and so on and most of the things i i do at least from my price i've been trying to follow that part and it's interesting how uh uh how uh blazer web assembly fits into that so a question from cass is it possible to load a single blazer component within some static html or multiple components now yeah i'll let you answer because you show already on your slides how it works in the case of of web assembly blazer of course server side it's not but there is this interesting part for me also for you know thinking in a gem stack direction this equation which you had you know like passage or functions plus and so on serverless so if you can please reflect on this one yes so i believe it is like uh what is currently done that we are using just this blazer template out of the visual studio so it is all plugged by default and there is this bootstrapper in javascript that is plugging all the connecting called the dots let's say but i don't see any problem to make it more flexible so you will be able to plug it inside like a single component inside a static html why not sure but then probably we'll need to modify a little bit this uh whole machinery with the bootstrapper that is plugging the whole thing uh as far as i know it is not yet supported to do something like that out of the box for sure you simply need to have all the stuff still so you need to have this mono web assembly being downloaded and through executed the manner is here how it will be kick-started with and which parts will be handled by this but i believe it is possible i haven't seen any such thing like any article even maybe to that what's possible and what's not this is an interesting practical questions like yes we have c-sharp and it looks like a regular c-sharp development but still the code is sandbox within a browser this web assembly and this is an interesting question like what api surface does the runtime cover it's like standard 2-0 what can be done and and what not like if you have an example like http client and then do something what happens in the background what works or not if you have experience on that that's in the in indeed interesting question so the standard by mono uh i believe is two points 2.0 unfortunately so but because when we are using blazer it was a blazer web assembly because i believe we are talking here about blazer web assembly it is mono so it is just a dotnet standard is supported by mono and i'm not 100 sure here but i would say the 97 percent i'm sure that it is still standard 2.0 so it is the ap surveys that you have there and the sandboxing stuff it is not runtime so i believe you can open.net you can open tcp sockets i haven't tested it yet that's i don't know but i i i don't know like probably the easiest way would be just to uh try it in for this particular case but uh to have more general answer what is limited uh let me think because for for sure some apis are just pipelined to the browser so when you use console.writeline you are writing to the console of the of the browser if you will try to open a socket now i'm thinking whether browser is able to open probably not so for sure the answer is it is sandboxes to everything that the browser can do but then i'm not sure what the browser really can do nowadays because those standards are so fastly changing so unfortunately i don't know the full answer and also don't remember an article stating and the list of those limitations so i unfortunately i you must leave you uh with some an answered question but i think what we could if what we can shouldn't say this because it is handled by the browser limitations will be there like and exactly which level to an api it's the it's a good question yeah like for example writing to a file no because there are no there is no access to the file if you cannot do it in javascript you will be not able to do that in laser web assembly also yeah simple answer uh one question which is i'm very interested in this question actually so if uh thanks andre for raising the question if he didn't ask i would i would ask it so uh conor you were you you were mentioning um blazer desktop and i can have this feeling that microsoft is you know like again creating a competition to its own technology and we will again be puzzled okay what should i do now i want to start a new desktop development yes there are still people doing that actually believe it or not i saw and maui is coming yeah and it's heavily uh like advocated by microsoft and so on and on the other side they're talking about blazer desktop for example so how do you see the the future of both or the relationship between them that's one of the trickiest questions i can imagine because i have the same feeling as you so i'm even get lost in all those propositions what in the end is the suggested way of developing the desktop up like for sure am i why or however it is pronounced uh is this is the way but i perceive blazer maybe answer by let's start from answering the first question so there is in this relationship that you can embed uh blaze or web blazer desktop inside muay applications so you can write in other words you can write and add blazer components there blazer host however you will call it so you app may be written in a blazer desktop being hosted by dotnet moai am i why maui that's pretty tough so it can be done and it was even presented during the build or maybe there is a blog post about that so you your application may do that and i see it probably not as the mainstream way of doing desktop apps but probably in the case when you have a blazer as your technology stack and then you will have for example brazel mobile and then you will be able to use it also as a blazer desktop and also blazer progressive web apps so kind of if you stay with blazer you can use it with the dot net moi if not probably you will use it this technology without blazer simply so it is i'm seeing is a kind of intersection of two words and i don't really know where what will be the final answer how in the end we should develop our desktops and that's the problem even for the whole the muy itself because it doesn't support linux so for me it is partially multi-platform ui technology and when i was recently looking for a one i just decided to use avalonia because it was just the one that is answering my simple need desktop app native desktop app for windows mac and linux periods no magic no mobiles no progressive web apps um but i don't know sorry for that but i don't know it's a tough thing actually nobody knows i remember ever since since that you know when wpf was kind of uh dead uh before the dot-net corp so people were asking koston to like tell us what to use for dust and development because exactly doing it maybe to reflect on this here is a gordon saying uh well they have a desktop app and they have things which can be done obviously in desktop so this they will going to stay the trend is clear going toward that but this clear answer to which should we use for desktop development it's not that easy but let's go maybe to some easier questions at least the technical ones uh because this is what's going to be yeah it's going to be the future it's difficult but this is a thank you thanks paul for uh for asking a very practical question uh can you debug your c plus c sharp laser web assembly you can so we have tools absolutely so in general when you execute start to run your blazer web assembly app in debug in background the server servers debug server is also running and it is just a proxy between the browser and the visual studio and the application itself so in the end what you can do is to set breakpoints both in browser and in visual studio and then it will stop for example if you set a breakpoint in the dev tools you will see also that visual studio has stopped at the same line on the same file so they cooperate so the goal is it is possible that's the short answer the longer one is that it is not always stable like we should remember it is still still preview so i'm really i really used to the fact that sometimes the breakpoints doesn't work simply and i need to restart the app so that's maybe not the super nice but i'm just saying okay that's preview and especially i'm using the newest preview so let's not blame the the preview version for that for sure microsoft is the whole thing is here waiting for being polished but in general this this is working should be working so short answer yes longer as sort of potentially not the best best experience uh please if you have any other questions uh just just type them in also maybe i have a few of my own but meanwhile uh we can ask this one this is a business related question a serious one okay so i mean maybe you don't have to disclose it you know if it's if it's a confidential the game is still not out i said ship it you should definitely should but uh so how was what was the cost of that infrastructure like i made some estimations based on the number of players playing per month and i was still fitting inside my mvp benefits let's say so it's fine uh if it will be much bigger then i will try to think about kind of donate button or something because i don't want to pay for something that is just for fun so we will see but the overall cost was below 100 euro per month in a reasonable traffic like the one that is bigger than one person randomly visiting the page per day but literally some people playing so it was okay but [Music] we will see i really hope it will be fine to have it under 100 euro i would love to see it much smaller but or maybe bigger it really depends because um as i said some components are more costly than others and then probably if it will be a problem i will start to my think about migrating maybe i don't need cosmos db although it is fancy technology and maybe seeing simple storage will be just better so now i was a little bit more from the let's make it fancy and let's just control costs way of think king and then i will try to optimize the cost if we are receiving if i will really see some problems here good um let's see if some other questions will come i have actually planted them for a very good chat but maybe about one interesting uh so you uh let me share my screen i can do that as well because at the end of the talk you express your hope actually so you have that you said that you hope that the blazer is here to stay yeah and remember uh let me share my screen uh um three years ago actually that was a yeah three years ago or you know 2018 then the blazer was still kind of experimental i was listening to talk uh given by uh domets and uh and marco lockhart it was a very good talk about blazer in general and they ended with this image like the this picture uh saying okay should you use this or not and the answer was me personally i'm going to hibernate for a couple of years you know and wake up and see what's going to be you know like i'm not here to decide and it's three years since then so uh let's say i mean it's time to wake up you know what would you uh what would you oh you're not seeing my i guess you're asking you haven't you haven't i'm sorry this technology i guess you should be able to see it now so this was the this was the image they used uh and he said like this is what i'm gonna do you know like i'm gonna hibernate for for a while exactly but i would say like three years are gone so it's time to wake up so what would be your suggestion in general this application of of a friend of yours the the module module model a modulation uh it was let me just because i modeled modulation yeah it surprised me because for me this is the first attempt i've seen of somebody trying to to make a consumer sap that means one that goes to the to the end user using blazer uh those which i've seen now in production are most enterprise apps used within a within a business or or something so they do not face consumers and i'm interesting in your opinion like you hope for blazer but would you bet on blazer that's that's very nice question and it depends in what area you would i would bet on like whether it would be something that i would like to learn to broaden my perspectives and just learn some new technology or maybe whether i would like to try to earn money from that to be professional blazer programmer so uh for sure that that's the very common question when this talk appears like whether we should care or maybe let's stay few years wait a few years more and we'll see so the risk is yours like you if there are some very fierce job offers about blazer that is required and then as for every early adopter technology you can benefit from being this early adopter so there is no knowledge on the market and now you know the blazer and although there are no many offers you may come in and say but i'm already efficient proficient in blazer so then you can benefit for sure but whether it is a safe path obviously not because if you want to take entire money you can simply learn angular javascript and for sure you will find your good place to work so if you'd like to experiment with some new technology i would say that's one of the most interesting ones current technologies in dot net because it is still web related you can use it in web i'm not seeing i mean i'm not seeing a lot of desktop development recently although obviously it still happens so if you are that net developer which is desktop developer if you are doing the desktop probably you still use wpf right so uh for for this particular scenario uh it is your company to decide probably the company will not to do that but it will wait until the my ui grows and develops more so new this technology probably should be the one that you will be learning but if you are a web developer and want to learn something new and you like serverless let's say i would really invite you to play with this approach because it learns you a lot of things like uh how to make serverless application without really asp.net core app server so you have a blazer up you have an ipi in other functions you have some database maybe some other services everything is serverless for if you would like to play with that blazer is a perfect fit for me i believe so that would be not maybe for the blazer itself but for the whole stack that this maybe will become popular in future let's see a funny comment a funny comment to that uh from cortland so they can go blazer full-time is calculated risk i guess but then again better calculating last time i bet on windows phone so that was that was the right time many many people but in silver light at the time great yeah conrad uh thanks a lot aside so it's already like 7 7 36 so i would say let's cancel this session uh and bring it to the to the end slowly if you have some you know if you're type typing right now the last question we will wait for a second or two but it was it was really interesting i would just like to ask you for the presentation is it available is it available if you get this link so i will um i will publish it and so then we will share it probably in meetup please yeah i will just share it that would be that would be it yeah so maybe just as a thought so civilian preferred me for windows windows phone so that's really bad in calculating but the nice thing is conrad connor is coming from from poland so uh uh gordon is actually speaking polish so he lived in poland so actually so drink your parts are there definitely so you have a nice nice combination here uh thanks everybody for for staying with us like it's nice when 30 people stay at the end of q a session uh and uh so we will we'll have a summer break now as usual and continue um uh in september with additional talks and conor hoping to see you again with some with some other topic performance related something yeah i i still remember our plans that i will come to you simply but definitely next year or something we will see yeah who knows we will see you okay thanks everyone for participating staying until the end conrad thanks for thanks for being with us and yeah we will stop now thanks bye bye bye

Channel: Microsoft Developer User Group Graz

Views: 1,323

Keywords:

Id: I-A893uez9I

Length: 98min 8sec (5888 seconds)

Published: Tue Jun 15 2021