HTMX JSON API Example with Wordpress

Поділитися
Вставка
  • Опубліковано 15 гру 2024

КОМЕНТАРІ • 22

  • @tuulikk2
    @tuulikk2 8 місяців тому +1

    This is inspirational and I like the enegy you bring to this video, just like any other video I have seen from you.

    • @StephenBlum
      @StephenBlum  8 місяців тому

      Inspirational, that is great feedback thank you! 🎉😄

  • @PouriyaJamshidi
    @PouriyaJamshidi 9 місяців тому +1

    high quality content mate. Keep up the good work

  • @hakim_jazuli
    @hakim_jazuli 3 місяці тому +1

    this is good for already made json api end points...
    for new project, sticking with html api is arguably better (at least on performance)...
    and even that you already made json api end points... Carson Gross, "the" dude behind the HTMX, still recomends to made html api end point parallel with your api...
    the argument being, json api should be stable and versionable... while html api is to be fluid, because it handles the ui too...
    therefore using client side templating for htmx, is only recomended, if you are planning to make non-web native app, so you don't have to write the api multiple times...
    I mean, if the htmx it self supports this kind of client side extention is slightly not making sense...
    the core theory is about HATEOAS, as in Hypermedia As The Engine Of Application States... for better or worse...
    using html as sole handler for the application states gave you advantage that no pure-client side framework, literally NONE of them, and will never, has...
    which is that, the unusable string will never be sent to the client, only backend approved html string is being sent...
    example, delete post button, will never be sent to the client, if the user have no authority for that...
    in client side framework however, if you look at the template tag or the bundled js file, you will definitely can check that for sure...
    the good thing is, htmx developer doesn't add this templating module to the core functionality, but rather as extentions...

    • @StephenBlum
      @StephenBlum  3 місяці тому +1

      Nice! Great insight. This makes a lot of sense 😄 Using HTML API to populate the UI has a lot more benefits. You make a great point. Only the needed UI elements are transmitted to the user. If the user doesn't have permission or never needs to use a UI component, then that user won't ever load unused UI. Very nice! Thank you for this detail. HTMX is showing better and better every day 🙌🎉

  • @davidbrabyn1
    @davidbrabyn1 8 місяців тому +1

    What's the advantage of this (which has its own costs -- 3 files) over using WP's own php functions? Avoiding a database query?

    • @StephenBlum
      @StephenBlum  8 місяців тому +1

      Hi David, you have a good question! 😄 When you are working with WordPress, it already has it's own template engine. You don't need to worry about HTMX. The video is less about WordPress, and more about HTMX. HTMX has the ability to work with JSON APIs which is a powerful feature. The WordPress API was used solely as an example scenario. There may be a situation where you may want to build an external system to your WP website, and a UI can be built to manage the WP database via the WP API using HTMX and the JSON API and Template Plugin. You do have a good point that there may not be a notable benefit in relation to WordPress via HTMX.

    • @davidbrabyn1
      @davidbrabyn1 8 місяців тому +1

      @@StephenBlum Got it thx. I have to admit, as much as it seems magical, I am struggling to find uses cases for htmx in WP. I am sure there are some and I am just not very imaginative. Great video though.

    • @StephenBlum
      @StephenBlum  8 місяців тому

      @@davidbrabyn1 😊 nice! thank you!

    • @blazingelse9104
      @blazingelse9104 5 місяців тому

      @@davidbrabyn1 As far as I understand it, HTMX does not compete with server side rendered Websites at all. It is a competitor to all the Reacts, Angulars und Vues. If your rendering does not happen on client side, there really is no use case.

  • @AdaptorLive
    @AdaptorLive 6 місяців тому +2

    I understand why you would want to do this but not sure you should. Doesn't this go against the whole hypermedia paradigm which is what makes HTMX unique?

    • @StephenBlum
      @StephenBlum  6 місяців тому +1

      Yes you are correct. This approach departs from the simplicity of HTMX. Ideally with HTMX we use just HTML tags with attributes as configuration. The problem comes with interacting with non-HTMX compatible APIs. HTMX requires APIs to respond with HTML tags. Most APIs use JSON. In order to consume JSON, we have to use the native module included with HTMX. This is `client-side-templates` module. It allows you to fetch data from JSON APIs, then consume the response by converting JSON to HTML. It requires learning a DSL template language. Which is beyond the original simplicity intent of HTMX.

    • @AdaptorLive
      @AdaptorLive 6 місяців тому +1

      ​​@@StephenBlumThanks for your response. I found your video because I work with WordPress and recently found out about HTMX. Really hyped about trying it out. It seems like such an easy way to make my WordPress sites more dynamic, it almost feels like cheating. I guess my comment was more philosophical because it feels kinda icky when the first thing you do when integrating new tech is to just throw away what makes it unique but to be honest, what you showed in this video is just too good to not try. The alternative would be to make all the ajax endpoints myself which kind of feels weird when there's already this whole API in place, ready to go. The fact that the template stuff is on the HTMX site itself is also reassuring. I guess I will just have to try it out. Before I do, I'd like to know why XSLT is so bad?

    • @StephenBlum
      @StephenBlum  6 місяців тому +1

      ​@@AdaptorLive that's great to hear! you got it, that's exactly the set of ideas around this video. Taking advantage of the simplicity of HTMX as best we can in combination with the WordPress JSON APIs. It's a great approach that allows you to remain 100% focused on front-end development 🎉😄 XSLT is actually a foundation today in all browser. you can create any custom and style it with CSS. This also works with HTMX natively. Pretty nifty! The great part about XSLT is that it keeps you within HTML syntax. Very powerful and for sure it's keeping you closer to the wholistic HTML-first development approach. 🙌

  • @nykowow
    @nykowow 8 місяців тому +1

    Very interesting, thanks!

    • @StephenBlum
      @StephenBlum  8 місяців тому

      Happy to share! 😄 This is my favorite way to use HTMX with a template engine that consumes JSON APIs.

    • @nykowow
      @nykowow 8 місяців тому

      @@StephenBlum would be interesting to see a routing solution suitable for WordPress, I am trying the plugin "HTMX API for WP" in conjunction with the theme "HTMX Theme for WordPress" and they seem to work well but only in conjunction, I'd rather develop a custom theme from scratch, without plugins and using htmx

  • @ballpen9157
    @ballpen9157 9 місяців тому +1

    Thank you so much!!

  • @huntrolly2190
    @huntrolly2190 4 місяці тому +1

    Thanks❤

    • @StephenBlum
      @StephenBlum  4 місяці тому

      absolutely! ❤ HTMX is amazing, truly. The simplicity and performance covers 99% of all necessary capabilities that you'd need from React. And it's much faster and easier to use for more people. It's a great addition to the developer ecosystem 🎉🙌