Hacker News Reader

Comment by zghst | Hacker News Reader

React is so much different from other frameworks, I feel.

Someone that doesn't know React can basically come in and start working on a large app from Day 1. It is so much less frustrating than Angular, Backbone + Ember + handlebars, etc. You can continue to add features to a React application and not slow down.

Also React isn't unproven. Over 1 Billion people use a React application everyday (Facebook + Instagram web). Unlike Google with Angular, React is Facebook's baby, the FB team is constantly churning out great additions to React.

I feel though with these JS editors, they should just basically give up for the next 5 years or so. Switching between Atom / Brackets to Sublime or Vim is extremely painful, I can't stand how slow it is. I love adopting new technologies, but I do not have faith in JS applications outside of a browser, they are too slow and lack in features.

View on HN

>Over 1 Billion people use a React application everyday (Facebook + Instagram web) It's fun to actually see which parts of public websites are written with react by running this in the browser console:

  setInterval(function() { Array.prototype.slice.call(document.querySelectorAll('[data-reactid]')).forEach(function(element) { element.style.background = 'rgba(255,0,0,0.1)'; }) }, 500)

Some pages to try it on: https://instagram.com/natgeo https://www.facebook.com https://www.airbnb.com.au/go/US

edit: the snippet is from Pete Hunt who is on the core React team (https://twitter.com/floydophone/status/557348616080076800)

Fake test. React Components don't always return a DOM element, also not every element shows up all the time, instead you should download the React dev tools.

There are at least 30-40 top level components on Facebook. Nice try though.

You are of course correct that some React components will not be caught by this single-line test. It is impossible to truly know unless you are the author of the app, and that's the case even with React tools (e.g. you would not be able to identify my server-rendered components that are not mounted on the front-end).

The intent was not to provide a debugging tool - it's just to provide people with limited exposure to React a simple one-liner to help them understand what is meant when someone says Facebook/Instagram use React, and see some components in the wild. To that goal, using a simple test for data-reactid attribute will catch the overwhelming majority of in-the-wild use cases.

I'm sorry I attacked you, thought you were saying different

Thanks! That's really cool.

You can download react tools for chrome and check react usage by just launching developer tools.

That killed my facebook tab

    function() { Array.prototype.slice.call(document.querySelectorAll('[data-reactid]')).forEach(function(element) { element.style.background = 'rgba(255,0,0,0.1)'; }) }

is executed every 500 ms using command in question. So if the above function takes 500 ms or more to execute, the tab will get stuck (I would think).

Try just executing this command once:

    Array.prototype.slice.call(document.querySelectorAll('[data-reactid]')).forEach(function(element) { element.style.background = 'rgba(255,0,0,0.1)'; })

Yes, the attribute selector could be slow and/or the non-opaque drawing, I guess.

Instead of using a timer or a one time selector, just add a new CSS rule via a style tag

(function() { var style = document.createElement( "style" );

   style.innerHTML = "[data-reactid] { background: rgba(255,0,0,0.1); }";
   document.head.appendChild( style );

}());

I had the opposite impression when looking at the React docs. JSX was intimidating and getting the quick examples to work resulted in several errors. JSX is of course optional, but the way that Angular just worked, without any non sense of installing anything, is what really drew me into the framework.

I agree - I find React has a higher initial overhead than Angular. Frontend web development is complex, so in the long run, the complexities will still show if you make a misstep.

That said, I'm happy with my time so far with React. I haven't gone into nitty gritty engineering with it yet due to not having the time to start really coding on my project with it, but it has been fairly simple relatively speaking.

I'm excited for Angular 2 though - the amount of planning going into it is excellent, and I believe it will also turn heads with its simplicity & performance.

Frontend web development is seeing some exciting changes that should ultimately make our development ecosystem much better to work with.

JSX is simple, it is just simplified HTML. I think you may want to give it another try, sharpen your skills with it. It is not difficult to work with if you try.

And on installing things, it is basically what any developer does these days. We install tools for almost anything. Just think of the JSX tools as another tool in your belt to help with the translation. The paradigm shift opens up your palette to new technologies. For instance, you can go from using just JSX to using ES6 with JSX (babeljs) as well, with no added cost, all because you already have your build process set up.

JSX is XML and it can cause some confusion. For instance the fact that you can only have one root node is not obvious.

I will say though that when it comes to abstracting elements, this behavior seems to be implicit across the board (angular directive templates require the same, though they include a somewhat-informative error state).

As someone who has only begun to feel out React/JSX after developing some large, semi-complex enterprise UI's in Angular (with the respective back-end, usually an abstracted REST API) I'm finding the React model to be a lot more intuitive and scalable.

Angular is fantastic until you run up against problems with complex tasks that either must run outside of the digest loop or require manual control of painting/rendering to compensate for the abysmal binding performance.

it's very much not XML. it's closest to javascript.

It is obvious, because when you use a component, it's usage is as a single root node.

<component /> should not render multiple root nodes.

  return <h2>label</h2><SubComponent />;

That's illegal and will fail to compile and it's not obvious why that should happen.

Because render is a function, and it should return a single value... because JavaScript.

Thing is with React though, is that whilst it's initially a bit weird, once you get the hang of component lifecycle, there's very little conceptually left to learn, whereas with angular it just keeps getting more complicated.

JSX intimidated you?... I find that difficult to believe.

Intimidating was probably a poor choice of words. I guess odd would be better? Idk. It was just a deterrent for me. I can get over the syntax but the installation errors coupled with it being weird was just enough to make me drop the tutorial I was working on.

I do hope to start working with React again. It took me a few times to really get into angular so I'm sure once a guide comes out that really gets the details right I'll be fine. Something like this[1] for React would be amazing.

1. https://www.youtube.com/watch?v=i9MHigUZKEM

Do you know of a large open source react application that I can take a look at?

Check this list on on the React repo: https://github.com/facebook/react/wiki/Examples

Noteworthy, Flipboard's React Canvas - https://github.com/Flipboard/react-canvas

Webpack also has great examples - https://github.com/webpack/react-starter

Reply on news.ycombinator.com