Exploring FastHTML: making webstuff easier for Python people

Поделиться
HTML-код
  • Опубликовано: 8 сен 2024

Комментарии • 111

  • @twospicedrats
    @twospicedrats Месяц назад +31

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

    • @calmcode-io
      @calmcode-io  Месяц назад +6

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

    • @DonjiKong
      @DonjiKong Месяц назад

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

    • @1lyf
      @1lyf 24 дня назад +1

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

    • @calmcode-io
      @calmcode-io  20 дней назад

      @@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.

  • @grms23
    @grms23 Месяц назад +14

    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.

  • @magnusphilosophus506
    @magnusphilosophus506 23 дня назад +3

    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

  • @jasonreviews
    @jasonreviews Месяц назад +3

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

  • @yashwanthperumal8649
    @yashwanthperumal8649 Месяц назад +3

    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

  • @darkbluewalther
    @darkbluewalther Месяц назад +36

    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
      @aagamezl Месяц назад +14

      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
      @dimeloloco Месяц назад +3

      @@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
      @viorelteodorescu 29 дней назад

      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
      @calmcode-io  27 дней назад +2

      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
      @GelidGanef 8 дней назад

      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.

  • @PabloSanDev
    @PabloSanDev Месяц назад +2

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

  • @iwswordpress
    @iwswordpress Месяц назад +3

    This is a very useful library. Thanks.

  • @jake115577
    @jake115577 Месяц назад +2

    Great explanation! Very clear and the demos are interesting

  • @jackdumanat49
    @jackdumanat49 Месяц назад +4

    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.

  • @marverickbin
    @marverickbin 16 дней назад

    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

  • @donbernie9346
    @donbernie9346 Месяц назад +2

    very interesting use case, subscribed!

  • @tristix3721
    @tristix3721 Месяц назад +1

    I enjoyed this video. Thank you!

  • @zensukai
    @zensukai Месяц назад +2

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

  • @60pluscrazy
    @60pluscrazy 28 дней назад +1

    Thanks, very interesting 🎉

  • @bobjones7533
    @bobjones7533 Месяц назад +5

    Please more tutorials, thank you

    • @calmcode-io
      @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
      @robrita 28 дней назад

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

  • @BartoszBorkowski
    @BartoszBorkowski Месяц назад +2

    There’s also Reflex for Python and Nice GUI

  • @RiteshKumarPanda
    @RiteshKumarPanda 19 дней назад +1

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

  • @MannyBernabe
    @MannyBernabe Месяц назад +3

    Helpful. Thx.

  • @hookflash699
    @hookflash699 Месяц назад +4

    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.

  • @GelidGanef
    @GelidGanef 8 дней назад

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

  • @VijayasarathyMuthu
    @VijayasarathyMuthu Месяц назад +7

    I was literally searching an option like this yesterday.

    • @calmcode-io
      @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!

  • @AGI-Bingo
    @AGI-Bingo 20 дней назад

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

  • @viorelteodorescu
    @viorelteodorescu 29 дней назад

    Good stuff!

  • @minma02262
    @minma02262 Месяц назад +4

    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
      @calmcode-io  Месяц назад +8

      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
      @minma02262 Месяц назад +2

      ​@@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
      @calmcode-io  Месяц назад +2

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

    • @minma02262
      @minma02262 Месяц назад

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

  • @omar_benaidy
    @omar_benaidy Месяц назад +1

    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
      @calmcode-io  Месяц назад +1

      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!

  • @EkShunya
    @EkShunya 17 дней назад

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

  • @riccardomenoli5185
    @riccardomenoli5185 Месяц назад +2

    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
      @calmcode-io  Месяц назад +1

      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.

  • @WilliamKisler
    @WilliamKisler День назад

    At 5:00, that does not say click

  • @PeshrawChannel
    @PeshrawChannel 29 дней назад

    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
      @calmcode-io  28 дней назад

      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.

  • @Jakub1989YTb
    @Jakub1989YTb Месяц назад +1

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

  • @hansdietrich1496
    @hansdietrich1496 Месяц назад +8

    Finally! HTMX freeing the world of JS bs.

    • @calmcode-io
      @calmcode-io  Месяц назад +2

      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
      @JoshMarom-zx9mv Месяц назад +2

      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
      @danielisflying Месяц назад

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

  • @milothecorgi12
    @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
      @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.

  • @sandrodelacruz8125
    @sandrodelacruz8125 Месяц назад +1

    What tech are you using to write on the screen?

    • @calmcode-io
      @calmcode-io  Месяц назад +2

      Screenbrush and a Huion tablet these days.

    • @calmcode-io
      @calmcode-io  Месяц назад +2

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

  • @RobertoMaurizzi
    @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
      @calmcode-io  Месяц назад

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

  • @darkbluewalther
    @darkbluewalther Месяц назад +1

    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
      @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.

  • @SylvaineTropea
    @SylvaineTropea Месяц назад +1

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

    • @calmcode-io
      @calmcode-io  Месяц назад +1

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

    • @SylvaineTropea
      @SylvaineTropea Месяц назад

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

  • @imaginatecstv
    @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
      @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
      @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
      @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
      @imaginatecstv Месяц назад +3

      @@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..🙌❣

  • @JanWeigangMusic
    @JanWeigangMusic 25 дней назад

    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
      @calmcode-io  24 дня назад +1

      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
      @JanWeigangMusic 24 дня назад

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

    • @JanWeigangMusic
      @JanWeigangMusic 24 дня назад

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

  • @JayaDattasaiKala
    @JayaDattasaiKala Месяц назад

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

  • @AshwinSKumar
    @AshwinSKumar Месяц назад

    Does this still work?

  • @haroldostenger5160
    @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
      @calmcode-io  Месяц назад +1

      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
      @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.

  • @Aristocle
    @Aristocle Месяц назад

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

    • @calmcode-io
      @calmcode-io  Месяц назад +1

      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
      @Aristocle Месяц назад

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

  • @petert7332
    @petert7332 Месяц назад

    This looks a lot like streamlit

  • @haszak1
    @haszak1 Месяц назад

    "click"

  • @sylensdrake9706
    @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
      @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!

  • @Xaito
    @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
      @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.

  • @werghiaziz2943
    @werghiaziz2943 Месяц назад

    Like reacr

  • @Alex-kb2ws
    @Alex-kb2ws 27 дней назад +1

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

    • @calmcode-io
      @calmcode-io  27 дней назад

      ruclips.net/video/C9p7suS-NGk/видео.htmlsi=w0X0BtHLytBBciPS&t=455

  • @electronicmag16
    @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
      @calmcode-io  Месяц назад

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

    • @FlaggedVideoGuy
      @FlaggedVideoGuy 25 дней назад

      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...

  • @zlackbiro
    @zlackbiro Месяц назад +3

    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
      @therumbler 20 дней назад +1

      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
    @msmeraglia 23 дня назад

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

  • @gixxerblade
    @gixxerblade Месяц назад

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