Responsive and Adaptive Tactics for Blazor Applications

all right uh so welcome um i'm gonna talk to you all about responsive and adaptive tactics for blazer applications we're gonna touch a little bit uh on blazer hybrid as well so we're talking about building layouts that can adapt to different screen sizes desktop web uh mobile all of those things and uh this is something that i've been working on for quite some time i've been a web developer for about 20 years now my name is ed sharman i'm a principal developer advocate at progress software and i've been focused on telerik ui for blazer and the blazer framework for about the past three to four years i've also got a link to a free ebook about blazer that i could share with you at the end here and if you ever want to reach out to me just ping me on twitter i also stream on twitch uh quite frequently on the code it live channel and on a channel that i have by my own name so let's talk about responsive design and what exactly responsive design is so we're talking about flexible layouts layouts that can adapt to multiple screen sizes we're also talking about flexible content so we want the content within those designs to be flexible as well that's going to help these layouts adjust and then there's a real key component here called a media query i'm going to show you how to use all of these things together to build some flexible layouts today a great example of a responsive website or a web application is pretty simple here if you look on the left hand side we have a mobile application we've got all of our content kind of stacked in a nice scrollable tube and then as we get more screen real estate and the screen is expanded uh those elements tend to flow a little bit more onto that surface and then when we hit a desktop we've got plenty of space to just expand our content out and much more real estate to work with so i'm going to show you how to do that with a couple techniques now one of the reasons this is really important it's always been pretty important if you suspect you're going to have people visiting your web application from a mobile browser but now with blazer hybrid and maui we definitely are targeting some mobile users so the idea behind maui is that we want to target desktop develo desktop users and mobile users and these applications are going to be packaged and delivered to those systems so we definitely need to have things in place to adapt our layouts to run on those smaller screen sizes and if you're not familiar with with what blazer hybrid is yet i'm sure there's been some content here on.net conf about blazer or sorry um maui um blazer hybrid is a part of uh maui or a stack on top of maui that lets us run our blazer applications within a maui application and those run natively on the desktop and on mobile so if you haven't learned about blazer hybrid yet check out the latest edition of code magazine because there's an article that i wrote in there that gives you real in-depth detail about what blazer hybrid is now when we do responsive design and we do layouts for our applications these days a lot of us reach to these frameworks like bootstrap and tailwind these are excellent places to start if you're not really familiar with css one of the downfalls to using these though is that you do not end up learning css at the end of the day you learn the frameworks there are some real simple techniques that have come with the latest versions of css that almost make these frameworks obsolete you're not going to need these for layouts anymore you can actually do this with just regular css these days so i'm going to show you two techniques that you can use to make layouts that are super flexible and then we'll add in things like media queries and then some other libraries to do additional things to adapt our layouts so the first one that i want to talk about is css grid this is a two-dimensional grid-based layout system for the web this is something that you might be familiar with coming from like a xaml background there is a grid layout component in xaml and the web we have something like this too but it exists in css and it's called css grid so again this is a two dimensional grid-based layout system we'll talk about what a one-dimensional system looks like next but focus on the two-dimensional part for a moment because we're going to talk about grids with columns and rows so with a grid we define multiple columns and then we can define multiple row templates as well and i have some good demos that we can jump into right away and take a look at how to implement these and as i do that i'm going to share a couple links here first of all if you're a desktop developer and you're coming to blazer or web development i wrote an article on how to do layouts and showed that the similarities between those components in the xaml world versus those components in the html and css world so i've dropped a link on twitch if you're on twitch you'd be able to grab that article and take a look i'm also going to drop another link here this is a link to something called telerik ripple for blazer so the demos that i'm showing today you can actually run right in your browser even if you don't have blazer installed or net installed on your system all you have to do is open up a web browser and you can come right in here and tinker with the code and see it run right live in the browser so i'll drop a link for that as well for our twitch audience so i'm going to jump into visual studio you can play along there at home if you have that linked to the blazer rebel but i want to go into visual studio because i have uh the live or hot reload enabled on this project and we're going to do some work so this is a regular blazer application and we have uh some different components that we're going to be looking at and changing some layouts for and we're going to focus first on some pages here so i have a page that's dedicated to showing how the grid works a stack layout page or flexbox page and then we'll do a more complex weather application uh notice that we have a file underneath each of these that has a dedicated css file for each of the components so i have index.razer and index.razer.css this is css isolation for blazer so each css file is associated with those components and scoped directly to those components so you're not going to get interference between different css overwriting one another so let's start with the grid layout so i've got a div uh container and this is the main layout here and i've got several elements underneath that i want to organize into a grid and you can see those elements being rendered out here on the right hand side and these are just kind of getting dropped into the browser there's no real layout at all here what i actually want to do is split this up into two grid columns so i want to take this and break it down into a grid and then i want to have a column here on the left that is a little bit smaller than the column on the right so let's look at the css for this and we can discuss how we can do this with css grid remember css grid is a two dimensional layout so the first thing i want to do is adjust my css for the main layout of this page i'm going to come in here and i've got these lines commented out so you don't have to watch me clumsily type over my code and the first thing i want to add is display grid this is going to put the element in a grid display mode so we'll hit save here and hot reload over here is taking place you can see there's a little bit of a change here just with the sizing of each of those items now i'd like to add a little bit of spacing between each of the grid items so i'm going to come in here and uncomment this line gap so what gap is doing is it's putting space between the items notice i said between so when we're using css grid we could use something like padding or margin to define the spacing between these items but if we use gap what that's going to do is only focus on the white space between each item and not the first and last item where you might have white space before or after if you're using padding or margin and those things kind of get tricky and you have to add extra css code to eliminate the padding and margin on the tops and bottoms of those items so i'm going to use gap here and that's going to solve a lot of problems for me and give me nice white space the next thing i want to do is break this into columns so i'm going to say grid template columns and i'm going to use what is called a fractional unit here i'm going to focus in on this for a second because this is really important i'm telling the grid to give me a three by five layout so the first column is going to be three fractions and the second column is going to be five fractions and that is basically a ratio of space that the two columns occupy so because i have two values here the value on the left is the left-hand column the value on the right is the right-hand column and they are going to be a ratio of space for those two columns so now i've already broken this into a two column layout the next thing i want to show is we can create repeating layouts layouts that have a template that they follow for each number of items so for each of these sets of grid columns or grid rows rather i want the first row the lighter gray color to be twice the size of the second item and i can do that with another template and this time i'm going to template on the rows and i'm going to say grid auto rows instead of grid template rows i use the ter the uh the keyword uh template versus auto auto is going to repeat a layout automatically so now you can see the light gray boxes are twice the size of all the dark gray boxes that's because they are two fractional uh with more than the next elements it's a two to one ratio i have two to one on every time these rows repeat and that that template will repeat each time there are two rows so now this is a really easy way to break up our layouts into these nice grids and i'm going to take a look in the dev tools here for a minute because the dev tools actually give me a lot of help i probably need to go full screen to show this correctly we'll move this across here and uh when i highlight the main layout of the um the view that we have here notice that we can actually see the grid in our browser so with our our developer tools we can see this nice and clear and then there's an additional button here that says grid over on the right hand corner so i'm going to click this button and this is going to enable some debugging for the the grid layout as well so you'll notice when i have that button toggled i have the coordinates for each of the columns and rows and where those items begin and end so i have 1 2 3 and so on so i have an x y coordinate that i can work with when i'm trying to debug things so it's important to look in your dev tools and see how these tools can help you when you're stuck in a situation you can't figure out what exactly is going on so i'm going to move on here we don't have a whole lot of time we're going to jump over to flexbox now flexbox is a one directional flow layout system so we're not talking rows and columns this time we just want to define how our elements are flowing throughout the layout so we're going to go with either a left to right right to left or top to bottom bottom of the top flow layout and we can adjust on how these wrap how they span the space etc and these two design systems are not mutually exclusive we can use them together and i'll show that in a moment as well so let's take a quick look at how we can use this layout in our application so we're going to go over to this flexbox page and i'll close out our grid code here and you can see i have a div with a couple paragraphs inside of each of these sets of elements so let's look at the css code here and see how we can make these a little bit more flexible so i'm going to change this to display flex and you're not going to see a whole lot of uh change here because we're going to set the direction of the flexbox to be a column layout so we're not going to see a whole lot change there until i start aligning items now aligning things in css was difficult back a while ago and now we can align things very easily using flexbox and i'm not sure if my hot reload is still working so let's do a little bit more here i'm going to take the second set of elements and we're going to flex these as well and we're going to set the direction to row and just as i suspected i don't think i'm getting a proper update here let's try gap and see if this affects our layout at all it did not so let's go see if something happened to our running application maybe my watch stopped running in the background something seems to have stopped just try and we'll go with flexbox there we go so now what i've done is on the first set i've enabled flexbox and i've told it to align all of the elements to the center and on the second set of elements i'm telling them to justify to the center now when you talk about alignment with css it's in the terms of a line or a line is going to be horizontal alignment or sorry vertical alignment and justify is going to be horizontal alignment so i'm able to align these items very easily here now if we want to put these items together we can do that as well and that's what i'm going to look at in the next demo is we're going to take the idea of using a grid and a flexbox and put them together with some components so i have a couple of components in this view i've got a weather container which is just the main layout for these components to fall into and then i've got the three components whether today weather high low and a weather symbol now pizza seems to be the theme of the show today i feel like i should have had a pizza demo i feel like i've i've left i've been left out of a memo or something so maybe maybe instead of a weather symbol we should have pizza in here and i can i can be part of uh the uh part of the pizza crowd there we go so we it's it's cloudy with a chance of pizza today so we've got our pizza logo there but let's focus on laying this out all right so i'm going to split this up into a grid now and we already have some flex boxes inside of those components that we just built so the first thing i want to do again on the container i'm going to set this to grid and that's going to give me a grid element in a grid layout and i'm going to set up those template columns again this time it's a one fraction wide by two fractions wide and notice this isn't quite the layout i probably want what i actually want to do here is i want this side to have the weather information that is here i want to span that across the bottom and make that a nice um uh footer on the on the bottom here and i want to take the pizza or the weather logo and put it in the upper left hand corner and then i want to shift this over here and that might sound like a difficult task but with flex or with css grid this is actually pretty easy to do so the first thing i need to do since i am using components and i'm using css isolation i want to target the css that is within the weather layout component uh the hi-lo component so i'm going to use a deep selector to make sure i get the the topmost css selector of that component and then i'm going to tell it where i want it to show up in the grid so i want it to show up in column one but i want it to span across both rows in that column or both columns in that row the next thing i want to do is take my weather symbol and i'm going to tell it to go ahead and render in the upper left hand corner of the grid and i did that by saying grid column and grid row and giving it coordinates and how many uh columns it will span or rows that it will span now if the source order of those components didn't matter because i'm directing that component with css and telling it exactly where i want it to live so that is the power of css grid and flexbox the next thing we're going to talk about is media queries so media queries allow us to detect what screen size our application is running at and then we're going to adapt the css to tell it maybe to change some of these grid columns rows or some sizes of elements on the screen so let's take a look back at our grid css now on our grid css so we've got the wrong screen up here kill that one there we go if we go back to our grid um you can see when i shrink this down maybe i'm on a mobile device i still have two columns it's a little bit cramped so let's see how we can fix that so one of the things that i like to tell people is to do mobile first so before you start adding media queries make the first set of css that the browser is going to see be the mobile layout so what we're going to do is we're going to take away these grid columns for a minute so we'll take those out and notice i've got a single column layout that's exactly what i want that is actually the default if no grid columns are defined for a css grid so i don't even have to specify anything you could add a one column layout there if you wanted to but by default that's what we're going to get and then i'm going to detect with a media query what size my browser is capable of showing and i've got this set to a min width of 768. so these kind of are backwards logic to me this says if i can show at least a minimum of 768 pixels then i'm going to apply these next css styles so if it is greater than 768 pixels i'm going to take the main layout and then put those same templates that i had before in there now if i open this back up you'll notice that i've got a nice responsive layout when i'm on a bigger screen i get two columns and as i scale down i get one so that's pretty cool i can do that with uh css media queries but what if i wanted to detect something at runtime you know this isn't a perfect world where i'd get to define everything at design time i might have multiple items coming in from a database i've got a for each loop running over items and maybe i need to make some logical decisions based on the screen size and how i want to display these items so let's talk about a library that i wrote called blazer size this is giving us the ability to detect through c sharp code what the media query on that device is and then we can adapt our code uh to render the ui differently or we could even throttle how much data is coming over the wire if we feel like a mobile device should have maybe less records being pulled in those type of things so what a runtime media query gives us is we can set up a component that has a specified breakpoint which is the media query itself again greater than 768 pixels for example and then it's going to bind to a boolean value um in the code and we will get an event that triggers every time that media breakpoint is uh crossed so if the browser expands then we'll get a an event that triggers and says hey the browser just got bigger and it crossed that threshold so now we can trigger on that and we could say if there's a small device detected go ahead and show weather cards in a and we'll pass it the weather forecast data otherwise we'll go ahead and show weather in a grid so maybe we've got more real estate we could show a full data grid on the screen versus just showing them as cards so i've got a demo here now that i'm going to show you and this is running.net maui so again this is really important for maui because i might be running my application in a desktop like this where i have plenty of room for my weather forecast page to show a full data grid but i also might have users that shrink the screen down and pin it to the side of their display and i want to show some some cards here so i've completely changed out the display component i also might have users that installed the same application on an android device so now i'm running blazer natively on an android device with maui inside of a blazer webview and notice i have the weather cards here i don't have a data table crunched into the small space that's because blazer size is detecting the screen size and it's saying you only have enough room to show so much let's go ahead and use weather cards instead of weather data we can completely swap out the display component so that is one technique that you can use um all you have to do is install the package and with a few lines of code you can be set up for that if you want to see that live in the browser right now i've got another uh link that i'm posting in the twitch chat for a blazer reple where you can just open the browser and check the code out last but not least i want to mention um i work for progress the folks that make the teller ui for blazer and if you're the type of developer that would rather have a component to define your css grid and your flexbox we actually have components that do this so we have a grid layout component we have a stack layout component and the work that i did on the blazer size package is also a research and development for a media query component that we have in teller ui for blazer as well so if you already are using teller qi for blazer there's no need to install another third-party dependency to get that media query component you have it there too so this should leave me just a minute for some questions i'll throw resources up here on the page i think we started a little tiny bit late so this might be able to give the wonderful folks in the studio a few seconds of their time back to catch up that's cool we appreciate that uh so i've got us up on screen now and what i'm going to do now is remove your thing and then we're going to add the questions to the stream uh this first one will probably make you happy your partner uh has been watching you uh hi alyssa we want to say hi to you um she she wanted to celebrate you being on live at uh.netcomp so i wanted to go ahead and pull her up on screen thanks melissa cool um and we did have one other question here that might be a loaded one did it go away um it was basically where did it go down a little bit more a little bit more yeah getting so many good ones it got helpful there it is oh this one's probably a loaded question what do you think about that one ed uh from tutorial.net conf the eternal question is blazer or razer um laser or razor yeah so i went i wish i had time i actually think i did this for dotnetconf two years ago oh yeah okay uh where i did a talk about what the the actual difference our differences are between blazer and how it renders components so dot razer versus dot cs html um on the on the coding experience not a whole lot of differences there you use the at symbol you create some code you know some html and some scripting and things got it under the covers those things are compiling to two wildly different things and i think i talked about that two years ago on.net conf that's cool you should maybe post a reply to that question maybe with a link to that little.net con session since we still probably got all this online i'll absolutely go back in and look through the twitter feed and try to answer as many questions as i can sounds good awesome uh well thanks a lot

Channel: dotNET

Views: 2,546

Keywords: .NET

Id: n53rWnIkbkk

Length: 27min 2sec (1622 seconds)

Published: Tue Nov 16 2021