Introduction to ASP.Net Core Blazor: Interactive Web Development with C#

[Music] hello everyone thank you for joining us on today's session today's session is part of a mia series where we are talking to different experts from the azure community across the region and learn from them about various topics and in today's session we're having an introductory uh part on how we can use microsoft asp.net laser to uh understand all the concepts and fundamentals to help us build rich and interactive web ui experiences so today's session is part of the series but also it's not just a one-off we will have more sessions hopefully in the near future around the same topic so make sure that you are part of the community and you're always checking the calendar for all the exciting topics and sessions that we are having microsoft reactors as you know are hubs around the world where founders and developers come to meet and learn and connect to local peers and learn from the industry experts from microsoft team and advocates and also the open source community and its advocates and i have the pleasure of leading the reactor here in this region in the mia where it is physically located in abu dhabi but with all the online sessions that we're doing this is all available to you online so you can tune and and join us from any part of this region and benefit from the live sessions the sessions are not only live they can be uh accessible also on our youtube channel so you can view them and watch them anytime you wish later on make sure you're subscribed to the channel and you're following also all the playlists let's say that are around certain topics so this is also an important part where you can explore other sessions that happened in other reactors and in today's session we're hosting uh anwar who's the manager uh for it application and support are ruby and bank in kuwait he's a an active speaker and you know a contributor to the uh tech community across the region as well and in kuwait and he's working on a daily basis with different application developers and software vendors around the globe and today we're hosting uh hem to learn more about uh the topic and also we will be excited to have you in the future for more um i think i would just like to remind everyone again that the reactor check-in page you can find the link in the chat is the place where you can access the event resources that's first of all and second uh the survey which we are doing to understand more about the topics that you that you would love to see us uh program in the future so this is a very important thing for us to know from you what you would like to see uh in the future please take a moment to check in first of all and then second after today's session provide us feedback on today's session and also comments on what topic you would love to see in the future if you check in you will you will get something that looks like this one this is from the last session you will get as i said the event resources and then the link to the survey to do it after the session quick reminder about the code of conduct we're coming from different parts of the world with different backgrounds and we're all here to learn so let's keep that in mind be aware of others friendly and patient at all time welcoming and respectful and open to all viewpoints and questions we need to be also understanding of each other's differences and kind and considerate to others at all time during today's session you can use the uh meeting chat to ask questions uh but then uh also towards the end and i would love uh you if you prefer to go off mute and then ask questions all you need to do is uh send this information um on on on the chat send me that you would like to go off mute and ask the questions and i'll enable that feature for you but we can do that only towards the end during the session just uh ask us the questions um in in in the meeting chat that's pretty much all thank you and more for joining us and we're excited to have you here uh thank you thank you for the introduction and welcome everyone uh thank you for joining the session and let me you know share the screen [Music] are you able to see my screen yeah all good you can go ahead thank you okay about myself i'm anniversary working in bubeyan bank kuwait as manager i.t application development and support and working with bubeyan bank in the last 15 years and i do continuously interact with developers you know software technology vendors and you know the the domain experts around the world i used to speak uh regional conferences and techno-social gatherings today regarding our topic today is microsoft asp.net core blazer developing rich interactive web ui or web application by using c-sharp instead of javascript so our today's agenda is brief history of asp and asp.net first of all this is going to be an introductory session we will just go through what blaser is how blazer evolved what are the advantages and features of blazer and blazers hosting models it's you know comparisons and a quick demo a very basic demo by using the default project templates provided by microsoft we are planning to conduct further demos further sessions actually which will be more into the coding and developing you know hands-on sessions uh we are planning to do a session on crude how to do a you know an applica web application by using creating retrieving updating and deleting data related applications another one signalr related application how to utilize signalr and blazer to create real-time connected interactive applications like a chat application for example another one the latest one the microsoft multi user interface option y this also we are planning to do sessions related to that blazer plus mlvi so i mean we would like to make the session interactive if you have anything to ask or anything to add or comment i would prefer to add it to come forward and put your comments or questions on the chat and at the end we will have a question and answer session which we would like to be you know like by using your your you know mic also or whoever prefers to use the text they can do that also let's start this is you know okay let's just quickly go through the history of asp and asp.net i hope most of you know about this i just would like to go through before we reach into the blazer part we know asp microsoft asp active server pages it was released in november 1996. at that time a common gateway interface cgi and perl were very famous popular for the dynamic web application development we know before that there was you know like websites were totally static and you know the content was fully dependent on static html content then we reached into the dynamic content and cgi and perl into that domain asp entered and there are let's say four major reasons where asp got you know acceptance in the developers community let's say the first one is use of data access through microsoft activex data objects through the ado accessing the data on the web application was like made much much simpler and ease of page design like before for the form based replication winforms based replication how do we develop the same concept actually brought into web web development also and comb-based interoperability the fourth one is relatively flat learning time curve learning curve was flattened because for web development because the by using asp you were able to use the same development experience which you have by using the visual basic so this was the starting point at that time it was active server pages at a let's say asp then at the let's say in 2002 when microsoft introduced dotnet framework 1.0 and visualstudio.net then asp.net also got introduced sp.sp.net was built on the common language runtime and the advantage of clr was inbuilt with asp.net and an important feature we were able to write asp.net code by using any supported dotnet languages like either by c sharp which was the new language introduced by microsoft at that time or the existing visual basic dot net version official basic which was visual basic.net so we were having the flexibility to use either c sharp or vb.net or even f-secret and it was open source and you know at that time itself it you know it was a new step towards the open source implementation and ease of data access before microsoft provided through asp microsoft provided ease of data access through ado but when asp.net was introduced the ease of data access actually vendor heard and by using the language integrated query or even by the next level by using entity framework asp.net went through from version 1.0 to 5.0 release candidate 1. there were 1.0 2.0 and 3 and and continues evolving continuously it was evolving until the 5.0 uh 5.0 release candidate then you know it stopped and it's transformed to asp.net core any questions before we go to asp.net core hussain when i present i think i am unable to see any comments if there is anything or any questions i would like please let me know sure no worries no worries okay no from asp.net it again evolved to asp.net core somebody is requesting control maybe to ask anything or okay i mean we can leave the i mean and the messages okay yeah only messages for now towards the end we can uh we can enable the mics yeah yes so uh asp.net core was released first released in 2015. uh sp.net was again it it took take us into more advanced versions and cross-platform completely close across platform sp.net actually free and open source and modular framework that runs on both normal dotnet framework and on windows and moreover on crossplatform.net anywhere like you know mac or linux or wherever so by using the core.net core concept which the dotnet entire.net frameworks included into the core component which will be running wherever you keep it wherever you place it so asp.net was a comp you know an implementation on top of the dot net core but later on from version three dot net core drop the support for you know sp.net was not supported on dot net framework so we have the version from 1.0 to the sixth version which is the latest one core.net core one two six the key advantages of dot net core it is a complete rewrite of dot net framework you know the dot net framework was evolved gradually and at a point of time for the for the you know benefit of cross-platform implementation just microsoft didn't just convert it into a cross-platform implementation model but instead of that microsoft uh you know decided to completely rewrite the dotnet framework and that's how we have at asp.net core which which is a fresh and new and completely rewritten implementation of the previous dotnet framework united the previously we were having when we were using asp.net we were having asp.net web forms and asp.net mvc and asp.net web api variants by using asp.net core you can create an application having the functionality of the asp.net web api asp.net mvc on the same project or on the same application so it united both the streams asp.net mvc and asp.net web api into a one one and single one and asp.net core provided modular framework distributed nougat package model so it's a modular model and you don't have to you you know include everything it's like whatever you need you just you know get the new get package for that and put it into your project so it's very compact and modular and a cloud-ready environment based configuration system and moreover it's a lightweight and modular http request pipeline we have even the benefit of this modular and a lightweight http request pipeline is we are you know it is helping us even in the asp.net core blazer implementation which is on top of the core asp.net core which we are coming into asp.net core helped us to build and run cross-platform asp.net core apps on windows mac and linux and it's again open source and community focused so these are the key advantages of asp.net core if we describe in very high level okay now let's move into the next one now let's look into asp.net core blazer which is the subject of our sessions today into in detail okay now the question is what is blazer we we know what isp and asp.net and asp.net core now what is blazer blazer is that new client-side ui framework you know from the same asp.net team and asp.net core team what is the big selling point of blazer why it is hot and why everybody is discussing about blazer nowadays because because of its ability to write rich web ui experience by using html css and c-sharp and without writing anything on javascript we don't have to use javascript at all if you want to develop a completely interactive rich dynamic website web application by using microsoft asp.net core blazer you only have to use html css and c-sharp both in client-side and on server-side we will come to that in detail now the question why should we use blazer why should i move from you know other development frameworks into blazer what are the advantages or what is the you know benefits of using blazer let's go one by one this is not the complete list it's a generally you know very important points i just you know pointed out noted down and let's discuss those there are more so first of all it allows us to use c sharp on both server side and client side before how we were doing we know we were using the server side and the server side development languages were like c sharp either c sharp or let's say java or you know cgi whatever before when when you were using the you know the c sharp on the server side you were you had to use javascript on the client side for client functionality either you had to use javascript or you had to depend on javascript based frameworks like angular react like that so we were fully dependent on javascript if you were not using javascript you know you will not be able to provide a an interactive website or internet interactive web application uh you know for the client side so this was the limitation or this was the dependency i would like to say now we can run we can use c sharp on both client-side and server side the benefit of using c-sharp on client-side we we are coming to that one in the next slide so second point we can run our application on any browser including mobile one utilizing leveraging the the the functionality and capability of the modern browsers including the mobile mode and mobile modern mobile browsers and we are no longer dependent on the plugins ocx controls or flash or silver light if we go little behind there is no dependability on the plugins no more plugins are required because c sharp and dotnet libraries itself is running on the browser it allows us to create spa and pwa we know what spa is you know single page application which will you know provide the feeling to the end user like he is using an active application even though he is using a web application it will give a feeling of you know using an active application where there is no pages there is no page loading no page changes single page and the content and the data is just getting loaded in i mean whenever is required and on demand like the user will have a feeling like a single page native application this is spa single page application and what about pwa you know progressive web apps pwa it's um the web application acts like an active application or a native mobile app application even it acts like a mobile app within the mobile and within desktop it acts like a native desktop app so you can install it on your desktop you can install it on your mobile and it allows even to receive the push notification dynamic contents everything even when you are not using it so whatever functionality you can expect from a native application native mobile app or native desktop app you can achieve those by using or by converting or opting blaser blazer web assembly application as a pwa so the the level you can you really leverage the functionality of progressive web app by using microsoft asp.net core blazer and the next one is you are getting near native performance on the browsers even though it is running on the browser the the because it downloads everything into the browser even the runtime and it runs when you especially when you use a web assembly blazer web assembly it actually runs on the browser and it gives you near native performance on the browser the next point is actually it allows you to liberate the existing.net ecosystem and dotnet libraries so almost all the dotnet.net libraries it's available for you to use on your client side and on the server side so it gives you full freedom or reusability of your own dotnet libraries or third party or from the dotnet libraries which you are used to or which you wish to use on a browser level client side application and it again it allows you to reuse your existing c sharp functions you know classes or libraries what you had written before it was not usable into web application but now you can reuse it your own you can your own codes and snippets or whatever you can reuse it on blazer and at the end note the last not the least benefit from dotnet's performance reliability and security so these are the core advantages or you know the important points which we can say why should we use blazer now the question is why should we use c sharp or dot net core instead of javascript on client side what is the problem on using javascript why we are saying instead of javascript we can use c sharp on on client side what is the advantage why should i use it this is an important question first of all especially if you are entering into the programming you know world the the programmers or the web developer don't have to uh you know he doesn't have to learn javascript and server side development language like c sharp or java or whatever by learning and you know going through by using the c-sharp itself he can utilize his knowledge on c sharp on both server side and client-side so this is the first advantage otherwise if you are going for c-sharp and javascript you should master both the frameworks for both the both the languages and its usages and its different implementations and different frameworks based on c sharp and based on javascripts here you can concentrate on c sharp and dot net and the implementations and components based on the c sharp and dot net this is the first thing secondly uh you know it's set pro strongly typed so when we use javascript we can't catch the errors at compile time we will be getting it only at runtime here while you compare at that time itself we will come to know because it's strongly typed and you know we know how useful it is when we actually write the code and develop the web application blazer is just a framework that runs on dotnet core runtime so we can use any library any library compatible with the dortmund standard that means we can use our own or any public new get packages which is available which was available only for server side before which is now available for you know client side and web assembly level so this is why this is the the importance of ability to use c sharp and dot net owns clean side also now the question is features of blazer i mean the next point is features of blazer this one we have covered uh most of them you will just quickly go through uh model for building compressible ui actually it's a composite and component model so you can you can create your mod ui in a modular manner in the new version the dotnet 6 it gives you live reloading in the browser during the development so you are you know the beauty of it like you know you are you have done the the ui code and you have done even the you know the application called c sharp code and you want to debug and you want to run the application and at the same time when the application is running you can you can write or change the code and see how it is getting affected on the browser hot reload was actually was there in in samaritan and all it was there and in the new version dot number six it's available even for brazer blazer so you can just make changes and see the effect immediately on the on the browser so it helps you to reduce the time to it takes to debug and you know test your applications it uses the latest web features and i mean along with the advancement of the web and its features blazer is also getting advanced so we will have the same functionality and features what uh you know the web platform is providing we will be you know able to utilize it and the most important point is dependency injection we know what dependency injection is it's not uh you know under the scope of this discussion to describe or or or discuss what dependency injection is because it takes little more time and in-depth uh discussion to describe what dependency injection is so if you are not aware we will be covering it later on or or you you can go ahead and understand it because you know it's not possible to describe it in a shorter time or or a destroy this scope yeah man this allows you blazer allows you to run on old browsers but there is a condition or you know the web assembly may not run on all places we are coming into that process okay full.net debug before i told you we were not able to debug on our client side development client side codes or whatever we were not able to debug on it now you just use one single ide if you are using visual studio 2019 or if you are using visual studio code you will be able to you know you know debug both client side and the servers let's say there is no difference now once blazer is introduced there is no difference on client side code and server side code you are able to debug and fully you know test your application make changes on the go by utilizing the blazers capability and it's forms as part of the open web platform and i told you we just described no plugins are required and rich intelligence and tooling again it was available i mean respectively or limited on the server side now it's available throughout the web ui development framework and server side rendering this is for the server hosting model we are coming in today okay so we were discussing generally generally on asp.net core blazer okay now when we consider blazer there are two major variants let's say there are two major hosting models so we have to decide before we develop an application by using blazer we have to decide which one we should select and which model is you know most suitable for my requirement so we'll just go through those hosting models it is an important part so it must be covered in the introductory introductory session itself there are two the two variants are one is web assembly and the other one is server hosting model so web assembly it runs on the client within the browser everything runs on the client and you can see it downloads everything to the client whatever is required including the runtime dotnet runtime your you know your libraries a third-party libraries your even your c-sharp code converted into web assembly bytecode everything converted into probab assembly bytecode and getting downloaded to the browser as it is running from the browser it has near native performance it's not at all dependent on on the server for any kind of rendering any kind of you know you know io related things is everything from the browser itself so it gives you near native performance and web assembly it uses web assembly framework it's a it's not only microsoft or microsoft asp.net core blazer it's a it's a standard implemented on major browsers especially on all modern browsers so it utilizes leverages the web assembly functionality and features and as it is running on the browser everything getting downloaded once it is downloaded we do not need the connectivity to the server it can totally independently work offline on the browser even you can disconnect from the net and you know if your application doesn't require any database connectivity or interactivity with any other servers or whatever otherwise it can totally work offline on your bios browser this is the key features of web assembly let's see what server hosting model gave us it's a server-side blazer app when we say server-side it's not the you know classic server-side concept it's actually a blazer application running on the server and providing you the the ui rendered ui to your browser through connected signalr methodology connectivity so it's actually running on the server but from your browser when you connect to that application it gives you okay it runs the it renders the ui for you and provide that ui into the browser but whatever happens even client-side functionality or server-side functionality everything happens on the server and wherever the change let's say the browser window wherever the change when we demonstrate the demo i i mean we can explain you know explain it in more detail wherever the change that part only getting uh you know re-rendered from the server to the client so how it is happening it is through signalr we know what signalr is uh you know it's a an interesting and fantastic implementation which keeps you connected uh you know what we say bi-directional connectivity between the client and server the signalr is not only useful for this purpose signalr implementation gives you different like you know a wide range of opportunity to create stunning and very interesting applications connected applications like when we use for example when we use whatsapp or any connected application somebody is typing you know even even for when you use let's say you know facebook somebody's commenting you're getting okay somebody's typing and when they when the comment you are getting the the comment right away it's not like your your browser is you know you're calling it or requesting each second and getting the content no it's not like that it's actually pushing from the server so previously web applications were able to you know pull only from the server whenever you need to get a new content either through page reload or even by using ajax you have to communicate to the server and ask hey is there anything for me and if it is there then you you were getting it this was the concept now no the server is pushing to the connected clients so signalr is an interesting implementation there are others but from microsoft signalr is an interesting implementation of this connectivity and signalr actually handles what kind of connectivity is best suitable for your network your pc your server whatever it uses web sockets and other available options to connect for the connected device and the server so it uses here in our server hosted model uh microsoft uses signalr to render the change on the server ui and i mean the the ui of your application which is actually happening on the server and transfers that change only that change through the signalr connectivity to the browser window so you will have a feeling like you are viewing a a real-time application on the on the browser but actually it happens on the server you are rendered on the server and the ui changes on the server updated through signalr and don't worry it's a complex complex implementation but you don't have to enter into that complexity microsoft asp.net core blazer does everything for you out of the box it's available it's ready readily available you just have to utilize it we will go through that in the in the demo now a quick comparison on how to hosting models this will be the you know the last slides before we enter into the demo so what are the you know pros and cons how can we compare both hosting models which one should we select which one should i go for so it's a quick comparison let's take a web assembly first advantages of web assembly is it will give you near native performance we have covered it how it it can give you the near native performance uh the app can work completely offline if it is a web assembly everything will be downloaded to the browser and you don't need the server connectivity you don't know the network after that if it is a network dependent application no server is needed so you don't have to maintain a server for your application for for you know your users to use your application you don't have to maintain a server even for distribution currently most of a public web assembly implementation we use a server just to distribute your your your you know components and your frameworks and all just for the browsers to download even if you have a distribution different distribution mechanism you don't even need that server so let's say conceptually literally you don't need a server at all for web assembly uh implementation and again no plugins are required we have covered it run on modern all modern browsers including the mobile browsers and capability of developing spas and progressive web apps there are downsides for these models each one will have advantages and that is general intelligence so it's like it's totally dependent on server so it's restricted to the capabilities of the browser the key disadvantage i can say is like it is downloading everything to the browser so the loading time is little bit longer not only little bit considerably longer when we compare with the server hosted model but once it is downloaded then it's there and you don't have to you know wait that much time again when you when you you know started especially for by if you are using the pwa option progressive web app option you can download your app as an application and install it it will just take like seconds only to install on your browser or on your desktop or on your mobile then next time it will be starting like faster but initially it takes let's say considerably longer lesser starting time but as blazer evolves from let's say dotnet core asp.net core blazer 3 and when it reaches to five and now when it reaches to six considerable you know uh performance improvements are there especially at the starting time so it has improved a lot and it is as per microsoft and it will be continuously getting improved and we will not have a considerable i mean delay in the even in the dotnet 6 version it is much faster and in the coming future versions it's gonna be a negligible one browser does all the works that means clan does all the works so if your application is a feature rich and you know processor consuming application of course it may affect the performance based on the capability of your laptop or pc or mobile or whatever the end users browser and end users machines capability will be affecting the performance of the application when we consider detailed you know downside of the web assembly this comes and another downside we have to consider is it works only with the modern browsers let's say if we try to run on internet explorer web assembly will not work even with you know internet explorer level 11 it will not be supported it will be supported on let's say edge and mode and browsers but everywhere let's say we don't have to worry about it because most of the you know machines most of the users they have already moved into the modern browsers like microsoft edge or you know latest versions of chrome or even mobile versions does not have an issue because mobiles are recently the process are you know upgraded and we don't have an issue with the mobile process there are some security concerns but if you if you are concerned about it and if you know the issues you have option to to protect it because you know everything runs on browser everything runs on client so uh the create the let's say the tokens or the certificates the secrets are stored within the browser or within the machine so you should be more careful when you know if it is a secured application if you are so much concerned about the you know let's say tokens or whatever storages you are using whatever data you are storing on the on the machine so you have to take care of that but you know it's it's let's say you have to consider that one and protect your application you should be concerned about it then the server model when we discuss the server model it comes actually because when the server hosted model does not have this issue or does not have this you know concern actually okay let's go to the server hosted model and the advantages of server hosting model is you know less downloading and loads faster because let's say it does not download at all because everything is rendered on the server only and the rendered one is just transformed to or transferred to to the local browser so we don't have to download that runtime we don't have to download the other libraries nothing is getting downloaded so it first like you know quickly and faster very good performance because you will be able to utilize the performance of the whole server but again it depends on the network connectivity it depends on the like you know scalability of your your server how many people are connected all these are you know dependent it gives you very good performance if you have a very good network connectivity signalr connectivity is fine and the performance of the server is fine and you have a you know enough resources on the server consider according to a number of connected clients or devices there is no required you know web assembly support it's not really dependent on web assembly so any browsers let's say not ancient browsers but any browsers like microsoft you know internet explorer 11 10 and all we'll be working with who whichever support signal are will be okay we don't have to depend on web assembly so we will have more option to select form from the browsers and their older versions keys and data secrets are it's it does not come to the you know to the browser at all it does not come to the to the client pc you client mobile or wherever it does not reach to the it it's it is safe on the server it stays on the server and that's why it is more safer to use you don't have to worry about that you know security concerns but still there are downside sides when we compare it cannot work offline server dependent you should have a you know a server capable of based on your connectivity requirements and load you know you have to consider how many people are connecting how many devices are connecting so you have to have a you know according to your connectivity requirement according to your load you should have a you know capable server and resources on the server and network dependency is also there especially when you use you know if disturbances are there the the signal our connectivity will get disturbed it will try to reload and it will if it is trying and not succeeding for let's say three time five time it will ask you to reload so it gives a little you know what you say annoying user interface user experience for you know reloading the content again and again if the network connectivity is getting affected frequently in between um if it is on a slower networks you will have a higher latency and slower application performance dependence on dependency on signalr the last one if you are using the you know hosting model i mean server hosting model you don't have the option of you know progressive web app option because it's run on the server you cannot just install it on your browser you need the server so there is no concept linked with server hosting model and pwa so pwa concept or pwa functionality or option is not available when you use the server hosting model so this is what we have to cover and we will have a very very basic demo we are you know we don't go through the you know what is the in-depth demos at this time it's an introductory session we will just quickly go through an introductory demo just to understand how it is and what it feels like that is all the purpose of today's demo we will have hands-on demo in the forthcoming you know sessions we will you know uh we will hans on we will develop the the crude application hands-on we will develop the the interactive chat application uh hands-on by using you know signalr and blazer in the coming future emmy sessions before we enter into the demo is there any questions yes there was one question about how expensive is the server hosted module on azure for a multi-tenant application actually this needs to be you know answered but based on the you know requirements and i'll tell you when you host server hosting model on azure you have to select the signalr you know feature so it gives let's say i mean again wha i mean how expensive it is it's totally based on what actually how how what you say resource consuming requirement is yours uh yeah but basically you have to not only i mean unlike for the normal hostings you will have to select mandatorily the the signalr option for your hosting on azure so it will be a bit expensive than normal web hostings there are a couple of more questions i'm not sure you want to cover the questions now or i mean at the end maybe because when we cover the demo maybe you know the questions have got answered exactly all right let's uh get to the demo um we we have still a bit of time and also we didn't start uh sharp uh on the clock so uh should be fine uh but let's also make sure that we can also try and cover the questions um after the demo and we can stick around uh for for some time as well um just for those of you who have other things to do maybe you can send us the questions in the chat if you need to uh leave at you know okay four o'clock sharp at least in my time yeah and we we have already reached one hour right almost we are reaching to once yeah yeah and it's a very popular session i see lots of uh attendance and lots of questions so um i think we will be having uh as as you said more in-depth uh demos so i don't wanna you know take more time from here let's go straight to the demo okay are you able to see my screen now or well i'm still on the presentation screen okay just a minute let me change the this one one minute yes ahmed to answer questions yeah is it okay now can you see my screen not yet it came and then it got disconnected again okay just ah the recording will be on our youtube channel i'm just gonna give you the link there in the chat yep now we can see now right yep okay i'll just quickly create a new project by using you know blazer so when we use let's say blazer we will have you know we have so as we discussed we have blazer server up or blazer web assembly app initially before dotnet 5 when we were starting with the blazer with dotnet asp.net core 3 it was one single project template and when we move ahead it was giving us an option to a to select either server app or a web assembly app from dot net five it gives from the beginning you select you know blazer server up or blazer web assembly app so i'll just select you know web assembly app for the first i mean as per the for for the first demo so let's go ahead and web application 2 the name of the application i'll just create here you can select which dotnet determines target framework which you have to use dotnet 5 i select uh authentication type this one i'm not using it later on you can say microsoft identity platform if you want we can use that one uh you know that itself actually you know we can we will have to demo for one session but that we are keeping for the next sessions later on and you know we have asp.net core hosted because even you are using web assembly you can you know there will be you can you can select an option there will be two project one project on the on the server for any apis web apis and all if you want you can keep it and you can use that server for api purpose and you can use that server for distributing your web app web assembly part so you can do that but we are not opting it normally when you use web assembly you don't have to go for it and here it is the pwa the the progressive web function so option so i'm using it so let's create it i think i will have to i will have to reshare it for you to see yep the screen is gone yeah it's visible now right yep it is visible okay we'll just quickly run first what is the you know default implementation gives us now again i will have to share are you able to see hello i see your screen but i don't see an activity oh just a minute again i have to okay the browser i have to share with you it okay this is how now you're seeing right oh yeah yes yes okay hello world i think i can share that i can't share the desktop the whole desktop any idea hussain well i mean it depends there is the way to share a screen and then there is the window and then in window you click on that in window it does not show the just image quickly that browser is not showing maybe the whole screen okay now you're able to see right yep yeah yeah okay so see this is the default application provided by microsoft as a project template which we can utilize as a starting point see here let's say the counter this is not okay now uh see if i click it increment five on each clicks i just have changed it i think i have run on the wrong one just a minute your publication one i ran actually we have to run on the second one okay okay here we have the counter for example see the when i click the counter increments by one so when i click it actually happens on the browser nothing goes to the server even here everything is on the you know on my laptop only but still it actually happens everything on the browser itself and uh it's not only not at all connecting to the server nothing rendered on the server nothing is you know downloaded from the server once it is downloaded the application is downloaded in the beginning this is an option and what about fetching data this is an example on fetching the weather information from a public api in the uh as a first step in the next demo you know in the next session we will be doing a generic let's say a flight status api we will be in hands-on developing an application uh the blazer application to download the flight information from the public api so that can be done now before we go into that this is a blazer component the modular capability option of blazer allows you just to reuse your components wherever you want for example we will just you know add this counterpart into the into the fetch data part you know as just you to you reuse that component just to show you uh you know how to reuse that component wherever you want so i'll just close it now and i'll open the solution you know explorer and on the pages i will take this these are the three pages which we have the index page the home page and the counter page and the fetch data i'll show you what is there in the counter the one which we show is the result of this let's say seven eight line of code and this is the html part of it and you know css let's say and this is the c sharp code of that and here you can see we are defining declaring a private integer variable named as counter count and we are putting the value as zero and for we are putting here a button and the the button is let's say the primary i'll just change it to success just to understand you know how it is the the the bootstrap class how it is affecting and how easily you can change the you know ui and the look and feel of the you know the ui and one click [Music] instructing the browser to run this one on the click of the button and this function is just you know a counter current count to increment by one i'll just change it to let's say increment by 10 so let's see how it's going and before that uh this is so we have made this change and on the on the let's say the fetch data page here also we are we are getting the data from the you know uh the forecast service which is there uh i mean inbuilt on this one we are not going into that details we will look into it when we demo the you know the api and how to call the web api it is from the this is the you know result of the dependency you know injection so the dependency injection it is not only provide this http client but it provides with the data features and you know wrap it and provide you as a total so that is the beauty of it we don't have time to go into the details we'll be doing it later on now here this is the you know the fetch data part what we will do um after the weather forecast title uh you know i'll do one thing uh i'll say okay you know i'll do a break and i'll do another break sorry and before that i we will do one let's say see this one counter done so we are utilizing that counter component here whatever you make the whatever you do the change it will be applicable here also wherever you use it it will be affecting the everywhere and then again everything on the client side now let's see we have made to change one change that like you know we have increment that the increment we changed into 10 and we brought that counter here into the weather forecast fetch data example okay here let's say the counter is that the the button has been changed because we change the class of the button it was primary and we changed it to the success so it changed the look and feel of the button and when we click see it was one incrementing one now it is incrementing can you know each one happens here now let's see the fetch data see now here we have that counter component here totally as a whole and whatever you have made changes not on runtime data related but as a component it gives you you know you can you can you can place an instance of that component wherever you like and it has the full functionality of whatever you have done i'll just quickly do one more thing uh um [Music] yeah this is also covered and i'll do one thing we'll quickly go through the server hosting model so i mean conceptually it will be the same but let's just quickly go through how it is going to be when we do that so i'll create a new project i will use the you know this one let's say blazer and let's say blazer server up here you can see there is no there is no pwa option there is only the you know in the same directory put the solution and project in the same day that's all we have okay let's see quickly configuration repair even you know we have the docker you know capability also that is also an important interesting feature the containerization is possible you can you can you know make your application put it into a container and put the you know docker and you know create how many instances you want and it will work independently from the docker or from the container so that is also very important thanks for microsoft providing us this containerization option so it's very very useful okay here you know the output will be same similar when we run it i'll just run it and keep it for some time then we will understand later on like because you know in the normal web application we have session concept uh not actually that session concept but if it is a server hosted application it continuously pinging to the server pinging to the server and if you are not using for long time it will it actually you know discard the connection because to save the server you know resources consumptions so what happens if you are not using the application for let's say five minutes or more or whatever uh you are losing the connectivity and whenever you come back you will have to reload so i'll just show this is a you know disadvantage of server hosting model but when you use web assembly you don't have to you know if you keep it for an year it will be staying there and you can just come back and continue where you had left before so this is the server hosting model i'll you know you clear on this and i will go back to the web assembly model and we will quickly show the pwa of option the progressive above application option so this is in function it is same it gives you but actually this is a signalr connectivity and rendered on the server and it is showing a replica or or or an exact ui render on the server you know transferred through signalr we will keep it like here for example we will keep it here okay and later on we will come back and see what happens in the meanwhile uh we will go back to the you know uh web assembly application which we were doing and we will just run it and i'll show you the the pwa option also that will be you know will be stopping there that will be enough for the introductory session quickly just a minute okay here once we load you can see here install web application 2. if you install it let's see i'll install it web application to by using your your icon whatever you have you can just install it see now the the application changed into a native windows application frame model it no more it will run on browser it will give you a feeling of a local application on your server sorry on your machine even it installs the you know the link on your desktop so if you close this let's say and if you open it again it opens like an application and you don't have the browser you know window and other details and here we have whatever we were doing it is available there let's go back to the you know the the other model it as it is running from my machine it does not affect but if you are running from the hot i mean from the server and based on the configuration of resource consumption and distribution configuration it may affect if you keep the application idle for long time because the server has to do you have to do that because if you are keeping that signalr connectivity uh a client just connected and he just minimized and he went he's not using this i mean application at all for let's say 24 hours or one week and if you are keeping your connectivity to that client continuously you are unnecessarily unnecessarily wasting your resources on the server so i mean you have to do that but when you implement it will not give you you know what is a real connected feeling always so that is the disadvantages at a disadvantage at the same time web assembly will be completely and independently running on your browser until and unless you close your browser or until and unless your clo you close your the pwa you are having the same data or same page where you left behind before that's all for the uh for this you know home introductory session and let's go back to the qa part thank you anwar for today's session on behalf of the members i saw lots of comments uh thanking for uh thanking you for this topic and um looking forward for more sessions in the future uh let me pull from the earlier questions uh that where um so omar was asking um if you could expand a little bit on how the progressive web apps is not possible with the server hosting module and if it is not possible uh to interact with the browser api um or oh he's asking is that is there is no possibility to interact with the browser api to get let's say storage and location information yeah actually see um first of all i think it must be clear now how i mean why you are not able to how many utilize the pwa option when it is a server hosting model because nothing is there on the client side nothing is there on them on the pc or laptop or mobile or whatever because everything resides on the server so you are not able to you know the pw concept itself is you know everything you will be downloaded and installed on the machine so until and unless the server is available server is running you can't use a server hosting model blazer app so conceptually there is no pwa concept for a server hosting model variant that's why now um i think the question the second part of the question is related to the data storage and all if you use sqlite and local storage option of course you can you can uh code your application to use local storages then you don't have to have the connectivity at all for even for the data you know retrieval or update purposes because you are using a local uh you know data storage but if your data is stored on a web you know hosted or azure hosted database sql azure or even in you know in in the file based database i mean no no sql options if it is there on the web or on the cloud of course you are dependent on the connectivity and you can't use your application offline when we say the application can be used offline we are saying like you know the application wise you don't need the server you don't need the connectivity but if your your data is residing on the on the you know cloud or somewhere then of course you need i saw also some requests for future sessions on advanced data binding and api data validation so maybe we can cover that in the future and there are also some requests on the like ui parts some libraries and all there is a question on azure signal r um the question is do we need to use it when this application is deployed yeah of course if you are deploying your application in on on azure uh because you i mean i have tried it to deploy the server hosting model into azure without signalr but believe me the performance and the connectivity is terrible so if you are hosting your blazer application with a server hosting model on azure or wherever i mean anywhere else you have to enable the signalr functionality because that is the core you know concept of linking the the client browser and the server you know rendered content awesome so i i remember you recommended one learn module for the community members to take after the session so that they can continue the journey and speaking of signalr i also link to one of the past sessions that we have done in the reactor around this topic so we like can discuss more topics of course in the future uh i'll be keen to get um these topics uh up and ready on the community calendar so for everyone i think that's all for today uh for everyone today's session was recorded and it will be available uh shortly on our youtube channel i provided the link to the youtube channel in the meeting chat and that's pretty much it make sure that that you are subscribed or you're part of the meetup community as well to receive all updates um around the coming uh sessions thank you anwar for joining us and for sharing this uh valuable information with our community members welcome thank you i'm looking forward to have you again uh also we'll we'll discuss that together we'll set time and dates for the future ones and thank every thanks everyone for joining us and providing this uh feedback yeah and provide your feedback also yeah please you know yeah definitely it was one of the interesting sessions we have um in in the series um i see lots of uh asks for the future ones so yeah make sure that you don't miss any of the future sessions and um take care of you if possible you know my you know let's say we have to discuss with some and arrange it but we are planning yeah of course you know api and data driven uh experience i mean examples and you know crude options and the you know signalr implementation for the live you know uh connected apps awesome awesome these are all exciting topics i mean we tried to cover i think the basics for today and uh there will be more coming like advanced and in-depth uh topics around around this um thank you everyone for joining us i have a great rest of the day and we'll see you in the future uh sessions goodbye thank you bye-bye you

Channel: Microsoft Reactor

Views: 608

Keywords:

Id: 66sutSLUmHY

Length: 79min 40sec (4780 seconds)

Published: Wed Sep 01 2021