4 ms·

I'm sorry but could you please explain? I've never heard React (or any software really) being described this way. How does React act as a scolding nanny? The la

• kristopolous 5y ago
  Sure, I'll take a snippet from an upcoming book of mine that I need to finish ReactJS has a wildly inflexible architecture that aggressively forces their users to conform to an orthodoxy. As an example let's say we have the following code function C() { var A = { something: () => console.log("hi") }, B = document.createElement('div'); B.onclick = () => A.something(); } This small snippet of code violates "best practices" in react and thus is almost, but not quite impossible to do. See the problem here is that B and A are directly interacting with each other. If we were to map things in react-land, they would show that C has "children" of A and B and here A and B talk to each other "horizontally" which is heretic to the purity of the orthodoxy. The hierarchical nature here is an unwavering assertion about the world. Essentially the claim is as follows: C / \ A---B The A <=> B is what forces us to wear a scarlet letter and live on the edge of the town. Therefore we no longer solve a problem. Instead, we are imposed upon us an aesthetic puritism do to a natural belief of "props down, events up". A popular way to do this basic programming technique that's been readily available in effectively every programming language since the first digital computer (Plankalkül had it in 1942) is the usual suspects either add "a new testament" to the orthodoxy, in this case with something called "redux" or figure out an acrobatic way to comply. Let's do the second. So we need to "pass down" things that will "pass up". We have a solution, now we must go backwards, first we will go into "classes" to make things more orthodox. class A { componentDidMount() { this.props.connector(this); } something() { console.log('hi'); } render() { return; } }; class B { render() { return <div onClick={ this.props.onClick }> } }; class C { constructor() { super(props); // here's our connecting function this.connector = this.connector.bind(this); this.onclick = this.onclick.bind(this); this.state = {connector: ''}; } connector(obj) { this.setState({connector: obj}); } onclick() { this.state.connector.something(); } render() { return ( <A connector={ this.connector } /> <B onClick={ this.onclick } /> ); } }; So to simplify this flow A -> B We now do C -> A -> C -> B -> C -> A Or as a diagram, we get the following: .---◢ ◣----. .▶B---▶C--. \ | ◤--'|\ ▼ / \____/ '►A-' See how we do multiple round trips passing things through C in order to maintain the hierarchy? This is how we stay within the orthodoxy If this looks like Ptolemaic astonomy, that's not a coincidence! In Ptolemaic astronomy the assumption of Earth being the center of the universe was enforced as the orthodoxy. As a result you got epicycles upon epicycles because the simpler model was forbidden. People were so committed to the more convoluted orthodoxy that anyone who questioned it was put on trial for heresy. Claiming that A -> B was even possible was the crime. The great success of React is in enforcing a new kind of authoritarianism: it enforces doctrine by explicitly disallowing heretical code.
  • nnoitra 5y ago
    If your flow degenerates into C -> A -> C -> B -> C -> A then don't blame React because you are missing something obvious(and basic).
  • thomashop 5y ago
    This is hands down the most nuts example I have ever seen used to make a point about code. A problem that I have never seen before, an extremely complicated description, a terrible implementation in react using class components, some weird circular diagrams. This looks like it's generated by GPT-3. What is this piece of code even supposed to do? function C() { var A = { something: () => console.log("hi") }, B = document.createElement('div'); B.onclick = () => A.something(); } In react: function C() { const A = { something: () => console.log("hi") }; return <div onClick={A.something} /> }
    • kristopolous 5y ago
      It's horizontal message passing. Your example is still hierarchical. About the classes: that chapter was written before they decided to change almost everything for the nth time. I'm glad you disagree btw. If everyone agreed with me than honestly, I'd not be pushing hard enough.
      • thomashop 5y ago
        Could you give a piece of usable code that highlights the problem? I really did not understand the point you are making from the example you gave.
        • kristopolous 5y ago
          I'll consider rewriting it. That section was about doctrine and aesthetics. For instance, you were talking about the functional component way of writing react, or how I talked about "If reality falls outside the doctrine and really can't be denied then instead of fixing the assumption more often the orthodoxy is amended. A new wing in politics, a new testament in religion, a new movement in the arts, and a new version in software. It permits the avoidance of admitting the failures of orthodoxy while permitting a mechanism to address its shortcomings." I don't think we'll come to an agreement on this and that's fine, it means I am staking a clear and controversial position which is my goal. Honest people can disagree and I really do appreciate your honesty. Thanks