HTMX in 60 seconds with ThePrimeagen
Vložit
- čas přidán 8. 09. 2024
- Full Course: HTMX and Go buff.ly/3PupYLL
About this Course:
Are you wanting an alternative to complicated UI frameworks? Make web app development simpler using HTMX! Using Go, you’ll build a simple server to respond to routes with templates. Then enhance your HTML with HTMX attributes to target updates on parts of the page. Tackle error handling, out-of-band updates, and advanced patterns for URL control and redirection. Learn the grug way (it’s just HTML, btw) for building interactive web experiences!
Find Frontend Masters Online:
Twitter: buff.ly/3THunx7
LinkedIn: buff.ly/3zCEok4
Facebook: buff.ly/3TrYeZl
Instagram: buff.ly/3IHdxZh
About Us:
Advance your skills with in-depth, modern front-end engineering courses - our 200+ high-quality courses and 18 curated learning paths will guide you from mid-level to senior developer! buff.ly/3TItGnl
I've never felt so old as I do reading these comments acting like the server returning HTML is a radical new idea.
Back to 2008!
I guess the difference here is that in HTMX server returns HTML only of the element being changed, not the entire page, like in year 2000
@@justcharythis is similar to framesets
i am confused. Is this not an introduction to REST?
As I watched this video, I stared intently at the screen. I nodded my head in understanding. I let out a "Mhm". As the end came near, I sat back and exhaled, knowing full well, I understood none of that.
lol
well, what he SAID is quite easy to understand
in simple term, basically with htmx u don't need JS to work with API, htmx lets u ask for more html content from the server , and once server sends back the html content, htmx lets u do tons of things with the returned html
@@--bountyhunter-- you have always been able to that, you don't need htmx, you can do it without htmx, that is how people did it back in the 1990s and in the 2000s & early 2010s with jQuery.
And people switch from that to using JSON for a reason, JSON allows you more flexibility.
@@laughingvampire7555 what I said was , using htmx u don't need JS to communicate with server for html content.
you said we were always able to do that. then proceeded to mention using jQuery, which is basically JS xD.
Basically u said we were always able to omit JS and communicate with server for more html contents with JS. xD
@@laughingvampire7555 correct, but HTMX makes it easier. people decide to use libraries and frameworks because they make things easier. HTMX does that.
JSON allows more flexibility, sure. But we've seen that in real applications, using JSON APIs results in extremely bloated responses (ie, frontend applications requesting an entire "get user" API endpoint just to get the user's display name).
Using HTMX (or really any form of true SSR framework), you don't encounter this issue because the only things that are transferred "over the wire" are UI primitives. You still get the flexibility of being able to call a "get user" endpoint/function, but the only thing sent over the wire is the display name, rather than the entire user object. (As an additional benefit it's a lot easier to optimize code like this on the backend, since you're actually able to do things like writing custom SQL queries that only get the info that you need, instead of needing to write an entirely new endpoint that gives you the info you want)
Anyway sorry for all the yapping. Just an SSR fan, and I like the way HTMX approaches it since it's interactive SSR without framework lock-in.
@@laughingvampire7555but htmx clearly is an upgraded version of it, a better way to do it.
This method wasn't good enough so we got the front end framework wars but now htmx is actually a considerable replacement for descent sized responsive applications competing with those frameworks
I am so happy you are bringing HTMX to the general public this way, I've waited for this for years
That’s actually really cool and useful, if I’m understanding this right it reduces a lot of the work on the client side
is just a simple template library
Yea, and increases a lot on the server
I’m waiting for iFrames to come back in fashion. They’re awesome.
This is the perfect elevator pitch for HTMX. I like it.
I CAN'T believe on this... OMG... first server side rendering is back... now HiperMedialink and template system is back... unfortunately large usage of xml is the next... prepare your self new generation... hahah
This is funny as I did this back in the day with jQuery 😅.
Me too.
Ah. So I don't need react?
You never did
@@hashtag9990jquery 😂
Nope.
no one needs react or htmx, no one. just learn standard JS & HTML & CSS
You only need assembly
Ah, so we went back to the good ol' days of serving and replacing some html with some Ajax request.
i knew i've seen this formula before loool
HTMX is full circle. I love it!
Isn't that Ajax/partial render? 🤔
Or as we called it back in the late 90s / early 2000s DHTML Dynamic HTML. All similar concepts wrapped up in libraries and frameworks.
Yep. Exactly what we were doing 20+ years ago.
@FrontendMasters you should be linking the course & pinning the comment.
good tip, thanks!
HTMX is very beautiful 🤩
Say no to WebDev
Console windows and manual curl requests rule!
Just serve it on port 8000 using netcat 💪
@@sohigh7433you sir, are a chad
And then you become a specialist at what you just described and boom, Postman is created.
if you want to go hardcore, use C++ and wireshark.
Feeling very apollo guidance computer with that "verb" reference.
That stache 🫡
That stache is juts 😂 love it
God, what a magical mustache
What's the hood for?
does it result in less code or more frustration?
What's the difference between this and jQuery?
I think that the difference i that the developer does not write any javascript. Everything is declarative.
How do you manage meta tags like "description"?
The current version only supports title tags, but there's an extension called head-support
Go Prime!
99% of the time you dot need React. Unless your building say Spotify 2
The problem is that it works just if you plan to make a website. Otherwise you'll have to make multiple apis; you can't serve html to a mobile app.
Just make one API with different behavior dependent on the `accept` header.
It’s not two different API’s though. It’s an API for non web apps and html/fragments for the web app. You are replacing front end code with back end code for the web app. It is still far less code.
Nonsense
Nah man. Make a PWA by adding a service worker. iOS not supporting them fully is a sin, but can do most things on android.
If not that, wrap the site in one of the mobile wrapper libs.
What you said makes 0 sense.
Is this comment section full of zoomer or what ? Don't worry guys, you'll learn what a monolith is when node circle back to it in about a year.
is htmx REST compliant?
yes this is actually more REST compliant than react since it uses HATEOAS, a requirement of the original idea of a RESTful web that later for forgotten because it was impossible to do due to the amount of js and state added to the client side
Most REST APIs aren’t REST compliant
I actually fully understand this. I want to swap from Webpack to Bun... Maybe HMTX. Need a NoSQL server too
Moving on from Webpack makes complete sense, but why would you need to go for NoSQL? Just wondering
I assume htmx also works with HTTP3?
Or you can just use EHTML with JSON response and handle 404 and other statuses. It also quite flexible because of templates
Shit, i had 201 status code
it’s looks like a bad idea to mix view layer and api layer. What if I need to combine several requests together to get full info before render it? I guess I should use “custom events” with custom handler or something like that ,
but it lead us to react-ish way. I think htmx will works for static landing pages, not for big apps
There is a difference between hypermedia apis and data apis.
You can always use specific endpoints for specific stuff. The good thing about HTMX is that you can use it anywhere.
BFF
The advantage of Json is that you can render the same data set in multiple ways on the same UI. I can’t see how this isn’t a huge step backwards - is bandwidth and computing time free now?
That’s what CSS is for. Most React developers are clueless when it comes to CSS though and have to rely on something like Tailwind which handicaps them from being able to fully take advantage of a truly RESTful API solution like you can do with something like HTMX and all the advantages that offers over JSON apis with REACT.
one of the reasons that people abandoned emitting html from the backend is because companies always like to change style of the website and you are not going to tell "duuuhhhh, I need to rewrite the whole thing"
How is this any different from XML HTTP Requests launch from JavaScript.
It literally does that, yes. The point is that it's not JavaScript you have to write for basic things like that, just a couple of attributes in your html.
@@Sandromaticdoesn't that put us back in the state management mess? The whole reason we realized we needed something like angular or react?
@@Dieterbewe are not in state management mess now with SPA frameworks?
@@mikadofxx9030it really depends how you build things
@@mikadofxx9030yes, we are.
If someone was playing much and had 0 mana, would the same thing happen or would they still bounce off?
Lmao wrong video
@@redpepper74yeah what the hell lmao - it commented on the other aswell though so that’s wierd
Doesn't this tightly couple frontend html to backend routes.
it's a joke
No lmao htmx is very real
@@niblet8955 htmx is a meme lol
Yes
I've yet to see an example where that's not the case.
How different this is from php + ajax? 😅
It doesn’t use PHP
@@fullfungo no shit Sherlock
Sounds like turbo frames/streams to me. LLRoR
my brain : moye moye
I I have understood but still trying to centre that dam div
I can do this with old javascript. 😅
I hope this only used with HTTP/2 or HTTP/3. Man.
But it's really doesn't show how to solve problems that facebook tried to solve with react - multiple updates in multiple places within a single requests.
This example only shows that we can swap 1 html block at a time. What if we need to change our UI in multiple places, with different html blocks?
He said you can use a script so i guess you tell the script what your ui would be like?
You can do that too. Look for "out of band swap" in the docs.
@@digvijayad But you can't be sure what elements a visible or not currently in the browser. Cause user could open some tabs or modals through client side scripting.
Or you should track state of ALL user clicks on the frontend, which will be the same pain in the ass, but on the backend now... Complexity is still there. Nothing changed. But now your HTML coupled with backend logic. Nice decision.
I'd say that if you have the problem that Facebook solves with React then use React. The point here is that most of the time you probably don't need React.
@@dmitriyobidin6049why would the user open tabs or modals through client side scripting when that should be done with HTML. You don’t need js for that. But yes HTMX is somewhat lacking in that although there are workarounds and extensions for handling those situations with vanilla js always an option as well. HTMX is not a full solution out of the box for everything it’s just a better solution for what js heavy frameworks are most often used for.
So where are the html files and stylesheets stored? Please don't say in the API codebase.
Sounds like a very chatty server-rendered UI.
Are there any implications for slower network connections?
Nah, how about a fetch request and setting innerHTML
hahaha i was thinking the same as u
You've accurately described what this does.
just why. like. why have that instead of a single element attribute.
That’s exactly how it works. Don’t reinvent the wheel
What's the point?
i am still using jquery load for my development 😂
So far every video i saw about htmx only had fetch requests... and I think is silly returning an html from an api endpoint ...
You should look at the docs then to see all of its functionality. It supports all http verbs and has a lot of really cool stuff once you start looking into the more complex interactions you can setup
@@JordanHershberger I get that it has got more features, but most tutorials/articles about it explains on how to use fetch requests. Had look at the documentation and to be honest with you, apart from the hype of a new library in town, I really don't see any benefits of using this over already existing solutions
Not really, you can do websockets/sse as well. At the end of the day, HTMX is just what we would probably write ourselves if we needed its functionality.
@@londongugabenefit is you get an SPA-like thing that's really optimized for SSR without doing the slow hydration bullshit
@@londonguga Benefits of HTMX, It's 10k, you decide what language you use for the server, It's framework agnostic (you can use svelte or react if you really want), the server is the only place of truth (this means it's easier to reason about what's happening)
We’ve gone full circle back to php
Ahhh php
So it’s the same thing with extra steps…
it's fewer steps, which is what makes it useful
No
No real advantage on using htmx if it feels like what dynamic web pages used to do 20yrs ago.
I would use vanilla JS or JQuery instead of this nonsense. People here acting like all developers who hate htmx are react devs. No actually I am not a react dev. They say HTMX is for simple apps. I think JQuery is great for simple apps
Why does this guy needs to have a hood on when talking about htmx ? Is it cold there ?
Dude stop with the htmx
No
@@fullfungo Pretty please?
Lol
What's worse than backend platforms for frontend developers? (Node) Frontend nonsense for backend devs
Just my opinion
Go forth and do what you do
I care not
Sounds like spaghetti code. The whole reason angular and then react were invented ?
Nothing is spaghetti about it.
Care to elaborate?
Only do this if you're DEFINITELY sure your app won't need a mobile app
This has nothing to do with mobile.
come on htmx sucks
Yuck
Primagen is all about lower level performant code than actually building stuff quickly. Just use react with nextjs and get ur work done no one wants to do more work than they need to lol
is theo telling the truth about prime that he was fired from netflix because he supporting htmx, or is that just a sarcasm?
No lol he quit of his own volition to work on his yt channel
Theo isn’t a great source of info anyway imo
Nah, building html on the backend is considered out of date rn.
are you leaving in 2023 or something? Now everyone generating html on sever side with server side rendering...
react server components, sveltekit renders everthing server side by default
:) we came a full circle..
Feels like Htmlx is for boomers who don't want to learn React
You can use React and HTMX together, it doesn't care how you make the html, just that it's sending down html
Yeah, like React is the answer to everything for non-boomers.
"learn React", as if it was something…
React is hot garbage, as are all client side view frameworks. Server side rendering is far superior always has been and always will be. Only the young and inexperienced who got stuck on the hype train like and prefer react. Doing anything in react is 10 times as much work as doing it on the server, Modern responsive, dynamic single page applications do not require react. React is the Britney Spears of frameworks, just because it’s popular doesn’t mean it’s good.
@@rahulbismarck it's all they know; they have no idea they've learned "a way", not "the way" and they have no concept of history and the other 50 ways to build apps, many of them don't even know JavaScript, only React, it's really bad out there.
@@Gnaritas42 As someone who's done Web in PHP with Symfony, Laravel, and a micro-framework i forgot the name, Python with Django and Flask, React and basic HTML / CSS / JS. Let me tell you, I would prefer to use React any day of the week. It is so much better to use React or any other JS frontend framework and create easy re-usable components than do templating.
Don't get me wrong, React isn't the be all end all at all. For static pages it would be easier to use Wordpress, PHP or simple HTML/CSS/JS but for SaaS I would rather have a backend made in anything and a frontend in a framework like Vue / React / Angular than go back 10 years ago with PHP.
Don't get me wrong, I have nothing against SSR, I just don't think the old way of doing UI is better than the new way. Next.js has the best of both worlds which I think will be the way forward unless something comes out that will make frontend frameworks obsolete
to me this sounds like frames... 🤷🏻♀️
Well, it's also JSP, PHP and many other Ps.
responds with html? react don’t do that
Bro needs to stay in his lane 😂
wdym