Comment by halostatue | Hacker News Reader

Comment by halostatue | Hacker News Reader

Parent Full thread

"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.

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.

you fucking nailed this. thanks for writing this out so i didn't have to

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“?

> 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

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.

Reply on news.ycombinator.com