News for hackers. Stuff that matters.
Re:How we built Hydrogen, a React framework for building cus... by halostatue on Thursday June 23, 2022 @04:00PM (#31854433)
All of this would be far more interesting to me if it weren’t based on React. Almost any other technological choice would have been better, from my perspective. I get it, React developers are cheap because people have bought into the React hype.

To me, though, especially with hooks, React creates a bizarrely deep object tree that is impossible to reason about in comparison with pretty much every other tooling that exists.

Re:How we built Hydrogen, a React framework for building cus... by bromuro on Thursday June 23, 2022 @04:56PM (#31855049)
React was first released 9 years ago, more than a “hype”, it is still a great success! (And source of my economic wealth too)

- a cheap developer

Re:How we built Hydrogen, a React framework for building cus... by halostatue on Thursday June 23, 2022 @05:15PM (#31855253)
I’m glad you like it. Someone has to, I guess.

I can’t stand it and find all the promotion on it to be promising far more than it delivers. It’s heavier, slower, less comprehensive, and less comprehensible than either Vue, Svelte, or most Vanilla JS implementations of component-oriented sites that I’ve seen.

Every single thing about React bothers me, from hooks to JSX (which is so much worse than meaningful templates), and I’d rather use something that makes me happy.

Re:How we built Hydrogen, a React framework for building cus... by j-krieger on Thursday June 23, 2022 @07:06PM (#31856203)
> I’m glad you like it. Someone has to, I guess

Millions of people and companies do. For mostly one reason: Getting started is incredibly simple. React's surface area is incredibly narrow. Almost anything in it is just JavaScript. Hooks or Classes? Syntax inside JSX? Just normal JavaScript. With hooks, there are basically two that can do 99% of what you want to do.

> which is so much worse than meaningful templates

Why? There is a zero bullshit approach here. No magic syntax. No "v-for" or two way binding. No receiver patters or context parameters.

Re:How we built Hydrogen, a React framework for building cus... by ramesh31 on Thursday June 23, 2022 @09:19PM (#31856914)
>There is a zero bullshit approach here. No magic syntax. No "v-for" or two way binding. No receiver patters or context parameters.

Amen. I have zero interest in learning Yet Another Template DSL ever again. React won the framework wars because it's just javascript.

Re:How we built Hydrogen, a React framework for building cus... by Existenceblinks on Friday June 24, 2022 @01:00AM (#31857970)
It's not. Practically everyone is using JSX. And it doesn't run on browsers.
Re:How we built Hydrogen, a React framework for building cus... by lucas_codes on Friday June 24, 2022 @01:15AM (#31858042)
JSX is just sugar for React.createElement(...)
Re:How we built Hydrogen, a React framework for building cus... by Existenceblinks on Friday June 24, 2022 @01:39AM (#31858164)
Doesn't invalidate that it doesn't run on browsers.
Re:How we built Hydrogen, a React framework for building cus... by halostatue on Thursday June 23, 2022 @11:33PM (#31857504)
"Zero bullshit"? "No magic syntax"?

JSX is 1,000% magic syntax, and anyone telling you otherwise is trying to sell you something.

It looks, feels, and acts wrong in ways that Svelte or Vue templates (and most other templating systems) don’t, to me.

And the whole thing about hooks is a punt from the developers of React saying that they couldn’t figure out a more humane way of smartly figuring out reactive dependencies. The whole trick of figuring out why you have an update loop (and specifying those dependencies) is work that the tooling should be able to figure out for me. What use is one-way binding if I have to specify my update dependencies at least twice in every hook (once in the hook logic and once in the dependency list)?

And you’re right: React’s surface area is narrow, which does not justify the framework’s bundle size or it’s painful developer semantics. Both Vue2 and Vue3 provide more than React does with bundle sizes that are ⅔ as large. Svelte’s runtime, when needed, is even smaller. What excuse does the React team have for causing so much lost developer productivity and wasting bundle sizes? At least Preact has the excuse that it’s a much smaller runtime bundle.

I look at React code and I see cries for help from people stuck in an abusive relationship with their development tools, when there are so many better choices out there. Including plain old vanilla JS (which is increasingly an option from my perspective).

That said, I’d much rather deal with React than Flutter and Dart any day. React still ultimately compiles to real components for the platform, whereas Flutter can’t even pretend to be a good citizen of any platform.

Re:How we built Hydrogen, a React framework for building cus... by BigJono on Friday June 24, 2022 @12:00AM (#31857678)
You have no idea what you're talking about. JSX is a line for line transform. It's literally the simplest implementation of templating that's even possible. The next step is just not having any sort of transform or build time and representing your DOM structure as JS code (which is also an option in React and what a lot of other smaller libraries do).

Your entire argument is arguing for React, not against it.

It makes no sense that you complain about magic then ask why dependencies need to be passed into hooks. How do you think other libraries avoid that quirk? Magic. Computed properties in Vue are opaque build time magic. Templates are build time magic. React is the only library that doesn't have build time magic that you need to treat as a black box.

Re:How we built Hydrogen, a React framework for building cus... by j-krieger on Friday July 01, 2022 @07:14PM (#31954263)
Amen. I really think that I‘m taking crazy pills when people say JSX is more magic than other frameworks custom templating. How the hell is a for loop inside { } less magic than „v-for“? How is a property in a magic computed object less magic than a pure javascript „useState“ function that is dead simple to explain? How is magically rebinding a variable to a function via a compiler less magic than manually calling said function to do it yourself? And how is setting an event handler yourself less magic than using „on:effect“?
Re:How we built Hydrogen, a React framework for building cus... by tbezman on Friday June 24, 2022 @12:33AM (#31857835)
you fucking nailed this. thanks for writing this out so i didn't have to
Re:How we built Hydrogen, a React framework for building cus... by civilitty on Friday June 24, 2022 @05:45PM (#31869815)
> JSX is 1,000% magic syntax, and anyone telling you otherwise is trying to sell you something.

> It looks, feels, and acts wrong in ways that Svelte or Vue templates (and most other templating systems) don’t, to me.

My biggest example of this (and it drives me crazy) is when mixing Typescript generics in TSX files: you often have to do ridiculous boilerplate like `<T extends any>` because otherwise `<T>` would be recognized as JSX and blow up the syntax tree. Hoorah for the context-sensitive grammar.

Typescript is what "No magic syntax" looks like: all it takes to get usable javascript is to parse the TS AST, remove the TS specific nodes, and serialize the tree back to text. There are a few exceptions like enums but they're not core features and you can go your entire career without needing them. Meanwhile the JSX ecosystem is full of crap like emotion and styled-components that need babel plugins to support features like component selectors. SMH

Re:How we built Hydrogen, a React framework for building cus... by j-krieger on Friday July 01, 2022 @07:15PM (#31954270)
You are mistaken. This is a fault on TypeScript. Using angle brackets for generics has been a mistake in an environment where XML is used.
Re:How we built Hydrogen, a React framework for building cus... by gentleman11 on Thursday June 23, 2022 @09:38PM (#31857012)
> Getting started is incredibly simple.

Create react app drags in about a million dependencies, and I’ve never met somebody able to make a react app work without it. That’s not “simple” in my book, create-react-app is a tool that so many people are dependent on that it deforms a lot of architectures to avoid having to modify it, using proxies etc

Re:How we built Hydrogen, a React framework for building cus... by cypress66 on Thursday June 23, 2022 @09:50PM (#31857049)
> I’ve never met somebody able to make a react app work without it.

How so? You just need to call createRoot and you have react working.

The reason why people use CRA is that it comes with all the tooling required for modern webdev, such as webpack, babel, eslint, prettier, jest, etc pre-configured for you.

Setting up all these tools takes quite a bit of time, but that's not react specific. You would want those same tools for any frontend project regardless of react.

Re:How we built Hydrogen, a React framework for building cus... by dragonwriter on Thursday June 23, 2022 @09:59PM (#31857086)
> Create react app drags in about a million dependencies, and I’ve never met somebody able to make a react app work without it.

I’ve done react “from scratch” with manual configuration of the build toolchain, without a builder or template app (there's a lot of each around, CRA isn't the only one.)

It's not particularly difficult, but there's no payoff (in any real world use case I’ve had so far) for the extra work.

Re:How we built Hydrogen, a React framework for building cus... by csharpminor on Thursday June 23, 2022 @09:48PM (#31857044)
Agree, and re-hydrating projects that have been left sitting for more than a few months invariably leads to dependency mismatch hell.
Re:How we built Hydrogen, a React framework for building cus... by Spivak on Thursday June 23, 2022 @06:25PM (#31855847)
After using Dominate, Hiccup, Slim, and JSX, CDK, I have no desire for templating HTML (or anything) on the level of strings anymore. It’s so stupidly clunky, doesn’t compose well, is hard to mutate, hard to test, you have to deal with all the weirdness of your templating language, logic is split across your controllers and templates.
Re:How we built Hydrogen, a React framework for building cus... by halostatue on Thursday June 23, 2022 @11:40PM (#31857541)
We’re talking about templates in the context of component libraries. In particular, I’m highlighting the template languages of smaller, more capable component library systems than React — Vue (2 and 3) and Svelte. In both Svelte and Vue (both versions), Single File Components are the standard. Yes, there’s logic in your template, but it’s closely related to the core business logic, and it reads a lot better than embedded logic in JSX droppings.

On the rest of it, I’d agree that a lot of the JavaScript-based pure templating languages don’t really work well, but IMO that has more to do with JavaScript than the templating languages. I find EEX (Elixir), ERB (Ruby), and Jinja (Django-ish, plus others), Liquid (Ruby / Shopify), and Text Templates (Go) to all be pretty good for what they do — and most of them are templating languages that can be applied to HTML, but are not HTML "native" templating languages (even though some have HTML "native" variants, e.g., HTML templates for Go).

Re:How we built Hydrogen, a React framework for building cus... by likecarter on Thursday June 23, 2022 @04:56PM (#31855050)
You can always reason quite well about React if you follow good conventions. It's a tradeoff of complexity and flexibility.
Re:How we built Hydrogen, a React framework for building cus... by halostatue on Thursday June 23, 2022 @05:17PM (#31855266)
Both Vue and Svelte are both lighter-weight, faster, and have more features than base React while being less complex and more flexible than React.

IMO, Vue 3 has made a mistake buying into the whole hooks nonsense, and I find it less usable than Vue 2. On the other hand, Vue 3’s implementation is more comprehensible than React’s.

Re:How we built Hydrogen, a React framework for building cus... by gwillz on Thursday June 23, 2022 @07:30PM (#31856363)
Something I don't think Vue has ever got right was the incomprehensible stack trace at the sight of any error. Or maybe I'm missing something.

After working for a few years in reactive frameworks like Vue and Svelte, I feel I am longing for the simplicity of React now.

Re:How we built Hydrogen, a React framework for building cus... by halostatue on Thursday June 23, 2022 @11:42PM (#31857557)
I’ve found React the complex one, especially with reactive context wrapper hooks (or whatever they’re called). I have a high confidence that when I do an "Inspect element" on a Vue or Svelte component, I’m seeing the tree pretty close to how Vue and Svelte see it. In React, there’s at least twenty hidden layers (at least according to the React development tools last time I touched React code; it was horrible).
Re:How we built Hydrogen, a React framework for building cus... by gwillz on Friday June 24, 2022 @02:28AM (#31858394)
You're not wrong. "Higher order components" might be the phrase you're looking for. I could argue that they're not really very popular any more with the introduction of the hooks API. But even without those there's a lot of transient things in the tree that I can't explain.

Vue really got it's act together in many ways from very start. Single file components are super ergonomic. I don't feel React ever nailed that with at least 10x different solutions. That and global state with VueX is so natural compared to, again, 10x different solutions in React.

Vue is a delight in many ways. I'm just currently seething over some issues I had with it's reactive state - and that's where I'm really siding with React. I could go on but I know it's a total rant.

Re:How we built Hydrogen, a React framework for building cus... by halostatue on Friday June 24, 2022 @10:06AM (#31862045)
I’m less happy with the Vue 2 -> 3 transition, partially because I think that Vue 3 is probably best described as "React, but designed", so we’re investigating Svelte for our next iteration of real web UIs (as opposed to whatever the hell it is that Flutter provides).

In many ways, Svelte 3 feels like what Vue 3 should have been. The whole way that hooks works feels ugly and inelegant.

Re:How we built Hydrogen, a React framework for building cus... by qudat on Thursday June 23, 2022 @07:02PM (#31856177)
> while being less complex

Idk, I found the svelte reactivity model a little confusing.

Re:How we built Hydrogen, a React framework for building cus... by 0xy on Thursday June 23, 2022 @10:34PM (#31857230)
I'd quit any job that made me work on a jQuery/vanilla JS labyrinth. React is the best thing to ever happen to frontend development and from my perspective most contrarians on the topic haven't taken the time to learn React and simply immediately dismissed it.
Re:How we built Hydrogen, a React framework for building cus... by halostatue on Thursday June 23, 2022 @11:46PM (#31857584)
React and JSX are, at best, mediocre. I consider it much more like C++: you’re much more likely to blow your foot off with React than with anything else. The codebases are excessively complex, completely magic, and impossible to debug in comparison to pretty much any other comparable framework, including modern Vanilla JS (with or without Web Components).

I agree with you about jQuery. It had its place. It’s painful to encounter now, especially since it can screw up any other framework that you want to put into a website.

Re:How we built Hydrogen, a React framework for building cus... by 0xy on Saturday June 25, 2022 @02:29AM (#31873048)
Maybe you've worked on the wrong React codebase. It's come a long way from the Redux & class-based monolith structures from early React.

The components I work on and write are all narrow in scope, self-contained and completely testable with no crazy side effects + minimal global scope.

The easy path on React is small functional components.

Re:How we built Hydrogen, a React framework for building cus... by louissm_it on Friday June 24, 2022 @05:19AM (#31859429)
React is * old * (in the frontend world), stable and very very well known. It is a solid, responsible choice to build your framework on top of React in 2022.

You can upgrade a 7 year old React app with very little fuss. Unfortunately, you cannot say the same about Vue or any of the modern libraries. They also have no track record to indicate they will exist 10 years down the line, but I'm pretty sure my React apps will still be fine.

That being said, I'm very excited about SolidJS[1] and the other modern libraries that use JSX.

[1] https://www.solidjs.com

Re:How we built Hydrogen, a React framework for building cus... by halostatue on Friday June 24, 2022 @10:08AM (#31862077)
Vue is about as old as React, and upgrading a React app from class-based to hook-based is as much, if not more, work than going from Vue 2 to Vue 3 (but I don’t want to do either one).

I’m exceedingly unexcited about anything that uses JSX, which is a blight on the landscape.

Re:How we built Hydrogen, a React framework for building cus... by alx__ on Thursday June 23, 2022 @10:00PM (#31857091)
If they had used any other library there would have been a comment like this telling them they're doing it wrong.

Same thing any time WordPress does anything notable.

Teams make tech decisions based on multiple factors. Sometimes the ones like "bizarrely deep object tree that is impossible to reason about" are found to be less important. Because at the end of the day websites are for the wider public audience, who aren't affected by bike shedding

Re:How we built Hydrogen, a React framework for building cus... by Existenceblinks on Friday June 24, 2022 @12:52AM (#31857931)
Also react-dom.min is 15 times larger than solid/preact/lit-html/svelte, is on the bottom of every perf benchmark, and yet we pretend to have engineering mindshare. It feels like new coming kids would just skip engineering school/university just fine for working in this industry. Disappointed.
Re:How we built Hydrogen, a React framework for building cus... by rk06 on Friday June 24, 2022 @10:06AM (#31862039)
It would not work with other tech. It is a multi year project and such require reliable tech more than anything. Any other tech could become a liability in a couple of years
Re:How we built Hydrogen, a React framework for building cus... by ZephyrBlu on Thursday June 23, 2022 @06:13PM (#31855747)
React developers are cheap? So much wat.
Re:How we built Hydrogen, a React framework for building cus... by cypress66 on Thursday June 23, 2022 @09:53PM (#31857066)
I don't know why you're downvoted. React jobs are indeed among the best paid front end jobs.
Re:How we built Hydrogen, a React framework for building cus... by afavour on Thursday June 23, 2022 @10:33PM (#31857227)
But entry-level React jobs are also very common. There are entire coding schools dedicated to teaching React far more than general JS.