HTMX - What they don't want you to know!

Поделиться
HTML-код
  • Опубликовано: 7 июн 2024
  • HTMX or what's known as "hypertext with a little bit of AJAX" is really making web development easier and bringing the old good days of only working with HTML without the need for new frontend libraries, frameworks or even doing and handling HTTP requests. It provides a simple syntax that makes everything simplified and easier to work with! But the real question is, "Is it actually worth the hype!"
    🎉Our Newsletter is live! Join thousands of other developers
    islemmaboud.com/join-newsletter
    ⭐ Timestamps ⭐
    00:00 Intro
    00:18 Htmx brief intro
    02:03 The Javascript Framework
    04:13 The idea behind Htmx
    06:42 Htmx and Ajax
    10:20 Multi Page app using Ajax
    -- Special Links
    ✨ Join Figma for Free and start designing now!
    psxid.figma.com/69wr7zzb1mxm
    👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨
    psxid.figma.com/ucwkx28d18fo-...
    🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
    • Build Login/Register A...
    🧭 Turn Design into React Code | From prototype to Full website in no time
    • Turn Design into React...
    🧭 Watch Tutorial on Designing the website on Figma
    • I Design a onecolor We...
    🧭 Watch Create a Modern React Login/Register Form with smooth Animations
    • Create a Modern React ...
    🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
    • Debug React Apps Like ...
    🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
    • Master React Like Pro ...
    🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
    • Debug React Apps Like ...
    🧭 Introduction to GraphQL with Apollo and React
    • Introduction to GraphQ...
    👉 Personal Links:
    ✨ My Portfolio islemmaboud.com
    🐦 Follow me on Twitter: / ipenywis
    💻 GitHub Profile github.com/ipenywis
    Made with ❤️ by Coderone

Комментарии • 260

  • @mattskelton7471
    @mattskelton7471 6 месяцев назад +271

    I wish people would stop saying HTMX is only good for small projects. It really shows how twisted web development has become in the last 10 years.

    • @begooddogood9898
      @begooddogood9898 6 месяцев назад

      Hi can you give a bit glace on it

    • @SXsoft99
      @SXsoft99 6 месяцев назад +33

      i heard that retoric in the past "oh don't use that because it's not for enterprise applications", "it's not going to scale", "etc"
      me "that sounds like a skill issue"

    • @jacobleslie8056
      @jacobleslie8056 6 месяцев назад +34

      There's never been an enterprise web application in production that didn't use react. The internet didn't start until 2013. Php doesn't exist. Ajax doesn't exist. Request/ Response cycle? What's that? Oh is that the thing that connects your json api to the frontend?

    • @EladBarness
      @EladBarness 6 месяцев назад +6

      IMO It’s not convenient to work this way without separation of logics and UI, components is a better way (even in php) since you can connect everything from everywhere otherwise it’s not very modular, you wouldn’t want to create an html file for every template part, you don’t want it to be accessible from outside.
      also the html file is already populated leading to problem with SEO so ax he said for working quick and dirty it might be good but it’s dirty, again, my opinion…

    • @angelrodriguezsantiago627
      @angelrodriguezsantiago627 6 месяцев назад

      Im building a SaaS web app in HTMX and the experience has been amazing. HTMX + Tailwind + Python + Vercel + Firebase. Nothing else needed. Fk React.

  • @KangoV
    @KangoV 6 месяцев назад +118

    We have a load of dashboards for all our internal services. These are being successfully converted to pure htmx. We are seeing that we can move quicker. The JS devs are moving to backend which gives us so much more bandwidth to get important features added. It's awesome imo.

    • @illegalsmirf
      @illegalsmirf 5 месяцев назад +12

      ROFL JS on the backend. What circus do you work for?

    • @buc991
      @buc991 5 месяцев назад +15

      @@illegalsmirf he didn't said that they have js on the backend though, you can switch to other language easily if you are experienced developer.

    • @KangoV
      @KangoV 5 месяцев назад +16

      @@illegalsmirf JS on the backend? No way that will ever happen! We use Java and Python. We're trying to use the same template language so we can share between the two. Not there yet, but we will.

    • @illegalsmirf
      @illegalsmirf 5 месяцев назад

      Java and Python? The most arcane and the most accessible - what a combo 🙂@@KangoV

    • @parlor3115
      @parlor3115 5 месяцев назад

      @@illegalsmirf What's wrong with NodeJS? Netflix and PayPal use it lol

  • @user-xj5gz7ln3q
    @user-xj5gz7ln3q 6 месяцев назад +134

    I think this is where you are wrong. It's like doing a 'hello world' and then concluding that it's not scalable. I have been on various React projects and found them overengineered and hard to maintain. I recently switched to HTMX, and it's like night and day. Functionalities are shipped to production 60% faster and cheaper using HTMX compared to React. The code is easier to read and maintain, and new joiners to the project pick up the application code base much more quickly. I have dropped React and most single-page applications (SPAs) from my development stack unless they are required. So, right now, it's 90% HTMX and 10% React, after five years of React development.

    • @ivan.jeremic
      @ivan.jeremic 6 месяцев назад

      How do I create click events with htmx?😊

    • @user-xj5gz7ln3q
      @user-xj5gz7ln3q 6 месяцев назад +17

      @@ivan.jeremic hx- trigger="click"

    • @IllarionYolgin
      @IllarionYolgin 6 месяцев назад +4

      Can you share why you still use react in 10% of your projects? In what cases does react is better?

    • @matthewschenker3170
      @matthewschenker3170 6 месяцев назад +1

      My thoughts exactly!

    • @user-xj5gz7ln3q
      @user-xj5gz7ln3q 6 месяцев назад +9

      @@IllarionYolgin 10% of our projects are dedicated to animation-related initiatives, specifically involving online video and graphic editing. To ensure swift updates to HTML nodes, we employ React for these components. Apart from that, the majority of our work relies on HTMX.

  • @SRG-Learn-Code
    @SRG-Learn-Code 6 месяцев назад +40

    Not all of us are react lovers... 💩

    • @games4us132
      @games4us132 3 месяца назад +2

      exactly, some of us vue.js lovers

  • @thedoctor5478
    @thedoctor5478 5 месяцев назад +44

    htmx isn't just about simple projects, and its main benefit isn't that you can get started with it faster. Its purpose is to change how/where state is managed because react is arguably a mess of a way to do things. htmx clients are stateless frontends, and are backend agnostic. It also doesn't use a virtual dom. It's good, clean engineering, which is a lot more than I can say for some libraries.

    • @grimonce
      @grimonce 4 месяца назад +1

      Well we've gone a full circle?

    • @tonianzlovar7590
      @tonianzlovar7590 4 месяца назад +4

      @@grimonce The next beautiful thing comming is a php-like templating language that supports all this (and more) without actually using HTML. Which will become a fully fledged server-side deveoper solution. Then you only need JS to sprinlkle over the top and... wait a minute.... someone has to invent jQuery now.

    • @ncpeaksean4278
      @ncpeaksean4278 Месяц назад

      @@tonianzlovar7590 That's not the idea, htmx is about don't worry how you do the things in the server, youre free to use Lisp, PHP, Golang, Rust, Python, NodeJS. Do you understand? Htmx it's not PHP.

  • @punkweb
    @punkweb 5 месяцев назад +34

    Problem #1, you're requesting json with htmx... That defeats the purpose entirely.

    • @sheggi
      @sheggi 5 месяцев назад +1

      @CodeOne can you elaborate on why you chose JSON instead of HTML for the transport?

    • @flygonfiasco9751
      @flygonfiasco9751 4 месяца назад

      Great point but there will still be third party apis that will return json and so it’s still a valid use case

    • @punkweb
      @punkweb 4 месяца назад

      @@flygonfiasco9751 right, but that's not the primary use case.

    • @ncpeaksean4278
      @ncpeaksean4278 Месяц назад

      @@flygonfiasco9751 You can return JSON if you want, just change the header for that, but if you're using using HTMX mainly for return json, so you dont understand the concept of hypermedia, so this guys Doesn't have idea what he is doing.

    • @lezzbmm
      @lezzbmm Месяц назад +2

      @flygonfiasco9751 yes external api’s might use json
      but
      ideally your htmx app will access said external api’s from yr server !!
      and pipe html to yr htmx client - not json..

  • @HaraldEngels
    @HaraldEngels 5 месяцев назад +87

    HTMX is absolutely great. It makes HTML how it should have been developed during the last 15 years. And for someone who is developing websites since 1996 the functionality of HTMX is a godsent. The web was never so poorly performing and unreliable since the dawn of the fat JS-clients. This geek BS needs to end asap and HTMX is paving the way into a healthy again world wide web.

    • @illegalsmirf
      @illegalsmirf 5 месяцев назад +2

      But HTMX is JavaScript, right?

    • @diegoronkkomaki6858
      @diegoronkkomaki6858 5 месяцев назад +11

      ​@@illegalsmirfit is. But the essential difference with modern SPA frameworks and HTMX is the architecture how applications are developed with those technologies. With htmx, the frontend no longer is this huge monolith application with it's own state management and all that. Instead, it simply focuses on the presentation and the backend handles the business logic & application state and provides the frontend with html fragments to be displayed to the end user.

    • @F38U
      @F38U 5 месяцев назад +1

      ​@@illegalsmirfinteracting with the dom is js biggest strenght but people making everything in it

    • @rodrigoserafim8834
      @rodrigoserafim8834 5 месяцев назад

      ​@@diegoronkkomaki6858 Except when your application has massive state, and putting the management of that state on the backend leads to insane scalability problems because you want your backend to be as stateless as possible so you can reduce your http "chattiness", hence reducing your app complexity, and your server infrastructure costs.
      From a programming maintenance perspective, by pushing state onto the server, you now have 2 layers with tight coupling with 1 living in the browser and the other living in your server. When you have a team of 5 people working on that they are gonna make mistakes, lots of them, and before you know it you will have a spaghetti mess of bits and bobs glued by 20 round trips to render a single user dialog.
      Now you might be thinking that wont possible happen to you. You are very smart after all, you are better than all those thousands of programmers. But once its time to implement that feature, and that feature requires the user to update the screen with almost every click, you will inevitably need to put a bit of temporary state in the client side to avoid the thing to just stopping into a crawl under load with the user experiencing a 400ms lag in between clicks. And then you will see that your pretty little server side state can be no more, and you will make one concession, then another, and then another, and you will be fighting against the tide. Trust me, I've been there, I'm talking from experience, I was the guy that made that mistake.
      Htmx has its place, but its not for application development where one page fundamentally depends on what happened in another page or in another section of your page. Htmx is best used for website development were the good old "each page is a completely new thing" is actually applicable.
      This whole wave of Server Side Rendering and pushing the state back to the server is a huge step backwards. Personally I think its a mistake for most sites that need any heavy user interactivity.

    • @linkylink
      @linkylink 5 месяцев назад

      @@diegoronkkomaki6858 so jQuery and PHP combo is great again?

  • @RealDevastatia
    @RealDevastatia 5 месяцев назад +17

    For an actual programmer, nothing is hard to do in vanilla JavaScript and DOM.

  • @ryanleemartin7758
    @ryanleemartin7758 6 месяцев назад +19

    I think you might arrive at a different conclusion if you didn't try to turn HTMX into a client side renderer like React.

  • @alanonym8972
    @alanonym8972 6 месяцев назад +32

    The main issue here imo is that you took a JSON end point to test a library that is supposed to work with endpoints that can feed html, which is basically like judging a fish by its ability to climb a tree. So your html looks bloated and you had to import 2 other dependencies since your html is not supposed to parse the JSON.
    Then you extrapolated to say that is was not good for big teams, and I don't really understand how you came to that conclusion based on your previous analysis. You said nothing negative about htmx and then suddenly it is good only for small projects ?

    • @makerjr.1249
      @makerjr.1249 5 месяцев назад +2

      External APIs responses are usually in json. Unless you mean now we need to start creating our html server side pretty much all the time

    • @alanonym8972
      @alanonym8972 5 месяцев назад +8

      @@makerjr.1249 For an htmx project, you need control over the API you are communicating with. Else, you just made one of the stupidest technological choice that is possible to make.
      And yes, for a project fully in htmx, you server would ideally render html all the time. Calls to external API would be converted to html by the internal API.

    • @bionic_batman
      @bionic_batman 5 месяцев назад +10

      @@makerjr.1249
      > Unless you mean now we need to start creating our html server side pretty much all the time
      Well, people did exactly this back in the days when React was not a thing and it worked like a charm
      Html in the first place was designed for server -> client communication, not client side rendering in SP applications

    • @chpsilva
      @chpsilva 5 месяцев назад

      @@bionic_batman as an old school web developer I wouldn't just say "it worked like a charm" - definitely there are performance/scale issues when we are generating megabytes of HTML tags on the server side. But honestly, begin able to work with both content formats is nice because you can weigh the pros and cons and choose which one better fits every use case.

    • @TyKellyDev
      @TyKellyDev 28 дней назад +1

      @@bionic_batman yea that definitely shows the age and experience level of those commenting against htmx. Servers are called "servers" in part because they literally served HTML documents to web browsers.

  • @LusidDreaming
    @LusidDreaming 5 месяцев назад +12

    This take directly contradicts a lot of what the HTMX page he's viewing says. If you actually take the time to read over their "book," they do not at all say you shouldnt use JS (or client side scripting in general). Instead, they put limits on what you should use scripting for. I'd also challenge people to try using it before you assume it can't do what React does. Their example implements custom menus/toolbar, infinite scrolling, active search, form validation, etc, all with minimal scripting (but not none). They even point out when you should and shouldn't use it. But I think this whole SPA hype has caused people to miss out on how powerful hypermedia can be. Their book is not a long read and definitely worth it for at least getting a different perspective on things.

  • @perfectomprg
    @perfectomprg 6 месяцев назад +31

    I think that frontend developers sometimes view themselves as a priest cast, and feel threatened by simple frameworks that ‘anyone’ can use. HyperCard also threatened full-time developers back in the day.

  • @jondoe79
    @jondoe79 6 месяцев назад +41

    Htmx itself is a javascript library with helper functions for common use case.

    • @ryanleemartin7758
      @ryanleemartin7758 6 месяцев назад +9

      obviously there's still JS involved. What else would it be? magic mystical fairy dust?

    • @TyKellyDev
      @TyKellyDev 28 дней назад

      @@ryanleemartin7758 Right like no is saying JS is bad and should be obsolete. The nemesis is React and they know it! lol

  • @SXsoft99
    @SXsoft99 6 месяцев назад +21

    "we all love working with react" ahahahahha good one

  • @MrJinwright
    @MrJinwright 6 месяцев назад +27

    I'm glad you tried HTMX but it's not intended to use JSON data or to be rendered client side. The HTML should be rendered server side.

    • @sarabwt
      @sarabwt 5 месяцев назад +1

      That is semi true. There are valid use cases where you can render stuff on the client and htmx actually helps you with that.

    • @knalliebar
      @knalliebar 5 месяцев назад +1

      Yeah I also didn't get the use of json and using mustache in the client

  • @oligreenfield1537
    @oligreenfield1537 5 месяцев назад +28

    For me web dev it’s just a fun hot mess. We add something simple html+css+js then someone decide to add complexity for no reason. Angular React or other are way to over kill for 99.9% of website. HTMX is just way to return to the root of web dev.

  • @SRG-Learn-Code
    @SRG-Learn-Code 6 месяцев назад +22

    The intro is kind of misleading, htmx is javascript, you don't need to write it yourself but it is and needs javascript. Don't expects htmx to work with js disabled.

    • @oriolmartinez4127
      @oriolmartinez4127 6 месяцев назад +4

      Well, aCkShUaLly, you could use the hx-boost attribute and try to handle anchors and forms for browsers with js disabled. But yeah, most of the stuff won't work if the browser does not execute js.

    • @SRG-Learn-Code
      @SRG-Learn-Code 6 месяцев назад

      @@oriolmartinez4127 I'm going to snip that 'aCkShUaLly,'

    • @RememberingGames
      @RememberingGames 5 месяцев назад +3

      My amount of facepalm is infinite when I hear, don't use javascript, use our javascript lib with its own language that will be dead in 2 years. Please kill me.
      This guy was clearly not there in "the good old days". I was. It sucked.
      But yeah, js influencers got to find "the next paradigm" in every single new lib that gets out.

    • @spaceynb
      @spaceynb 5 месяцев назад +5

      @@RememberingGames HTMX is like a return to jQuery, you have to manage element identifiers and spread your behavior logic all around your markup. But it's less clear than jQuery because you can't read the procedural steps, you have to scour your markup to see the behaviors. I am so confused why HTMX is getting so much good press.

    • @phoneywheeze9959
      @phoneywheeze9959 5 месяцев назад

      ​@@spaceynbsame. i would prefer jQuerys syntax any day over this. Besides it makes request to the server for every interaction. Imagine writing a search functionality with htmx after the data is already loaded to filter through users

  • @igordasunddas3377
    @igordasunddas3377 2 месяца назад

    I am somehiw missing cross-file templating. If I have say a custom partial address form, I would like to re-use it in multiple places. Sure, I can use php or Java ir whatever generates HTML in the backend to do this, but us there a htmx-way of doing that?
    From your example: if I wanted to reuse the name + email line, could I make it a universally available template?

  • @user-ik7rp8qz5g
    @user-ik7rp8qz5g 6 месяцев назад +5

    Since when was angular way of littering tag with spam attributes "good"? Also concerns vue and svelte

    • @codokit
      @codokit 6 месяцев назад

      Try AlpineJS + Alpine components is just pass function to x-data="component()"

  • @patricknelson
    @patricknelson 5 месяцев назад +4

    I have a very large app (PHP) and I could see myself using it *in conjunction with* Svelte web components (implemented via my library, svelte-retag). So, your Svelte components essentially _are_ “just HTML” (a separate abstraction) which can load/mount elegantly with HTMX. So, you still get your own backend (PHP, Go, Python, etc), some dynamic functionality where needed with HTMX and then a nice component-based design system with more intricate interactivity (where needed) with a front-end framework like Svelte. Not mutually exclusive!
    So, right tool for the job. Large vs. small scale doesn’t really categorize it properly. It just depends on what you want to do. It’s just a tiny little 10kb tool and depends on the job you need.

  • @attainconsult
    @attainconsult 5 месяцев назад +9

    oh dear did so well till the end, this scales incredibly well. I started in 92 after 5 years of BBS have been through all the frameworks and I mean all, settled on vue for the last 8 years or so with too many journeys into react and angular, toyed with svelte.
    Now I am back with a java stack, zero build time (modern java compiles as you write) high performance, serverless, monolith, dist architecture, fast deploy times and when I need a bit more I can sprinkle a little javascript.
    That's old school full stack and it's disruptive!

    • @placebogazebo9671
      @placebogazebo9671 4 месяца назад

      Wow, you had frameworks. I started with 4k of RAM and a 5Meg hard drive. We used 8 inch floppy drives and 110 baud modems. My first C compiler (BDS C) didn't even have I/O statements. We had to program those in assembly language doing in and out from ports a byte at a time. CP/M was our operating system. We used a language called Boomer++ .... 🤑

  • @onnot701
    @onnot701 5 месяцев назад +3

    switched from VUE Nuxt what I realy loved to HTMX. It's simple a lot less work to work with HTMX. And building very complex projects with it

  • @nickdhrones6425
    @nickdhrones6425 5 месяцев назад +5

    You start off by stating no JS required, Then you go on to say its just 14K zipped? What the hell! 14k zipped is a lot of javascript!

    • @strictlyunreal
      @strictlyunreal 5 месяцев назад +1

      Not to mention that small size doesn't mean efficient. Look at Alpine JS.

    • @jayhargis2352
      @jayhargis2352 3 месяца назад +1

      You _CANNOT_ use React or Angular without _WRITING_ JS. You _CAN_ use HTMX without _WRITING_ JS. But, with HTMX you still _CAN_ write JS if you need to but generally for last mile stuff, not state.

  • @memk
    @memk 6 месяцев назад +5

    Wasn't this..THE recommended way to add function to DOM from like wayyyyyy back? I am more surprised it took this long for anyone to make a library for it.....

    • @CristianMolina
      @CristianMolina 3 месяца назад

      well, htmx is the successor of another older library called Intercooler, from same author. I think it use jquery behind the scenes.

  • @Burbanana
    @Burbanana 4 месяца назад

    hi, what are you using as a server / backend to handle the request?

    • @LoudMouth_
      @LoudMouth_ 4 месяца назад

      Anything would work. node.js, Go, django, php. Whatever you're familiar with, as long it can return HTML from requests.

  • @skyline7349
    @skyline7349 5 месяцев назад

    Do you have your VSCode setup(extensions and themes) anywhere online? Theme looks really nice. Then that got me thinking what other cool stuff do you have installed.

  • @Nate77HK
    @Nate77HK 5 месяцев назад +2

    I think the idea that HTMX is good for simplicity is a key idea - more of the internet should be simple things. Less large clients where they aren't necessary, more hypermedia when it can do the job.
    Some tasks, like google maps, are actually an application and not a document. That kind of thing is where fully featured client frameworks and libraries actually belong.

  • @CristianKirk
    @CristianKirk 2 месяца назад

    The more I learn about HTMX, the more interesting it becomes, it's really intuitive. It really seems like something new, instead of those bloated frameworks.

  • @anonimous__ho
    @anonimous__ho 5 месяцев назад

    how do i do a [ ].reduce with this? how do i .map something?

  • @evenAndre
    @evenAndre 6 месяцев назад +11

    what would be awesome, is if the functionality of htmx was included in the html standard. It would totally simplify the making of modern websites, only needing backend programming knowledge, html and css.

    • @ryanleemartin7758
      @ryanleemartin7758 6 месяцев назад +2

      That could be awesome. I'd love to see it. Perhaps HTMX will influence the next version of the spec.

    • @Caellyan
      @Caellyan 5 месяцев назад

      @@ryanleemartin7758 HTML is the slowest spec to change 😑

    • @phoneywheeze9959
      @phoneywheeze9959 5 месяцев назад

      looks like you've never worked on a big project before.
      using css selectors for rendering data works only in small applications. plus unless you want to send a request to the server, you still have to write your own javascript. A simple example of this is having to filter a user, after the users have already been fetched.

    • @matthewsheeran
      @matthewsheeran 4 месяца назад

      ​@phoneywheeze9959 Fetch again but include the filter query this time with that request to the server! :-) It's geared to thin clients not fat and so is a different architecture.

  • @JT-mr3db
    @JT-mr3db 5 месяцев назад +3

    It’s astonishing how far you can get with htmx before needing a framework.
    It does have edges though. If you need something that is highly reactive and stateful, then a framework is more fit for purpose and maintainable imo.

    • @RealDevastatia
      @RealDevastatia 5 месяцев назад +4

      It's even more astonishing how far you can get with HTML, CSS, and JavaScript without ever needing a framework.

    • @JT-mr3db
      @JT-mr3db 5 месяцев назад +2

      @@RealDevastatia sure, but for a production quality hypermedia system?with actual customers and >1 team members?
      You would have an unmaintainable dumpster fire of bespoke state management and bloated third party script imports in no time.

    • @jayhargis2352
      @jayhargis2352 3 месяца назад

      @@JT-mr3db how does HTMX lose with teams > 1? That's an absurd statement.

    • @JT-mr3db
      @JT-mr3db 3 месяца назад

      @@jayhargis2352 I agree completely! however I didn't actually say that about HTMX if you bothered to read the comment I was responding to.

  • @deatho0ne587
    @deatho0ne587 4 месяца назад +1

    HTMX can do more than what is in the Docs.
    Recomendation that covers React, Angular (still used just as much), Vue, etc... bloat would be HTMX + AlpineJs + Astro + JS.
    HTMX + AlpinJs will cover most needs. Tables, cards, modals, forms, etc...
    Astro + JS can cover the rest. Basically routing, odd auth cases, when an endpoint still sends JSON, etc...
    - You can even dump your old bloat project inside of Astro and slowly move it out with time

  • @TreeLuvBurdpu
    @TreeLuvBurdpu 5 месяцев назад +1

    What was the part "they" don't want us to know? That's not in this video.

  • @ricoaw500
    @ricoaw500 5 месяцев назад

    then what's the difference between JSX? I still prefer View and Business Process should be separated.

  • @m.x.
    @m.x. 5 месяцев назад +3

    You forgot Backbone.js between jQuery and Angular.js.

  • @oshanemckenzie1694
    @oshanemckenzie1694 5 месяцев назад +6

    Delete html, js and css. Implement one language that takes care everything. This will be far more efficient

  • @rjk0128
    @rjk0128 4 месяца назад

    Great video to get familiar with HTMX, much appreciated!

  • @nordeenhasan6030
    @nordeenhasan6030 6 месяцев назад

    can it handle map and marker on it with leaflet

    • @ryanleemartin7758
      @ryanleemartin7758 6 месяцев назад +1

      Those are the bits where you'd write some JS.

  • @lezzbmm
    @lezzbmm Месяц назад

    htmx isn’t a new server-components
    it’s a way to avoid managing state on the client

  • @xade8381
    @xade8381 6 месяцев назад +1

    a video on htmx vs alpineJS
    (small correction: eliminate writing JS instead of JS)

  • @gkiokan
    @gkiokan 5 месяцев назад

    I think this adds again a couple of complexity and it does add javascript under the hood ofc, but another framework?. So if I would have to take the bite and use something less then a framwork for the frontend I'd rather go with alpine.js. Even Vue would be still the first choice for me as it is simple and scales great for larger projects but as always depends on the project.

  • @runaway09
    @runaway09 5 месяцев назад +1

    We are going back to SPA next year

  • @naranyala_dev
    @naranyala_dev 6 месяцев назад +7

    in the past, creating a fully dynamic ui (on a server) was very difficult, and HTMX was developed for that

    • @genechristiansomoza4931
      @genechristiansomoza4931 5 месяцев назад +3

      Php is exactly for that purpose. It returns dynamic html page for ages. Htmx + php is even better.

  • @SRG-Learn-Code
    @SRG-Learn-Code 6 месяцев назад

    I do love the concept and I think htmx solves some problems with state and ownership that are cool, but I feel like I get a cleaner front with a high dependency on the back. In some sense is great, but think is moves the concern into places they might not work well. I'm a fullstack wannabe so this might not affect me, but front people now depends on the back to make front work.
    I'm not sure how that will work. Headless backend now has to have knowledge about the front development?
    Apart from that, I think is quite magical and I like it, more so the part where the server keep state and client just operate the site and receive plain html as a result. I think I have to get more into hateoas as that might be a cool strategy to build interactivity.

    • @alanonym8972
      @alanonym8972 6 месяцев назад +1

      I am a fullstack wannabe myself (although I prefer back end, I can do both to degree).
      But there is literally no need for "front" people with htmx, since 90-99% of the front's logic is passed to the back. On my little projet I have a bit of js on the front, to get the users timezone for example, as well as for creating sortable lists. You could probably do a whole application with just an index.html page that contains the htmx import and an hx-get to the first page of your app. So everyone can just work on the backend.

    • @SRG-Learn-Code
      @SRG-Learn-Code 6 месяцев назад

      @@alanonym8972 But CSS crunchers are there for a reason. Back people concerns is logic, performance, security... and yep, back people can do visual design at some degree, but the hole point is to separate those things and let everybody do what they are good with.

    • @alanonym8972
      @alanonym8972 5 месяцев назад +1

      @@SRG-Learn-Code
      You can perfectly have CSS crunchers (whatever this is) if you want to. Just send your html to the front end and have your CSS here, no problem.
      Nobody is born with innate CSS talent and terrible security skills. All of this is learned, and people should always be able to adapt, at least to some degree. All people that do front end have at least some programming skills to handle the mess that are front end frameworks, so none of them should struggle just because the html is now generated on the back end and not on the front end.
      At the end of the day, It is still html + css, you just replace JS/TS by whatever the back end language is.
      Of course sometimes the back end is a convoluted mess, but the places where the answer is sent to the user should be separated from the convoluted mess anyway. Good separation of concerns does not requires http requests

    • @SRG-Learn-Code
      @SRG-Learn-Code 5 месяцев назад

      @@alanonym8972 I don't disagree, but figmabois (another invented name for front people, more incoming) are a delicate branch of developers. I've tried to help frontychans to install nvm, docker, wsl... to make their experience better when confronted with backend tasks or just to have dev enviroment coherent with the rest of the team. It's a nightmare.
      HTMX seems like a great tools for backdudes which is great because I lean that way, but I can see the struggle coming for both parties, as fronties will have to peak into the dark void of back dev and backchads will have to touch peasant front code.
      I believe in the end this would be for the better and many fullstackers will be born.
      To be honest, I think most of webs out there are overengineered because you have multiple teams, HTMX could solve this having just one versatile team.

    • @user-hx1lp6fc9r
      @user-hx1lp6fc9r 5 месяцев назад

      @@alanonym8972 Why dont you adapt to svelte then instead of separating visual ui parts into two completely different resources?

  • @rafaeldeandradesousa
    @rafaeldeandradesousa 5 месяцев назад +1

    This remembers me of Macromedia Coldfusion... Great tool, but without wide adoption, it will end up on the good ideas cemetery.

  • @AlThePal78
    @AlThePal78 4 месяца назад

    it is not just html, it is using ajax so it is javascript in the backend

  • @abhilashkumar4753
    @abhilashkumar4753 6 месяцев назад +3

    for my sake the separation of HTML, JS, CSS is best because we can defined different logic in it's own isolation and combine together.

  • @maenam4520
    @maenam4520 4 месяца назад

    HTMX is only a JS Library can be integrated with any new or existing website or web app.
    It will be later a React / Vue / Etc dependency or extension .
    No more or less

  • @DanKirkwoodJr
    @DanKirkwoodJr 3 месяца назад

    This looks to me to be easily a complimentary framework, not necessarily to remove all JS in the client.

  • @flygonfiasco9751
    @flygonfiasco9751 4 месяца назад

    Thanks for going through HTMX though I kinda feel like considering React modern is weird. It’s popular but that would mean jQuery would be modern just because 70+ percent of all websites use it. I would consider modern to be HTMX, Svelte, Astro (Angular 17+), etc

  • @ktxed
    @ktxed 5 месяцев назад +1

    I wish people would just stop saying that no js is needed. HTMX is a js lib at the end of the day. It would be interesting if it becomes part of the html5 spec. 😅

  • @carljung4733
    @carljung4733 5 месяцев назад

    I get the impression that htmx will limit client interactivity..for example, what if i want to auto hide header when scrolling down? This is a very common use case...

    • @konstantinpaul8301
      @konstantinpaul8301 5 месяцев назад +1

      Use CSS for that? See animation property for that.

  • @et_matrix
    @et_matrix 4 месяца назад

    So basically HTMX is similar to Turbo.js?. I don't see any difference

  • @ggoncalves80
    @ggoncalves80 5 месяцев назад +1

    Wouldn't this overload the backed for things the frontend would do much faster and effortless?

    • @danielscott4514
      @danielscott4514 4 месяца назад +2

      That's SPA thinking right there. Web servers are very capable of handling tremendous amounts of load when their back-ends are built with something sensible (compiled languages are great here) that doesn't gorge on RAM. It's also relatively trivial resource-wise to generate HTML UIs on the server side, and many backend technologies have elegant and well optimised templating systems (go templates, c# razor etc). Give it a try sometime - even going all the way old-school with full page refreshes can be way snappier than so many of the overly complex framework-bloated "modern" apps around now. HTMX strikes a great balance - allowing the server side to efficiently crunch UI updates, while not having to refresh the entire page.

  • @peterkulik5943
    @peterkulik5943 5 месяцев назад +6

    "No need for JavaScript", but you have to learn another non-popular/non-mainstream language: hyperscript.
    Why is it considered better than JS/TS?

    • @strictlyunreal
      @strictlyunreal 5 месяцев назад

      Yeah, all these "web developers" want to write web applications without learning the language of the browser. Not to mention separation of concerns. You should see the genius design that is Laravel Livewire, another of these "magic tools": to uncheck a checkbox, it makes a request to the server!

    • @sv3163
      @sv3163 5 месяцев назад

      Correct 100%

  • @wanderingtravellerAB99
    @wanderingtravellerAB99 6 месяцев назад +5

    Dude 1 HTMX isn't new at all, or not very new it's already a few years old...and 2 wtf with the silly clickbait title, what are you, buzzfeed 2013?

  • @gillesashley9314
    @gillesashley9314 20 дней назад

    Just perfect vanilla javascript and use whatever library or framework your company demands. Done.

  • @davidsanders4463
    @davidsanders4463 4 месяца назад +1

    I do not see the benefit of this over a framework. Maybe small projects, but there is so much that goes into larger projects than this. The biggest complaint I have heard from people in this chat is that frontend frameworks get to messy as things get bigger. From my experience every single framework or library suffers from this if it is not architected correctly. HTMX will suffer the same if thought is not put into how the project is structured. There is a reason we moved away from SSR and pure html for websites and applications. I can see use cases for HTMX but not the way people want it to be.

    • @GusPm
      @GusPm 2 месяца назад

      We moved away of that because we needed more interactive ui so SPA’s were created but the complexity involved increased a ton, now with htmx you can achieve a complex ui but without increasing the complexity of the code base.

  • @onhazrat
    @onhazrat 5 месяцев назад +1

    🎯 Key Takeaways for quick navigation:
    00:00 🌐 *HTMX is a front-end framework/library that enables building web applications with minimal or zero JavaScript.*
    01:25 📚 *HTMX is lightweight (14 KB minified and gzipped), dependency-free, extendable, and supports Internet Explorer 11.*
    03:47 🔄 *The speaker compares the evolution of front-end development from vanilla HTML to jQuery, Angular, React, and introduces HTMX as a simplified approach.*
    05:10 🛠️ *To use HTMX, one can include the script tag directly in HTML, avoiding npm installation or bundling with tools like webpack.*
    06:49 🕹️ *The video demonstrates building a simple HTMX application with a button that fetches data from an API, replacing content dynamically.*
    10:14 🔄 *HTMX templates use mustache syntax to render data, allowing for dynamic content rendering similar to React's map function.*
    11:49 🚀 *HTMX offers features like animations, progress bars, and UI components without writing JavaScript, making it suitable for lightweight applications.*
    12:31 📚 *While HTMX is praised for simplicity and ease of learning, the speaker suggests it may be more suitable for smaller applications and quick integrations, not larger, complex projects.*
    Made with HARPA AI

  • @user-dh4ex3iq5g
    @user-dh4ex3iq5g 6 месяцев назад +6

    I'm not sure how useful this will be. It just feels like there are more libraries to study....

  • @Ross96D
    @Ross96D 5 месяцев назад +3

    Htmx is not a good fit if u wanna have a desktop app experience on your web.. but that is like 5% of web pages... It does scale

  • @thefamily512
    @thefamily512 4 месяца назад

    We are in the age of needless and continuous innnovation. None of this is neeeded, the old html & javascript way was just fine!

  • @codokit
    @codokit 6 месяцев назад +5

    My favorite is AlpineJS - it's similar, but much more poverful and has convenient API. Imho, HTMX is good for beginners, it can't handle complex cases where we need component state.

    • @sopa-gq5h
      @sopa-gq5h 6 месяцев назад +14

      HTMX and AlpineJS work very well together though, even the creator of HTMX recommends Alpine

    • @codokit
      @codokit 6 месяцев назад

      @@sopa-gq5h I prefire to use Hotwired Turbo instead, because it's not so low-level as HTMX, because HTMX and AlpineJS has similar level of abstraction and it will confuse developer: what I should use for this case HTMX or Alpine?

    • @LusidDreaming
      @LusidDreaming 5 месяцев назад +2

      The official HTMX book (or guide) actually used AlpineJS in an example. I think the combination of the two allows for a very powerful yet minimal framework for building modern apps.

  • @BGdev305
    @BGdev305 Месяц назад

    Why do you repeatedly say HTMX can do xyz without using JS.. when HTMX is a javascript library!

  • @jjcapanegra
    @jjcapanegra Месяц назад

    htmx doesn't remove javascript, htmx is a javascript library itself. What htmx does is reverse today's principle of doing everything in javascript, and html is just constructed dinamically. And the other thing is switching your server to return html instead of json. You go back to the pure form of html with improvements

  • @elultimopujilense
    @elultimopujilense Месяц назад

    The main problem of HTMX in my opinion: It doenst work on mobile devices. So, most of the awesome new applications, like phones, cars, smartwatches, TVs, or any intelligent device, are out of reach. If you wan to do a really big project, then you need at least an app. But for most projects I think it is still totally worth it.

  • @helamaewerton6860
    @helamaewerton6860 5 месяцев назад

    My only concern with HTMX is the length of files, dude I can’t think doing it with huge products

    • @konstantinpaul8301
      @konstantinpaul8301 5 месяцев назад

      You generate HTML/X in your REST-API, so ideally you will have not even a file just call "/welcome" on your API an "navigate" the user from there. Of course you need a RESTful service.

  • @vectoralphaAI
    @vectoralphaAI 3 месяца назад +1

    Frontend JS frameworks are a mess and overcomplicate things. This is a breadth of fresh air.

  • @JLarky
    @JLarky 5 месяцев назад

    "small book" well, it looks like you didn't see pictures of it 😂

  • @XxMissingDataxX
    @XxMissingDataxX 4 месяца назад

    Oh man this guy going 100 miles a hour a big run on sentence 😂

  • @kudorgyozo
    @kudorgyozo 4 месяца назад

    I still don't understand why htmx is good

  • @JakubSK
    @JakubSK 6 месяцев назад +5

    None of the large frameworks have been good for web dev. None.

  • @brandonzylstra
    @brandonzylstra 3 месяца назад

    I listened half-way through the video and LITERALLY NOTHING related to your title.

  • @TwoThreeFour
    @TwoThreeFour 20 дней назад

    Based 😂

  • @adamjones7497
    @adamjones7497 5 месяцев назад +1

    There are so many inaccurate statements in this video. For starters, HTMX uses JavaScript, so it’s not eliminated. Second, Angular is garbage, always has been and always will be. Third, jQuery was, and still is, fantastic. I stopped watching after the first minute.

  • @mac.ignacio
    @mac.ignacio 6 месяцев назад +3

    React is not the best tool its just popular and hyped.

  • @xcrap
    @xcrap 5 месяцев назад

    HTMX is everything but new....

  • @xakep4182
    @xakep4182 4 месяца назад

    WTF is htmO ?

  • @user-re8lt2gy3g
    @user-re8lt2gy3g 6 месяцев назад

    U can't get ride of js lol

    • @nordeenhasan6030
      @nordeenhasan6030 6 месяцев назад

      when you read it's doc and how to use youiy will notice you can red of 90% of js needed for frontend

  • @kensmith5694
    @kensmith5694 5 месяцев назад

    It sounds like a bad idea to me.

  • @sidekick3rida
    @sidekick3rida 4 месяца назад

    Embedding logic into the presentation layer is just about the dumbest thing I can think of

  • @jmssun
    @jmssun 5 месяцев назад +1

    HTMX as gender neutral HTML? 😂

  • @QueeeeenZ
    @QueeeeenZ 4 месяца назад +1

    HTMX is good for only very simply and small prototyping for backend developers. You won't be able to create modern, interactive apps using HTMX like RUclips, Figma, Google Docs, spreadsheet ... pretty much any modern web app is way too complex for htmx.

  • @jayhargis2352
    @jayhargis2352 3 месяца назад

    You're not using HTMX the way it was intended. I challenge you to name a task you need accomplished that you can do with React or Angular that cannot be done in HTMX AND is not some esoteric and framework specific feature. Just state the desired goal and tell me why HTMX can't do it.

  • @ncpeaksean4278
    @ncpeaksean4278 Месяц назад

    when you say HTMLX is just for small projects, youre saying basicly that the fundamentals of any React framework are only for small projects? did you see? Htmx its about architecture, the way how render the HTML and send the requests, its the fundamental of any SPA framework. So stop to say stupid things as SPA fan boy that don't understand the DOM and the javascript low level.

  • @manofqwerty
    @manofqwerty 4 месяца назад

    Not a framework and it's not really new either

  • @thomasreichert2804
    @thomasreichert2804 Месяц назад

    "HTMX is a new front-end framework ... it's not exactly a front-end framework it's more of like a library." You lost me here. Yes it's a library, and calling it a framework to appeal to devs who think they need a framework dictating their JS paradigms is doing it a disservice.

  • @ceving865
    @ceving865 5 месяцев назад

    Pretty stupid video title. But way more annoying: The video does not show reactive conditional DOM changes, which is the only interesting thing nowadays: if input is valid show this, otherwise show that. So in a way the video fits the title.

  • @nilfux
    @nilfux 4 месяца назад +1

    Htmx is from 2013, hardly new. SPAs never should have existed.

  • @klausss
    @klausss 5 месяцев назад

    So what they don't want us to know ? Clicked the bait and ?

  • @user-hn1ph6ry8l
    @user-hn1ph6ry8l 6 месяцев назад +3

    To my opinion it will be huge mess at some average project. At this time, I try Astro for pet project and this is a thing. It has normal production structure, TS etc and can produce really zero JS pages on client. And htmx - emmm, xml + xslt 2.0 ? I don't like it.

  • @rdatta
    @rdatta 4 месяца назад

    The main body of the video was fine. But down voted as the title is click bait - there's no one who doesn't want you to know htmx Irish striving to conceal anything about it. As well, the final opinion has no evidence to back it other than a small test in this video. Author is entitled to his opinion but it's just that.

  • @user-pl4pz2xn2c
    @user-pl4pz2xn2c 4 месяца назад

    lol so at the end he's saying if you have a big project you NEED to use SPA???
    hahahaha
    i'm dying laughing at his ignorance
    Rename your channel to "CoderNoob", junior.

  • @ba8e
    @ba8e 6 месяцев назад +3

    NOTHING can touch Svelte...

    • @codokit
      @codokit 6 месяцев назад +1

      Svetle is server-side lib, so anithing can touch Svetle

    • @Caellyan
      @Caellyan 5 месяцев назад +1

      @@codokit No, it's a compiler that generates both frontend and backend code. Comparing it to JS frameworks makes no sense. But besides that, saying it's a server-side lib ignores the fact that it can generate client-only JS as well.

    • @codokit
      @codokit 5 месяцев назад

      ​@@Caellyan Ok I see. Thanks for explenation. But I need to compile it - that add stages to CI/CD process. I prefire more lightweight solutions. My favorite AlpineJS.

    • @denissorn
      @denissorn 5 месяцев назад

      @@Caellyan Talking about SvelteKit or Svelte

  • @kevinb1594
    @kevinb1594 5 месяцев назад +4

    Yeah I don't see what is so grea there. The HTML looks like shit with all those attributes. If you going to be making all those round trips, might as well just put ALL the logic on the server and ship a complete rendered page. This seems like it is mixing the frontend/backend domain more which will require MORE coordination from frontend/backend teams.

    • @robadobdob
      @robadobdob 5 месяцев назад

      I think that's really how you're supposed to use it. You make a request to the server, it renders some HTML snippet which is shipped down to the browser and swapped into the DOM. This is just AJAX defrosted for a new audience.

    • @kevinb1594
      @kevinb1594 5 месяцев назад

      @@robadobdob which is my point. Why bother with it as oppose to making a whole round trip with an entire page/payload? The server cost (resources) is negligible snippet vs whole page and you don't have to do weird state management to make sure your partials match up in a logical way aka state management.

  • @richardhunter132
    @richardhunter132 4 месяца назад

    I hate the title of this video. why would anyone not want you to know any of its content?

  • @robertfletcher8964
    @robertfletcher8964 3 месяца назад

    skill issue

  • @someonelastname8175
    @someonelastname8175 5 месяцев назад

    The evolution of web dev is to move away from raw html/css which are both awful and manual. With frameworks/libs like Next.js, Tailwind, NodeJS, React, RUST, Svelte, Vue etc etc. We are moving in the right direction. I don't know any dev who wants to return to raw HTML and certainly not attribute based coding like it's 2001 classic ASP all over again. (Most probably don't know what Classic ASP is)
    My biggest criticism is imbedding application logic/state/cross cutting concerns within the actual markup. That's a show stopper for any sizable app.

  • @kavooss4205
    @kavooss4205 4 месяца назад

    Meh😕

  • @2gbeh
    @2gbeh 6 месяцев назад +2

    WHAT ACCENT IS THIS 🤣

    • @ameer6168
      @ameer6168 6 месяцев назад +2

      Not everyone is native English speaker