FastHTML - Web Applications in Pure Python

Key Takeaways

what is going on guys welcome back in this video today we're going to take a look at fast HTML which is a web framework that allows us to build websites and web applications purely in Python so no HTML no CSS no JavaScript let us get right into [Music] it all right so the goal of this video today is to explore fast HTML and to see how we can build basic web pages and web applications with it again no CSS no HTML no JavaScript involved just pure Python and the first thing that we need to do is we need to install the package or the library or the framework um and for this we're going to open up the command line and we're going to type pip or pip 3 install and now the package name is not fast HTML it's actually python Das fast HTML so this is the package that you need to install here and once you have this the import convention or the way they do it in the tutorial is to say from fast HTML import common as FH this is how they do it so I assume this is now the uh framework convention here and the basic workflow is quite simple similar to flask what we do is we create an application we create some routes and then we serve the application so the most basic web page that we can build with this is we can say app and RT which is Route so this is a decorator for our functions app and Route are equal to FH do fast app app and here now we just say life equals true which is similar to flask debug equals true so we don't have to constantly restart the server if we make changes and then I can just have a basic RT so at RT then I provide slash here as the URL pattern and the function could be for example index and here I just return a basic paragraph FHP uh hello world for example and down here I say FH surf and that is basically uh how you build a hello world application using fast HTML so you can see we have this hello world here and that's uh the basic workflow so we create the application we have a route uh a basic route and then we serve the application now a lot of more stuff can be done here we can add more keyword parameters here especially when we need a database with classes or with a model uh and we're going to have more complicated endpoints but that's like the basic blueprint um now what we can do is instead of just returning the paragraph we can return nested structures we can say FH do titled for example and I can specify here a title my title followed by some UI elements so I can say for example I want to have a diff container fhd and inside of this div container I want to have a paragraph again so FHP here I want to have my Hello World now uh and afterwards maybe I want to have two links so I can say FHA to Define an anchor tag I can say the text of this is neural 9 I can say the link actually uh so the href attribute um is equal to htps neural 9.com and also I can do internal links so I can copy this and I can say hello and the HF is actually /hello which is an endpoint that I need to Define in my application here but you can see the pattern we have the basic HTML attribute or or UI tags that you know div PA and so on and we can just use them by saying FH Dot and we can Nest them so I can have a diff and a diff and a diff and so on just by saying fhd and then having these parentheses and in here I want to have more stuff I can do I can Define the whole layout using these python um functions here or I don't know if they are functions or if there're are classes but with these uh tags here um and what we do then is we basically or what we can do now is we can say I want to have a second endpoint RT here/ hello um and I'm going to call this just hello and here I want to return fhd and I want to say FHP this is the hello page and then maybe I want to have here an anchor tag which um gets me to home so to slash so I can run this now and we will see in the browser that I can click on hello I can go back I can go to neural 9 um actually cannot go to neural 9 I think this is because I'm running this in live mode I think I would have to say life equals false for this to work because I think I already tried this and this was a problem there you go so now it works um but yeah the basic idea is that I can Define these taxs and use them so the interesting thing is that this framework is based on HTM X now I'm not very experienced with HTM X but it's an open-source uh front and JavaScript library which allows us to uh use Ajax directly in HTML uh because it has some custom attributes and these custom attributes can be used here as well and they make it very easy to perform certain operations but before we get to that I also want to show you how we can have variables in our URL patterns for example I can say here I want to have a route and this route should be called um Fibonacci for example and I want to have a parameter n here as part of the URL pattern and this parameter here um if I have my Fibonacci function here is my integer and here I need to provide a type annotation a type hint um otherwise it doesn't work but now what happens here is I get this n value in my URL and I immediately get it here as an an integer parameter and all I want to do here now is basically I want to say give me all the Fibonacci numbers up until the end Fibonacci number so AB is equal to 01 and then we're going to have this basic iterative approach for placeholder in range uh n numbers append uh numbers append actually a we start with a and then we say a um no B E A is equal to to A and A + B does this make sense not sure if this makes sense I think so um and then we're going to say return FH titled again and we can say Fibonacci numbers followed by a list now this is the next thing we can also of course use unordered lists and list items and Order list of course as well with python collections uh or with python list so what we can do here is I can say FH unordered list UL uh and in here I can have a list comprehension where I say fhli so list item of number for number in uh numbers um now what I need to do to make this possible is I need to use the unpacking operator so I need to take the list and unpack the elements as arguments to UL because usually what you would have to do is you would have to say fhl and then in here you want to do fhli uh FH Li and so on this is how you want to do this and uh you don't want to pass a list so you need to unpack the list to make this possible which is what we do with this asterisk here um and that should actually already work so let's give it a try let's go and run this let's go to slash um to SL Fibonacci and let's pass 10 for example and then you can see I get 10 Fibonacci numbers let's go and do the same thing here with um 50 you will see I get 50 Fibonacci numbers so that's the basic idea here um yeah this was now very simple and what we want to do let me set this to True again uh what we want to do now is we want to introduce um a database we want to introduce a database and a model so that we can do some basic Crut operations uh you can do a to-do list app you can do whatever you want I'm just going to go with people here so I'm going to have a people database with name age and job and also an ID and then I'm going to show you how we can easily create an application where we have um a UI where we see all the people in the database where we can easily create new people where we can delete people and so on so what we need to do for that is we need to change this um app initialization here I need to say instead of just getting app and RT what I'm going to get here now is I'm I'm going to get the people table and I'm going to get the person class so app route people person is equal to FH fastep and then I'm going to say here DB file where do I want to have my database my database is going to be let's say a data/ uh people. DB and what I want to do then is I want to uh Define the um the fields of a person so P ID is going to be equal to an integer this is going to be my uh primary key this is going to be my identifier uh name is going to be equal to a string H is going to be equal to an integer and uh job is going to be equal to a string so as you can see here I provide arbitrary keyboard uh keyword arguments here with a data uh with with a class or a data type um as as the value and then also what I want to do is I want to specify that the prime AR key PK is equal to P ID to the string P ID and in addition to that I'm also going to define a render function a render function defines or uh specifies how a person will be displayed in my application so I'm going to say here render equals renderers which is going to be a function that I have to Define up here so I'm going to say def render person we're going to pass a person to this uh to this uh function here and what this function is going to do is it's going to define a PID the P ID is going to be a formatted string person Dash I'm I'm going to say here person. PID uh and then what we're going to do is we're going to say that the individual person should be displayed as a list item and it should contain the information like name age job and so on and it should have a delete button so I want to have a delete button for the person so I'm going to Define that delete button first I'm going to say delete button is equal to FH it should be a link it should be an anchor tag uh that says delete and it should have a certain uh Target Endo so to execute the function and this is now the interesting thing because what we're going to do here is we're going to use HTM X I'm going to specify a couple of attributes uh which are going to automatically um do certain things for me so I'm going to say here HX unor delete is equal to slash delete this is needs to be a string slash delete uh and then here I'm going to say person. PID I actually need to specify that this is an FST string uh and of course I need to Define this endpoint so I'm going to have to create a route down here but HX delete now automatically Associates this with a delete action so it's going to take um the proper action for a deletion and then I'm also going to say here this is now interesting HX swap so I'm going to swap the following um the following uh thing here which is the outer HTML of this um of this list item so this is now just the anchor tag the anchor tag is going to be inside a list item which we're going to return here in a second and this list item will have a certain ID which is what I'm going to specify here now the target ID is going to be the um P ID so think about it that way I'm going to return a list item here in a second and this list item will have this P ID now this is not the exact same thing as the P ID itself it's a string and identifier for the UI element the list item and what I'm doing here is I'm saying with this delete button send a delete request to/ delete person ID and then swap the outer HTML off the Target that has this ID and the Target that has this ID is going to be the list item in other words it means we're going to remove the list item item from the HTML tree um so let's see what this looks like we're going to say here return fhli and we're going to say first of all I want to have the delete button then I want to have a formatted string with the information uh about the person so person. PID uh name is equal to person name age is equal to person age um job is equal to person job um yeah that's just a text and then we're going to say this is now important the ID of this list item is going to be the P ID this is important because this thing now this individual list item has the ID P ID and it's the thing that is going to swap or remove the outer HTML uh um or it's the thing that's going to get the out of HTML removed when we click the delete button which is inside of it so it's going to remove the whole UI element uh now let us Define the delete function down here we're going to say RT um the route here is going to be slash delete slash um and here now we need to specify P ID as a parameter similar to the end here for the Fibonacci and we're going to specify explicitly methods is equal to a list delete and the function itself is quite simple we're going to say here uh def delete person uh now one thing that's interesting to know is that um I'm not sure why this is the case I think this is just the way they programmed uh this framework but if you call the function delete if you just say def delete you don't need to specify methods delete because it automatically does that um otherwise if you choose a different name like remove person or delete person you need to specify explicitly methods equals delete the same way it's done in flask so delete person and here we're going to say now people. delete PID uh which is going to be of course passed here as uh a parameter again so that's deletion and [Music] um we're not going to be able to use that yet because we don't have an endpoint that shows all the data so before we Define the most important endpoint which is going to list all the people we want to Define one more which is going to create a new person it's also going to be quite simple this is going to be an endpoint RT which is going to have just SL people but the methods here is going to be equal to post so/ people methods equals post and uh the method is going to be called or the the function is going to be called create person and we're going to pass here a person object as a post um as post request here and we're just going to say return people. insert and then uh person so that's the create function and now the final function is going to be the one that actually displays all the um uh which now displays all the people and the interesting thing about this is I can Define the same route with a different method if I explicitly do it so if I have now this one here explicitly set to post I can create another endpoint here when I explicitly set it to get I can use two times the same route here um with a different function so I can say here def list people and I can actually use the exact same route because here I have post and here I have get and what I can do here now is I can say I want to have a create form the idea is I want to have a page where at the top I can add information for a new person create it and then it should be dynamically with JavaScript so to say uh or with Ajax in this case it should be dynamically added to the list and it should be um also it should be added to the list and it should be also dynamically removed from the list when I click on delete so the idea is I want to have a create form and this create form is going to be equal to an FH form element here and it's going to contain an FH group and this FH group contains input elements and the input elements are obviously going to be name H job so what I want to have here is I want to define the placeholder is going to be equal to new person name the name of this is going to be name now this is important because name is what we use in the back end uh to get the information so name should be actually name and age should be age and job uh name or job should be job uh for the other two or name should be job and name should be AG that's what I wanted to say um and then let me just indent this properly here so we want to change this here to H and this here to job these should be the class attributes so H and job here now we're going to specify that the type of this is number so we want to have a different type of input we don't want to have an input type text which is the default uh and then we want to have an FH button which says create now this is now just a UI element and again we're going to use HTM X attributes here to make this quite easily uh to make this quite easy for us to create new people how do we do that we say HX poost is equal to slash people which means that whatever we have here in this form will be posted to SL people um and also for the dynamic element what we're going to do is we're going to say that the target ID off or actually we're going to say first of all HX swap is going to be um before end and the target ID for this is going to be people list now we don't have a people list yet again the idea is that we're going to return a people list so I'm going to return here a diff box in this diff box I want to have a cart and here I want to have a list of um an unordered list of people how do I do that I say UL I un unpack I use again the asterisk I unpack everything in the people database so I just call the people um uh I I just call people here which is this thing here the object um so I get all the people from the database I unpack them and this here I assign an ID people list to and then I can just say the header of this is the create form so what this does now is I have a div I have a card in there I have a list with all the people that has the id id people list um and I have a header at at the top I have as a header the create form and what the create form does is it takes the information it posts everything to the people endpoint which is down here the create person function and then it swaps in this case swap means it append it append the new element to the people list before the end so it's going to just append it in the end um and that is what we need to do in order to have a basic CR CR uh application here so I'm going to run this I'm going to go to SL people and here now you can see I have new person name new person age new person job let's say we have Mike 30 years old he's a programmer what I can do now is I can click on create you can see I get a new element here I can say Lisa is 40 she's uh clerk create and I can reload the page you can see the data is still here and now I can also delete and reload and you can see it d dynamically does everything for me and I can do that here of course multiple times there you go so this is how you can easily build web applications using face H fast HTML without having to code any HTML uh JavaScript or css just with pure python so that's it for today's video I hope you enjoyed it and hope you learned something if so let me know by hitting a like button and leaving a comment in the comment section down below and of course don't forget to subscribe to this Channel and hit the notification Bell to not miss a single future video for free other than that thank you much for watching see you in the next video and bye