Comment

Comment by tlrobinson

This is a pretty unfair comparison for React. He uses the "JavaScript has complex toolchains" excuse to not use best practices like JSX and a bundler, then claims React is verbose and slow compared to other solutions that use complex toolchains?

First of all, Parcel is a dead simple to use bundler that supports JSX, hot reloading, code splitting, and various file types (including TypeScript) out of the box: https://parceljs.org

Second, that React code is much longer than it needs to be, mostly due to formatting, but if you use function components and React "Hooks" it can be extremely short:

    const Counter = () => {
      const [count, setCount] = useState(0);
      return (
        <div>
          <p>The current count is {count}</p>
          <button onClick={() => setCount(count + 1)}>Increment</button>
          <button onClick={() => setCount(count - 1)}>Decrement</button>
        </div>
      );
    };
With the imports and call to "render" it's about 15 lines of code, which is much shorter than all of his other examples.

The class version (written how I'd do it) is about 25 lines, which still shorter. Here it is without JSX, using Preact's HyperScript-style `h` instead of `React.createElement`:

    class Counter extends Component {
      constructor(props) {
        super(props);
        this.state = {
          count: props.count || 0
        };
      }
      increment() {
        const { count } = this.state;
        this.setState({ count: count + 1 });
      }
      decrement() {
        const { count } = this.state;
        this.setState({ count: count + 1 });
      }
      render() {
        const { count } = this.state;
        return h("div",
          h("p", "The current count is " + count),
          h("button", { onClick: () => this.increment() }, "Increment"),
          h("button", { onClick: () => this.decrement() }, "Decrement")
        );
      }
    }
And of course these are toy applications, which aren't even representative of real applications. I'm not sure I can go back to imperative UI toolkits like GWT, etc.

The application size seems approximately accurate, but if you really care about bundle size you could use Preact (which supports most of React's features). The brings the bundle size down to about 10KB, which is also much smaller than his examples.

Load time is also unfair due to lack of bundling.

parent tlrobinson 7 years ago

Discussion

Live from the official Hacker News API

A modern reader for Hacker News · SvelteKit + Skeleton