HTMX Crash Course - It's Not a React Alternative
Вставка
- Опубліковано 23 лип 2024
- Learn HTMX in this HTMX crash course where we implement a real project with It. HTMX is not an alternative but a niche solution for projects which are build with backend and require just a little of Javascript.
TIMESTAMPS
0:00 Introduction
1:31 Why HTMX?
2:23 Project planning
3:23 Configuring views
5:42 Adding markup
8:23 Adding todos
17:22 Todos counter
22:20 Adding filters
24:23 Deleting todos
27:26 Completing todos
► CHECK MY COURSES - monsterlessons-academy.com/co...
MOST POPULAR COURSES
► Building real project with Angular + NgRx - monsterlessons-academy.com/co...
► Building real NestJS API - monsterlessons-academy.com/co...
► Javascript interview questions - monsterlessons-academy.com/co...
► Angular Interview Questions monsterlessons-academy.com/co...
► Building real fullstack project - monsterlessons-academy.com/co...
► Mastering Git - monsterlessons-academy.com/co...
► Mastering Docker and Docker Compose - monsterlessons-academy.com/co...
► Building real project with React Hooks - monsterlessons-academy.com/co...
► Building real project with Vue + Vuex - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
► INSTAGRAM - / monsterlessonsacademy
► TIKTOK - / monsterlessonsacademy
REFERENCES
► Source code - github.com/monsterlessonsacad...
All our internal web apps (dashboards) are slowly being replaced by HTMX. Turns out around 75% less code. Some in Java, some in Python :)
Yeap, makes a lot of sense. I used React to add comments to my Rails app when I could use HTMX.
perfect use case for htmx
I am doing system issues tracker using spring boot and htmx and it is working well
A quick, clear introduction to HTMX. I followed along with the coding, but having the CSS downloadable was great so I could focus on the HTML/backend. Backend was straightforward enough I could recode to use PHP (data persisted to a .json file for the tutorial) as the video went along. Thanks!
Glad it helped!
I like to use htmx, but I ran into a problem - when loading part of the page using htmx, which contains swiper, it stops working, but if I load the entire page, everything works fine. Can anyone tell me how to solve the problem?
I have absolutely no idea what pug is, and it looks really strange. I would prefer you could show it with normal html.
Or is pug needed for htmx?
Pug is a template engine for Nodejs/Express. There are several out there. I prefer ejs.
You can't just take normal html. You need a template engine where you can pass variables in template and compile them. No it is not needed for htmx. You can take and template engine that you like.
Great content.... Great work.
Thanks a lot 😊
I get what you meant by not being an alternative and in the context you described i somewhat agree. However, i would also like to point out that when you need an element or component with complex scripting that would otherwise hurt Hateoas, you can follow the Island architecture and use events to communicate with the rest of the components. I'm sure there are great points in favor of using react or other frameworks, like svelt, in this scenario, but i feel this provides a good solution even if you are using the hypermedia driven approach. A good framework to help with this is stimulus js for example. There's also an essay about "hypermedia friendly scripting" in htmx essays page that's worth reading.
I agree
🎯 Key Takeaways for quick navigation:
00:39 🧩 *HTMX allows creating applications without a front-end framework by using attributes directly in HTML.*
01:32 🔄 *HTMX is not an alternative to full-blown JavaScript frameworks like React or Angular; it's suitable for cases requiring minimal JavaScript, such as animations or infinite scrolling.*
02:13 🚀 *The goal of the tutorial is to build a to-do MVC project using HTMX without the need for a comprehensive front-end framework.*
08:10 📝 *HTMX allows for dynamic content manipulation, demonstrated by submitting a form and updating the to-do list without a full page reload.*
20:41 📊 *The tutorial implements a counter dynamically updated using HTMX, showcasing the ability to swap specific elements in response to backend changes.*
23:29 🎯 *Implementing filters based on query parameters allows dynamic sorting of to-do elements by status (e.g., active or completed).*
24:51 🗑️ *Adding a delete button to a to-do item triggers a delete API call, removing the corresponding element from the list and updating the display.*
26:11 🔄 *Handling delete requests involves filtering the to-do list to exclude the deleted item and updating the displayed item count.*
27:33 ✅ *Implementing a checkbox allows marking to-do items as completed, with the state synchronized through a patch request and live UI update.*
29:32 📊 *Dynamic UI updates reflect changes in to-do item status, providing a seamless user experience for task management.*
How does *the implementation ensure synchronization between the UI and the server when marking a to-do item as completed?*
Can you *explain the significance of using query parameters for filtering to-do items and how it enhances the user experience?*
Are there *potential drawbacks or challenges associated with the approach of dynamically updating the UI based on server responses for each user interaction?*
Made with HARPA AI
I have a question, what if I need to update multiple elements on the screen? As far as I can I see HTMX is a 1 to 1 case
We did it in the video. hx-swap-oob is the solution
very nice
Thanks
Hi, I am getting more and more hooked on your content, bravo! But as I have seen some videos of yours, I noticed you're pronouncing the word target like I haven't heard before: It's not "tarjet", but with a hard g like in "gig"
Thanks for the tips!
HTMX is most certainly an alternative to React, and in the very few number of cases where React is better, a few lines of JS fixes that gap nicely.
They are so different. It is fine to use HTMX for a small amount of Javascript without lots of business logic. As soon as you need that it becomes to complicated to support.
its good for simple web apps and solo devs, thats it
Why don’t you use jsx with tailwind?:/
Because it will make code more complicated. But you can use it for sure.
If you think that HTMX is not an alternative to React then you are completely missing the point.
They are so different. It is fine to use HTMX for a small amount of Javascript without lots of business logic. As soon as you need that it becomes to complicated to support.
@@MonsterlessonsAcademy In HTMX you have the business logic on the server - where it belongs. The only situation where I would use frameworks like React is for web versions of desktop applications like Excel and Word.
@@AndersBaumann Exactly. If you have just logic on BE you don't need React at all. So how is HTMX is an alternative to React client logic when it doesn't have a place to write client logic?
@@MonsterlessonsAcademy With HTMX you don't need client side logic. That is the whole point.
Can you give an example of some client side logic for a regular website (non desktop app) that you believe cannot be handled by HTMX?
@@AndersBaumann I was not speaking of a regular website. You don't need React for it. I'm speaking about apps on the client they people build with React. Client calendar with infinite horizonal scrolling and dragging items, sockets and boards, etc.
HTMX does not send JSON data to API. I have been trying it forever but throws errors so i just went back to VueJs
In this video in creation of the element to send a post with body to the API.
😂 this defeats the point of htmx
HTMX works within the idea of hypermedia and REST. JSON apis breaks the tenants of true REST and really defeat the purpose of using htmx
He saying without moving his teeth
False. It is totally a React alternative.
Sure. Just build Trello clone with sockets and drag n drop and tell me how it goes.
@@MonsterlessonsAcademy There's tons of Trello clones written with HTMX. Maybe you should have looked it up before you used that as an example. The code is shorter too.
@@user-pl4pz2xn2c Show we the code then. I checked most popular and they didn't have sockets and dragging was done in a bad way.