Hacker News Reader

Comment by hieKVj2ECC | Hacker News Reader

After spending so long writing React code, I'm now working on a large Vue project at work. Everyone used to say Vue was the easier of the two, the more approachable option — but I'm starting to see it differently. React, in its elegance, gives you components that are essentially just functions — and beyond that, there's not much more to it (setting aside the whole Next.js ecosystem). It's the most elegant thing I've encountered in frontend development. Vue, on the other hand, feels like a jumble. You can tell it was clearly adopted and glorified by backend developers who didn't want to properly learn JavaScript — and what emerged is this awkward mashup that never quite coheres into something clean.

View on HN

I never get this take. A react component is not just a function, it's a function plus a magically injected context that is accessed through hooks which requires all kinds of guarantees that you have to be aware of otherwise it will have hard to debug consequences. Imo it's anything but elegant. I did projects in all major frameworks and am building a huge angular web app currently. In angular a component is represented as a class plus template (plus styles). A event listener is mostly calling a method on the class. A state can be as simple as a property on the class. It's very natural and there are way less caveats (although not zero).

Maybe you would prefer React's class-based syntax. It's still there if you want to use it

I actually do and my critique is directed at function components which seems to be the standard nowadays.

> I never get this take. A react component is not just a function,

Exactly.

I did a somewhat longer writeup a while back.

https://blog.metaobject.com/2018/12/uis-are-not-pure-functio...

The pull request is still open :-)

Interesting that you still stand by that, even after Apple moved to the exact same model with Swift UI.

Narrowmindedly worrying about syntactical differences is contributing nothing to the conversation. The point is relinquishing control of state to the framework (be it via props, hooks or @State), and drawing the UI as a pure representation of whatever the framework tells you. Hence ui = f(state). This gets you a metric ton of advantages, which is why every modern framework is doing it.

Classes, by themselves, are inadequate as containers for state unless that state must only exist in memory and never be observed, synchronized or serialized. You can attempt to patch that with decorators, ORMs or whatever, but now you're doing the same thing as React is doing with functions.

Interesting that you would think Apple introducing Swift UI would have any bearing on the correctness of that blog post.

Why do you think it would?

Did you misread my post as "ha ha, Apple does it differently and therefore react is wrong"?

If so, you certainly misread it a lot, and you have the wrong person. I have tons of posts about Apple getting things wrong.

Anyway, did you miss the following part?

I also think that despite all the flaws, react.js and react.native are currently eating native development's lunch.

Clearly I made the point in my post that this approach has a lot of mindspace, despite the obvious flaws, so not sure how you pointing out that this approach has a lot of mindspace invalidates my post.

> Hence ui = f(state).

Every UI is always some mapping of the state. Otherwise it isn't really a UI, is it? What would it be, in your opinion, if it didn't map the state?

> pure representation

What does "pure representation" mean to you? I covered in the post that it sure as hell isn't a pure function of the state. And cannot be.

Did you miss the part where David Abramov conceded that point?

To elaborate a bit, React components aren’t always “pure” in strict FP sense of the word. They’re also not always functions (although we’re adding a stateful function API as a preferred alternative to classes soon). Support for local state and side effects is absolutely a core feature of React components and not something we avoid for “purity”.

> This [ui=f(state)] gets you a metric ton of advantages,

Well, yes. Like being a working UI, for example, which is why MVC is also structured this way.

But can you elaborate the specific advantages you believe the react approach gives us over, say, MVC?

The post elaborates that it would be really nice if UI were a pure function of the state. But it just isn't. And trying to pretend that it is might seemingly buy you some of those advantages, but at a huge cost.

Maybe it's a me-thing, but when I see the creators of a system I trust basically deprecate it, then I try to re-evaluate my viewpoint. Also, when I read the post a few years back, I honestly thought that it must have been a product of its time.

> Every UI is always some mapping of the state.

Sure, but it previously wasn't described as such. It was described as a list of imperative operations "if x do that" (unless the developer just gave up and had a giant refreshEverything() function). IIRC, at the time, MVC had a common problem of controller bloat, precisely because it was trying to perform the reconciliation between view and model imperatively rather than simply describing it as a function. MVVM solved this partially with data-binding, but depending on the framework, you still had lackluster handling of derived state inside the view-model.

> What does "pure representation" mean to you?

I mean that, the render function of the component is a 100% pure function of the state that the framework injects. By "render function" I mean everything except the statements beginning with `use...`. Those are just React's syntax for defining the component. Another framework such as SwiftUI might have defined them outside the function.

> But can you elaborate the specific advantages you believe the react approach gives us over, say, MVC?

There are so many resources on this, so I don't know what I can say to convince you, but I'll try:

* The Compiler. Regardless of whether you think it’s self-inflicted complexity (I don’t), functional patterns generally are easier to statically analyze and transform.

* Transitions, concurrent rendering, suspense, & time-slicing. All of these are possible by rendering components with outdated state. A low priority update may trigger a loading state and defer its commit. Meanwhile, high priority updates can continue to work as usual. In the past ~2 years, this is easily where I've seen the most UX & DX gains in frontend.

* Most importantly: readability. Even if components are only 90% pure, I still see side-effects and state clearly marked. Even in MVVM, I've seen so much spaghetti from my coworkers. In React & post-React frameworks, when debugging a component, I have a much narrower range of things I need to check. For example, I don't have to worry that an object I'm reading from is being mutated by a component on a completely different route.

Overall, the reason why this post rubs me the wrong way, is that you took a theoretical design document, misunderstood it for the actual, practical implementation and snarked at the authors for not going with the "obviously correct" solution of OOP. Not seeing the bigger picture in 2018 is understandable, but now it's... interesting.

> but when I see the creators of a system I trust basically deprecate it,

What makes you think I trust Apple? So yes, that's very much a "you thing".

And SwiftUI is laughably bad. And my very early criticisms of Swift, for example, have panned out precisely as I predicted.

> > Every UI is always some mapping of the state.

> but it previously wasn't described as such.

Yes it was. Except this was seen as the obvious given that it is. Because, once again, a UI that is not a function (mapping) of the model is not a UI.

"In Smalltalk-80, a view is just a visual representation of a model" -- https://en.wikipedia.org/wiki/Model–view–controller#View

> IIRC, at the time, MVC had a common problem of controller bloat,

Nope. Non-MVC implementations had the problem of controller bloat, because they didn't actually implement MVC.

> the render function of the component is a 100% pure function of the state that the framework injects.

Except, as I've correctly pointed out: it's not.

[Advantages]

None of this is in any way specific ("The compiler". Seriously?) or clearly an advantage that can be tied to this type of framework. So yes: you're not even close to convincing me. Because there's no "there" there.

> the reason why this post rubs me the wrong way, is that you took a theoretical design document, misunderstood it for the actual, practical implementation

You misunderstood the post. Completely. The document claims "pure function". This is laughably false. The question is what is left when you remove "pure" from "pure function". And the answer to that is: nothing.

That doesn't mean there are no benefits, but the benefits cannot be "what you get from being a 100% pure function", because it ain't.

Just like the benefit of butter can't be "it's 100% fat free". Because it ain't.

And if you keep insisting that those are the benefits, then I don't know how to help you.

And again, it doesn't mean there are no benefits, but they are both smaller than and quite different from what you claim. And with the benefit being fairly small, the other question is what the cost is of pretending this is so when it is not. And the answer is: pretty high.

And it's funny that on the one hand you go with the same "well, you're taking the "100% pure" thing too literally", when just a few lines above, you yourself made "100% pure function" the defining characteristic.

So which is it? Make up your mind. It appears to be Schröding-important.

Any UI that actually is a UI is some sort of function of the state. Otherwise it is not a UI but random graphics and/or decoration.

React uses an algebraic effectful function model which is elegant once one understands it: https://overreacted.io/algebraic-effects-for-the-rest-of-us/

So it makes sense because there's a fancy name for it? For a moment let's just imagine you are inventing a brand new UI framework. You obviously want to have components in it. So how do you represent a component in your new framework? A component needs state, logic and a way to render that state. Do you choose to represent the component as a class which naturally encapsulates state as properties and logic as methods or do you choose to represent components as functions which lack state so you bolt it on via an implicitly injected context that you access via abstractions?

Read into how OCaml 5 does it and you'll have your answer.

How long have you used Vue? I had a similar opinion on Vue a few years ago, coming from a background of React as well. But now I prefer it over React, and reach for it in both personal and professional projects. The ergonomics are a bit different; there are things that are easier to do in React, and things that are easier to do in Vue, but the fact that it uses signals is a huge plus for me.

Reply on news.ycombinator.com