HTMX & Go with ThePrimeagen | Preview
Vložit
- čas přidán 30. 05. 2024
- Full Course:
HTMX & Go: frontendmasters.com/courses/h...
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: / frontendmasters
LinkedIn: / frontend-masters
Facebook: / frontendmasters
Instagram: / frontendmasters
About Us:
Advance your skills with in-depth, modern front-end engineering courses - our 150+ high-quality courses and 18 curated learning paths will guide you from mid-level to senior developer! frontendmasters.com/?...
Sections:
0:00 - Introduction & Course Description
0:28 - Understanding HATEOAS
4:51- hx-target & hx-swap
9:44 - Deleting Contacts
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
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.
These Primagen courses are all very good, but this one stands out the most
Obviously, the Courseagen 🙂
And the algorithms course
This is a really interesting format. Instead of CZcamsr - 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 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
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?
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 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 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.
Always remember, Tom is a GENIUS!
HTMX is fantastic! Goes great with Clojure too
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.
What a treasure, bookmarked on FEM, really hyped to start.
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!
Sweet Oden's Raven, Primeagen was quick when I started watching his videos 3 years ago and now I feel like I'm watching on 2x
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 @@marct8263
Both good for me. One for a quick high energy entertainment break and the other to pick up something 😎
Man this is great. Prime is an amazing educator
He seems like a really good teacher. Go prime!
Go 😂
@@tjdgmlchl6305 Damn, no pun intended x)
YESSSSS HTMX + GOOOOOO WITH PRIME!!!
Very excited for this
This guy is beast
Finally did a go htmx project I enjoyed it
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.
Primeagen using Echo on the server, heck yeah!
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?
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
Been waiting for this
damn, primeagen is such a good, entertaining teacher
OMG im going to enjoy this, im testing htmx and i like it a lot! Only difference is im using python instead of Go
Me too! Luckily HTMX doesn't care what you run on the server.
@@blahblahblah3149Not true. HTMX only supports HTML responses. Any other frontend framework can handle literally any format you throw at it. There is no point in creating a whole different service on your server for sending partial HTML widgets (which is a huge hack if I've ever seen one) if you can just configure all of your apps to use JSON.
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.......
YOU REMEMBERED TO TURN OFF ALERTS!!!!!
I LOVE HTMX!
👈 The name....is the Primeagen 😉
hell yeah, i love this
What a day to be named John
Our form had babys ... love it 🤣
Wait until you discover express, mustache and vanilla js with web components, insane stuff!!!!!
He is so good
This course must be free to grow its community with speed light
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.
welcome to costco i love you
ngl his key movements feel so gracious
Does anyone recognize the monitor model?
is this just rest with extra steps?
that's some jQuery level magic!
What keyboard is that?
Our form had babies! lol
Just added HTML Engineer on LinkedIn
I've been using html/template for a long time and I had no idea there was this block keyword... so awesome!
i realy want to do a little project to experiment a bit with it, is it viable to make something like a turn based multiplayer card game with this? i mean, it will probably look awfull but is it viable as a test project?
It should be ok
Prime made a GameOfLife game, all the real time interactions you can do with JS or use Alpine and then save the players "state" at the end of the turn using HTMX quite simply. I believe he has as video on his channel about it somewhere.
HTMX also has WS/Server events as well that might be useful to look into for a multiplayer game.
@@daedalus5070 thank you!, i'll look further into it :)
That feeling when you look at the class, and they look back at you with the 'I don't know what you're talking about' look.
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
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
seem useful for refreshing server state back to client browser state without refreshing page....An advanced replacement for legacy AJAX
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.
How do you do proper animations with htmx?
Animations is presentation layer, is job for CSS
When your boy has a work and homie persona!
Nice JSF :D
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.
What is your jungle juice recipe? 2 parts espresso, 3 parts red bull, 5 niacin tablets and some NZT-48?
Remove the Savage (aka `svg`)🤣10:56
Why are you using mouse?
Amen
Bro you goood 👍
What was in fashion long ago will be in fashion again - like JSF/JSP in java or ASPX in c#
Really nice video! i was wondering if i could help you edit your videos and make them more engaging as well as create short content out of them.
What's under the hood?
Savage
he is so fun
Go!
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!
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.
theprimeagen is cool as fuck
Our form had babies... 😂
Is this just on steriods? I try to understand where the innovation is. Because that is litterally what I do all the time. Throwing in some data attributes and emit my data as custom events and than catch them with the attribute value as a event name. Saving changes directly in the html if needed. I build a fetch function to get my templates for constructing controls at runtime and paste in some defaults with ejs or send a locals object to preset the new control. You call it "htmx-target" I call it "data-action".
That’s a good question. I’m unfamiliar with web development in practice, but that does sound quite similar.
HTMX isn't a templater like EJS. It'd be paired with one, though.
It's not a new thing. This was once a simple framework that let you keep server side rendering and do partial page refresh. It basically takes care of those event/fetching/catching/saving for you, kind of declarative-ajax-ish-partial-html-fragment-exchanger. It was called intercooler.js back in the days, something like
span ic-post=/foo ic-target=bar ic-effect=fancy
Lots of the jquery selector syntax works within those attributes, so you can get really creative if you want to.
I guess having prime vids increased subscription count 😋
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.
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.
This guy Go's
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
Remembered a time when It was common to change your code and wait about 3 minutes to have the app compiled and running.... Time enough to get a coup of coffee....
How secure is HTMX to use?
As secure as your server
LMAO
what do you mean?
Seeing prime with the hood off is so wrong
unhinged montana man 2:32
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 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
No blue hair? Sad.
Liberal arc ended
But HTMX using javascript under the hood isn't it?
Easiest way to spot a Frontend Developer is when they use the wrong HTTP Codes, 204 is No Content 😉
the Primeagel.
Cool course. But I prefer Svelte.
What else does it offer apart from making api calls?
It takes care of the repetitive glue code that you’d write over and over; it’s a fundation; plus take away the need for backend competence (api calls, if needed, are done from the backend guys)
Here we go with prime cooking again.
I would say though, why not just not develop for the web; you don't have to worry about nearly as many headaches.
what do you mean?
He look more buff in the live dont him, thought he was buff as fuck
"I have no idea" 😂
je'son and squeel gang
Now make a SPA with htmx with multiple pages
This team replaced their entire React codebase:
czcams.com/video/3GObi93tjZI/video.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.
I feel like a noob
I could not understand most of what he said and coded
Its absurd that i go to university and in next 2 years I might get a masters degree yet I am super clueless😢
don't worry too much, just take action and play around with the technology you are interested in. The knowledge will come from the experience
+1, it takes years, of having fun, to be any good at this and still you will feel like a tootal noob in certain topics
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.