htmx in 100 seconds
ฝัง
- เผยแพร่เมื่อ 1 ก.ค. 2024
- Learn the basics of htmx - an HTML-focused UI library that can handle data fetching and rendering in web applications without complex JavaScript code or frameworks.
#webdevelopment #javascript #100SecondsOfCode
💬 Chat with Me on Discord
/ discord
🔗 Resources
- htmx docs htmx.org
- HTML in 100 seconds • HTML in 100 Seconds
- Nuxt in 100 Seconds • Nuxt in 100 Seconds
- Math for Programmers • 100+ JavaScript Concep...
🔥 Get More Content - Upgrade to PRO
Upgrade at fireship.io/pro
Use code YT25 for 25% off PRO access
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- What is htmx?
- htmx quickstart tutorial
- Alpine.js vs htmx
- Do I need a JavaScript framework?
- What is AJAX in web development?
- htmx boost vs Turbolinks - วิทยาศาสตร์และเทคโนโลยี
i love htmx almost as much as i love you
awww
@@saviocri good introspection
bruh... 🤗
So gay
Does that mean you hate him ....
How does Fireship always manage to make a video on the exact topic I'm interested in at the time?
Totally relatable
He checks what’s hyped 😂
Are you Fireship?
AI
He took the red pill …
As a backend dev, I think I would love this. No npm incantations. Great to quickly slap together an "admin UI" for backend parameters, custom monitoring etc.
Exactly what I use it for -- I've got tons of small dashboards in production using htmx
You'd think you'll love it until you realise you have to return HTML from your backend.
@@heitorvrb It doesn't seem like it would be to hard to hook into the HTMX events and use templates so you're only returning data.
@@heitorvrb and what is the problem with that? I'm not familiar to htmx, but with Ruby-on-Rails it's easy to return both html or json or anything else.
this thread & replies above are gold nuggets (:
HTMX is actually really fun to use and it’s a lot of functionality for less code than a JavaScript function
really? where can i learn about this htmx. does it work with php?
@@cheeseburgersuperior1874 I dont see why it wouldn't work. @bugbytes3923 is a good channel but he uses Django mostly. Same concept though.
for small / simple projects
@@bluecup25 for now, eventually it will surpass others. never underestimate, i say.
@@bluecup25 Yeah probably for smaller projects. Or even just to update some old apps to add a bit more fluidity to them. There is quite a bit of functionality already there that could replace a ton of JavaScript with a few simple HTMX tags in your html. HTMX is really good I wouldn't underestimate it just yet.
I can imagine using this for minimalistic small project that don't require a lot of logic. but building a large enterprise solution with this looks insane
In theory this is absolutely possible, but what's currently lacking to me are developer tools. Debugging is complicated, especially when using framework like Django or Laravel that are not thought with htmx is mind.
Yeah, I've seen people talk about this a lot but it's looks underwhelming imo.. Like, why would I use this
It is not meant for that but mostly light web app that require a bit of UX improvement, for example Django framework is a very good combo.
Using php to render htmx ❤
On the other hand, building a large enterprise solution is always looks insane 😐
I can finally drop all my active projects and start a new one on HTMX until Fireship uploads something that'll make me drop the next project
🤣🤣🤣🤣
been there, done that
So true. Not sure if I should add it at the end of my list of 2589 new technologies to learn or I should swap it with something as it sounds quite revolutionary.
@@andy-ally i create a repo with something new to learn. Commit for 2/3 days
Fireship uploads
New repo, new stuff
Redo
LOL but I doubt that because HTMX looks like a keeper.
This series is great for keeping me up to date with the buzz words. I don't care to learn the tech most of the time but at least I'm not 100% lost when they happen to come up (97% of them never do lol).
The maintainer of this project was my professor for a few years! So glad it’s getting the attention it deserves!
Next do hyperscript - it’s from the same team and works a lot like htmx but you can do almost all JavaScripty things!
How small the world is it! 😊
Carson
Note that htmx shines when used with hyperscript, to keep a "local behaviour" philosophy.
where else can one use hyperscript, do I really need to learn this strange "language"?
@@depafrom5277 No, you don't have to. htmx integrates well with vanilla JS, and web components also complement it really well too.
Pls do Hotwired and Turbo after htmx❤
@@TheWrapperupany tuts on integrating with webcomponents. Seems like a convenient way to add features to a webcomponent without hacking into the webcomponent itself.
Hyperscript is interesting but not interesting enough to be worth pulling in as a dependency imho. Just using the excellent alpine js integration is usually better
It feels like we are getting back to the history were we started.
deja vu?
IMO this is the right direction of travel. HTML was never designed for the complex modern websites we have these days. Javascript and all the JS frameworks built over the years have merely been hacks to get the web to do what we want, while we should have really been redesigning HTML.
Been using htmx and hyperscript for over a year now, after many years using javascript front-end based frameworks, and it is fantastic. We rewrote one of our React / Clojurescript apps completely resulting in a much simpler web app. Hypermedia design and architecture is great.
I, too, think that libraries like react and vue add complexity instead of making life easier.
Was the back-end in clojure? Htmx looks like it would work wonderfully with hiccup syntax
Edit: oh that's actually exactly what Biff is now that I think about it 😝
@@Abayake Yes exactly. We don't use Biff; just java Clojure with Ring, hiccup, and htmx with some _hyperscript sprinkled in here and there where needed. We have a main function that starts Ring/Jetty directly. I love this so much more than cljs and React.
How many lines of code did you throw away?
can you implement dynamic content loading easily when scrolling, or do dynamic auto complete when searching a list in a text box using this? Just checking how dynamic this tech is to see if its worth learning.
JEFF, I loved your mini documentary, and I love your channel. Thanks for keeping us devs up to date with high quality information.
What mini documentary? 👀
@@theghosthuntergal th-cam.com/video/XRoSBWYMefY/w-d-xo.html
@@theghosthuntergal Honeypot made a mini doc on him.
@@lokeshg9929 wow that was good .. would have never thought he’d be an introvert and laid back OR A DAD?!? :) Where are the dad jokes?! Thanks for the pointer!
💛
I love this 100 second series that isn't 100 seconds lol
It is supposed to be played at 1.5X
@@immcnabbunderrated comment
it's a feature not a bug
@@immcnabb I played it at 1.75x, does that count?
@@zohayer.mehtab 2x D:
I remember using a library for something like this 10 years ago.
It was pretty nice for smaller webpages and stuff like that.
what I love about Fireship is that his content is not about ego or unjustified claims, he explain the reason behind his statements, no matter if they are positive or negative, very clear and instructional.
Just saying “I don’t like this” is not useful without the rationale and the alternatives.
HTMX is very popular among Django developper, I tried it with Alpine and it is ok for light animation and dom manipulation, but quickly get out of hand.
Yes. It is because it's one of the single viable ways to have dynamic front-end without creating an API and a second project. However, there is no tooling and the global DX is meh. If Django team decided to include such a framework natively, it could be way better.
So you mean it’s prod ready? 😅
@@darkbluewalther there is django-htmx that helps. I also think it is a lot more useful than simply for having a more dynamic front-end. You can use it for cross project integration. Meaning, Project A can request an app(htmx view) from a completely different project and inject it into the other. To me, it seems like a great replacement for REST APIs.
Django needs to bail on this ASAP and just adopt something like Vue or svelte
Lol, just came to know it because of a meme, my curiosity arouse, and found this video, really liked how it looks, I'm also a Django developer and was thinking that it would be good for a small project in working on in which I don't want to implement a REST API and divide front and back, I've been avoiding Ajax calls for the moment and this looks perfect for maintaining the code clean.
Funny that there are a lot of comments about Django people liking it, I guess we like simplicity and elegance, haha!
I've been using htmx for the last year on various projects and I plan to use it more in the future.
This is awesome. Fireship, you are awesome and quickly becoming one of my favorite channels!
The cheekiness paired with the clarity of your videos is amazing.
Despite the lack of hype surrounding htmx on the Internet, my personal experience has shown that it simplifies and enhances the maintainability of all my clients' projects. Over time, I have found that utilizing htmx allows me to create isolated components, leading to increased productivity and faster project delivery compared to other frameworks.
Thanks for chatgpt3 response.
You like Huey Lewis and the News? Their early work was a little too new wave for my taste. But when Sports came out in '83, I think they really came into their own, commercially and artistically. The whole album has a clear, crisp sound, and a new sheen of consummate professionalism that really gives the songs a big boost. He's been compared to Elvis Costello, but I think Huey has a far more bitter, cynical sense of humor. In '87, Huey released this; Fore!, their most accomplished album. I think their undisputed masterpiece is "Hip To Be Square". A song so catchy, most people probably don't listen to the lyrics. But they should, because it's not just about the pleasures of conformity and the importance of trends. It's also a personal statement about the band itself.
How much faster is it than using React for a component based architecture?
This is the first time I’ve been excited about front end development in ages. Can’t wait to try it!
Same.
My prof helped create HTMX!!! How cool it made it to Fireship!!!
I've been using htmx/alpine/astro combo and it's great, very simple mental model and allows for some advanced patterns that other frameworks still can't do.
Htmx, alpine, astro, tailwind is my fav stack, the most enjoyable and fun one
With astro how do you send html fragments for updates ?
@@ukman1234g wtf u mean XD? it works the same way as it does for plain html, wth
What “advanced patterns” can it do that other frameworks cant?
@@JEsterCWyeah dude like wtf is up with that question right? Such bullshit. How dare that guy ask for clarification on a point of genuine curiosity. Fucking people these days man. **Sarcasm
Used this a lot for some MVC projects and it is amazing! It’s great for those that don’t want to adopt ir overhaul into a new UI framework like but add some reactivity. 10/10!
Yeah, for the rest you can use a template engine. I like it, I would use it.
Reactivity?😂 Bro
@@JEsterCW ?
Wonderful video, really good to be reminded of those smaller and lighter js solutions...
No JS, no build tool/chain, Locality of Behaviour, can do anything with Django that previously needs SPA, less codebase, less probability for bugs. Team really loving HyperMedia approach. Spending more quality time with family since.
I waited a veeeeery long time to finally get this kind of simplicity and accessibility. Now I'll check under the hood if my expectations are good.
i seen your interview - loved it ❤
I used it in some of my Django projects and I love it. It's really good. I'll be more than happy to see htmx on beyond fireship.
Thx for mentioning his alt channel I had no idea there was one. Just subbed
Do you know if you can use Django DTL with HTMX?
Awesome introduction ! Now let's see what we can build with that !
You know, this seems like a really freaking awesome way to do web dev for smaller projects. Everything can just happen on the backend without bloating the user, and it even seems like it would work fine with javascript filters on browsers.
Works even better on super large projects because you end up with ~90% less JS.
I just don't understand why people keep saying some new technology would be great for "smaller" projects when a large project is just a whole bunch of small projects put together. Is there really a technical problem? Or is it a matter of managing risk with the new technology?
This is what I've been waiting for all my life, apparently!
14kbs of generational wisdom.
Could be very interesting when paired with Golang templating.
As the proprietor of a hugo-based blog I thought that almost immediately.
That was my first thought. Simple Go scripts returning the little data I want.
This comment aged well
Loved the Honeypot documentary Jeff, much love to you man. Keep up the good work brotherrrr
I used it two months back to build a chat app with django, it was a great experience and its a very simple easy to use library. Nice video! good to see this the get some tractions
Hey did you also use DTL with HTMX for your chat app? Does it make sense to use both?
@@hroman_codes if you are talking of django template language, yes I used it, it basically returns a templated chatbox component with content in the response
Did a school project with this. Because we had to use an awful C# framework for web development, this library was a godsend. Works really well for small things
C# Awful? In which age you're living bro??
@@sanampakuwalHe's in the noob age
which framework?
Name the framework
Better not be Blazor
Lucas Montano by Lucas Montano in his channel (Lucas Montano)
I love it! I've been using it with all my Django projects, it's the best thing since templating.
I doubt that fireship can read my mind, you always bring up the topic that interests me at the time
I’ve discovered more things on these 100 seconds videos than my entire time at the university 😂
Dang, that's sad.
@@jessh4016Jesus chill
@@alaala-op9hv 😅 is just sarcasm! Just joking.
Well My college teachers didn't even knew React and Svelte 4years back when i graduated.
Even if they did , they didn't expose us students to new technologies and WHAT REALLY is going on in the market.
my college years were terrible and I extremely regret attending that college...
to this day I don't have a job and low confidence in myself, that i couldn't do shiet
it is my 3rd semester in college, we only just learnt about Java. I am planning to take a leave of absence to teach myself node and react ( I already taught myself HTML css and JavaScript )
Yes college is a waste of time and money
This sounds almost exactly like RoR's Hotwire/Turbo, which is fantastic. Excited to see what happens from here.
Yeah, it was inspired by Hotwire and Laravel's LiveWire, but more backend agnostic.
Yes, exactly the same concept.
@@chris-peeHotwire is also backend agnostic.
@@OverG88 yeah, but there's a bit more protocol to it, right? I mean it's annoying without a library to place those special tags.
@MatteoContrini true, I agree Unpoly is the better
Thanks. I'll put this on the list of other frontend frameworks I have to learn thanks to this channel.
Wow! I didn't even know about this, would definitely give it a try. Thanks fireship.
Montano, no strike please!
ʕ •ᴥ•ʔ made in montana (isso está no rodapé da página do htmx)
00:08 seeing the "hi mom!" now makes me sad :(
why ?
@@generalezaknenou He implemented the 'hi mom' instead of 'hello world' to greet his mother who, despite not knowing anything about the topic, watched all his videos.
But sadly she passed away.
Lol, just came to know it because of a meme, my curiosity arouse, and found this video, I really like how it looks, I'm a Django developer and was thinking that it would be good for a small project I'm working on in which I don't want to implement a REST API and divide front and back, I've been avoiding Ajax calls for the moment and this looks perfect for maintaining the code clean.
Funny that there are a lot of comments about Django people liking it, I guess we like simplicity and elegance, haha!
Simple is better than complex.
this is exactly what I needed in web development
Been using this since a year and helps with low to moderate js heavy websites. htmx + alpine are a great combination.
alpine is great too, minimalistic
I haven't done webdev in probably 15 years, and this is the first framework I've heard about that could make me consider getting back into it.
Very interesting.
Same, I've been out of the game for a while. This is just a polished version of DHTML or AJAX. Seems a lot better than the other junk the frontend people were doing recently.
Finally, have been waiting for years for something like that! Always hated dealing with HTML + JS or Vue / React compiles..
I really love htmx! It's such a breath of fresh air!
everyone in the comments talking like they work on the browser version of adobe suite when in reality its just crud with some fancy css animation lmao this is more than enough to 80% of the projects out there...not everything needs to be an overengineered spa
Finally HTMX deserved its own video, it has been gone unnoticed because of the react hype train. But now justice has been made for HTMX. I hope it becomes more popular over the years and it combines PERFECTLY with django, RoR and Go.
It's pretty cool of you to name 3 techs which don't know what DOM is.
and express
They dont need to.@@ra2enjoyer708
Been waiting for this.
Montano Fan Here, no strike please!
Lucas Montano from the Lucas Montano Channel
I think this would pair nicely with a backend solution for building lil components programmatically. I tried making one of those and it was fun at the time but now I wanna see if I can integrate something like that with htmx...
You just learned a new topic. Realized you need to make notes for faster revision later on and then
Ordinary people: Don't make notes at all or create notes in a text editor or something
How Jeff does it: Makes a revision friendly high quality video for the same which is not at all boring like text notes so that he himself can revisit the subject and revise it faster but posts it on social media too and monetize on the same.
But again It isn't as easy as I sound here. He does an amazing job and a lot of hard work goes for the same. Jeff is the best inspiration of how a person should Excel in their respective field be it anything not just limited to Computer Science/Software Engineering
This looks really cool, thank you.
Now HTML programmer will definitely got a job!!! I mean ... htmx.
😂
In a small project its good I think
I love this already! I'm switching to htmx
Love this channel. has great information plus I can laugh/cry about certain technologies :D
feels similar to Unpoly, which i think you should totally make a video on!
We've gone full circle, but I love it,
The beauty of "going full circle" is that we end up with all the features we wanted, without the clutter.
@@Bempus Until we add more clutter again and repeat
There are quadrillion server template rendering languages, all are terrible in various ways and there will be more (and at least as terrible). What full circle are you talking about?
Full circle is using vanilla features: data-attributes,fetch, DOMParser, standard event attributes,etc.
This looks pretty cool. Thanks 🎉
I'm imagining you sitting on your new table recording and explaining things I don't understand yet but won't die without learning. You inspire me
Back in the day, I think Drupal used a system sort of like this. But I think they called it "behaviors." Basically, it would parse the DOM, attach event listeners for the "behavior" (attributes) it saw, and then do stuff like make a request, swap out elements, append elements, etc... And you could make custom "behaviors". I worked with an engineer who also worked with Drupal and he basically integrated the same system into a custom app we were building. It got the job done.
I love drupal
Please never utter the word Drupal again lol
@@daedalus5070 Drupal ❤️
Yii had a similar feature too. By declaring a special mode a template will use AJAX requests to the backend controller that originally rendered it. Pagination, form validation and processing, this cute javascript magic under the hood allowed to never be bothered with frontend programming
@@Nekroido Oh yeah, I forgot Yii had that too. It had some great CRUD generation too. Always enjoyed that about Yii.
I would love to see a tutorial about HTMX
nice tech idea.. i will give it a shot. tx for your informativ videos!
That template is gonna look gnarly!
"server that returns html text"..... looks like PHP is back on the menu.
love it! and actually I would try it out. much simpler than js
Wooo i guess I'm doing the frontend of my project with this instead of learning react. Thank you
Htmx is down right simple.I have used it in large projects together with alpine and django.Its much doable for large projects.
This will be magic for me, looks like a nice tech; will try it for sure but from the get-go I think that it could be better (at least for me) if I had to return Json from my backend server instead of Htmx
you can 100% retun JSON from your backend rather than html to update data dynamically on the front end
@@okolosarah4902 Thanks for the info bro, now it looks seriously interesting👍
Love it!!
I've been waiting for this haha
It's confirmed, Go is Fireship's favourite programming language ❤
No.
He's a master in JS but we all know how much he "loves" it. But hey, it pays our bills so...
Montano Fan Here, no strike please!
For making good apps that do the stuff you need them to do, this is a great tool. Back to the old server side rendering + a bit of sparkles.
Definitely looks cool, and always wanted to try alpine ...so may give this a soin 👍
I'm super interesting in this project currently too, seems like a good tool for certain use cases
very limited, simple cases.
As barely a programmer this looks awesome
Looks cool
"next" and "closest" look like great ways to spaghettifi the code though
Gotta love how the great programming cycle is coming full circle once again.
As a front end dev I loved it, I'll give it a try in few next days
This reminds me of Microsoft's jQuery libraries jquery-unobtrusive-ajax and jquery-unobtrusive-validation which worked in a similar way with HTML5 data attributes.
Wow, I'm glad to see someone else remember them! HTMX is ideal for cases like this.
Lucas Montano from the Lucas Montano Channel
I'm interested. I will check this library out. TY!
now i can peacefully say "HTML is my favourite Programming Language" without getting laughed at
I will personally laugh at you.
It is the worlds favorite programming language by lightyears just by pure usage.
An entire industry is based on it to such a fundamental level there are other industries built on top of it that try to act like it's not a programming language.
Wow. Now add a Tailwind equivalent to pure HTML and we’re getting busy
I think you could call Alpine that. (Note that's it's pretty damn slow)
@@chris-pee What is slow, Alpine or htmx?
@@biomorphic Alpine. Htmx is pretty ok I think.
@@chris-pee How's Alpine slow?
@@iatheman what do you mean? I'm not sure how, maybe due to evaluating the code from a string. It's about 2 times slower than competition, and uses 3 times more memory.
this is kinda cool tbh, for smaller stuff this could be a time and headache saver
Wow, thank you so much for sharing this video
Wish you showed what you wrote actually working in the browser. Good overview overall though
It looks awesome!
much cleaner code than using some js frameworks, I already use it in combination with alpine js and I really appreciate it, I didn't have to use some messy JS framework
Coming from Lucas Montano Channel No Strike Pls
Montano esteve aqui
Looks cool. Seems perfect for semi interactive pages.
sounds exciting! thanks :)