Exploring FastHTML: making webstuff easier for Python people

[@_alexlazar_]

As a web dev with 5 yrs of xp, this feels ground breaking. It’s like when Rails became a thing. In between this and AI-assisted coding we can be so much more productive.

[@twospicedrats]

You have the voice and pace of conveying things that are the most fitting for tutorials I've ever heard!

[@calmcode-io]

I guess I had a fair amount of practice. *cough calmcode.io *cough *cough

[@DonjiKong]

I second this, it was so refreshing here you explain with simple diagrams how the web works.

[@1lyf]

Absolutely agree. That was so clean.. please upload to KZbin instead of your website i bet you would get a lot more views and a lot more souls to thank you

[@calmcode-io]

@@1lyf While I appreciate the comment, the goal of the calmcode site isn't to get views. The goal is for that place to be a non-distraction place to learn. YT has some merits, but it sure is a place with so. much. distration.

[@ananth2006]

Long time fan of your website but happy to have found you on KZbin!

[@calmcode-io]

Hey, thanks!

[@grms23]

Thank you so much! I'm learning FastHTML and I've learned a lot from your video. It's been a real pleasure watching your explanations.

[@calmcode-io]

Great to hear!

[@magnusphilosophus506]

Reminds me of similar thing in common lisp where you can use spinneret for html, css-selectors for css parenscript for js and hunchentoot to serve it, basically never exiting common lisp

[@davidpaez_co]

Very interesting project and ideas. Thank you for sharing!

[@jasonreviews]

this reminds me of ruby on rails. nobody know what's the magic under hood but you make it work.

[@yashwanthperumal8649]

Really a good one, I am working on ML & AI for few years, Though of learning front end frameworks & web dev for hosting some models in a website. I wish FastHtml may evolve soon and we can host the websites. BTW, Thanks for the Video

[@prospermulambia9514]

I like how you explain things am just getting started again in web tech cause previously coming from a networking background it just became too overwhelming for me but with Fasthtml and htmx i feel the game has changed learning python and want everything in pthon first in order for me to understand it all before i go to other languages and techs in future. Please do a full tutorial from basic dynamic website to a data science practical system for the sake of us beginners.

[@calmcode-io]

You may enjoy the calmcode.io site, which is part of this effort here.

[@jake115577]

Great explanation! Very clear and the demos are interesting

[@calmcode-io]

Glad you like them!

[@jackdumanat49]

this intrigued me because i used plotly dash for a project. but it got to a point that the requirement for the project grew from a dashboard to an app. Plotly dash wasn't designed to be a full on web app.

[@JuanCruz-ls8us]

Why do you say so?

[@iwswordpress]

This is a very useful library. Thanks.

[@darkbluewalther]

I'm not sure we should call this "web components". Components have a state and can be nested within each other. These are just functions that return html.

[@aagamezl]

Well, actually is more web development than what you describe. The state that you describe is fake, the only real state is your database, frontend state was created to be able to have all those extra inefficient components to communicate each others, but at the same time you need to sincronize the fake state with the real one every some times, so you are duplicating state at least 3 times if you are using a component framework relying in virtual dom. The problem with this approach is that is very simple and most of people is super used to work with the ton of complexity that current web development need, so they can't see another way to work in a very simple way.

[@dimeloloco]

@@aagamezlyeah the problem is when you want to run highly responsive app directly from the client side of an application and don’t want to calling the backend frequently, or want to run much of the functionality without constantly hitting your servers. There are still benefits to duplication.

[@viorelteodorescu]

Excellent stuff! Thanks for bringing it up to our attention and explaining it in a v nice way! Flask user at the moment, so not using js at all would be so good 😊

[@calmcode-io]

Fun fact, you can actually run FastHTML from inside Flask! You wouldn't use the routes from FastHTML but you can totally use the html generation aspect of it!

[@GelidGanef]

Have you tried coding actual vanilla web components? They are ALL just some javascript function that returns a string formatted as html. And then a bunch of Javascript boilerplate to glue it to the DOM.

[@marverickbin]

Loved it. Im data scientist, and computer vision researcher. I hate using js, css and html. Im 100% gonna try it. Maybe i could just use to render video

[@PabloSanDev]

Great video, thank your for the demo i have learned a lot!!

[@calmcode-io]

Glad it was helpful!

[@donbernie9346]

very interesting use case, subscribed!

[@calmcode-io]

Welcome!

[@60pluscrazy]

Thanks, very interesting 🎉

[@tristix3721]

I enjoyed this video. Thank you!

[@calmcode-io]

Glad you enjoyed it!

[@BartoszBorkowski]

There’s also Reflex for Python and Nice GUI

[@zensukai]

Fantastic tutorial, I have to give this a go. =]

[@bobjones7533]

Please more tutorials, thank you

[@calmcode-io]

On it! The YT channel will be for previews but will also serve as inspiration for proper courses on the calmcode main site.

[@robrita]

​@@calmcode-iohow about ChatGPT app demo in fastHTML?

[@rockyji8813]

how do you scroll, type and write with stylus at the same time? The stylus work is really accurate - I searched your channel didn't find any thing on that - please tell about your setup

[@rockyji8813]

like are you using a wacom drawing tablet as monitor?

[@calmcode-io]

I used to! I now use a cheap thin HP display under my main display.

[@hookflash699]

Honestly, I'm kinda surprised it's taken so long for someone to come up with something like this, given what a convoluted mess web development has become.

[@riccardomenoli5185]

If you have already build your backend with FastAPI, do you think that make sense to have FastHTML as "frontend". Basically a service that just call an API hosted in another server?

[@calmcode-io]

You could I am sure. But it is also pretty early days for this project. Especially if you are doing auth with a tight integration ... might be fine to also way a few months. There may be FastAPI integrations down the line if somebody makes the right plugin for it.

[@MannyBernabe]

Helpful. Thx.

[@calmcode-io]

Glad to hear!

[@GelidGanef]

@5:00 there's a WHAT going in to my backend 😂

[@omar_benaidy]

i didn't check it out yet but i'm wondering how to use tailwind to style it, and this would make a lot of neat css tricks easier with python instead of css attributes

[@calmcode-io]

You can totally do that. You can add a Script to the hdrs of the app that points to the tailwindcss cdn. From thereon you can use the classes from tailwind as you see fit!

[@minma02262]

One thing i guess will be a big limitation to using htmlx(which will be fasthtml limitation too i think), is it cant handle complex frontend logic. I mean complex nested logic, and state that needs to be on the client side without making a server request.

[@calmcode-io]

Sofar I have found HTMX to be sufficient for a lot of applications (calmcode included!) and for extra interactivity I have yet to experience a situation where Alpine.js cannot get me to the last mile. HTMX and Alpine.js really play nice together and I think Alpine will also make an appearance in a bunch of FastHTML apps. Moreover though, if you already enjoy using some JS tools then that's great! Feel free to use a stack that makes sense to you! The main point here is that webstuff may have become a bunch more accessible for Python people. Even if this new tool won't over 100% of the use-cases ... if it can handle 70% of the usecases using only 10% of the effort for a Python dev ... that's also progress :)

[@minma02262]

​@@calmcode-io Just to be clear, I'm not downrating FastHTML because of this. In fact, I'm upvoting for its success, and I will probably use it too for some machine learning test apps and internal apps. (I don't like gradio or Streamlit, customization is a big pain). Just curious what they stand on this part, since Jeremy says it is supposed to be extensible, but didn't show to what extent. The easier the better without weird API semantics. I'm also a big user of web components. I didn't see Jeremy or anyone else showing if it is possible to integrate any custom web components easily into the stack.

[@calmcode-io]

@@minma02262 I may have a look at that later. Got a library with webcomponents in mind?

[@minma02262]

@@calmcode-io I tried setting up webcomponent with fasthtml. It works.

[@WilliamKisler]

At 5:00, that does not say click

[@AGI-Bingo]

This is really cool, Subscribed! ❤wondering if you can watch for event changes like mouse tracking, scroll position etc into python, thx

[@viorelteodorescu]

Good stuff!

[@SylvaineTropea]

how do you render html as a string in fasthtml though? is there an object to wrap raw html?

[@calmcode-io]

I think you have to wrap it in a `NoStr` class. The docs should have the details though!

[@SylvaineTropea]

@@calmcode-io Yep that was it, thx!

[@sandrodelacruz8125]

What tech are you using to write on the screen?

[@calmcode-io]

Screenbrush and a Huion tablet these days.

[@calmcode-io]

Calmcode course with all the details: calmcode.io/course/content/draw

[@EkShunya]

it has an octothorp # in front a bang would be ! @04:32

[@VijayasarathyMuthu]

I was literally searching an option like this yesterday.

[@calmcode-io]

Happy to hear it! I had attempted to hack something similar a bunch of times but it does feel like this effort brings it together in such a way that it may actually become a new and interesting ecosystem. Looking forward to the little future here!

[@JanWeigangMusic]

Buuut, when the html spec changes, dows this not introduce unnecessary dependencies? Would pho templates in flask not offer much mire control with almost all the same benefits? (Asking as someone who programs in flask and htmx with amateur knowlege)

[@calmcode-io]

Time will tell. I think FastHTML can do a lot of good in the "just a simple UI on top of my data science thing" that does not need to be a full fledged webapp. That said, it is also early days. So no need to switch web apps anytime soon. Flask + HTMX are also a great combo!

[@JanWeigangMusic]

@@calmcode-io thanks for the insight, that actually makes a lot of sense

[@JanWeigangMusic]

@@calmcode-io thanks for the insight, that actually makes a lot of sense

[@RobertoMaurizzi]

Now I wonder how much it would take to write a decorator that converts the FastHTML function return value to a Django response... 🤔 The approach is extremely similar to what Leptos and other Rust frameworks are doing (but there you have the advantage that you can write code that will run on the server or the client or both...)

[@calmcode-io]

I may explore this for Flask first, but my thoughts exactly!

[@PeshrawChannel]

I appreciate the work and idea behind this work. But I am not sure if asking the server to return us each html "component" can take us somewhere. Especially on larger applications. I should mention that most of the clients' devices are able to do this work. Why should we do them on the server? This definitely raises the costs of servers. If we really need to run Python for the client side, why just not use webassembly?

[@calmcode-io]

I have yet to experience a CPU load of over 5% on the machine that is running Calmcode but I do serve about 10-20K users a month. You could do everything on the frontend and have Javacript turn the JSON into HTML but that might be slower for the frontend than just rendering HTML directly. Browsers are *really* good at rendering HTML after all! And nothing is stopping you from doing webassembly, but that can be quite the rabbit hole. If you know Python scripting ... this stack may just be enough to help you get started.

[@JayaDattasaiKala]

So is it like re-renders part of html or renders full page on every click or something.

[@sorenkirksdjfk7310]

yes but you can cache responses

[@milothecorgi12]

Been looking at this project and examples for a few hours. Looks really exciting. I want to use this for web dev at work. I guess this can't be used in combination with an existing large Web App that has Flask backend, can it?

[@calmcode-io]

It may depend. I think you should be able to use the library as an alternative to Jinja2 in pretty much any codebase, so at least there is that.

[@imaginatecstv]

Well, that's a great overview. Thank you so much!! We use DRF to create rest APIs using Django. And FastAPI to create rest APIs too that can be consumed by any frontend/client for that matter. What's up with this one? Can we do that stuff? If so or not, can you please make a walkthru in that perspective? Or is this like plain-old standalone Django with just templates that serve only HTML with no rest APIs?

[@calmcode-io]

At the moment I think FastHTML can replace some of the streamlit/gradio stuff out there but I might be careful with replacing Django mainly because of the years of security knowledge in that framework. Time will tell, but I havent explored (for example) how FastHTML deals with CSRF tokens. Odds are they will address it, but there might still be a solid use-case for Django for the time being. Calmcode runs on it and I am still pretty happy with the choice. FastHTML should also be able to produce JSON though, did you try just returning a string or dictionary? I'd imagine thats how it works but have not tried yet.

[@imaginatecstv]

@@calmcode-io Oh I understood. For any given route if we return a string formatted dictionary like JSON, we can have that functionality right. I didn't tried it. Will try to replicate that. But your concern for security (CSRF tokens) is very well valid though when we deal with people's data where Django is important. Anyway, community might bring up the packages/modules for API stuff that can integrate with FastHTML like it's happened as DRF for Django (Like you made one for matplotlib template). But, the essential ideology when compared to Django here might be to not care about the extra parts like: - Templates - CSS - Javascript (React/Vue etc..) for a Python developer from creating web applications. Am I in the right track of thinking? And maintainers and community can keep making this a robust ecosystem in long run.

[@calmcode-io]

@@imaginatecstv Time will be the only thing that will tell. If the goal for FastHTML is to be a streamlit/gradio that is closer to the metal then I am comfortable to claim that it is very close to solving that usecase. But for webapps where data security really starts to matter because it is connected to the open internet ... time will tell ... maintaining that properly really really really is a lot of effort. Small caveat as well: if you want your FastHTML app to have a specific style then it may still benefit a lot from doing just enough CSS yourself to make it fully custom. The defaults seems very reasonable, but you may still want to personalize it a bunch.

[@imaginatecstv]

@@calmcode-io Understood. From your expertise, I request you to please mention when you think FastHTML gets the power to create web applications with almost all other Django benefits. Grateful for your insights. Thank you so much..🙌❣

[@RiteshKumarPanda]

I am waiting for the day when we can fully make web apps with only python no workarounds

[@AshwinSKumar]

Does this still work?

[@haroldostenger5160]

Is the thing http stateful ? (I mean, you keep a variable across requests) Can that be put into ***cgi apache or nginx , or maybe someone doesn´t care?

[@calmcode-io]

There is a mechanism to store session data, is that what you mean? I think it is based on cookies but I could be wrong. docs.fastht.ml/tutorials/quickstart_for_web_devs.html#sessions

[@haroldostenger5160]

@@calmcode-io hi, thank you. I mean you could do that. Just that since I come from a Seaside Pharo environment, I thought that you were implementing something along those lines, where a value can be kept across requests, but sounded wierd to me in python/flask/django. That's why I asked if in FastHTML this was being done differently. I guess no. Sorry I think I misunderstood that.

[@hansdietrich1496]

Finally! HTMX freeing the world of JS bs.

[@calmcode-io]

I think the world still benefits from JS. Some projects really benefit from interactivity (like my drawdata Jupyter plugin, very hard to do without JS). I think the main relief is that we can make do without the NPM build tools. As a Python person, that domain can get intimidating very quickly.

[@JoshMarom-zx9mv]

That's one of the most ignorant things I've heard in a long time. Not only is HTMX actually written in JS, and supports JS as an escape hatch from it's extremely limited API, it is also far from actually offering a valid alternative to modern js frameworks. It's a cool little JS library, it's enjoying some attention from the community in the past couple of years... I have nothing against using it where it's all you need. Those cases are not very common, and those cases were never hard to deal with in the first place.

[@danielisflying]

@@calmcode-ioyess, just running this in Python and having immediate feedback is amazing

[@Jakub1989YTb]

I saw the wildcard import on the first line and ... no.

[@darkbluewalther]

Interesting project, but very limiting IMO. It should be a great tool for python data scientists who need to make simple websites without learning complex web architectures involving front+back+API.

[@calmcode-io]

It's still early for the project. So for now its probably mainly going to be a contender for gradio/streamlit. But who knows, it also has support for sessions and login. They may find a nice way to quickly add Oauth support.

[@Aristocle]

plot an svg , i think its better. With matplotlib you can.

[@calmcode-io]

Ah yeah, that might make for a nice extra feature. It might become slower to render though... Note that I am also working to add another plugin that adds support for altair, which natively does SVGs with interaction.

[@Aristocle]

@@calmcode-io in fact on streamlit I use altair which is a compromise between interactivity and speed.

[@sylensdrake9706]

Yeah... I dont rly get the no css point here. Your styling doesnt rly have anything todo with your framework. If you want your button to be blue with 4px padding you will still use css and I really dont see the issue here. tbh I also rly dont like the Object instead of html approach. Its very similar to something like flutter and results in refactoring being harder than it should be. In a typed language I see the advantages of this... but its python we are talking about. All this does is making your html with proper opening and closing tags into a brace hell where you have no idea which closing brace belongs to which element. The one point where I absolutly see the advatages of this stack is for plotting as you shown. No matter how many packages you will use in js. You wont get close to the capabilities u have in pyton. But... htmx comes at a big cost. Decoupeling the state of a certain component from itself and letting other components overwrite it leads to a very untrackable dependencie graph. this is the reason why we went away from jquery and let components handle their own state. I think this is perfectly fine for low interactive science focused websites. Interactive science papers, speciliesed calculators and more. But not actual web apps Btw.... using global variables to handle client state is absolutly crazy. Be open to correct me if Im wrong. But as long as fasthtml doesnt make new instances for each request those variables will be shared across requests.

[@calmcode-io]

The global variables are used here to help demonstrate the idea quickly. The goal here was to show the gist of the package in a few minutes, not to build a proper well functioning webapp. As mentioned in the video: 'just scratching the surface here'. You can plug in CSS frameworks, add databases and folks are even working on proper Oauth. You can even add webcomponents if you want to from what I can gather. And I suppose most of all, you're free not to use it! If you prefer another stack that is totally cool!

[@petert7332]

This looks a lot like streamlit

[@Alex-kb2ws]

Python progmmers reinventing the wheel again just to not use the right tool for the job.

[@calmcode-io]

kzbin.info/www/bejne/eWrTaKariJKBfc0si=w0X0BtHLytBBciPS&t=455

[@werghiaziz2943]

Like reacr

[@electronicmag16]

Html objects in python. Nasty. If you hire engineers, this is something they yet have to learn. Everyone knows Html. Jinja templates are great.

[@calmcode-io]

Feel free to keep using Jinja! It is a neat tool! This is just a likeable alternative.

[@FlaggedVideoGuy]

There's nothing "to learn". Every html tag is just a python function. A nested tag is a positional argument, attributes are key word arguments. Simple as that it's as straight forward as vanilla html...

[@haszak1]

"click"

[@Xaito]

as neat as these kinds of technologies are, history teaches us that at the end of the day, the tech stack that is specialized for the purpose of web apps is going to win. Coming from a Java background JSF, JSP, GWT all went nowhere fast. I think if anyone is doing something non trivial, he'd be best served to learn the tools that the majority of web devs use. There's more support there and chances that you're stuck with a framework that's no longer supported after a year or two is lower.

[@calmcode-io]

I think that FastHTML has a lot going for it, but I can also still very much enjoy using Django/Flask. Time will tell which framework is around after a decade.

[@zlackbiro]

HTMX uses JavaScript, so you can't say there is no JavaScript involved. In reality, it involves a lot of JavaScript. Sending a request to the backend every time you click to increment is not a good idea and will consume a lot of resources. Only the initial page load should be server-side rendered, while the rest should be client-side rendered.

[@therumbler]

I think you’re missing the point. Yes, to increment a number, sending an HTTP request is silly. He was only using that to show a trivial example. Some functions DO require a server hit (get something from back end DB). Being able to do that without also managing HTML and JS files might be helpful for some projects

[@msmeraglia]

Lol JavaScript isn’t bad enough? now we need to bring Python into it 🤦🏻‍♂️

[@gixxerblade]

When a backend person tries to write a frontend framework. 😂