HTMX and the View Transitions API

in this video we're going to take a look at the view transitions API this is a new web API that's available on some browsers and this API makes it easy to change what's on a web page in a single step and it allows these smooth transitions between one state to another and this is particularly useful in Spa applications but it's also useful in the context of HTM X and that's because HTM X will take response HTML and it's going to swap it into the Dom we want this experience to be as smooth as possible and in this video we'll see how we can use the view transitions API to do that so let's get started we're going to look at this documentation that we have here and this is some documentation from Google Chrome and we can see the description here of what view transitions are it makes it easy to update the Dom in a single step and it creates an animated transition between the two states and we can see an example of this below here when an item is clicked on the screen here rather than the new content appearing immediately we have this transition between the old content and the new content so the question is why do we need this feature because page transitions look great but they also communicate direction of flow they make it clear which elements are related from page to page now I'm going to go to some documentation from mosella and I'm going to leave this below the video as well this is how these view transitions work this is the process we have an API and let me make this text a bit bigger here so we can see this we have an API and that has a very simple interface we have this document. start View transition function and that function when it's called is going to take a screenshot of the current page and then the call back function that's passed into the start view transition function that will then be invoked and that's going to cause the Dom to change from one state to another and then when that callback has finished running and updated the state we have a promise called update callback done that will fulfill and then you can respond to the DOR updating so it kind of works by taking screenshots of the Old State and the new state and then anim ating the transition between those two states and the API will construct a Sido element tree with that structure here now I'll leave a link to this below the video I'm not going to go into the details too much HDMX provides a very simple wrapper around this API we're going to get to that now and start coding now I have VSS code open here and this is a very simple jangle application but do note that this view transition code will work with any back end as long as you're using HDMX on the front end now you can see we have a single view here in this jungle go up and it's returning a template called index.html so let's open that template now and that has some text that says hello in here what I'm going to do is create an element here this is a main element and we're going to give this element a class of main content and this element with that class is going to be what we Target in the HDMX response so we want the response HTML to be swapped into the document at this element with this class now I'm going to sketch out a very basic example here let's add an H1 tag and imagine that we have a job application system so job title as an HTM X developer and I'm using bootstrap classes here and that's because I have bootstrap loaded into this base template here so we have bootstrap available and as well as this H1 tag I'm going to add a paragraph tag that simply says click below to apply and below that we're going to add a button here so let me copy this button I'm going to paste that in here that button says apply and when we click this button what we want to see is a form that allows the user to apply for an imaginary job so in order to see this I'm going to run the Django development server here and we don't need a database or any migrations in this application this is just a demo that's not going to use the database so now that the server is running I'm going to save the index.html file and we're going to go back to the browser here and you can see this basic page structure we have the button here when we click this button we want to swap this content and replace it with a form that allows the user to submit an application now what I'm going to do to start with is go back back to vs code where I have another template here it's called application form. HTML and this extends That Base template that contains the HTML boilerplate code as well as that bootstrap CDN import and within the content block I'm going to paste some simple HTML we have an header tag here containing the text application form and we have a form with a class of flex column six and this form contains two fields we have an input field of type text and we also have a text area here and that's for the imaginary cover letter for this job application and finally within the form we have a submit Button as well now normally when you submit a form like this with your data you would want to send a post request but we are not actually going to handle the submit in this video we're just going to demonstrate the view transition so we're not going to attach a method to this form let's save this application form and go back to the page when we refresh this page when we click the apply button obviously nothing is being swapped at the moment because we have no HTM X attributes on the button so what I'm going to do is open up the HTM X documentation and the section on installing HTM x what we're going to do is just import it from a CDN so I'm going to copy this script tag and we're going to go back to vs code and in the base template here just underneath bootstrap let's paste in that script tag so that's going to bring HDMX into the application it's going to make those HTM X attributes available to us what we're going to do now is go back to index.html we're going to Target this button here so let's add some HTM X attributes to the button let's say we're going to send a get request to a particular endpoint so what I'm going to do is Define that endpoint using the jangle URL template tag and we're going to reference a named URL here that we've not created yet we'll create it in a second but we're going to call that application form so the button when it's clicked is going to send a get request to this application form endpoint and as I said earlier we want the HX target the target of the resp response content to be that class with main content so basically we're targeting this main element here and we want the response to be swapped into the document inside that element so let's save this file and now we need to create this URL in the jangle application go to urls.py here and we already have one path I'm going to copy that down below and I'm going to reference the name here as the same name that we put into the URL template tag and let's define the path here it's going to be application form and find finally we're going to reference an application form view here in the Django application so it's going to be called application form and we now need to go to views.py and create that new view so let's create a function here and it's going to take the request object and I'll get another space in between these views what I'm going to do is I'm just going to copy this code and bring it into this new view and this is the view that's going to return the response for this hmx request and remember when we click this button here on the page we want to get the form back so what the response is going to contain is this application form template here so what I'm going to do is I'm going to copy this template and I'm going to bring that into views.py and paste that in here so we're going to render that template and HTM X is then going to take that response and swap it in at the Target which is this main element here so let's now test this out if we go back to the browser and refresh the page this time when we click the button you can see that we're getting back the application form and it contains the two Fields the first one is the text field so you can imagine writing a name in here and then a cover letter for why you want to apply for that job now what we want to focus on here is the transition between the original state which is this page here and the new state which is the form you can see that that is not very smooth it's very much an immediate transition between State 1 and state two and the content in state one is immediately replaced with the content in state to which can be quite jarring and it can also not be the best user experience let's say so how do we add a view transition with HDMX now what I'm going to do is go to the HTM X documentation again here and if you look at the left hand sidebar here there's a section on swapping so let's click that and you can get the documentation for how HDMX actually swaps The Returned content into the page and this is done with the HX swap attribute what we're going to do is scroll down here and there's a section on view Transitions and htx explains about what these are they give developers a way to create an animated transition between different Dom States and HDMX provides a very easy way to work with this new API what we're going to do is we're going to use this particular option on the HX swap attribute and you can see above we can also set a configuration variable to True here and that's going to use these view transitions for all swaps so if you want to use view transitions for every single response swap then you can do that what we're going to do is copy this option and we're going to go back to vs code and this button here that's responsible for sending sending the get request what we're going to do is add an HX swap attribute to that and I want to swap the outer HTML of this main element which is the target we want to swap the outer HTML with the content that's coming back from the Jango server and as well as that we're going to paste in that transition true property and what that's going to do hopefully is apply a view transition the browser default view transition between State one and state two so let's save this file and go back to the browser and in the application here if we refresh this time when we click apply you can see there's a transition between State one and state two so this time rather than the content immediately being loaded from state two we have this kind of Fade Out effect from State one and a fade in effect for State 2 and this is the Google Chrome default view transition you can use this very easily using HTM X all we have done here is we've used the HX swap attribute we have the normal swap mechanism here the swap method and then we add transition true as an option to the HX swap attribute and that tells HDMX that we want to use view transitions in order to go from State one to the new state coming back from our Jango server now as well as the browser default transition we can apply our own custom animation or our own custom transition between the two states and what I'm going to do is use a modified version of some code that's been provided on the HTM XX documentation there's actually an essay on view transitions I'm going to link below the video this is written by Carson from HTM X and one of the sections in this is an example that uh uses the view transitions API and it defines some custom CSS animations here some key frames and some transitions what we're going to do is use a modified version of this so let's start by copying this style tag that's from this post and we're going to paste that into the base. HTML at the top here within the head of the document let's paste that in and that defines the code for these transitions so let's look through some of this code we have some key frames that are defined and these have a name the first one is the fade in key frame which goes from opacity zero to opacity 1 and we also have a Fade Out key frame here that goes to opacity 0 so it's going from opacity 1 or whatever the opacity is originally defined as to opacity 0 and we have two more key frames here that are going to be responsible for sliding the content we have one called slide from right and that is going to take the content and it's going to move it from 90 pixels to the right hand side so when this is applied it's going to start that content 90 pixels to the right and it's going to go from that state to whatever its final position in the document is going to be and we have a slide to left key frame just below there and that is similar to the above but instead of going from 90 pixels to the right it's going to go to 90 pixels to the left below that we have these animations that are using the The View transition old and view transition new properties here and these represent essentially the screenshots of the content so the old one is referencing what we have in this form originally or this page originally it's this HTM X developer page and then the new one will be referencing the new content here so we have two of these in the CSS block and again these are both given a name here called slide it and there are two animations defined here we have this first animation which is going to use the Fade Out key frame and a second animation that uses the slide to left key frame so when we are removing the content on the original page and replacing it it's going to fade that content out and slide it to the left and on the new content which is the HTML form that's coming back from Jango we are applying the fade in key frame and also the slide from right key frame and these are done with particular settings here for example the duration of the animation 600 milliseconds we have an animation timing function and that controls how the animation works when it's transitioning from State one to state two you can have a linear transition or you can have ease in and ease out transitions and also more complex functions such as this cubic bezier function so if you're interested in these I'll leave a link to the animation property in CSS that is some good documentation I'll leave a link to that below the video and finally what we're doing is we have some styles that are applied to a class called sample transition and all doing there is adding a view transition name and we reference the slided view transition that was used here for the new content and for the old content so that's a bit complex I'm not an expert on these animations myself so hopefully you can read that code and understand that what we're going to do is save the base. HTML file and we can close that off and what we're going to do is add that sample transition to the classes involved and these are the classes that are used both as the HX Target and the original page but also we want to add the sample transition class to surround the content coming back from this application form so I'm actually going to create a div to surround this and give it that class of sample transition and we can tab all of these over and close that div just below here so we have that class of sample transition here and that's what actually defines the view transition and applies it so we need to use that class both in our original content and that's in the HX Target of that original content but also in the root of the content that's coming back from the response so we do that in both places and then we can save all of these files let's now see if this works by going back to this application form and when we transition from State one to state two you can see that we have the Fade Out effect on the original content and the fade in effect here for the new form but we also have a slide this original content is sliding to the left and that's by 90 pixels to the left and the new content is coming in from 90 pixels to the right you can see that slide effect when you go from State 1 to state two and we can increase some of the properties here so if I go back to base. HTML this is the translate X property and that's what's responsible for taking the content and moving it along the x-axis in this case by 90 pixels so if we want to increase that we could make that 190 and see what kind of effect that has on the transition that's being applied here so you can see that we have a a greater transition there the sliding is greater we have more sliding in that transition and we can increase these numbers even more for example let's make it 490 pixels if we save that and apply the transition you can see even more sliding is occurring between the two states and the point of this is that the sliding effect and the fade out and fade in effect it's much more smooth than just instantly replacing content with the new content now let's finish with a bit of a ridiculous example here I'm going to go back to the Cs s s that's in this style block and I'm going to change the content in this slide to left key frame and what this is doing is it's taking the content that's being swapped out of the Dom and that's the original content that you see here on this page that's what's being replaced so what this is doing is it's taking that and it's going from its original position to 490 pixels to the left now I'm actually going to decrease this to 150 pixels to the left of its original position and what I'm going to do is not only add a translate X but I'm going to add a Translate Y property here and let's say that we wanted to move this 400 pixels down the Y AIS on the page and I need to remove the semicolon here and we can then save that now let's see if that's going to have any effect at the moment if we refresh this page and click apply you can see that not only is it sliding to the left now it's also sliding down on the y- AIS on this page so that appears to be working what we're also going to do is add another form of transformation here and that's a rotation so what I'm going to do is use the rotate property here and we can pass to that an angle of rotation and let's say we wanted to make that angle 360° and that's one full revolution of a circle if we go back to the page and save this when we click apply you can see that there's some kind of effect where the original form appears to be moving in a circle but we quickly get it disappearing there we don't see it moving in a full circle let's go back to this I'm actually going to change this and we want to make this perform two full revolutions so I'm going to make that 720° and I want to increase the animation time for this slide to left transition so what we're going to do is go down and the slide to left it's applied on the original content so it's going to be on The View transition old and I'm going to change the timing here and it's for the second animation and the two animations are separated by the comma the first one applies the fade out but the second one is the one we've modified which is the slide to left and animation now I'm going to change this from 600 milliseconds to 5,600 milliseconds and I'm also going to add that to the fade out so that we can actually see this being applied so if the content was to fade out after 600 milliseconds but the slide to left animation takes 5,600 milliseconds we're not going to see the full animation because it's going to disappear after 600 milliseconds so we're changing the duration for both of these animations so let's just save this and go back to the page and I'm going to test this out now and you can see we have something quite different appearing now where the rotation is happening twice and the Fade Out is also happening over 5,600 milliseconds so that is well I'll leave it up to you to decide whether that's a good developer experience and you can see it's not a linear animation either and that's because it's using this cubic bezier function here now I'm not sure exactly what those parameters mean I'm not an expert on these transitions but it appears to start slowly and then it gets faster in the middle and then it smoothes or eases off at the end and gets slower again we can make this a linear animation by changing this function to linear and that's one of the options one of the animation timing function options that are available here so if we save that and go back to the page this time it's a linear animation each Revolution is occurring here as you can see and it fades out at the end and we have other animation functions that are defined such as ease in that's going to apply a different style here so if we click this you can see it start very slowly but it's going to get faster as the animation progresses until the end of the transition so you can see there's many ways to customize these view transitions between one state and another on the Dome and this is very useful if you're working with react or view applications but it's also very useful with HTM X and that's because the whole Crux of HDMX is to take content in the Dom and replace it with other content that's coming back from the server but not in Json format in HTML so it's a hyper media driven transition so that's all for this video I'm going to stop talking and thank you for watching this video if you've enjoyed it please like And subscribe to the channel and if you're enjoying this content please consider buying a coffee for the channel as well there's a link in the description thanks again and we'll see you in the next video

Channel: BugBytes

Views: 11,780

Keywords:

Id: c0dqnwbiFnI

Length: 20min 21sec (1221 seconds)

Published: Fri Oct 27 2023