Hacker News Reader

Comment by Touche | Hacker News Reader

I think the article explains it well, jQuery scaled down in a way that Dojo couldn't. I don't think you can fairly say that either Angular or React scale down in a way to enable the sort of amateurism that jQuery provided.

View on HN

I'm not the biggest fan of react, but it's pretty easy to slap a single component into a project using the cdn, a single require and a single jsx file. I mean it isn't as easy as jquery, but it feels like it's in the some order of magnitude of difficulty.

You're too much in-the-know. You skipped the build chain required to make this work. And if you make one mistake or do something not by the book you could easily wind up shipping the development version of React to your users (which is slower).

I think the analogy is so apt because Dojo users made the same arguments back in the day; that it really was easy if you ignore all of the parts that were not easy. They weren't wrong! But that didn't make it ideal as a scaled down solution.

> You skipped the build chain required to make this work.

Same thing when you just include jQuery and plugins from a CDN.

> And if you make one mistake or do something not by the book you could easily wind up shipping the development version of React to your users (which is slower).

Same thing with using jQuery from a CDN.

React itself is also tiny compared to Dojo. And Dojo never did anything truly new. This is all old stuff re-packaged for the web. Web programming is still catching up with PC desktop programming from the 90's.

React used to work this way[1]. They removed support for the JSX parsing without a build step[2].

The new tutorial explicitly requires a build phase -- no more CDN and ad-hoc running.

1 - https://web.archive.org/web/20150202210539/http://facebook.g...

2 - https://reactjs.org/tutorial/tutorial.html

Actually, in fact, you can still use React 16 from a CDN. [1], [2]

1 - https://cdnjs.com/libraries/react 2 - https://twitter.com/dan_abramov/status/893099358484353024?la...

This is in response to how accessible React is to beginners (amateurism).

The original tutorial allowed beginners to get started quickly (via CDN), even allowing them to write JSX via script tags in their HTML.

They can take that HTML and host it anywhere.

The new tutorial requires the usage of create-react-app or running the code on CodePen.

A tweet by a React core developer with instructions on how to get CDN support working better reinforces the point about not being open to amateurism, by the way.

You can still get React from a CDN and don't need to use JSX, though if you really want JSX, as smarx demonstrates you can use standalone babel to compile JSX in the client: https://news.ycombinator.com/item?id=15522420

No pre-deploy build chain is required.

Even jsx can be compiled on the browser, seamlessly.

No build chain is required, you don't even need JSX.

Correct, but it is more verbose and ugly to not use JSX. I guess the argument is you shouldn't be compiling things on the clients browser.

> Correct, but it is more verbose and ugly to not use JSX

I don't agree with that. I tend to prefer hyperscript to JSX (for personal projects) and I think it looks perfectly fine.

> I guess the argument is you shouldn't be compiling things on the clients browser.

How's that an argument at all?

You are saying this...

    var rootElement =
      React.createElement('div', {}, 
        React.createElement('h1', {}, "Contacts"),
        React.createElement('ul', {},
          React.createElement('li', {},
            React.createElement('h2', {}, "James Nelson"),
            React.createElement('a', {href: 'mailto:james@jamesknelson.com'}, 'james@jamesknelson.com')
          ),
          React.createElement('li', {},
            React.createElement('h2', {}, "Joe Citizen"),
            React.createElement('a', {href: 'mailto:joe@example.com'}, 'joe@example.com')
          )
        )
      )

...is just as readable as this?

    var rootElement = 
      <Div>
        <H2>Contacts</H2>
        <Ul>
          <Li>
            <H2>James Nelson</H2>
            <A href="mailto:james@james.com">
              james@james.com
            </A>
          </Li>
        </Ul>
      </Di>

The whole point of JSX is to make working with React more like html, because it is easier and more readable.

> How's that an argument at all?

Huh? You mean, the argument that you shouldn't be sending un-compiled content to the client? I don't know why I'd have to argue for this, but render speed is one of the big reasons. Also download size. If you don't recompile, you have to include babel as well, on the client.

Without touching any of the other points, your first example isn't hyperscript.

Oh, I didn't see that. I thought you meant raw React.

But even then, now you want people to learn a new tool to use React "simply"?

Yep, and it wasn't required of Dojo either. Optional complexity doesn't make something any easier to understand, especially when most documentation and community expects you to use the complex parts.

You are right, I see why OP's initial statement was wrong about React being "simple" because you could make it simple.

Did Dojo expect the community to use the "optional complexity"?

Are you saying you can do that with absolutely no build phase? For example, you can download vue.js and include it in your html page exactly like you could jquery.js back in the day and add a vue component to the page with no build step or toolchain or node.js or anything else involved at all. Is that what you are saying you can do with react?

Sure you can. (Same with Mithril.) You can use either library with just a <script> tag and no build process. The notion that you can’t and you have to use JSX + webpack is kind of absurd. It feels like that false notion has been perpetuated and got people thinking they need to use another library if they want to keep things simple.

Actually now that browsers have fetch, async and await, you can do a lot with just those and document.createElement. No need for frameworks.

That being said...build toolchains are essential for complex apps.

They may be useful and/or convenient but no, they are by no means essential.

I justified that with the word complex. In my mind, a complex app is one that is built and maintained by a team over a long period of time. I don't know what you're doing to maintain complex apps between a dozen (or couple dozen) developers on with <script> includes, ES5, and pure CSS & JQuery...but I'd really like to hear it in a blog post of some kind. I've worked on large code bases with those tools and it was a nightmarish experience just to upgrade to the latest version of JQuery. If you're fine churning your wheels doing all that stuff manually rather than depending on NPM...sure I suppose you can get by and waste a lot of precious time in the process. If you care about user experience and developer experience, however, build tools are absolutely essential.

You're missing the point, the same was true of Dojo.

The point is not that scaled down is possible, it's that it's the way. It's not for the sake of learning, like the React with script tags tutorial. It's how people actually build things with jQuery; they just start hacking.

I think this is what you're asking for:

    <div id="root"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );
    </script>

This is essentially what I meant. I think it's a great way to approach hacking on and learning React, Vue, or similar.

That sounds like work. With Angular, it's literally only

ng generate component my-component

Reply on news.ycombinator.com