FastUI & Pydantic - Build Interactive UIs with Declarative Python code

fast UI is a new python package that's just been released by the creator of pantic and this package allows you to build user interfaces that respond to API calls and it allows you to do that all within your python code so if you want to build responsive web applications that under the hood use react you can use fast UI to do that without writing a single line of JavaScript let's dive in and we're going to see some examples now so I'm on the GitHub page for fast UI which I'll leave a link to below the video and fast UI it's billing itself is allowing us to build better uis faster now what we're going to do is go down and we're going to go to the read me here and as it says here fast UI is still an active work in prog progress these are very early versions of the package so you can expect it to change as time goes on but what we're going to do is look at the principle behind this fast UI is a new way to build web app user interfaces defined by declarative python code so for python developers like myself this means that we can build resp responsive web apps using react without writing a single line of JavaScript and that philosophy will be familiar to those of you who have followed the channel on topics like HTM X you want to write interactive and responsive applications without necessarily having to learn all about JavaScript and the different Frameworks and packages and build Tools in that particular language so for python developers this is a promising package so we're going to dive in in this video and we're going to see how to use fast UI now if we scroll down to the code here we're going to take a snippet of this code and we're going to copy it and we're going to analyze the code and see how it looks and then we're going to extend that code with our own example so what I'm going to do to start with is copy this code and I'm going to go to vs code and I have a file here called main.py and I'm going to paste all of that code into main.py now if we go to the top you can see we're using some packages in Python such as fast API and of course the fast UI package itself so we need to do a few installations here in order to run this and we need python 3.11 in order to do so so I've got that installed if I do the python D- version command you can see I'm on python 3.11 so what I'm going to do in this directory is create a virtual environment which I'm just going to call vve fast UI and once that's created we can activate the environment with the activate command and then we're going to run a pip install command here so it's going to be pip install and we're going to use fast API and also fast UI here we also need uvicorn in order to run a server in this app application so we're going to install these three packages and all of their sub dependencies now while that is installing it's worth noting if we go back to the documentation that this does not necessarily have to use fast API so let me try and find the reference here and it's in this practice section here the usage section for the fast UI package itself it provides pantic models for UI components and some utilities and it works well with fast API but it doesn't depend on it so in theory it can be used with any p python web framework now the example here is using fast API so we've installed that and what we're going to do now is we're going to look through this code and we're going to run the server and see what happens now in a fast API application we instantiate the fast API object and create the object called app here and then if we go down here you can see we've defined some roots in the application here's a get request to/ API and you can see that the response model this is set to fast UI now if we go up here to the top fast UI has been imported from the fast UI package and we're telling fast API that we want the response model to be fast UI and that's going to allow us to return this declarative structure in Python that's going to map to a user interface so I think the best thing to do is actually to run the uorn server so we can run the command uicorn and the name of the file is Main and the app object is called app and we're going to pass the-- reload flag so that's going to start a uicorn server for this application on Port 8000 I'm going to go to the browser and we're going to go to the endpoint SL API now you can see we get back the content of the page the structural content in Json but how do we actually access the underlying user interface let's go back to vs code I'm going to go to the bottom of this file and we have this path here this is a catch all path and this is a simple HTML page that's going to serve the react application and this particular route in the application comes last because it's going to match all paths so let's go back to the page here and remove SL API if we go to that URL here you can see we get back a table consisting of some users the table has two columns one for the user name and one for the date of birth now how is this table generated let's go back to VSS code again and we're going to analyze this what we have is a pantic model class called user that contains three Fields one for the ID one for the name of the user and one for the user's date of birth we then have a list that hardcodes some users into the list we have four of them and that corresponds to what you see in the table here on the front end so we have four users in this list and then in the actual API Handler function here you can see the comment this will show a table of four users and the/ API that you see in the actual path this is the end point that the front end is going to connect to when a user fixes slash to fetch the components to render so at this particular endpoint it's going to actually call the/ Api route in order to get the data so let's see what's actually returned from this Handler function we have a list being returned here and that references something called c. page now page is a basic container for components and if we go to the top you can see we've imported components as C from the fast UI package so if we go back down to the function here we have a page component and that is a container and then we Define within that a list of actual components so we have a heading component we have a table and you can see that we have a parameter mized table here and the type that's used here is the user type we then pass in some data to that table component and the data we're passing in is this hardcoded list of users so this will serve as the data for the table we also have the columns and you can see we have defined two columns for this table and you can see we have a display lookup and this contains a field and that's the name field and this will reference the name of the field on the parameterized type that we passed into the table so a user type has a field called name and also a field called date of birth and you can see on the name field here we have an onclick event handler and that is set to an instance of the goto event and we pass a URL to that so when the user clicks the name for this user it's then going to redirect the user it's going to send them to a new page and that is the page defined by this route here so let's just see that in action if we go back to the page and click one of the users you can see we're taken to a user detail page that lists out the details for that user so you can see in the URL it's / user SL1 and that one is a path parameter so if we click a different user we get a different ID representing that user now you can get the actual path in the URL by looking at the data that you have here and what you have in the Handler path here/ API you can just remove that from the URL in order to get the actual URL on the front end and this applies to the detail view as well if we go down here we have this particular Handler path here it's / API SL user SL user ID the API component is the endpoint in fast API that's called by the react application but on the react app itself it's just SL user user ID now what this page does is it fetches the user profile so if we look at the logic here we try and fetch a user from that hardcoded list based on this condition here where the user's ID matches the ID that's coming in from the URL and if you're unsure about how that ID is passed in it's a path parameter in fast API and I did a video on that recently if we find the user here then we go to the return statement but if we don't find the user then that's going to cause a stop iteration exception and then we just raise an HTTP exception in that case now if we look at the return statement again we have that container c. page and then we passed the list of components into that page and this time we have a heading a link and a c. details component and the link has some nested components within that we have text with the text of back and then another click Handler here with a Back event and the Back event is just going to look at the browser history API and it's going to go to the previous page when that particular link is clicked now if you wonder where the Back event and the one we saw before which was the go-to event here where are these coming from if we go to the top the fast UI package has an events module that contains these two events so let's take one last look at the application and then we're going to move on and actually Define our own code if we go back we can get taken back to the user table page and we can click any one of these users and get taken to the detail page and we see that small list of the users details and we can navigate back and forth between these pages so let's now build a new page in this application let's imagine that we wanted to add a form and allow users to submit a new user to the back end and then have that user appear in this table so we're going to need to define a form in this fast UI application and we then need to see how that form is going to handle the submission and then redirect back to the table page when the submission is successful so let's start by adding a button underneath this table let's go back to vs code and we're going to go to the list page the table page that we have here called users table and just underneath the table itself we're going to add some more components so I'm going to make the terminal smaller here and what we're going to do underneath the table is we're going to Define another component and you can see the type hinting here we have have various different components the one I'm going to use as the container component is C.D and we can pass a list of sub components to this div so let's do that just now and what we want to pass here is a link and within that link we're going to embed a button so we can use the C do link component and we pass the sub components to that and again that's a list this time we're going to use the C do button component and let's add some text to that button we're just going to add the text add user and when we click that link we're going to add an onclick Handler here and we're going to use that go to event again and pass the URL that we want to go to when the user clicks the button now the URL is going to be/ user slad and we're going to add that URL in a second now let's go back to the page that we have and refresh this page you can see we now have the button underneath the table that says add user but when we click that button we're getting back an error because we don't have a page in the application to handle the URL path that we've given to this goto event so let's now Define that and I'm going to add another URL just below here and we want to add this just before the last function which needs to be at the end of the file and this is going to be an app.get decorator and it's going to be to/ API user slad now because this is going to be a fast UI endpoint we're going to use the same response model equals fast UI and we also want to copy this response model exclude none equals true Into The Decorator as well so let's go down and we're going to paste That Into The Decorator and Define the function here for this particular route and it's going to be called add user and what we're going to return again is some content from the fast UI components so let's return a list and we have the container the C do page and we pass the components into that and that's going to be a list of components that represent the page that we're building here so let's start with a heading for that page and we're going to give the heading some text and that's going to be the add user text and I'll give that a level of two so that it renders I think that that means it renders an H2 tag that's going to be at the top of the page and then we want a c do paragraph component and that will map to A P tag and let's pass some text for that paragraph and it's just going to say something very generic here add a user to the system once we've got the paragraph we can then add another component and this time I'm going to add a model form and the model form can take a pantic model as the type pint here and I'm going to create a model in a second called user form in fact let's do that right now before we go on with this function so what we're going to do we have a user model but when we submit a new user to the back end we don't want to submit the ID that's because the ID should be generated automatically on the back end or on the database system those are the typical ways an ID is generated so what we're going to do is copy this model and I'm just going to Define another model below and we're going to call that user form and we can remove the ID from that because we don't need that in the submission now we do need to submit the user name and also the date of birth so we're going to keep those two fields in this new model so let's go back down to the code that we're writing here for this ad component so we Define a model form and we're passing our new pantic model as the generic type here once we've defined that we can pass a couple of parameters here the submit URL is the URL in the application where the submitted data is going to be sent so I'm going to send that to/ API user slad so that's actually the same URL that we have here but it's not going to be a get request that's going to send a post request with that submitted data and we can also add a success event here so I'm going to add a parameter success event and that's going to be equal to a page event and we're going to need to import that in a second and let's give that a name of form success so I'm going to copy the page event and we can actually import that from the fast ui. events module so let's import that at the top and if we go back down to our new component you can see that we've got a header a paragraph and then a form that's parameterized by this user form pantic model so let's now go to the front end and again we can remove the API part of the URL so we're going to go to SL user slad and hopefully the button that we've added here is going to take us to that page so let's reload the application and when we click add user you can see we're getting that unprocessable entity 422 response and unfortunately this is because of a mistake I made here so what we've done is we've defined this route here/ API user slad below the one that contains the path parameter so fast API will see the SL add and it will try and interpret that as the user ID so it's going to match this URL and the one below that will never actually be called so what I'm going to do is cut that one out and I'm going to paste that one above the other one and then we can save the file and go back to the page and I'm going to go back to this homepage and refresh the page hopefully this time we get taken to the form and you can see that we do so we have the header that we added and that generic paragraph and then we have a form containing two Fields one for the username and one for the date of birth so what we need to do now is submit the form and have a Handler on the back end process that post request and then add the new user to the list of users that's hardcoded in the starter code so let's see how to do that now I'm going to define a new Handler function and let's do that just above this one here and it's going to take a post request so it's going to be app. poost and it's going to be / API SL user slad as the path and we can define a function for for the Handler here and it's going to be an async function and I'm going to call this one create user and that is going to take a couple of arguments the first one is going to be an instance of a form and that's the user form and I'm going to go to the top and import a couple of things from Fast UI so these Imports are going to come from a module called Fast ui. forms so we have a form response that we can import so we'll import that here and we also have this fast UI form and I'm going to bring in one more import right at the top we're going to import annotated the type from the python typing module and annotated is going to allow you to add context specific metadata to a type so let's now see how to use that in our app. poost function we have a form coming in in the post request so we can use the annotated type and the type that we're annotating is the user form that's the pantic model that represents the form data that was submitted and The annotation we're going to use is this fast UI form annotation that we've imported and we're going to pass the user form into that and the function is going to return that form response that we imported from the fast ui. forms module so the form parameter that's coming into this function because we've annotated it using this fast UI form function the form is going to be an instance of the user form pantic model and that's the model that we defined here containing the name and the date of birth so we can now process that form so let's go back down to the function and what I'm going to do here is let's just create an ID so of course the form when it's submitted the user does not submit the ID of the new user that's created so we're going to generate a new ID in a very simple way so I'm going to look at the list that we have here we're going to find the last item in in the list and we're going to get that ID and add one to it so let's copy the code in order to do that we're going to reference the last element of the user's list we're going to get the ID from that and then we can add one to that so we have an ID for the new user that's been created when we submit this form we're then going to create the user so what we're going to do here is create a user object and we're going to pass the ID in so ID equals ID and then in order to pass in the name and the date of birth we're going to take the form and we're going to unpack the arguments from the dictionary that we can get from the form by calling do model dump so in pantic 2 when you call model dump it's going to convert the pantic model to a dictionary and then we unpack the keys and values from that dictionary and pass them into this user object so that is going to create a user with an ID a name and a date of birth we can then add that user to this list of users so let's go back down to the function and we can call users. append and pass our new user into that and the final thing we're going to do here is return the form response that we imported from Fast UI and we can pass an event to that and the event is the goto event that we seen earlier in the video and let's send the user back to the table page which is just the Slash and that's then going to send the user back to the page containing all of the users and hopefully the new user that we've submitted is going to be part of that table so before we test this out I'm going to make the terminal bigger here and stop the uicorn server we need to install a new package in Python and that is the python multiart package and this is going to handle form submissions of multiart data and I believe we need this when we submit the form in fast UI so let's go back to VSS code and I'm going to use the PIP install command and we're installing Python multiart and I'll leave a link to the GitHub page for python multiart below the video once we've got that installed we can start the uicorn server again and what we're going to do is go back to the page so let's go back to the application and I'm going to refresh this page and I'm going to add details for a user so let's add John do with a date of birth of the 27th of November 2023 and I'm getting back an internal server error and if we go to to vs code you can see on the terminal the cause of this error and I think the problem here is that we need to pass a keyword argument for the URL so I'm going to minimize the terminal and let's change this code here we're going to pass the URL and by passing it as a keyword argument I think that's going to solve this issue so let's go back to the homepage here and we're going to click add user and I'm going to add John do so let's submit this form and this time we get taken back to the table page and you can see John do has appeared in the table with the correct date so that is a simple example we've added a button to the list page we've added a form here and we've added a post request Handler that's going to handle the submission of that form and this is all integrated nicely with pantic and with fast API so it's very easy I think it's quite easy anyway to build these interactive user interfaces from the declarative python code provided by fast UI and this new package hooks up very easily to backend endpoints in fast API and when you need to to return the components from this framework you can type in the response model as this fast UI model and that's going to handle all of the back end behind the scenes logic in order to actually render the components in a react application so this is quite nice I think this is just an introductory demo but if you're interested in more videos with fast UI let me know in the comments and do keep in mind this is a new framework it's likely to change over time so if anything doesn't work just consult the documentation so thanks very much for watching this video if you've enjoyed it please like And subscribe and if you're enjoying this content please consider buying a coffee for the channel there's a link in the description thanks again for watching and we'll see you in the next video

Channel: BugBytes

Views: 67,166

Keywords:

Id: eBWrnSyN2iw

Length: 21min 14sec (1274 seconds)

Published: Fri Dec 08 2023