From React To HTMX 

@@thelvadam5269 who did it? AFAIK no one did, it is just developers who get obsessed with trying the new shinny thing, because we are humans and humans get addicted to novelty pretty easy. Get ready because htmx will be awesome for awhile and then people will get overcomplicated once again.

Good solutions never go out of fashion

@@thelvadam5269 I totally disagree. Before NodeJS, having to work in two different languages just to get a server + client going with horrendous spaghetti code using jQuery or vanilla JS was a nightmare, before React, Vue, and eventually Svelte came along. The developer experience matters just as much as the resulting code/technologies chosen for a project. A good developer experience is a productive one. The more you can reduce cognitive load, the easier + faster it will be to create an application.

​@@docmars Have you thought that perhaps this is because of other factors? Like JS being worse then? This is also a false dilemma; your choices are not limited to spaghetti code using jQuery or full-blown SPAs. The DX for Phoenix LifeView and the likes of it is much better than React for most part. Also, developer productivity is how well you're accustomed to a stack.

@@balen7555 I personally don't think JS is worse somehow. It was easier to learn than PHP or Ruby (+on Rails) even and has served me really well for my entire career. My whole point is: being able to work isomorphically reduces cognitive load because you aren't juggling several languages to solve a small scope of problems, which in this case, is the web itself. The native language for browsers is Javascript, so you may as well be writing JS, debugging JS, and working in JS to solve problems in the browser. Using anything else for scripting is an abstraction around that, and often with frustratingly limiting factors. I hold this opinion less strongly when it comes to servers, because APIs and server-side business logic is a whole different animal. In any case, all of this is a matter of preference, but back to the original argument -- I think it's naive to say that JS is a poor solution to web problems, when... _it is the web._

ooofffffcccoouuuurrrrsssseeee

@@jonty3551 SHARING THE THINGS WE APPRECIATEEEEEEEEEEEEEEEEEEEEEEEEE IS NOT DUUUUUUUUUUUMMMMMMMMM

Not really, if you start with Netscape without JS, the complexity of modern web is obviously moronic.

@@vasiliigulevich9202 Well, I meant it more like an appreciation of everything which is usually taken for granted, from the bottom of the computer architecture to the top. JS is what it is, 2 weeks worth of programming to ship a product back in the day. What can you do.. And what the web is today, well, that is a longer story, but we can agree that unneeded complexity is bad, but even if you peel everything away you don't like, the uncrufty things are still quite interesting none the less .

We use framework to get rid of complexity. React is not only about SPA that is simple to host, but also a framework that has templating engine on it, JSX. Think about what React simplifies: 1. Templating engine. 2. Hosting. 3. No need to write CSS (using component library). 4. If we need a server-side rendering with frontend-focused, we can use Next.js. 5. Many more.

Am so thankful that have not been cursed in life to be a web front-end developer. Those that are mired in that fate must have a lot of past life bad karma to pay down on.

sad but true

Even though your statements about HyperCard and Apple getting financially fucked are true, there is no confirmation that HTMX drew inspiration from HyperCard, and a little bit of an overstatement to say that Brendan Eich "ruined" browsers with JavaScript. JavaScript has indeed become a fundamental technology that enables interactive web pages and is a critical component of web applications. While JavaScript's design and implementation have been subject to critiques, it has contributed significantly to the web's evolution one way or another. For all we know it could have been just as worse as it could have been better, but "what if's" are just that in the end.

Carson's hyperscript is the language based off of Hypercard.

We should have gotten Hyperlisp ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-8JOD1AQGqEg.html

@@MicahKillian *based off of HyperTalk and its descendants (AppleScript etc).

Is this something that is public? I'd be curious to take a look

Nice. I've been working on a new FOSS fintech stack for over a year at this point. Trying to integrate advanced cryptographic features and such informed by Bitcoin but in the context of a credit network.

​@@nchomeybanking and regulations give me your email address.i share a link

I don't understand what's so complicated about React. It's functions and JavaScript.

​@@ralexand56json serialization steps and as a banking app the state should always be on the server.

I can relate. Keep at it bro. Glad to have Prime trying to hype us out of life in React hell.

Should i check out rust? Im a senior full stack heavy js and mainly spa or mvc.

@@FromRootsToRadicals I recommend it, but if you’re not familiar with working with statically typed languages it may be a bit bigger if a learning curve. It’s worth looking into nonetheless, the documentation for it is fabulous.

What's wrong with React?

@@ralexand56 specifically when using React for web: Verbosity. Incorporating state management (like Redux) is unnecessarily complicated. JSX. Very easy for developers to implement anti-patterns and poor design choices. I personally hate hooks but that’s probably more of a me thing than a React thing.

@@ralexand56are you watching the video or just reading the comments

everything will be gpu based streamed

You got excited to see global state management? I swear prime is a prime example of someone with a serious skill issue when it comes to react. Even a junior dev in my company can do global statement management in 5mins of work. It’s not some mind blowing incredible feat of engineering to write a few lines of code and use zustand etc etc.

​@@OryginTechoh boy. You're really writing this as it was that simple. Then tell me, why do you thing zustand was invented in the first place, and how the early react users handled react? Even before hooks. It's not such a big deal right now because react ecosystem improved, but how wild it was before react hooks and whatever, damn. Redux is a big deal, but nowadays you can use redux toolkit or zustand always, I prefer zustand always.

@@OryginTech do it without zustand u dummy lol then come back here to write a comment you are a jr dev that cant write zustand or anything close to it dont put down Prime he is staff architect

@@jkf16m96 oh boy. Tell me again why we are talking about react before hooks? I can remember a time where computers were the size of entire rooms 🫨 oh man computers really SUCK huh? The whole point of react is it’s mature ecosystem. Literally takes 2secs to npm install anything you need to build a product. I’ve literally seen an entire thread with hundreds of comments on why Svelte is better because it has great built in state management 🤦‍♂️ Are you that lazy that you can’t install zustand and copy the boilerplate in 😂😂

A main difference now is instead of classes is using attributes for SOC from styles, and for making the responsibility & namespacing clearer.

It's called cache

@@ihnatklimchuk1018 uhmm no?

@@ihnatklimchuk1018we mean native partial support

@@ihnatklimchuk1018 if htmx was natively supported, it would be more optimized, you wouldn't depend on the JIT optimization JS has

It wouldn't make a huge difference in practice. However, I agree that some functionality in the direction of htmx would be good (and honestly long overdue)

😂😂😂

Well, then why do they never say them out loud? 😂

Richard Beauchamp did nothing wrong

No, you are forgetting année, journée, crée, soirée, tablée, donnée, mosquée, etc. You are definitely adding extra 'e's at the end of your words.

Les Français mettre un 'e' pour les mots feminine. grand /grande Petit / petite Cet / cette Etc / etce

I feel like if Haskell fully embraced all the functional concepts yes everybody will say it is the future in 10 years

​@@ea_naseerhaskell is kind of dead in the industry

@@ea_naseerimo rust is a better option as it has functional elements but is much more versatile and far closer to existing standards. everything you can do with js you can theoretically do with rust compiled to wasm (and many rust libraries for the frontend have similar syntax to things like react)

I hope that in 10 years time, Javascript is considered as obsolete as Cobol or Visual Basic, and we have an actually decent front-end language.

In 10 years it will all be webasm containers for server side viewport rendering sent to clientside canvas ala angular shell payloads. There will be no DOM rendering"mutations clientside; basically glorified remote browsers. As long as the users internet connection is stable sites will load in MS instead of seconds and paint-update in even less.

Throughout his talk the presenter really shits on that front-end developer they let go (who's probably happy he left). This talk is not awesome at all.

@@zettadam Dependencies and lines of code may not be the best metric but it certainly speaks to maintainability. So either they hired what they could afford or they cheaped out and found efficiencies that allowed them to spend less money to get the same thing? Maybe it's not revolutionary but certainly that's the nature of "improvement through competition" -- they got a better end product cheaper. Even in the "wow" isn't something intrinsic to HTMX but rather due to market forces such as the availability of highly-competent labor it's still a big deal.

ur job sucks then

And now there’s my current company spending 6 months on a PoC with one team, then handing it to us to re-implement it in two months with a completely new design.

You guys get to make PoCs?

if you don't have a prototyping phase your product is a prototype with all the problems of a prototype baked in.

@@BlazingMagpieHaha.

Someone here gets it at least

Just started using Razor pages, but after the initial SSR on it you still rely on JS to update pieces of the page unless you want a full page reload, right? Provided you aren't using Blazor components in the page anyway.

​@@datguy4104 Razor replaces only changes html so a diff.

I don't think there's a huge difference. Supporting a web browser client & a native mobile app is already two different UX designs / code bases.

You build a separate endpoints for json, keep existing html endpoints. Or use something like hyperview for htmx-style mobile apps.

@@peterszarvas94 You are limited by not thinking full htmx mindset. What we should be doing is spitting out full pre-rendered views for the Android app, and separately full pre-rendered views for the iOS-app. if there are iOS watch and Android watches, create separate APIs for these too and spit out specific watch views. backenders should maintain it all, because backenders are fully qualified to understand and adapt to client environments thus the work should be theirs to solve. Idk, the whole concept seems like recreating problems we solved 10 years ago.

@@romanval69 the web clients and the mobile clients has different code bases, but they consume the same data. What's the difference in data in Linkedin App and Likedin Website rendering a post? Now instead of having two clients consuming the same data and handling their own rendering logic, you have one API spitting out htmx like its 2002, and another spitting out JSON to be used in an app. Like why. To save 100ms rendering time on web? It just doesn't make sense to go back to the dark ages of PHP where backend spit out client code when most certainly the client code should live in the client.

@@donnybystrom I also don't get it, there are so many layers on top of this, nowadays you can build insane experiences especially mobile, if you take "Vaul" from emilkowalski, thats a huge experience and it requires specific js code for ChromiumSafari... what I like the most in JS ecosystem are the custom UI to be consistent across different browsers/platform... and most of the time they have better a11y (radix) than the regular browser behavior. I started coding in a Java web project with Richfaces, it gives me a similar feeling when watching htmx (not a good feeling)... I'm really in love w/ Project Fugu that is improving web capabilities and allowing for even better experiences like Document PiP

Yes) looks like rails invented again :)

Tbh I don't imagine that or a similar thingy NOT being the next big thing in web-dev

​@@Malix_offpartial hydration? 😂

2025 - webasm with DOM manipulation 2027 - template attribute for block level elements added to spec renders template on load: 2028 - Observer/pubsub primitives added to javascript 2030 - observe attribute added, use element behavior expanded Hello World or Hello World Hello World

@@ea_naseer qwik doesn't do smth like that?

sometimes I value having an 'pure API' that returns json so you can have different kinds of clients all connecting to the same server. because mobile web is still shitty thanks to apple.

@@cat-.- Presumably, you can still have a JSON API or waterier alongside an HTML API. While this might be too complicated, you could have the HTML API just fetch from the other API and reformat the data in HTML.

HTML API…. Are we for real right now? We’re going to use HTML as a means of transporting data?

Tom is a genius

Tom is a genious

Tom is a geanios

Tom is a jeanius

Have you seen Marko?

If I understood this correctly, HTMX uses an event bus under the hood, so the network call is only made when the client-side event is created elsewhere on the page.

Look at 16:15

Wait, nvm. I see what you're saying now. You're right. I was just thinking about how maybe a system that uses a composite CRDT for state management might be helpful, then just have pub/sub for parts of the CRDT, and the CRDT-state library just synchronizes with the server in the background.

yeah HTMX would increase the server load

True, but you could extend a htmx like framework with a clientside event bus for purely clientside interactions like cross-component data passing. In fact, that’s exactly what we did in Tomahawk, a framework very similar to htmx that I created back in 2012 (sadly closed source as it was built for a company I worked for). This avoided unnecessary server roundtrips and made cross-component (decoupled) communication really simple to implement. Unfortunately I think this would clash with the htmx philosophy as it can’t easily be made to gracefully degrade to no-JS.

It’s amazing. We haven’t progressed at all in 20 years. We’re rendering HTML on the server again…. Dear lord

And indeed by using UUIDs and immutable data you can use localstorage for data for later transfer up.

react-query was a game changer, but remember the talk was in 2017, no hooks, and we were in the redux epoch, render props and the other myriad of patterns that people were figuring out to make SPAs with react, at that time, it was common to have duplicated server data inside the redux store through sagas and actions which was a pita as you are duping server data and logic in the clients, and now you need to deal with cache invalidation. Its the other reason why nextjs and other metaframeworks were born, letting the server handle everything it can standardizes a lot of stuff, mainly authentication and authorization which on a SPA you need to handle by yourself and sync state. Apollo client and react-query introduced the mental model that made it make much more sense. About server load, I somewhat agree, it depends on how you architecture the app, you can strain the server all the same with a SPA compared to rendering the html over there. Right now with SSR and other metaframeworks, like for example Remix, you ask for the same thing in several places and get the same result if it hasnt changed following that same model, with react-query, urql, apollo client you have a cache that you can pull from but, that doesnt mean you cant implement cache on the server with htmx too, difference is that you will need to follow http standards to handle said cache. React right now its mostly a safe bet due to inertia and adoption, huge ecosystem around it and a lot of devs you can pull from to work on the codebase, which is why most people start learning it or just choose it for everything. I feel that right now people are seeing other tools like svelte or solidjs and realizing that maybe the extra abstractions and mental models that react enforces arent the best path for every project, as it uses the vDOM so now you need to engineer solutions for accessibility and DOM interaction, which is similar to what happened to redux, which is a really good tool but people abused it for everything and anything and now its seen with disdain whenever someone talks about it, because they have the redux saga trainwreck trauma in the back of their minds.

You're absolutely right. I was not impressed by this at all. The guy in the video is Python back-end developer. He hasn't had to develop a large, complex, maintainable front-end app. Using HTML templates is bad developer-experience and unmaintainable.

@@wanking9040 I admit that what they had built with HTMX and Django looks nice - I just have trouble understanding what was so shitty about their React code except for that list example. Is that presentation a proof that you can built a cool production-ready app with HTMX? Sure. Is that proof that to build the same with React you would have to deal with 5 times the complexity? No, pretty sure it would be at least on par if not better.

@@wanking9040 It started as using declarative data attribute to trigger ajax and swap html, looks like it still is. Guess not everything is large and complex, or need to be complex ... but almost exclusively, we are judged and paid by lines of code produced, libraries aiming at reduce complexities have never been popular

@@arashitempesta By caching I meant more scenarios where you have 3 buttons to toggle favorite - you need only 1 request to know what their state should be and react-query will handle that. I don't think you can do that with HTMX whatsoever - you can trigger events in other elements with a response but these events can only just send new requests. So yeah, you can press add to favorite, a server will send a response and a header in that response will tell the other 2 buttons to show updated state but both buttons will just send two new requests to fetch their state. it's not a deal breaker for sure but since we're making comparisons. Yeah, i agree that svelte is an amazing tool(haven't used solid yet) - I've just focused on the comparison the video is making. So as I've said my main takeaway is that HTMX is a really good solution if you use some backend language for templating - like go or python etc. I struggle to see how it should be an easier replacement to React except for performance reasons - in that case I think switching to Svelte/Vue/etc would be a more reasonable choice because of the flexibility these frameworks allow. Cause showing that "you can put hx-trigger=click and it replaces the element contents on click - ISNT THAT SUPER EASY??" - yeah, no shit, it's also really easy to do in React too. I don't really understand what people mean when they say React model is complex - you don't need to know how vDOM works and state model which just requires you to assign a new value is fairly straightforward. Yeah "arr=[...arg, element]" is really dumb BUT it's fairly simple to understand. Probably easier than "arr=arr" in Svelte or that "obj={...obj, a:5}" will lose reactivity in Vue - even thought I agree that Vue/Svelte reactivity/state models are superior to React. So in the end as I've said - remove all client state from you React app, replace it with server state through react-query and you've got the same thing basically but with an easy opt-in for stuff which you can only do with React(or with Svelte, Vue etc).

I agree - Multiple state machines reflecting one anothers' state... that way lies madness. It is why "Do not creating extra processes, threads or service types unless you have to" is not just sound advice, it is an adage of quality software.

You just create new endpoint on your existing server.

Because nobody doesn't want to create it from scratch. Libs like Stencil and Lit isn't popular

Thanks for the croissant

YES, FINALLY, THANK YOU.

"FULL-STACK" frameworks are always like that meme with half-finished drawing of horse - one party beautiful and finished, one barely sketched.

Agreed.

this sounds like a perfect use

one great example of this is oracle's apex, it is a lego website building tool the documentation is horrendous and you can only do backend stuff in PL/SQL, their shitty programming language

better become a backend dev first, no?

I have written backend services in the past. Also, have used Django, so no problem 🤓

@@0ktothorp cool cool

First, hyperscript would have still been pretty raw when they were working on that conversion. Heck it's still not 1.x. It's also a pretty big context shift for folks. I used a tiny sprinkling of htmx and hyperscript for a Django project in 2021, and the client devs were so disoriented by the hyperscript that I just swapped it out for plain htmx (which they handled fine) in slightly more complex django-component support code.

After you've been down in the mines long enough, knowing the "when" of "until you have to" seems non-trivial.

@@x--. Fr tho. I could printf this, or I could do the same thing with 6 lines of Assembly. Printf seems like a reasonable abstraction and the logical extreme, but is it? At the other end we have React. It seems obvious to say that React is too much abstraction, but at what point does a collection of grains of sand become a heap? Assembly? C? The JVM? JavaScript? React? Where?

In English, rendezvous would require six words: The place where we will meet. Just saying...

@@canadiantechprep "meeting," "meet up," "hang" (slang), "tryst," "rally point." These terms imply location to varying degrees. False argument from laconism.

This is just an example where most thing are exclusively server side. So offline etc needs for javascript are not even a consideration for such a demo, just the alluring idea of server-side "purity".

Everything that's in the DOM can be updated when the trigger event happens. Anything that's not in the DOM when the event happens will contain updated info when it's loaded from the server, since the event updated the state on the server.

Even better, you can have 1 API for HTML(X) website and 1 API for JSON for Android or iOS and they can both focus on what they do best and without polluting each others responsibilities or being compromised by specific design or data requirements.

@@landscapesandmotion Probably don't even need to have different APIs for that. I've seen a project where we had endpoints that generated either partial HTML or JSON based on whether request is AJAX or not. For AJAX requests we were generating JSON and for standard request we were rendering HTML based on templates. It was .NET 4.5 project and used Razor templates. AJAX calls were served with JSON while non-AJAX calls were served partial views. But I guess it is cleaner to separate APIs.

@@landscapesandmotion I mean, this is why we want one API, because we don’t want to do the same work twice. We send the same data, the difference is that in one case these data are presented with an html table, in the other case we use some mobile table component. If we have two APIs we have to maintain two APIs and we have to be sure that they behave in the same way, because I want to see the same data in both the browser and the mobile app. But I’m not an expert on this, I might be wrong.

@@primosomaIts not hard at all. /user/{id}/settings -> HTMLX /api/v1/user/{id}/settings -> JSON They both can use the same business logic and database calls underneath to talk to the database and get the data and the controllers for each of these different routes can do whatever they want to transform the data to the API's needs. Like the HTMLX might need to inject CSRF tokens in the form and the JSON routes don't!

@@IvanRandomDudeYes, you can do it that way but I prefer to have the flexibility of separate controllers for the different routes.

isn't everything popular a meme at the same time?