It's like my brain is wired to expect a punchline with every sentence. But here I am, listening to your online course, waiting for the sarcasm to drop... and all I get is pure wisdom.
Can you help me to understand how someone can use htmx with react like prime mentioned some people do so?? I thought about both react and htmx in htmx vs react mind set
@@samiullahsheikh5015 1st ask yourself if you REALLY need React. Use HTMX to create a mount point and React DOM to mount your app to that element. It's what you normally do with your main element on the index page in a SPA architecture, but you are doing it Island style.
I don't think it'd be much different from using only react on a static html page. Only difference is that htmx can alter the DOM. So you just have to make sure htmx is not updating anything inside the react tree, and that react components aren't mounted on dom elements that htmx is responsible for updating. I imagine you wouldn't want your react components adding any htmx attributes to the dom elements it creates either.@@samiullahsheikh5015
This is a really interesting format. Instead of TH-camr - person talking to camera, or lecture - person talking to audience, this is more like a tutorial in the classical Oxford/Cambridge UK university style where it’s talking to a small group of people about topics they know about so you get some informed responses. It would be cool to adopt this idea a bit further - have some people bring in their work and you react/critique it in real time.
The way he is doing code live, going through all those little issues, forgetting this or that is super normal. However - he is so gosh dang quick on the keys that it doesn’t feel tedious or disengaging.
I would love to see that. There's this channel I watch from time to time where people submit their projects to the guy and he goes through it and critiques it. I think he used to work at EA, maybe on whatever engine FIFA or whatever it's called now runs on. But now he builds his own engine and has his youtube channel.
I just want to thank you for making these colaborations. People like Prime actually give insane amounts of value and TEACH you how to use HTMX and w/e he is teaching about. There are so many "tutors" who don't have 30% of the knowledge or passion that Prime does, that try to teach these subjects.
I am so close of convincing a 2.5 billion company to refactor their decade old monolith mvc using htmx. I am not just Jumping on the bandwagon and hype, I have spent decades of fighting frameworks and I want pivot to building micro ui. Wish me luck.
Good luck, I believe the beauty of how HTMX is meant to be used is you can gradually migrate to fully HTMX if that makes sense or utilize both. It really goes to what makes sense for the product.
@@okie9025 why is sending client-agnostic data better than just sending HTML? That's a bold claim with absolutely nothing to back it other than an attempt at an insult. By the way, almost everyone sends HTML for the initial request (i.e. index.html) in order for your web app to load all of your javascript.
I'm loving HTMX. I was toying around with it using an Express server. Kept adding things and damn, I just re-created my personal website but much much simpler. I didn't even need a template engine because a for loop and some pushing database content + a little html to an array then ending with res.send(content.join(' ')); does the same thing. The simplicity has me over excited. I even created a markdown editor to preview my blogs/notes/articles using HTMX from the same Express server.
Less is more, after all. Those were at least honouring the existing web standards and concepts like HAETOAS, while javascript world started duplicating state multiple times (in the DOM, or additional variables, or into full fledged state management libraries). Everything became unhealthy complicated in frontend world as a consequence (provoking even more problems to solve). Imho, only because Hypermedia was simply not studied enough. Htmx provides a straightforward declarative way to start from where we got lost and do what we did over and over with AJAX (so, tired of doing that, we invented reactivity, betraying the HAETOAS nature of the web). Although I totally understand why people were excited about reactivity, in ~2013, I believed we are slowly coming back to the right/sane path. I also hope this path will lead to a reduced memory footprint of modern webapps, and better handling of offline state.
This man is like the programmer equivelant of Ryan Reynold's comedy. Lol, who ever thought listenning to technical lectures would be as funny as some comedy show.
Once upon a time, a man famously proclaimed that if HTML were ever to become recognized as a programming language, it would signal the end of the world. So, great, what a great time to be alive I guess 😒
I was curious about using Go for backend and this guy dragged me down the rabbit hole. It's good stuff. I also really enjoy the sound of the keyboard. I wonder if it's mechanical.
Usually I watch youtube or whatever at 1.25, but I had to rewind this a couple of times. That code movement was very fast. Mans got finger memory.......
To me HTMLX is really another take on something like {{ mustache }} mixed with jQuery. I can understand the appeal of it, especially for back end devs. One thing I think JSX front-end frameworks really have an advantage here is composition, watching this video there appears to be no easy way to do this with htmlx. I also think this push to place more work on the server end always feels like a step backwards, especially in this day and age, front-end dev has never been easier.
Can someone explain what's happening with the "blocks" in the index.html template? Is he returning just the "display" block (stripped of the outer rest of the template) from the /contacts endpoint? How does that work? The line "c.Render(200, "display", data)" Or is there a separate display.html that is being used as the template for this line?
who is this guy and what has he done to the primagen? ..... This tech is very very interesting to me. I like the concept of a simple replacement. might do this course.
HTMX looks really cool, and I must say, working in Go has always been a pleasure. But here is what worries me about “going against the norm” (even though the web dev current norm has spiralled into total insanity). How do I do all the things? For example, authentication, realtime ui updates, large application layout, testing, csrf….. I’d love to build up from scratch with a tech combo like this, but there is just too much risk that I’m going to hit some kind of show stopper!
This is just the old server side rendering stuff, no new challenges. Back in the days, it looks something like label ic-on=mouse-hover ic-post=/foo ic-target=bar ic-effect=fancy ... You can throw jquery selector and css syntax in those attributes to get creative. It's simple and effective. In fact, so simple you are going to have a hard time convincing anyone to adopt it over hello world with 600M of NPM packages
Prime normally speaks fast and I watch everything on 1.5x anyway. Every time I see him acting this normal it freaks me out. First thing I have to do is see if my playback speed got messed with.
Can anyone help me to understand how someone can use htmx with react like prime mentioned some people do so?? I thought about both react and htmx in htmx vs react mind set
Inside your HTML create a named element, and then from React mount this element. There is also nothing stopping you having 100's of instances of a React Root elements that sit inside elements created from the HTMLX output. This is no different from mixing any web framework with React, eg. you could mix jQuery with React. Most people use React as a full page SPA handling routing logic etc, but you can use React to just render a single component if you so wished.
@@keithjohnson6510 thank you. I never thought about react in this way. But yes just keep working with SPA somehow made me believe that there is only one way to do frontend. But I'm glad due to prime and @keithjohnson6510 i have a new perspective
Loving the format but unfortunately the click clack of the keyboard is setting off my misophonia so I won't be able to watch more of it. Could that noise be isolated from the mic please?
Seeing all of the business logic inside the routing code is giving me nightmares from Express-style frameworks lol. Returning raw strings when an error occurs and using -1 as a value to signify "index not found" devolves this approach back to the way the web was developed using C. Might as well include some macro hacks and a few global error variables to complete the circle.
The usual pattern is to take the handlers into other file, I'm guessing he didn't because of time, it's showcasing a simple project. Regarding using indexes, also, it's a 10 minute example, don't expect much sophistication for using barely any external package. You can make it way more pristine
@@B20C0the average svelte app is 1.6Kb tho But I understand that svelte(kit) is more of a frontend first framework, whereas go+htmx is more of a backend first mentality
Well think about it like this: You're already sending JSON through your API endpoint to your application and then using the information in that JSON to render HTML on the client. Now, you don't necessarily have to use JSON, you could use another messaging format like XML for example, or maybe a derivative of XML; HTML. Then you don't have to convert between your messaging format and the client representation format HTML. So instead of doing: SQL->(backend lang)->JSON->(JS)->HTML You can do: SQL->(backend lang)->HTML What is the difference in using HTML or JSON? JSON may be more compact, but it leaves out a bunch of information on how to represent that data on the client that you still have to send to the client anyway in the form of whatever JS framework and client-side code you're using.
Ironic how "returning to pure HTML" and "emphasizing the web using HATEOAS" involves using a whole different templating language and a specially-configured backend server to serve as crutches to support HTMX's deficits. I'll stick to my backend APIs and separated frontends.
That's just false. This is just one way of implementing it. You aren't constrained at all by the templating language. It's just more convenient. The server serving HTML is not a "deficit" is a fucking standard. Did you know the web existed before JSON, do you?
Fuck go. Once you see what the beam is doing you will be a lifer on elixir. I've seen it all as a 20 year dev and I'll be on elixir for the rest of my career.
I guess once you understand this it looks better? Because right now it just sounds even more complicated than "modern frameworks" it's supposed to substitute.
Love the simplicity, the whole frontend, backend split JSON transformation via API back into HTML always irked and felt like an over complexity. We seemed to invent a million different tools and frameworks to make it hard for ourselves. Refreshing to see an elegant solution 👏
This is the first time in 8 years of developing software that I've seen someone claim that separating the backend from the frontend and using JSON to communicate is "an over complexity". HTMX is not elegant at all, and going back to monolithic backends which use templating engines will make the web devolve back into web 1.0 when having clickable buttons on a website was incredible.
Plenty of companies have monothlic node/go etc backends servicing frontend Javascript frameworks. HTMX can work with any backend, monolithic, service orientated, micro services, i'm not saying lets throw everything in the bin, but I think HTMX will certainly grow in popularity and will certainly be the right tool for the job in certain situations. Have you tried building something with it?
It's like my brain is wired to expect a punchline with every sentence. But here I am, listening to your online course, waiting for the sarcasm to drop... and all I get is pure wisdom.
i was waiting for the all too familiar interaction:
"Welcome to CostCo! I love you!"
"GOSH DAMMIT!"
Haha. Yup. We're all here just like ya
this is uncomfortable!
same here
It's very weird to see Prime spanking so calmly.
this mans convinced me to waste 100+ hours of my life configuring neovim
Can you help me to understand how someone can use htmx with react like prime mentioned some people do so??
I thought about both react and htmx in htmx vs react mind set
@@samiullahsheikh5015 1st ask yourself if you REALLY need React. Use HTMX to create a mount point and React DOM to mount your app to that element. It's what you normally do with your main element on the index page in a SPA architecture, but you are doing it Island style.
I don't think it'd be much different from using only react on a static html page. Only difference is that htmx can alter the DOM. So you just have to make sure htmx is not updating anything inside the react tree, and that react components aren't mounted on dom elements that htmx is responsible for updating. I imagine you wouldn't want your react components adding any htmx attributes to the dom elements it creates either.@@samiullahsheikh5015
Only 100+, you are lucky 😅
Skill issue
This is a really interesting format. Instead of TH-camr - person talking to camera, or lecture - person talking to audience, this is more like a tutorial in the classical Oxford/Cambridge UK university style where it’s talking to a small group of people about topics they know about so you get some informed responses.
It would be cool to adopt this idea a bit further - have some people bring in their work and you react/critique it in real time.
The way he is doing code live, going through all those little issues, forgetting this or that is super normal.
However - he is so gosh dang quick on the keys that it doesn’t feel tedious or disengaging.
I would love to see that. There's this channel I watch from time to time where people submit their projects to the guy and he goes through it and critiques it. I think he used to work at EA, maybe on whatever engine FIFA or whatever it's called now runs on. But now he builds his own engine and has his youtube channel.
@decoyslois yeahh I love it
@@Kane0123nvim is awesome.
It reminds me a lot of the vim conference videos on thoughbot
I just want to thank you for making these colaborations. People like Prime actually give insane amounts of value and TEACH you how to use HTMX and w/e he is teaching about.
There are so many "tutors" who don't have 30% of the knowledge or passion that Prime does, that try to teach these subjects.
I am so close of convincing a 2.5 billion company to refactor their decade old monolith mvc using htmx. I am not just Jumping on the bandwagon and hype, I have spent decades of fighting frameworks and I want pivot to building micro ui. Wish me luck.
Good luck, I believe the beauty of how HTMX is meant to be used is you can gradually migrate to fully HTMX if that makes sense or utilize both. It really goes to what makes sense for the product.
@@okie9025 why is sending client-agnostic data better than just sending HTML? That's a bold claim with absolutely nothing to back it other than an attempt at an insult. By the way, almost everyone sends HTML for the initial request (i.e. index.html) in order for your web app to load all of your javascript.
good luck bröther
@@whimahwhe why did i just read it in mimir's voice
i like him a lot more in these courses than while he's streaming
*screaming
Yeah, because here he provides something beneficial while when streaming he's just tech influencer or more befitting a reaction guy.
Watch his evening streams?
If you say that, you don't watch primegean live, he gives good advice constantly while streaming@@maxrinehart4177
You might enjoy his coding streams more, sadly they are not that popular so he does not do those as often
I'm loving HTMX. I was toying around with it using an Express server. Kept adding things and damn, I just re-created my personal website but much much simpler. I didn't even need a template engine because a for loop and some pushing database content + a little html to an array then ending with res.send(content.join(' ')); does the same thing. The simplicity has me over excited. I even created a markdown editor to preview my blogs/notes/articles using HTMX from the same Express server.
Love the calm version of the primeagen more than I like the hyperactive one
im assuming this is NOT the calm one?
No this is the absolutely calm one lol @@mudsweatandtrails
Both good for me. One for a quick high energy entertainment break and the other to pick up something 😎
Always remember, Tom is a GENIUS!
I think it's hilarious that we've finally come full circle back to xhr and vanilla js😂
Less is more, after all.
Those were at least honouring the existing web standards and concepts like HAETOAS, while javascript world started duplicating state multiple times (in the DOM, or additional variables, or into full fledged state management libraries). Everything became unhealthy complicated in frontend world as a consequence (provoking even more problems to solve).
Imho, only because Hypermedia was simply not studied enough.
Htmx provides a straightforward declarative way to start from where we got lost and do what we did over and over with AJAX (so, tired of doing that, we invented reactivity, betraying the HAETOAS nature of the web).
Although I totally understand why people were excited about reactivity, in ~2013, I believed we are slowly coming back to the right/sane path.
I also hope this path will lead to a reduced memory footprint of modern webapps, and better handling of offline state.
I never left. I still will only use jQuery as a framework to speed up development
These Primagen courses are all very good, but this one stands out the most
Obviously, the Courseagen 🙂
And the algorithms course
He seems like a really good teacher. Go prime!
Go 😂
@@tjdgmlchl6305 Damn, no pun intended x)
Frontend Masters reading my mind again. Love this, can't wait to sink my teeth into this over the weekend.
Awesome! Hope you enjoy it!
This guy is beast
This man is like the programmer equivelant of Ryan Reynold's comedy. Lol, who ever thought listenning to technical lectures would be as funny as some comedy show.
I am about ready to invest some time figuring out what HTMX is after watching this. But I like Veujs so maybe need another push.
Once upon a time, a man famously proclaimed that if HTML were ever to become recognized as a programming language, it would signal the end of the world. So, great, what a great time to be alive I guess 😒
I was curious about using Go for backend and this guy dragged me down the rabbit hole. It's good stuff. I also really enjoy the sound of the keyboard. I wonder if it's mechanical.
Its kinesis advantage 360
Finally did a go htmx project I enjoyed it
This is coming in blazingly fast!
Usually I watch youtube or whatever at 1.25, but I had to rewind this a couple of times. That code movement was very fast. Mans got finger memory.......
Easiest way to spot a Frontend Developer is when they use the wrong HTTP Codes, 204 is No Content 😉
👈 The name....is the Primeagen 😉
What a day to be named John
Just added HTML Engineer on LinkedIn
You should also have a camera pointing at your keyboard!! xD
That needs to be a cam from the slowmo guys with the speed he types
welcome to costco i love you
YOU REMEMBERED TO TURN OFF ALERTS!!!!!
Whats up with his hair? Why is it in a weird brownish color instead of the normal blue?
The opening freaked me out. Ngl. Prime's melon taking up that much of my screen space while not having the hood up.
This course must be free to grow its community with speed light
Our form had babies! lol
seem useful for refreshing server state back to client browser state without refreshing page....An advanced replacement for legacy AJAX
ngl his key movements feel so gracious
Very excited for this
He is so good
is this just rest with extra steps?
Our form had babys ... love it 🤣
Nice JSF :D
Been waiting for this
Why are you using mouse?
To me HTMLX is really another take on something like {{ mustache }} mixed with jQuery. I can understand the appeal of it, especially for back end devs. One thing I think JSX front-end frameworks really have an advantage here is composition, watching this video there appears to be no easy way to do this with htmlx. I also think this push to place more work on the server end always feels like a step backwards, especially in this day and age, front-end dev has never been easier.
When your boy has a work and homie persona!
hell yeah, i love this
Can someone explain what's happening with the "blocks" in the index.html template?
Is he returning just the "display" block (stripped of the outer rest of the template) from the /contacts endpoint? How does that work? The line "c.Render(200, "display", data)"
Or is there a separate display.html that is being used as the template for this line?
No blue hair? Sad.
Liberal arc ended
I still need an explanation on why Rust evangelist chose Go for backend?
cause it's a frontend course probably
he switching to go now enof of rust
Does anyone recognize the monitor model?
I wasn’t sure, but now I’m convinced: I’m not as smart as I think I am.
who is this guy and what has he done to the primagen? ..... This tech is very very interesting to me. I like the concept of a simple replacement. might do this course.
HTMX looks really cool, and I must say, working in Go has always been a pleasure. But here is what worries me about “going against the norm” (even though the web dev current norm has spiralled into total insanity). How do I do all the things? For example, authentication, realtime ui updates, large application layout, testing, csrf….. I’d love to build up from scratch with a tech combo like this, but there is just too much risk that I’m going to hit some kind of show stopper!
This is just the old server side rendering stuff, no new challenges. Back in the days, it looks something like
label ic-on=mouse-hover ic-post=/foo ic-target=bar ic-effect=fancy ...
You can throw jquery selector and css syntax in those attributes to get creative. It's simple and effective. In fact, so simple you are going to have a hard time convincing anyone to adopt it over hello world with 600M of NPM packages
Yeah we are going to need to spend the next decade building some sort of reactive layer on top of htmx. can't wait!
But HTMX using javascript under the hood isn't it?
Prime normally speaks fast and I watch everything on 1.5x anyway. Every time I see him acting this normal it freaks me out. First thing I have to do is see if my playback speed got messed with.
Who is OAS and why do you hate him so much
What keyboard is that?
unhinged montana man 2:32
he is so fun
Cool course. But I prefer Svelte.
theprimeagen is cool as fuck
What's under the hood?
DX of htmx is 0
for sure, if you haven't tried it
dx of libraries instead of so called "frameworks" are much often better
@@carsongross8543 no just old or as someone else put it "new wine in old wineskins"
Now make a SPA with htmx with multiple pages
This team replaced their entire React codebase:
th-cam.com/video/3GObi93tjZI/w-d-xo.html
Your hand drill is cute, but try splitting a piece of wood.
A tool can be useful, even if it doesn’t fit your paradigm.
Doesn't the SP in spa mean "single page"? HTMX also comes with transitions and you can use hx-boost... boom instant SPA or spa-like behavior.
html is not hypermedia
Can anyone help me to understand how someone can use htmx with react like prime mentioned some people do so??
I thought about both react and htmx in htmx vs react mind set
Inside your HTML create a named element, and then from React mount this element. There is also nothing stopping you having 100's of instances of a React Root elements that sit inside elements created from the HTMLX output. This is no different from mixing any web framework with React, eg. you could mix jQuery with React. Most people use React as a full page SPA handling routing logic etc, but you can use React to just render a single component if you so wished.
@@keithjohnson6510 thank you. I never thought about react in this way. But yes just keep working with SPA somehow made me believe that there is only one way to do frontend.
But I'm glad due to prime and @keithjohnson6510 i have a new perspective
He look more buff in the live dont him, thought he was buff as fuck
this free?
je'son and squeel gang
This guy Go's
I feel like Phoenix LiveView is just as impressive, if not more. The DOM patching payloads are tiny, and I think a bit more intuitive.
How secure is HTMX to use?
As secure as your server
LMAO
what do you mean?
Since when SVG is SAVAGE? :O
Loving the format but unfortunately the click clack of the keyboard is setting off my misophonia so I won't be able to watch more of it. Could that noise be isolated from the mic please?
Where’s all the horse heads and laser beams?
So is Ajax not similar?
It is, but having it built in the html and technically not writing a single line of js feels good.
I mean, it's wrapping ajax inside html directives, that's the whole point
Seeing all of the business logic inside the routing code is giving me nightmares from Express-style frameworks lol. Returning raw strings when an error occurs and using -1 as a value to signify "index not found" devolves this approach back to the way the web was developed using C. Might as well include some macro hacks and a few global error variables to complete the circle.
The usual pattern is to take the handlers into other file, I'm guessing he didn't because of time, it's showcasing a simple project. Regarding using indexes, also, it's a 10 minute example, don't expect much sophistication for using barely any external package. You can make it way more pristine
How is rendering server side html a good idea?
Well if you don't like it, you could also have your 2-3 states and 10 MB of JavaScript instead.
@@B20C0the average svelte app is 1.6Kb tho
But I understand that svelte(kit) is more of a frontend first framework, whereas go+htmx is more of a backend first mentality
There's quite a few reasons, but I don't know where to start. What are your concerns? This literally is the easiest server side rendering (SSR).
Well think about it like this:
You're already sending JSON through your API endpoint to your application and then using the information in that JSON to render HTML on the client.
Now, you don't necessarily have to use JSON, you could use another messaging format like XML for example, or maybe a derivative of XML; HTML.
Then you don't have to convert between your messaging format and the client representation format HTML.
So instead of doing:
SQL->(backend lang)->JSON->(JS)->HTML
You can do:
SQL->(backend lang)->HTML
What is the difference in using HTML or JSON? JSON may be more compact, but it leaves out a bunch of information on how to represent that data on the client that you still have to send to the client anyway in the form of whatever JS framework and client-side code you're using.
@@24wherath36 You are correct that it cuts out a step but there's also the BIG issue of no longer having to manage multiple states.
WHERE ARE THE HEADPHONES!!!
Did i not just hear this dude say declaritive concepts (like htmx) where a trap?
Why are you so calm. Are you being held against your will?
Ironic how "returning to pure HTML" and "emphasizing the web using HATEOAS" involves using a whole different templating language and a specially-configured backend server to serve as crutches to support HTMX's deficits. I'll stick to my backend APIs and separated frontends.
That's just false. This is just one way of implementing it. You aren't constrained at all by the templating language. It's just more convenient.
The server serving HTML is not a "deficit" is a fucking standard. Did you know the web existed before JSON, do you?
Fuck go. Once you see what the beam is doing you will be a lifer on elixir. I've seen it all as a 20 year dev and I'll be on elixir for the rest of my career.
the Primeagel.
I guess once you understand this it looks better? Because right now it just sounds even more complicated than "modern frameworks" it's supposed to substitute.
Bro imagine hearing for the first time about virtual DOM or Redux instead oj just sending new HTML
What is your experience and maybe I can relate it to that. HTMX is getting back to the basics and makes it easy by utilizing html attributes.
It's so much simpler. Just note that your API and your rendering live in the same place. That means less translation layers
@@whimahwhe much simpler to start and get the ball rolling. absolute hell to update and change if you haven't worked on the codebase in a while.
Simple question, htmx is using html attribute in html page. So why it don't use "data-hx-delete" etc. Is the html still w3c valide. Thanks.
That is an option, it's just not required.
I'll come back when he has blue hair 🙄
Looks like jQuery in disguise.
bring it down
HTMZ is better.
Guy is typing 500 keys per second and nothing is happening in the IDE lmao
vim
And as a vim user, I know at least 50% of the keystrokes were the escape key
REST in it's worst))))
How so?
Why is this dude so excited about another "blazor"?
Exactly lol
A small improvement on good old php is not the shit all the hype makes it seems to be.
It's an overcorrection for the whole amount of bullshit that react has been releasing and pushing
That hoodie is so cliche
Html has always been a programming language lol jk
nope
another tendetious TH-camr who is all talk...
I believe you meant tendentious, and how tendentious of you.
love tendies
first
YESSSSS HTMX + GOOOOOO WITH PRIME!!!
Love the simplicity, the whole frontend, backend split JSON transformation via API back into HTML always irked and felt like an over complexity. We seemed to invent a million different tools and frameworks to make it hard for ourselves. Refreshing to see an elegant solution 👏
It is not elegant, it's awful actually
This is the first time in 8 years of developing software that I've seen someone claim that separating the backend from the frontend and using JSON to communicate is "an over complexity".
HTMX is not elegant at all, and going back to monolithic backends which use templating engines will make the web devolve back into web 1.0 when having clickable buttons on a website was incredible.
Plenty of companies have monothlic node/go etc backends servicing frontend Javascript frameworks. HTMX can work with any backend, monolithic, service orientated, micro services, i'm not saying lets throw everything in the bin, but I think HTMX will certainly grow in popularity and will certainly be the right tool for the job in certain situations.
Have you tried building something with it?
Remove the Savage (aka `svg`)🤣10:56
Wait until you discover express, mustache and vanilla js with web components, insane stuff!!!!!