Live data from Hacker News

Removing User Interface Complexity, or Why React is Awesome

jlongster.com

21–30 of 228 posts

Re: Removing User Interface Complexity, or Why React is Awesome

#21
post #11

Please don't break the back button (Firefox and Chrome). In Firefox 29.0 on Ubuntu 14.04, the left sidebar with the text of the blog disappears and is replaced with a white space. I do not experience this on Chrome.

I just tried it on Firefox 26 on OSX and could not replicate. It has worked for everyone I've had test the page. The only thing that happens when you press back is the animation to load the right demo. There might be something buggy with how the CSS animation is using your graphics driver?

Re: Removing User Interface Complexity, or Why React is Awesome

#22

Instead of having React altogether, wouldn't it make sense to have the browser keep track of a virtual DOM, and only repaint whatever changes on its own, while managing its own requestAnimationFrame and paint cycles? P.S. I haven't looked into this in depth, just throwing an idea out there.

Yeah if the technology was in the browser that would possible.

From what I understand, the core idea is that changes are applied to the virtual DOM in a very simple way (from the application point of view). Then there is another piece of code that knows how to efficiently find the diff between the vDOM and DOM and apply the changes. It seems that last part could be done by the browser.

Re: Removing User Interface Complexity, or Why React is Awesome

#23
post #11

Please don't break the back button (Firefox and Chrome). In Firefox 29.0 on Ubuntu 14.04, the left sidebar with the text of the blog disappears and is replaced with a white space. I do not experience this on Chrome.

Add Opera to that list as well, or anything Blink based i would assume

He said he did not experience in Chrome. Is there any chance you could take a screenshot/screencast of the bug? I haven't been able to reproduce.

Re: Removing User Interface Complexity, or Why React is Awesome

#24

As a recommendation to the author, it would make sense to show the example/demo area the whole time, not only once I scroll down. It confused me. A lot.

Agreed, I really like the demo area but it's a bit of a shock when it first shows up.

Sometimes a shock is good. I took it as, "Hey, this page just gained new abilities." Then I clicked and moused over the square and the triangle to see what they were about.

Re: Removing User Interface Complexity, or Why React is Awesome

#25

Earlier quoted context omitted.

Not even if bower let you search by component type or some kind of category or tag?

The best interface for a react UI component repository would be something that had information like: * A picture of what the component looks like * How large the component is in KB * Which CSS frameworks it requires or supports * Cross browser support information Bower is a very simple package manager right now with little information about the package beyond its name, a line of descriptive text, and a link to the Gi…

[deleted]

Re: Removing User Interface Complexity, or Why React is Awesome

#26
I was at a meetup where the speaker suggested react is great for business-like apps, but for things with an insane amount of dom objects like html games, it tends to get bogged down.

Since React claims to be super fact, has done a performance comparison to see in what situations and how much better react performs in certain cases, compared to say, angular.js or more vanilla frameworks?

(Also I hear that there is a really great speedup that using OM gives you, but I haven't seen any comparisons with om either)

Re: Removing User Interface Complexity, or Why React is Awesome

#27
post #7

Earlier quoted context omitted.

Bower and component are more like package managers. GP is talking about a library of re-usable user interface components. Unfortunately, my best attempt at an analogy is Visual Basic controls, which might not be a great precedent, but the idea itself is a good one.

Well they just edited their initial post to specifically use a `bower` command rather the theoretical `react` command, so I'm not sure. What would the different be between your VB-style controls and something like this confirmation popup: https://github.com/component/confirmation-popover

React has a much richer notion of what a 'component' is. To date, most JavaScript libraries lack shared assumptions about how you will build your UI. jQuery plugins make only the extremely minimal assumption that you will apply the plugin to some DOM element - beyond that, how the plugins behave, how they manage their state, properties etc. is not defined by any standards or even assumptions.

The confirmation popover you link to is a good example. It's a black-box component which exposes a fairly minimal interface. The constructor for this component works like this:

  new ConfirmationPopover(msg, [title])
To attach the popover to an element you need to do:

  popover.show(el, [fn])
However, if we take another component from the same library, the swipe component[1], we see different conventions. Its constructor:

  Swipe(el)
It also has a show method which takes totally different parameters:

  .show(i, [ms], [options])
This is why I describe such systems as package managers or library managers - they're just a way of importing and exporting code and don't do anything to aid reuse. They're not particularly likely to play well together, lack standard interfaces and are almost certainly not composable in any meaningful way.

React components are different because React defines some standard details of how components behave, how to extend them, how to inspect them and pass data back and forth. Components can contain other components, and all components have a relative place in the render tree. This makes possible standard developer tools that can be used to observe and inspect components in a DOM-like tree structure[2].

So, you could certainly use bower to distribute React components. What's different about React isn't how the code is distributed but the fact that you can have expectations about how, say, a React photo gallery component would behave that you would not get from some other JS library.

[1] https://github.com/component/swipe [2] http://facebook.github.io/react/blog/2014/01/02/react-chrome...

Re: Removing User Interface Complexity, or Why React is Awesome

#28
post #17
post #5

I really like the core concepts of React, especially the way it is designed to help you organize your code into reusable components. I think the key to making React take off is building a centralized repository for components that are open source. Then building your webapp would be as easy as importing the components you need: bower install react-navbar bower install react-signup-form bower install react-sso-signin-f…

I'm working on an app that takes this idea a step further. It is a platform that lets people create apps by defining a data schema and UI components to edit and display this. Once an app/schema/component is defined, it can be "forked" by others and further customized. Think github not for source code, but live apps[1]. One of the key requirements for this was a way to run untrusted scripts client-side (server-side is…

That is pretty interesting. So using Fora you can jumpstart a new app by defining all your data models, and then select a bunch of components to build a skeleton view that makes use of those models?

If so this will be very useful, especially since it sounds like it will allow us devs to spend more time on the business specific logic, and making the interface beautiful, instead of spending lots of time gluing together components and models.

Re: Removing User Interface Complexity, or Why React is Awesome

#29
As mostly an outsider to the web front end development, React.js is probably the easiest one for me to understand among the typical "frameworks", especially Angular and Ember.

After all the excitement about Angular for example, I went to learn about it and just got lost with new concepts: DOM transclusion, scopes, services, directives, ng-apps, controllers, dependency inversion and so on. I can use it but need someone to hold my hand. It reminded me of Enterprise Java Beans.

But so far just learning how React is put together and looking at the tutorials it seems like less of a framework and easier to understand altogether. I suspect this might become the new way to build web applications.

Well anyway, don't take this too seriously, I as said, I am an outsider to this.

Re: Removing User Interface Complexity, or Why React is Awesome

#30
post #29

As mostly an outsider to the web front end development, React.js is probably the easiest one for me to understand among the typical "frameworks", especially Angular and Ember. After all the excitement about Angular for example, I went to learn about it and just got lost with new concepts: DOM transclusion, scopes, services, directives, ng-apps, controllers, dependency inversion and so on. I can use it but need someon…

I feel your pain. I'm a backend guy who has to learn front end all of the sudden. To my mind, React just makes sense. I understand that other modern frameworks like Angular and Ember "make sense" as well, in that they're current best implementations of well-understood best practice, but from my outsider perspective, it looks as complicated and baroque as Catholic theology. Yes, it's all very beautiful and such, but I don't know if I'll ever be able to instinctively grok it.

React? I grok that.

Post reply on HN