Components in Blazor

moving on to the next uh we have poori nama nayar um coming on with us ah there we are hi fernando how are you doing hi jamie i'm ben thank you oh excellent okay i can hear you perfectly you look great so we're just going to go ahead and get started um we're going to be talking about components and blazer so take it away sure hello and welcome i'm purnima nair and i'll be talking about components in blazer today i'm a freelance developer based in langley baksha uk i do a lot of work around the umbraco cms and i've been in a barracuda mvp for two years in running non-work me i read a lot melee fiction and i learn carnatic music in my spare time as well that's my twitter handle should you wish to connect with me straight into the topic uh components are building blocks of glacier apps they are files with dot razor extension so if you are an mvc developer uh you might be really familiar with the syntax that i'll be demoing today they are basically using razor code uh in your files uh your blazer app could have pages it could have forms it could have shared dialogues all of them are components at the end of the day components can be nested so you can call one component from another component that can be reused so if you're really clever with your architecture of the components you can even have a shared library of sorts which you can share between your various blazer apps names in blazer must always start with an uppercase character if you want to include a component in another component you can do so by using the name of the component as the html tag so in my case i've got an example razor called my component.razer which is a component and as you can see the name of the component becomes my html tag and that that is how i would call my component in a page or in another component components compile into partial classes usually of the same name as the component itself it's a really tiny bit of knowledge but this particular tiny bit of knowledge goes a long way trust me today's demo i have put together a sample repo it's based on the blazer web assembly model and i will be talking about a series of things or series of features which components portray and i'll be basically touching the pages folder that you see here the shared folder and the www root time dependent but i believe the link to my demo demo repo has been already shared with you the first thing i would like to discuss about components is routing if you look at any of the razer components in the pages folder you can see a something with a page directive right at the top of the file so this suggests to blazer that this is a page in your web application laser application and when these components compile into partial classes a route attribute gets attached to those partial classes and this effectively becomes the route template so you can specify your route template and that's attached to the route attribute of the partial class when user requests a url from your app the router goes in and tries to find a match for the incoming url against any of the route templates it's got the knowledge about so in in this case if the user is requesting parameters the razer would find this particular component and return this component and all this routing magic happens in the root component of the app which is the app.razer here you have the router it tries to find out what's going on does it have a matching route template uh in its knowledge if it finds anything it passes on it on to the route view template and then your component gets rendered to the end user any route data is also passed through if it doesn't find any match sorry there's nothing to be displayed that message gets shown through uh the next thing we can talk about is how to include c sharp code in your components components are quite versatile so it's just not races and tags that goes into them you can add c sharp code and make it as flexible as you want make it as interactive as you want there are two ways of doing it first one is the code director way in the code directive way your razor code as well as your c sharp code will coexist in the same file once you are inside the code directive anything that you can put in the class can be put in the code directive you can even have multiple code directives but you can then have fields you can have methods um your lifecycle events everything goes inside the code directive uh and this is not only for the pages or components with the page directive you can also have the same thing in a shared shared component as well so even with shared component it's the same kind of structure that follows you can have your razor code and then the code directive the second way to have this or to having c sharp code in your components is by splitting it out into two files one the first part of the file would have the razor code alone and as you can see my my component is called code partial class and it's the same exact code that i have got in my code directive demo here except that i've changed the heading here the c sharp part of this would go into a partial class of the same name as the component here it is important that it is a public partial class otherwise it would just not compile and the name needs to match up obviously in the same name space as well and the same exact code that i've got here has been put in here my demo is already running so if i take you through the demo here this is i've extended the navigation which comes out of the box in the visual studio template uh and i've just lined it up so that i can take you to the demo quickly the code directive demo it works fine it updates the counter for me and if i go to the code partial class demo it updates it so for me for me as well as you can see there's absolutely no difference in the way it functions for me this is all about how i want to lay out my code and if you're wondering whether um in the code directive demo where you have c and the razer file coexisting whether you can actually see the code going ahead in the view source you just can't you won't be able to see that it's all nicely hidden from you but of course it's the web assembly model so you would have all the dlls uh downloaded locally for you let's talk about parameters and components components can can consume parameters which is what makes them so versatile because they can accept dynamic data and then perform logic according to them the first type of parameters i want to look at is the route parameters i've got this parameter component here let me close the other one and in my page directive when i specify the route template i can have specific values in this format in this convention when i specify a string inside parenthesis in a route template that's treated as a route parameter um you can have multiple rot parameters you can even have parameter well within the url there is no hard and fast rule that it should be right at the end of the url and this is us providing a route template or passing a value but how does the component consume it it is consumed by using a public property of the same name as the parameter so i've got value and i've got other value as two parameters that have supplied to the route template i specify public properties of the same name it's a case in sensitive match as you can see but i don't both of them with the parameter attribute this kind of matches up with a little bit of convention and it tells blazer that this properties needs to be treated as a route template especially because we have page directives with route templates specified for this particular component and if you are to look at my demo here uh in my navigation i've hard coded something uh i've hard coded the url to be parameter slash this is a rot parameter going into the file i can see that the value property has been the value parameter has been picked up and it is displaying properly uh if i change this to say value slash value 1 select value 2 say it's from my browser history it is mapped against the parameter slash value slash other value route which i have specified here it's mapping up if i change the value to to say hello it matches it against this particular route and the other value is completely ignored um at this point of time i don't think we can have optional parameters in routes so if you the work around for that is to have a route template with no parameters and then specify any parameters that you want so that's about route parameters the next type of parameters that components can consume are component parameters and for that i've got a little shared component here called display text i again have a public property here called text which i'm trying to displacing at the right syntax and i've adorned this public property with the name parameter in cases like this where you have a component without a route template specified if i have a public property with a parameter that is treated as a component parameter now if i were to call this component from another component i would be using the name of the component as a display text this is what i explained in my introduction files slides i'm using this as the html syntax and the html tag is display text going by the razer component name and as you can see something called text is available to me this text is in fact the parameter that i specified here which gets available to me as an attribute and i can pass some values to it and that is exactly what you see here there's a third type of parameters which i'm just going to touch and go i will leave you resources at the end for your own reading which is cascading parameters as the name suggests something cascades all the way so these are parameters or values which can be uh used when you have to conquer a multiple um go through too many layers of nested components say some you have something in your layout component which you want to pass through all the layers something like a theme value which you want for your application so in such cases you can use cascading parameters to achieve the scenario what you would do is pass a cascading value and the components would consume that as cascading parameters there's a there's a little code demo in my solution for this i will let you read up and have a look at it moving on uh lifecycle of a component as developers um for myself i would really love to control the behavior and override uh the output if i can of anything uh and of course for that with components we have life cycle methods uh there are three or four different lifecycle methods which i can talk you through the first one is set parameters as sync so this is the first lifecycle component a lifecycle event which runs for the component and the main job of it is to set the parameters for the component let's have a look at the signature for this event which i have got here it's an async method which returns a task of course it's an override and it accept accepts a parameter view object as a as a parameter to the method the parameter view object is a collection of parameters and values uh which the component has received so my shared component this is a shared component and i've got three parameters specified as component parameters first name last name and job title when i call this component from my page here component life cycle i am only passing the first name and last name values so when the control gets to this method the parameter view object would only have the first name and last name parameters and their values i haven't supplied anything for the job title parameter so that we skipped so when this method runs what it does is it tries to match up the parameters against the values it has and when it finds a match the value is assigned if there is no incoming value for a component parameter that parameter is kept from any assignment of values going to this page and looking at the browser console as you can see i am trying right trying to write something to the browser console and what i'm doing here is looping through this parameter view parameter view object and trying to write out what was bound and what is the value as you can see when it enters here the first name is bound and then the last name is bound the value of the job title parameter is completely skipped the second method which runs soon after set parameters is sync is the all initialized method which again has an sync version uh it runs soon after set parameters async and if you have any data initialization like calling out a database or a third party service to initialize your data this is where you write the code for that and handle the logic in blazer web assembly it runs only one time the method runs only once and in blazes server apps because of the way the server app is where it pre-renders and then connects to the server using a signalr connection this method is rendered twice another important point about this method is that if a component is refreshed say a parent component refreshes a child component this method is completely skipped upon refreshes this method gets called only when the component is requested for the first time the third one is on parameter set whenever the parameters change for a component this method kicks in it usually kicks in after on initialize but thereafter it kicks in every time when the parameters change um same like before if you have a component refresh if a parent component refreshes a child component the on initialize method is skipped in that scenario and in such instances the on parameter set async method kicks in after the set parameters sync method the last method which uh i want to discuss today about the life cycle is on after render which again has a sync version this is the last life cycle method to run uh but that doesn't make it any less important because this method runs only when the component has completely rendered you might have instances where you want to call javascript from your code you might want to refer to child components and the elements uh from a parent component say for example so all those child uh element references all the dom is ready for you to query only at this point um so going back to my sample repo let me first take you through the meta signatures for the own initializing parameter set of sync the own initialized is pretty much simple it does it returns a void you can do what you need to do here the on parameter set a sync returns a task and if i look at the browser you can see it running one after the other the on after render sync method returns a task and accepts a first render boolean as a parameter so there might be instances where you want to perform logic only for the say first first render of a component so in such instances you can do this check to see whether it's the first render of a component and then perform logic based on that so that's about life cycle methods data binding of course blazer is a single page application framework and it's a post data binding the first type of bit data binding is one way data binding so let's talk about that briefly one way data binding is unidirectional flow of updates an example would be to read or display something using at the rate syntax it's classic razor syntax so if you have a property or a field at the right property name or at the right field name can display the value for you that is a good example of one-way data binding sometimes you might have scenarios where i'm trying to display something but that value is updated upon an interaction from the user side that still is one-way data binding because it's the application that does the update for me i cannot do anything myself as a user to update that value so as an example here i've got this page i've got a one-way data binding example i'm trying to display a field or a property which i've specified in my code it's a field i'm trying to display the value here i've got a button and upon click it does some method and if you look at the method i'm trying to increment the value of the current count field i'll talk about even handling in the next slide so i'm just leaving it to some method for now and if i run this demo upon click me it updates the value behind the scenes and i can only display that value i cannot update it myself that is the most important aspect of one way data binding the second one of second type of data binding is the two-way data binding which is the lifeline of forms in blazer if you are familiar with a javascript library like angularjs or react more frameworks you would be very familiar with this concept of two-way data binding because data binding you can see it happening real time if you want and all the magic in data bind two-way data binding in blazer happens with the at the rate bind attribute this attribute is specified on html elements say input type text or input type checkbox and the value of the bind attribute binds to a property name or a field name or even a eraser expression the bind attribute is quite smart enough to understand which attribute of the native html element should it bind to so for example in my demo i have this demo here where i'm binding a first name field in my code to this input type text so this bind attribute is clever enough to understand that it should bind the first name to the value attribute of the input type text by default two-way data binding happens once the user focuses out of the field so when i step out of the field the data should bind so in in case of an input type text it happens on own change but i can always override it and i can set the data binding to happen upon another event in that instance to make that happen i would use a syntax like this bind colon event equals on input so this tells uh blazer that hey blazer bind this text box value to the first name input field here but don't bind it on own change i want you to bind the data on the on input event so if i go and have a look at the demo here if i type in my name here nothing happens there's one thing i forgot to mention i'm also trying to display the value here so that you can get to see when it actually binds so let's start all over again i have pressed tab focused out that is when the data gets bound for me but in the second box where i have changed the bind event to on input upon every input from my keyboard the data is getting bound and i can see that value changing as well for me so that's two-way data binding let's talk about event handling in blazer you've already seen examples of this but in my demo today but to just reiterate everything events can be specified um as htm as attributes of html element of the format on event where event is the event name uh say for example i can specify and at the rate on click as a as an event for the for a button and the value of that would be treated as an event handler so when i when i execute a click action on the button the handle on click event would run event handlers can return async and a task you can even uh even though the event handlers do not expect any arguments you can pass it in optional event tasks like a mouse even tags or a keyboard even tags if you wish to understand more about what caused the event or say which keep key was pressed let's have a look at the sample code for this again one way data binding i've got this button here and i'm specifying an event here and as you can see it's all of the format on click on event uh and i'm specifying a value here called increment count and this would be treated as an event handler the event handler is in my c sharp code here it updates some value for me and it is the reason why when i click the value increments for me so that's event handling for you i can also show you something about mouse event ask so if i click this button it should write into the console which which mouse button was clicked so for example if i click this as you can see it's updating a zero the reason being i am i'm clicking a left button and the value for the left button is zero and the code for that is here for the mouse event tags there's a button which on click and in the event handler i've got my mouse even tax which updates some value and writes which button it is into the control i can also pass in a keyboard even tags which outputs the key which i have pressed if you want to have a look at that it's it's labeled incorrectly by the way i'm sorry about that as you can see it is updating something in the browser console for me so that's event handling with an optional event dogs the last thing i want uh to discuss is that accessing the javascript runtime i will very quickly run through this you can access javascript runtime from blazer app so you can call.net from javascript or you can actually call javascript from your.net code and for that you are given a nice injectable dependency called igs runtime from microsoft so this is basically an instance of the javascript runtime to which you can dispatch your call once you have injected this into your code i can make use of it in my code because it's a javascript code going a few slides back it needs to be handled in the own render after a sync method which is exactly what i'm doing here i've got the javascript runtime and i've got the invoke void sync method here which accepts an identifier which is a function identifier and i'm passing in a series of arguments which are serializable the function identifier is specified in the function is specified in a scripps js file and as you can see it is specified on an alert scope and the alerts is specified on the window global scope so that's one of the requirements of this method the function identifier must be relative to the global scope which is the window hence i've got it as alerts and show alerts dot show alert it doesn't return a value and all what i'm doing in my script.js is alerting something that i'm passing to the function um the script.js needs to be referred in the index.html file which is the root of your blazer application because it's from here all the controls go through and if i have a brief look at the demo here as you can see it is getting outputted uh last but least components can communicate with each other as well i've got a little demo here where i can see the parent updating the child i'll let you have a look at the code and read through the samples but i can i can al also update from the child to the parent as well so that's my resources i believe the links to which has been shared thank you excellent presentation uh purinama that was amazing everything was very clear and um all of the resources noted so really really really great job i don't oh we have one question that i want to get and uh so let's let's pull it up um so it's by cosmo and it says can blazer handle dynamic routes from cms um i believe some kind of integration should be possible this is something that i'm quite interested in myself as well something that i'm going to look forward to as well i believe you can do something about it i haven't tried it myself but i would be equally interested so if i if i achieve something with it definitely i'll let you know i haven't attempted it myself but yes i am hoping that something should be possible you can do something clever yeah we could play around with it yeah excellent maybe if you do discover a solution we can we can tweet about it and promote absolutely i'm on it um amazing um i believe uh i don't let's see if we can pull this one up um this is by um pipe tabor how will blazer perform with an enterprise app i have absolutely no doubts about it because blazer is production ready and i think blazer server came out last year with 3.1.net core and even before that people were really playing around with blazer and then there's millions of blog posts around it so i am pretty sure the performance will be on par with any any other application that you've got out there and with dot net standard coming on the dot net 5 coming on board um everything is going towards a more uniform platform which means you can you can pull in code from elsewhere use it um basically and you if you have written something for blazer you can equally use it elsewhere as well so i think there's a huge potential for blazer especially with that is where i see blazer being used and i think it will perform really well excellent well thank you so much uh for your time and your feedback uh we really appreciate it excellent session this was recorded so if you are unavailable to catch the whole session you can rewind and catch it on the stream uh thank you so much porinamo for joining us today we really appreciate it

Channel: dotNET

Views: 6,105

Rating: 5 out of 5

Keywords: .NET

Id: bNrym4PqhgM

Length: 28min 51sec (1731 seconds)

Published: Fri Nov 13 2020