With HTMX and HyperScript (from the same guy that created HTMX) we went from Django + Django REST Framework + Vue, back to just Django. The built-in DTL (Django Template Language) can already serve 80% of our needs. HTMX and HyperScript covers the balance 20%,
@@dagorgonzoladotco I don't think so, the most of the viewers from Jack are react developers or those who are sticked to a js framework. He uses astro because is similar to any of those frameworks but with better performance. Anyways, who's still using php
don't let it fool you. you cannot hide complexity. good frontend apps are only complex when they implement complex logic. pushing that to the server with any tool whatsoever doesn't remove complexity. it might even add complexity if your "frontend on the backend" tooling isn't on par with what we have with browser dev tools. not saying htmx is bad but i think stuff like it or hotwire are more niche than most people think.
@@Ollinho12 i mean there are indeed a lot of moving parts with any SPA but you can definitely make it very simple if your use-case allows it. for example you can mount a react (or other) app yourself instead of using a meta-framework like next. you can use esbuild and only transpile JSX to JS to keep it simple and use ESM in the browser and not bundle. you can use a classic CSS component library like bootstrap and not use CSS-in-JS. that will make the project very transparent. as soon as you use htmx, you need some sort of templating and rendering on the backend instead of just an API like you can do with an SPA.
@@FunctionGermany I don't think i agree, i think it's easier to have a back-end framework that handles templating and rendering ( You get that out of the box with all server-sided frameworks like Laravel, Rails, Symfony, Django etc... ) than creating an SPA + an API on the side. Let's not forget that the majority of the frameworks i mentioned include already a lot of extra features like Authentication, Queues, Caching that you don't need to worry about. Also you reduce duplication a lot, since all the logic is written on the server, like validation for example witch is a big part of all the apps, you now need to write it only once on the server and boom, it work in the front-end as well with almost 0 fuss
what i like about htmx is that you do things like form validation only once since its all backend driven and where you have a dedicated frontend and dedicated api you mist essentially do validations twice,but with something like HTMX its essentially only once.
There's nothing forcing you to do validation in JavaScript nowadays. It's just to provide faster feedback on invalid form inputs and avoid an extra round trip to the server. HTMX doesn't change that
Thankfully, because I'm sick of npm install and all it's 998383 packages, plus 6 months of courses to finally make a login page. Before you just need JQuery, Bootstrap and a quick read on docs to create a whole dashboard.
Note: Nearly all PHP template engines today also auto-escape values. Using raw PHP as the template engine is not recommended these days, precisely for the security reasons you mention. 🙂
Yes... its worth noting htmx has no security flaws whatsoever - you can say php rawly is not secure but that is well known.... So easy to make it never XSS if you use any real tool whatsoever...
I've been doing this for years, only with plain HTML. The only difference is that the server call uses some custom code inside HTMX instead of the browser native request mechanism that binds into the user's OS, which is much more efficient than a client-initiated request from HTML. Much more performance and maintainable than 99% of React and Angular Apps I've seen in the wild.
Not only PHP needs sanitization; any other language like Python, Node.js, etc., requires sanitization as well. If you use a framework, you may already have built-in sanitization. So be careful with your choice of words.
Hi, I wrote here similar thing, go to find what he respond to me. LoL. He mention PHP because one of the videos that he compare Next with RSC vs PHP, in PHP side he forgot to sanitize / escape html, because he didnt use a php fn to do it and he choose not to use a PHP framework. And people start make posts saying that he forget to sanitize PHP. LOL.
The game changing alternative to react is Svelte or Solid js I have been using react and now i just built a project in svelte i felt like it was so much i had control over my states its just made it so easy
HTMX makes it even easier because with HTMX all the state is in the HTML, not in Svelte's bundle.js. Rich Harris, the father of Svelte, said it himself: “The best code is the code you do not write.”
Who else remember back in early 2000's aspnet had the "ajax control toolkit" pretty much what htmx it is doing, nothing new people. As always used the technology that solved the problems of your users that what actually matters.
PHP + HTMX is a solid pairing.You just need to sanitize the HTML server side (which you should be doing already). Or use a framework like Laravel that is doing that.
Tailwind was introduce to remove the need to write any css, and its the most popular utility library there. combining it with htmx it means that you never have to leave your markup code its a cool concept but personally I like to write my js :)
That extra CSS is there from tailwind Integration, so just don't use it :) and install tailwind manually. As for returning fragments, I've heard talk about basically giving api of renderToString (or stream) to astro components soon, so you could use that for fragments
@@aggbits yes, you can use "export const partial = true", again, if you don't use global integrations, it doesn't matter :) but in case if you do you'll need it
Thank you for a very inspirational video. I wondered if the issue with the clean HTML response was only in development? I've heard reports that the responses clean up in production...? Thank you again. I've embraced this stack.
I don't have the answer to that, what I can say is that the Astro folks seem to be deeply involved in getting a non-hacky solution going. So that's great.
I think astro is not the best way to demonstrate the power of htmx, maybe you should go simpler maybe with go, php or nodejs server, but great video!!!
Hey jack ! I would like to know if you use any external terminal app or is it default mac terminal setup. I like it a lot. But I use windows. Please recommend me something like that..
How does htmx help create microfrontends? does it support returning blocks of html that have a shadow dom and are fully styled without having to import for example tailwind in the container html?
I like making apps. I stopped falling in love with specific technologies many moons ago. I think React still has a very solid place in highly interactive apps. I'm just glad we are starting to re-think using React for mostly static/less interactive applications.
Server side isn't a new thing guys. MVC, struts, Blade, JSP, ASP MVC, etc. etc. etc. C'mon. Just what fullstack needs. More shit that does the same thing to learn. YAY. I love learning new tech so I can throw it on my resume with the 14 other UI frameworks I have to mention on a resume. And one more KEY word I get to explain to recruiters. Server side.. HTML Fragments. Man.. I have this new invention its incredible. I put my chocolate in this peanut butter and.. WOW. Resus Peanut butter cup? Nope... HTMX The "new" server side UI framework.
I hope the "The No-BS Solution for Enterprise-Ready Next.js Applications" will cover I18N with translated urls / localized pathnames. Specially with app folder. I18N is a crucial piece for i18N and SEO. It will be covered?
@@jherr I hope it will be covered :-), mostly courses lack i18n with Next.js from udemy to front-end masters. Would love to see your take on this. Thank your for the feedback, content creation and time
@@gustavofelisberto2244 BTW, I completely agree. In large e-Commerce settings infrastructure elements like i18n and personalization are 100% required, but there is very little enterprise-grade information on it out there.
Can someone who has made a large project with HTMX vs React answer this: if you have a large application with many pages, and you want to keep it a fluid SPA, won't you have to keep everything on one .html file, and therefore wont it get gigantic? where in react at least you can break up components and import to keep files more maintainable Please share
You can serve full pages as in the old days, but add hx-boost=true to you body. Then all links to your pages will be replaced with AJAX calls and only the body replaced, which will feel much snappier and much more like a SPA, while it really isn't.
Its the same. Its just delegating the process to the htmx lib 😂 Also with these generalization of things there will be limits where we will got stuck sooner or later
What is it that makes React appealing, is it not the use of JSX syntax. If that could be baked into the DOM we would not need so march convoluted code.
I'm confused how HTMX is an "alternative" to React. What templating language do you use with HTMX? Liquid? Yes JSX is not React, but it came from React. What about C++ HTMX?
What do you mean that it "came from React"? "Templating" happens on the server. So anything you want to use on the server; PHP, Go, Rust, etc. is fine. I use Astro for this because it JS/TS based, and that's the language that most folks watching this channel know. But you don't have to use Javascript or Typescript on the server to use HTMX. It can literally be anything that can serve HTML.
@@jherrI just don't understand how you render HTML on a server without a templating engine like Liquid or JSX. Even though you're returning HTML, you can still use JSX as a templating engine. Do you useState, no, but can I parse RSS feeds on the client without some sort of State? No. I require some sort of State, could be chrome.local.storage or indexeddb, but React still would work with HTMX in this scenario.
@@astartup In this case Astro is doing the templating. It does a good job with that. I'm sorry I don't follow the rest when it comes to RSS. I know what RSS is, and I know what state is, useState, etc. But I don't understand your example application. Are you trying to create an RSS reader?
@jherr I can't tell you exactly what I'm doing, but I need to use React because I cannot just scrape news feeds on my web server for copyright reasons. I actually have to use rss-parser in the browser with indexeddb, and then use server side rendering to build a moat around my software-as-a-service to skirt the copyright fair use issues. For this application, Next.JS is perfect. I still have need for HTMX in the app. I'm using react as tool not a hammer and everything is a nail. There is nothing in my design that would make it so HTMX could not be used effectively with Next.JS, pending they had the libraries of course.
@@astartup Ok, I just don't see the need to bring in another 14Kb for HTMX when you could add in SWR for 4Kb and that would do similar things and actually integrate with React.
I feel some type of way in having html as response. Like to validate an input, if it fails, I have to return another input field that shows the red border and message.
key difference is that htmx relies on a backend spits out html such as django, react can works with a backend that is html ignorant and just provides restful api, these are totally different use cases, htmx is basically a better jquery(well, sort of) for traditional backends, they're just _different_
Yup that was my thought - React is a change in paradigm, which has a higher up-front investment, but makes a lot of things easier. I worked with MFA's plain JS + server side templating. It was easy to get things up and running, but once you got past a level of complexity the abstraction helps to seperate logic from presentation.
Its so funny that this tool is getting so much attention now just because fireship has made a video on it recently. I don't think it will go anywhere. Have been using it years ago and it was O K. Also it's creator is sometimes super toxic.
I mean, you should never trust the user, even if the frontend sanitizes the input. If you only trust the FE to sanitize, then you are barely safer than no sanitazing at all.
Hi thanks for the video. I think you just over complicate with this kind of example, with astro SSR. About XSS and PHP, the same is valid with nodejs without a framework or client js without a lib or framework. The fault is not on the language but is and should be on developer because the language give all the tools to prevent any kind of attack. If you are using a PHP frameworks you will not have a problem with XSS. It is easy to trash a lang like PHP without think twice. It is just typical of Full stack js / react dev.
@@jherr Sir, you can fool yourself and even others with this words. However it is crystal clear why you mention PHP. In one video which you compare NextJS with RSC vs PHP, in PHP code you forgot to sanitize. I and other people post comments mention that you should sanitize or you forgot sanitize. However this was you mistake not the PHP fault. And worst mistake, maybe because you never use PHP, was not using a PHP Frameworks. For this kind of things i will unsubscribe you channel and stop watch you videos because a few videos ago, videos are somehow toxic. Thanks anyway.
@@jediampm If you look at that the PHP/RSC video you will see that I pinned a comment directly addressing this issue, as well as adding sanitization to the PHP code. A PHP framework is desirable but not required. As for why I chose Astro in this video it was simply to reduce the number of new technologies that a React developer (the bulk of the audience) would need to learn in order to make use of HTMX. I'm sorry that you feel that way about the channel. I always try to keep my content positive and engaging, it's unfortunate that you feel it's toxic.
This is a bad implementation. Usually SSE, which is supported in HTMX, is used to send new tokens to the client. Doing that is far easier than what you did here Jack
Htmx is all about state on the server, its the client copanion to the RESTful api pattern. If you need an PWA, your best bet is on client side frameworks if you want things like offline functionality.
@@guidobit Yeah but technically you could attach a service worker sent from the client to the index.html and cache other route pages that are server rendered..... Tell me I am wrong and why (Why does it need to be SPA for pwa to work). Last time I checked you can create PWA from MPAs which is basically htmx?
yes, since the only thing you need to declare is the htmx script into your main.js... however, watch out for XSS vulnerabilities. HTMX is still new and additional scripting is needed to sort out stuff.
This is true! But it would require pre-loading all the pages in the serviceworker. Not sure how easy this would be for the average application. It would feel like the wrong tool for the job. @@seanknowles9985
The only issue is that both HTMX and Alpine requires you to turn of the CSP settings for safe inline eval- apart from being a compliance issue for enterprise use cases there is also the risk of attacks
Bigger in what way? More complex on the client side? True. That would be an issue for HTMX. But if bigger just means more routes that are primarily server driven that just require some additional client interactivty then HTMX will scale quite nicely. In fact, HTMX is ~14Kb (less than what I said in the video) and that won't grow in size based on the app, and it's cross-route cached, so it's very efficient.
Im along time c# developer with over 20 years. Desktop apps server side services. Looking to do more web. But so many different framwworks etc.. was wonder where do i start. Next.js looks cool but not sure if i should learn something else first.
I've recently switched from Next to Nuxt. It's the same concept of full stack batteries included but uses Vue instead of React. A lot of people find React to be overly complicated with lots of ways to shoot yourself in the foot.
When sampling don't limit yourself to JS based framework. You can expand your horizons to Python-based (Django, Flask, Falcon, Quart), Ruby (RoR), Groovy (Grails), Go, PHP (Laravel, Yii). Powered by HTMX and Hyper script you can do SPA with these frameworks.
I would suggest to use C# with Blazor, with .NET 8 coming you get SSR + SPA even more easily. Once you get the hang of it it's easy to move to JS based frameworks, I recommend Svelte with Vite.
I *seriously* get the appeal, but I would prefer to just use vanilla JS and Astro. Astro was doing the heavy-lifting in this demo anyways. This would be like 150 lines in a script tag, max. That would be like 10kb less than HTMX.
Can you explain how htmx scales for larger web applications? How do devs reason about how a page works when the code for it is split across multiple http endpoints and state is distributed across various htmx fragments? It seems like for anything sophisticated you need to really plan out what sections of the page will mutate and I imagine for sanity you probably want only a couple of main trunks on a page that the server sends html for. How does one go about architecting an htmx application at scale?
Applications would scale simply by adding routes. You need to look at HTMX from the server first perspective. Everything is driven off the server. The HTMX directives are just tiny client side helpers that reconnect the client to the server to get new data, or post data, or whatever, as needed. If you look at this through the lens of big isomporphic JS applications you are going to miss the point. Also, HTMX is really not designed to try and replace React or other view frameworks. Folks aren't going to be re-implementing Figma in HTMX. HTMX is in no way intended to do that. HTMX is meant to add primitives so that server-driven applications can be more dynamic.
@@jherr Hmm ok, I didn't realize that extra JS ran on the server. I was hoping to see pure html + htmx directives only. Hey regardless, your videos (and you) are awesome, keep doing great work.
@@TimKindberg What you see is about as "pure" as it gets from the client side. htmx is a JS "extension" so you need that JS on the page. But the backend can be anything you want, JS, PHP, Go, Rust, C++, Java, C#, etc. I chose Astro/JS so that folks watching the channel, who are mainly JS/TS devs, could get into HTMX faster and not have to learn another language to use it.
This presents HTMX to be not much more than a general utility library. Which could just as easily appear in the form of a NPM library. In fact, just by probability, I'm gonna' say all the shortcuts HTMX provides already exist in the JS ecosystem.
So what are real use cases for this? Piping all chat-gpt request through my backend is not what I want - I also do not want send html back and forth all the time, when just the data would be sufficent and the client can do the rendering.
Web devs who wants to forgo the back-front separation and go back to our unified architecture/framework (Laravel, Yii, Django, Flask, PHP, Go, Rust, Java, Groovy) while able to deliver same interactive/dynamic user experience.
@@FirdausAziz My question was not "what" but "why". I just see increased bandwith and cpu usage if we move the rendering to the backend and that would make AWS and co happy, but why should I be happy about that.
@@thelvadam5269 did you measure this or are you just guessing here? The drawbacks are there even when you are denying them - and they scale with every user. Nevertheless, even if they'd be close to zero, there should be positives that drive me to use htmx...and the positive that probably gets mentioned first is: rendering performance on the client side that magically appeared out of nowhere because translating json to a visible representation is so cheap /i
@@thelvadam5269but with react we don't have to move JSON everytime. We make requests to API on special occasions, like asking for data. In react a lot of UI actions don't even touch the server. Like changing state, menus etc.
With HTMX and HyperScript (from the same guy that created HTMX) we went from Django + Django REST Framework + Vue, back to just Django. The built-in DTL (Django Template Language) can already serve 80% of our needs. HTMX and HyperScript covers the balance 20%,
U need CQRS on the frontend...
Bro why you using Django god
Your missing out on performance my mah
This is the most complicated simple example for htmx I’ve seen so far.
Thank you! 😀
Right. Instead of Astro a better pick would have been PHP or Python IMO...
@@dagorgonzoladotco I don't think so, the most of the viewers from Jack are react developers or those who are sticked to a js framework. He uses astro because is similar to any of those frameworks but with better performance. Anyways, who's still using php
@@anashe5417 Many devs are still using php. Do you have problem about it?
@@anashe5417Most of the web. WordPress alone accounts for 43% of all websites.
This seems like a very interesting course correction from all the insane framework complexity we've convinced ourselves is necessary for everything.
don't let it fool you. you cannot hide complexity. good frontend apps are only complex when they implement complex logic. pushing that to the server with any tool whatsoever doesn't remove complexity. it might even add complexity if your "frontend on the backend" tooling isn't on par with what we have with browser dev tools.
not saying htmx is bad but i think stuff like it or hotwire are more niche than most people think.
@@FunctionGermany I generally agree but As far as I can tell what you are describing is not htmx.
@@ryanleemartin7758 what's the purpose of htmx then, if it's not reducing JS on the client side?
@@Ollinho12 i mean there are indeed a lot of moving parts with any SPA but you can definitely make it very simple if your use-case allows it. for example you can mount a react (or other) app yourself instead of using a meta-framework like next. you can use esbuild and only transpile JSX to JS to keep it simple and use ESM in the browser and not bundle. you can use a classic CSS component library like bootstrap and not use CSS-in-JS.
that will make the project very transparent. as soon as you use htmx, you need some sort of templating and rendering on the backend instead of just an API like you can do with an SPA.
@@FunctionGermany I don't think i agree, i think it's easier to have a back-end framework that handles templating and rendering ( You get that out of the box with all server-sided frameworks like Laravel, Rails, Symfony, Django etc... ) than creating an SPA + an API on the side. Let's not forget that the majority of the frameworks i mentioned include already a lot of extra features like Authentication, Queues, Caching that you don't need to worry about. Also you reduce duplication a lot, since all the logic is written on the server, like validation for example witch is a big part of all the apps, you now need to write it only once on the server and boom, it work in the front-end as well with almost 0 fuss
what i like about htmx is that you do things like form validation only once since its all backend driven and where you have a dedicated frontend and dedicated api you mist essentially do validations twice,but with something like HTMX its essentially only once.
well, "validation" in the front-end is more about handrails for the user and make the input obvious and easy for them
There's nothing forcing you to do validation in JavaScript nowadays. It's just to provide faster feedback on invalid form inputs and avoid an extra round trip to the server. HTMX doesn't change that
pretty funny how web dev is slowly going full circle back to php and ajax 😂
haha exactly 😂
PHP is not dead is PHP is not dead is PHP
PHP for Life! ❤❤❤
Thankfully, because I'm sick of npm install and all it's 998383 packages, plus 6 months of courses to finally make a login page.
Before you just need JQuery, Bootstrap and a quick read on docs to create a whole dashboard.
Bring PHP and Flash back!! Good ol days!!
Note: Nearly all PHP template engines today also auto-escape values. Using raw PHP as the template engine is not recommended these days, precisely for the security reasons you mention. 🙂
Yes... its worth noting htmx has no security flaws whatsoever - you can say php rawly is not secure but that is well known.... So easy to make it never XSS if you use any real tool whatsoever...
@@u9vata what are you smoking php is secure
I've been doing this for years, only with plain HTML. The only difference is that the server call uses some custom code inside HTMX instead of the browser native request mechanism that binds into the user's OS, which is much more efficient than a client-initiated request from HTML. Much more performance and maintainable than 99% of React and Angular Apps I've seen in the wild.
Not only PHP needs sanitization; any other language like Python, Node.js, etc., requires sanitization as well. If you use a framework, you may already have built-in sanitization. So be careful with your choice of words.
Hi, I wrote here similar thing, go to find what he respond to me. LoL.
He mention PHP because one of the videos that he compare Next with RSC vs PHP, in PHP side he forgot to sanitize / escape html, because he didnt use a php fn to do it and he choose not to use a PHP framework. And people start make posts saying that he forget to sanitize PHP. LOL.
I remember when I tried this before it got the hype now.
Happy to see its growing
I tried it a 1.5 years back with Alpine as well...funny how some things just pop off
What we really need is support for html documents partials natively on the browser. We’ll go back to old school full-ssr again 😂
Here we go again
That's how things should look, I hate all those overgrown frameworks
Now this is the literal definition of Over Engineering, damn. Though, it's a nice video. 👍🌟
The game changing alternative to react is Svelte or Solid js
I have been using react and now i just built a project in svelte i felt like it was so much i had control over my states its just made it so easy
What was the project about
@@skyhappy a drag and drop with gsap added
I also rebuilt one of my Nextjs projects using Sveltekit and I loved it. I'd recommend it over Nextjs
HTMX makes it even easier because with HTMX all the state is in the HTML, not in Svelte's bundle.js. Rich Harris, the father of Svelte, said it himself: “The best code is the code you do not write.”
@@matthiaslangbart9841 yet you cannot achieve some of the SPA performance. Indeed HTMX is really good.
Great content. A quick question. You said that React is an imperative model. Is it true? I knew that React is declarative...
I think he made a mistake there, because previously he said it's declarative vs htmx's imperative.
which zsh theme are you using? looks really cool.
Who else remember back in early 2000's aspnet had the "ajax control toolkit" pretty much what htmx it is doing, nothing new people. As always used the technology that solved the problems of your users that what actually matters.
It feels like php when it started as fragments of logic inside html
PHP + HTMX is a solid pairing.You just need to sanitize the HTML server side (which you should be doing already). Or use a framework like Laravel that is doing that.
@@jherr Of course.
But i have very old times on my mind, when
php was mostly inserts in html and "magic" happened ;)
@@jherr I think you should do a video about Laravel (you might just like PHP). React, Next, Django, etc are just similar frameworks. Try Laravel 😂
Tailwind was introduce to remove the need to write any css, and its the most popular utility library there. combining it with htmx it means that you never have to leave your markup code its a cool concept but personally I like to write my js :)
That extra CSS is there from tailwind Integration, so just don't use it :) and install tailwind manually.
As for returning fragments, I've heard talk about basically giving api of renderToString (or stream) to astro components soon, so you could use that for fragments
Do you mean installing as a postCSS plugin?
@@lifedrawing1 yes, I have an article "A comprehensive guide to customizing Tailwind CSS in Astro" going into more detail on the approach
@@JLarkythank you!
any update about this? did they add support for fragments?
@@aggbits yes, you can use "export const partial = true", again, if you don't use global integrations, it doesn't matter :) but in case if you do you'll need it
Thank you for a very inspirational video. I wondered if the issue with the clean HTML response was only in development? I've heard reports that the responses clean up in production...? Thank you again. I've embraced this stack.
I don't have the answer to that, what I can say is that the Astro folks seem to be deeply involved in getting a non-hacky solution going. So that's great.
I think astro is not the best way to demonstrate the power of htmx, maybe you should go simpler maybe with go, php or nodejs server, but great video!!!
Agree, as we could see astro lays bricks in your way in multiple occasions, so it doesn’t seem to be a good tool for the job
Astro has HTML partials now so you can avoid needing to strip the HTML/CSS.
respect for showing this.
A 16.5kB 500-line IIFE is taking over React ... love it.
jesus christ
😂 never related to a comment more in my life 💀
Relatable
That’s Jason Bourne?
Next week: HTMY replacing Angular
@@nicjrichdev JSON
Very cool tutorial. @jherr I wonder if in this case an implementation with web sockets would have been good enough.
Tried out htmx w/ laravel and a tiny bit of jquery. It was a bit of a throwback but it was also very easy and fun
Don't really know HTMX, but anything is better than React.
Super happy to see jack cover this topic 🌝
Hey jack ! I would like to know if you use any external terminal app or is it default mac terminal setup. I like it a lot. But I use windows. Please recommend me something like that..
I currently use Tabby along with oh-my-zsh oh-my-posh with the atomic theme and fig
Jack, hi there. Could I ask you what character you are using in your zsh prompt on the second line? (or series or characters?)
How does htmx help create microfrontends? does it support returning blocks of html that have a shadow dom and are fully styled without having to import for example tailwind in the container html?
do you share you dotfiles anywhere? really like the look of your terminal
I was wondering the same thing.
What is the font ? Great content !
Nice to see you cave to HTMX as well 😂
I like making apps. I stopped falling in love with specific technologies many moons ago. I think React still has a very solid place in highly interactive apps. I'm just glad we are starting to re-think using React for mostly static/less interactive applications.
Please share how you set your Terminal to look so good
It seems like, if something is taking over developers’ jobs, it will be tech like this, not AI
Server side isn't a new thing guys. MVC, struts, Blade, JSP, ASP MVC, etc. etc. etc. C'mon.
Just what fullstack needs. More shit that does the same thing to learn. YAY. I love learning new tech so I can throw it on my resume with the 14 other UI frameworks I have to mention on a resume. And one more KEY word I get to explain to recruiters.
Server side.. HTML Fragments. Man.. I have this new invention its incredible. I put my chocolate in this peanut butter and.. WOW. Resus Peanut butter cup? Nope... HTMX The "new" server side UI framework.
This channel is probably one of the best channels I know for development things. Great content!
Pure insanity
I hope the "The No-BS Solution for Enterprise-Ready Next.js Applications" will cover I18N with translated urls / localized pathnames. Specially with app folder. I18N is a crucial piece for i18N and SEO. It will be covered?
I can't guarantee that, but you aren't signing up to buy it just by signing up for the newsletter.
@@jherr I hope it will be covered :-), mostly courses lack i18n with Next.js from udemy to front-end masters. Would love to see your take on this. Thank your for the feedback, content creation and time
@@gustavofelisberto2244 BTW, I completely agree. In large e-Commerce settings infrastructure elements like i18n and personalization are 100% required, but there is very little enterprise-grade information on it out there.
Can someone who has made a large project with HTMX vs React answer this: if you have a large application with many pages, and you want to keep it a fluid SPA, won't you have to keep everything on one .html file, and therefore wont it get gigantic? where in react at least you can break up components and import to keep files more maintainable
Please share
You can serve full pages as in the old days, but add hx-boost=true to you body. Then all links to your pages will be replaced with AJAX calls and only the body replaced, which will feel much snappier and much more like a SPA, while it really isn't.
I really hates this :( great content!
Its the same. Its just delegating the process to the htmx lib 😂
Also with these generalization of things there will be limits where we will got stuck sooner or later
Oh awesome just wanted to ask about potential of Astro + Htmx when starting watching this video, and then just heard that's exactly what you doing
We are so back
hey can you plz tell name of your vscode theme 😊
Try night wolf (black)
@jawadtkd8577
What is it that makes React appealing, is it not the use of JSX syntax. If that could be baked into the DOM we would not need so march convoluted code.
14Kb not 34Kb.
thanks!
Something about managing api calls in html feels wrong to me.
You must abhor HTML forms, then!
Great 👍👍, thank you
I'm confused how HTMX is an "alternative" to React. What templating language do you use with HTMX? Liquid? Yes JSX is not React, but it came from React. What about C++ HTMX?
What do you mean that it "came from React"? "Templating" happens on the server. So anything you want to use on the server; PHP, Go, Rust, etc. is fine. I use Astro for this because it JS/TS based, and that's the language that most folks watching this channel know. But you don't have to use Javascript or Typescript on the server to use HTMX. It can literally be anything that can serve HTML.
@@jherrI just don't understand how you render HTML on a server without a templating engine like Liquid or JSX. Even though you're returning HTML, you can still use JSX as a templating engine. Do you useState, no, but can I parse RSS feeds on the client without some sort of State? No. I require some sort of State, could be chrome.local.storage or indexeddb, but React still would work with HTMX in this scenario.
@@astartup In this case Astro is doing the templating. It does a good job with that. I'm sorry I don't follow the rest when it comes to RSS. I know what RSS is, and I know what state is, useState, etc. But I don't understand your example application. Are you trying to create an RSS reader?
@jherr I can't tell you exactly what I'm doing, but I need to use React because I cannot just scrape news feeds on my web server for copyright reasons. I actually have to use rss-parser in the browser with indexeddb, and then use server side rendering to build a moat around my software-as-a-service to skirt the copyright fair use issues. For this application, Next.JS is perfect. I still have need for HTMX in the app. I'm using react as tool not a hammer and everything is a nail. There is nothing in my design that would make it so HTMX could not be used effectively with Next.JS, pending they had the libraries of course.
@@astartup Ok, I just don't see the need to bring in another 14Kb for HTMX when you could add in SWR for 4Kb and that would do similar things and actually integrate with React.
What was old is new again... (someone who used to post to /cgi-bin)
I feel some type of way in having html as response. Like to validate an input, if it fails, I have to return another input field that shows the red border and message.
Just when I think, I became good at react or next some other shit jumps up. I am done being a Fullstack developer. I am moving to ML or AI 🤦♂️
🤣🤣🤣
Just dont learn it lmao, im tired of this bs aswell
HTMX is a joke, I can't imagine a serious company actually using it.
Yeah because ML is staying the way it is forever
ML & AI are topics that evolve like almost every week lmao
Plz tell me what theme of your zsh?
Heard about this for months. But this is the first time that I realise that it's called HTMX, not HTMLX
Lets do a Vue3/Nuxt3 one also
Getting PHP vibes from HTMX.
❤ htmlX!
key difference is that htmx relies on a backend spits out html such as django, react can works with a backend that is html ignorant and just provides restful api, these are totally different use cases, htmx is basically a better jquery(well, sort of) for traditional backends, they're just _different_
Yup that was my thought - React is a change in paradigm, which has a higher up-front investment, but makes a lot of things easier.
I worked with MFA's plain JS + server side templating.
It was easy to get things up and running, but once you got past a level of complexity the abstraction helps to seperate logic from presentation.
HTMX: JQuery for the next generation with HATEOS driven web apps.
hello, your terminal look nice to me, can you share your config ?
One more framework-library? And why?
Its so funny that this tool is getting so much attention now just because fireship has made a video on it recently. I don't think it will go anywhere. Have been using it years ago and it was O K. Also it's creator is sometimes super toxic.
The key question: when is HTMX the *wrong* choice?
Highly dynamic apps (e.g. Figma)
I lived in world Dojo html parser and we decided that's bad way to do stuff and then we are going back to it.
Fun!
Sounds fine for sever side if I need to make some simple UI.
Also kinda worry about xss.
A lot of fears expressed about htmx xss vuln could be solved by just one function call sanitizing user input .
To solve XSS just use a proper framework on the backend, like Astro, Django, etc. They already sanitize your HTML by default.
I mean, you should never trust the user, even if the frontend sanitizes the input. If you only trust the FE to sanitize, then you are barely safer than no sanitazing at all.
are we circling back now to a dumbed down angularjs 1 ? No thanks
Hi thanks for the video.
I think you just over complicate with this kind of example, with astro SSR.
About XSS and PHP, the same is valid with nodejs without a framework or client js without a lib or framework. The fault is not on the language but is and should be on developer because the language give all the tools to prevent any kind of attack. If you are using a PHP frameworks you will not have a problem with XSS. It is easy to trash a lang like PHP without think twice. It is just typical of Full stack js / react dev.
Sorry if you took something as me trashing PHP, I simply said that with PHP we need to make sure that we do XSS santization.
@@jherr Sir, you can fool yourself and even others with this words. However it is crystal clear why you mention PHP. In one video which you compare NextJS with RSC vs PHP, in PHP code you forgot to sanitize. I and other people post comments mention that you should sanitize or you forgot sanitize. However this was you mistake not the PHP fault. And worst mistake, maybe because you never use PHP, was not using a PHP Frameworks.
For this kind of things i will unsubscribe you channel and stop watch you videos because a few videos ago, videos are somehow toxic. Thanks anyway.
@@jediampm If you look at that the PHP/RSC video you will see that I pinned a comment directly addressing this issue, as well as adding sanitization to the PHP code. A PHP framework is desirable but not required. As for why I chose Astro in this video it was simply to reduce the number of new technologies that a React developer (the bulk of the audience) would need to learn in order to make use of HTMX. I'm sorry that you feel that way about the channel. I always try to keep my content positive and engaging, it's unfortunate that you feel it's toxic.
too complicated of an example for HTMX, but great work anyways.
Next LinkedIn job post will require 30 years experience of HTMX
Show some solid projects built with it is enough!
HTMX just feels funny, not sure who being it back
This type of behavior can be easily achieved with Unpoly too.
This is a bad implementation. Usually SSE, which is supported in HTMX, is used to send new tokens to the client. Doing that is far easier than what you did here Jack
Спасибо! Ты крутой!
Спасибо!
Can we create pwa with htmx?
Htmx is all about state on the server, its the client copanion to the RESTful api pattern. If you need an PWA, your best bet is on client side frameworks if you want things like offline functionality.
@@guidobit Yeah but technically you could attach a service worker sent from the client to the index.html and cache other route pages that are server rendered..... Tell me I am wrong and why (Why does it need to be SPA for pwa to work). Last time I checked you can create PWA from MPAs which is basically htmx?
@@guidobit Imagine how simple and powerful it would be to use golang, htmx with a pwa for offline capabilities.
yes, since the only thing you need to declare is the htmx script into your main.js... however, watch out for XSS vulnerabilities. HTMX is still new and additional scripting is needed to sort out stuff.
This is true! But it would require pre-loading all the pages in the serviceworker. Not sure how easy this would be for the average application. It would feel like the wrong tool for the job. @@seanknowles9985
The only issue is that both HTMX and Alpine requires you to turn of the CSP settings for safe inline eval- apart from being a compliance issue for enterprise use cases there is also the risk of attacks
can you go into detail abouth this, people seem to be sleeping on this.
Good luck to adopt htmx for bigger projects
Bigger in what way? More complex on the client side? True. That would be an issue for HTMX. But if bigger just means more routes that are primarily server driven that just require some additional client interactivty then HTMX will scale quite nicely. In fact, HTMX is ~14Kb (less than what I said in the video) and that won't grow in size based on the app, and it's cross-route cached, so it's very efficient.
we made large websites in JQuery back in the day lolz.
Im along time c# developer with over 20 years. Desktop apps server side services. Looking to do more web. But so many different framwworks etc.. was wonder where do i start. Next.js looks cool but not sure if i should learn something else first.
I've recently switched from Next to Nuxt. It's the same concept of full stack batteries included but uses Vue instead of React. A lot of people find React to be overly complicated with lots of ways to shoot yourself in the foot.
When sampling don't limit yourself to JS based framework. You can expand your horizons to Python-based (Django, Flask, Falcon, Quart), Ruby (RoR), Groovy (Grails), Go, PHP (Laravel, Yii). Powered by HTMX and Hyper script you can do SPA with these frameworks.
I would suggest to use C# with Blazor, with .NET 8 coming you get SSR + SPA even more easily. Once you get the hang of it it's easy to move to JS based frameworks, I recommend Svelte with Vite.
@gradycdenton thank you. i like vue.js and played around with it already. I will give Nuxt a try.
@FirdausAziz thank you. I will look into some of the options you mentioned
99% of the video is about creating backend on Astro/Next.js and not about HTMX. Do not waste your time as I did.
HTMX code is 99% server based, what did you expect?
I *seriously* get the appeal, but I would prefer to just use vanilla JS and Astro. Astro was doing the heavy-lifting in this demo anyways.
This would be like 150 lines in a script tag, max. That would be like 10kb less than HTMX.
your production quality is getting real good. but those flashbangs.... :
Flashbangs?
@@jherr predominantly dark backgrounds, followed by the occasional white screen
Frontend != React
i build HTMX projects with mostly nodejs and Pug
Can you explain how htmx scales for larger web applications? How do devs reason about how a page works when the code for it is split across multiple http endpoints and state is distributed across various htmx fragments? It seems like for anything sophisticated you need to really plan out what sections of the page will mutate and I imagine for sanity you probably want only a couple of main trunks on a page that the server sends html for. How does one go about architecting an htmx application at scale?
Applications would scale simply by adding routes. You need to look at HTMX from the server first perspective. Everything is driven off the server. The HTMX directives are just tiny client side helpers that reconnect the client to the server to get new data, or post data, or whatever, as needed. If you look at this through the lens of big isomporphic JS applications you are going to miss the point.
Also, HTMX is really not designed to try and replace React or other view frameworks. Folks aren't going to be re-implementing Figma in HTMX. HTMX is in no way intended to do that. HTMX is meant to add primitives so that server-driven applications can be more dynamic.
@@jherr Which addresses the large majority of needs in web sites and apps. Apps like Figma, Facebook,...etc are a small minority.
"imperative model": svelte, solid, vue, etc. You mean the declarative model. jQuery/raw dom-manipulation/vb6 would be imperative.
Alright, I get where you are going with that. Yes, React is declarative as well. Just different levels of granularity between React and htmx. ;)
HTMX the new CFML , oh how things come around again and again .... lol
Do a tutorial on it
up next, svelte plz
No JS?? But... you wrote a bunch of JS.
No extra JS on the client side.
@@jherr Hmm ok, I didn't realize that extra JS ran on the server. I was hoping to see pure html + htmx directives only. Hey regardless, your videos (and you) are awesome, keep doing great work.
@@TimKindberg What you see is about as "pure" as it gets from the client side. htmx is a JS "extension" so you need that JS on the page. But the backend can be anything you want, JS, PHP, Go, Rust, C++, Java, C#, etc. I chose Astro/JS so that folks watching the channel, who are mainly JS/TS devs, could get into HTMX faster and not have to learn another language to use it.
@@jherr I'll give it another watch and see if I understand it better this time.
@@TimKindberg I should have been more explicit that everything .Astro is running ONLY on the server.
Hi! @jackherrington what's your terminal config, it looks nice
This presents HTMX to be not much more than a general utility library. Which could just as easily appear in the form of a NPM library.
In fact, just by probability, I'm gonna' say all the shortcuts HTMX provides already exist in the JS ecosystem.
Way too complicated way to illustrate a simple point. But then again, it might just be me.
So what are real use cases for this? Piping all chat-gpt request through my backend is not what I want - I also do not want send html back and forth all the time, when just the data would be sufficent and the client can do the rendering.
Web devs who wants to forgo the back-front separation and go back to our unified architecture/framework (Laravel, Yii, Django, Flask, PHP, Go, Rust, Java, Groovy) while able to deliver same interactive/dynamic user experience.
@@FirdausAziz My question was not "what" but "why". I just see increased bandwith and cpu usage if we move the rendering to the backend and that would make AWS and co happy, but why should I be happy about that.
@@thelvadam5269 did you measure this or are you just guessing here? The drawbacks are there even when you are denying them - and they scale with every user. Nevertheless, even if they'd be close to zero, there should be positives that drive me to use htmx...and the positive that probably gets mentioned first is: rendering performance on the client side that magically appeared out of nowhere because translating json to a visible representation is so cheap /i
@@thelvadam5269but with react we don't have to move JSON everytime. We make requests to API on special occasions, like asking for data. In react a lot of UI actions don't even touch the server. Like changing state, menus etc.
Most stuff > react
Looks like php, apsx, jsp