Hacker News new | past | comments | ask | show | jobs | submit login
React v0.13 released (facebook.github.io)
207 points by tilt on March 10, 2015 | hide | past | favorite | 62 comments



I'm looking forward to deleting all the annoying `.toJS()` conversions everywhere I've used an immutable-js collection rather than a js array. (PR: https://github.com/facebook/react/pull/2376)


Oh god, this. Using Immutable (via Immstruct) has been glorious, but this has been a minor annoyance that I'll be glad to be rid of.

Now all I need to do is sort out some issues with dispatch and I'm good to go...


Does Immstruct use Immutable's cursors? If so, you'll still need to use .toArray() when dealing with a cursor to an array. React doesn't like what you get after mapping over an IndexedCursor.


It does, but you can just .deref()


I'm usually looping over cursors I want to pass as a prop to a child component. Deref-ing there would sorta defeat the purpose of cursors.


Ah, fair enough. I usually deref before handing the data off to the rendering chain, on the basis that future updates will just kick off another render loop.


I'm curious to see how mixins play out with ES6. While something similar to 'include' in Ruby would be nice, I've got a hard time seeing how that would fly with multiple invocations of getInitialState, for example.

Of course, the big thing we're all waiting for is Native. If that truly offers a bridge, rather than a wrapper, to native APIs from Javascript, then it will be a game-changer.


Most cases of mixins (especially ones that involve state, as you allude to) can be implemented via composition by creating wrapper components instead. This is how Relay (http://facebook.github.io/react/blog/2015/02/20/introducing-...) works and makes different components more contained and easier to reason about. Here's one description of how to develop containers (really, higher-order components) from someone who works on Relay:

https://github.com/ericclemmons/react-resolver/issues/8#issu...

(We know people are excited about React Native and we're working hard to get it out the door – keep your eyes peeled!)


Like spicyj said, the wrapper components pattern works really well. Some people have started referring to this as a separation between "smart" and "dumb" components. For instance, "smart" components do things like fetch data, then pass the data as props to "dumb" components. It's a cleaner separation of concerns than having a single component do everything via a mixin.

This is the pattern that the Flux library I wrote uses: https://github.com/acdlite/flummox/blob/master/docs/api/Flux...

I wrote also wrote a bit about why components are generally preferable to mixins: https://github.com/acdlite/flummox/blob/master/docs/why-flux...


I strongly feel that React Native is going to come out right around F8, but cannot prove it other than that the React team seems to be speaking there and this comment on twitter https://twitter.com/reactjs/status/573872611853123584

I'm getting pretty excited to start working with React Native either way.


The ES6 class system seems to be done to feel more like java and c# without regard for the mixin/prototype parts. I'm glad React still works with mixins. (edit spelling and clarification)


The ES6 class system is literally just syntactic sugar for prototypal inheritance.


No, it's syntactic sugar for one particular approach to using prototypical inheritance that resembles "traditional" OOP.


I think one of the biggest irks for me personally when using ES6 is how `this` works.

class Foo { constructor() { this.whatever = 4; }

  bar() {
    this.whatever = 3;
  }
}

var foo = new Foo();

blah.onSomeEvent(foo.bar);

// When SomeEvent is triggered on blah, `this` will refer to blah, not foo.

console.log(blah.whatever); // 3 console.log(foo.whatever); // 4

// You have to: blah.onSomeEvent(foo.bar.bind(foo));

console.log(blah.whatever); // undefined console.log(foo.whatever); // 3

Which I know is just traditional JS, but it's a little unexpected because that's not how most OO languages operate.


Can you explain? It's sugar for this very common pattern:

    function Bar() {
      Foo.call(this);
    }

    Bar.prototype = Object.create(Foo.prototype);
    Bar.prototype.constructor = Bar;

    Foo.prototype.thing = function() { ....

What other "approach" to prototypical inheritance is there in JavaScript? The module pattern doesn't use prototypes.


This blog post and presentation discusses this in more detail. http://ericleads.com/2013/02/fluent-javascript-three-differe...


Is there a good book or website to learn about prototypical inheritance? I've read a lot of Crockford's book and some stuff online about it, but I've never run across the pattern you use above.

It would be great to know what the benefits are vs declaring function literals on an object, or declaring a function directly on Bar's prototype.


Mozilla's documentation does a good job explaining prototypal inheritance:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inhe...


My "Aha!" moment came while reading this Kyle Simpson blog series http://davidwalsh.name/javascript-objects


no, it's just syntactic sugar


Which is ultimately what separates a good language from a bad language. A good language should have ONE best way to do things. With the prototypical inheritance, there are impossible numbers of way to declare/define and inherit a class in JavaScript. That is just a trap for bugs and defects. How could you effectively understand what the code does when you can't read it in one glance? Especially code that is not yours.

ES6's class system is infinitely better.


If one is not confused by prototypical inheritance, is there any reason to use the ES6 class system?


- More declarative.

- Harder to screw up. Even if you know what you're doing, prototypical inheritance involves several steps which can get repetitive.

- Interoperable with non-es6 "classes". It's not like you're losing anything.


Actually it might be easier to screw up. People will think these are real traditional "OO" classes but they are not. Its all prototypal, and you will be in a world of hurt creating bug and performance hits if you treat them as if they are the same. Also, functions inside a ES6 class are hijacked. You cannot bind those functions to work on another context which is a core javascript technique, it will break. Thus in the end, any person familiar with javascript will have to learn even more caveats which will create more confusion. You wouldnt want to use ES6 classes on anything super complex.


it reduces the necessary LoC and forces you to only define methods in the [[Proto]] land. ES7 will let you define properties in it, but it will effectively be as if you defined them in the constructor.


Yes, it prevents the very common mistake of putting an object on the prototype.


no, it introduces a "super" semantic with late binding ,something you can't do in ES5. So it isn't just syntactic sugar. Furthermore it may evolve in later versions of ES to something even more complicated with access modifiers and things like that.


Isn't it just (untested, probably full of errors):

    function super(obj, method) {
        for (var p = obj.prototype; p; p = p.prototype)
            if (p[method])
                return p[method];
        throw method+" not found";
    }
then use:

    subclass.prototype.overridden = function(x,y) {
        super(this, 'some_overriden_method').call(this, x, y);
        // ...
    }
If so, that means it's just sugar. If not, what does it do differently?


Sadly, the much-discussed explosive second half of the PATENTS file is still present: https://github.com/facebook/react/blob/91b45641b8bfbdecace94...


"much-discussed" by "less-informed" I'd say.

There is nothing sad about React PATENTS file.

1. React source code is licensed under the Modified BSD license.

2. React also comes with a conditional patent grant. Here "conditional" means that the patent grant may terminate under some conditions. It does not terminate 1.

Most BSD and MIT-licensed software you use comes without a patent grant at all.

Still sad?



Thanks - I somehow managed not to look at that (saw it now after Twitter feedback). I can't edit my earlier comments so I'll just amend here instead: There are open source lawyers who consider simple permissive licenses such as Modified BSD and MIT to have an implicit patent grant. The first public discussion I found on this after a quick search is at http://lwn.net/Articles/389016/ - would love to see more and earlier.

If you the licensee also consider Modified BSD to have an implicit patent grant then the React patent grant is much worse for you than if it hadn't existed.

Guess I'm less less-informed now.


Remaining silent on patents is better than issuing an unfair and one-sided patent license.

If Facebook doesn't intend to assert its patents aggressively, why does it want to prevent users of React from defending themselves?


Now, I don't know what makes things "better" for you but from the perspective of most licensees it is probably legally better to have a conditional patent grant than none at all, most of the time. But it will vary depending on, for example, the licensors (their) and licensees (your) patent portfolios and intention to enforce those aggressively as well as your strategies of defense. There's a huge difference between a company such as, say Oracle and Facebook, here.

Granting patents in the context of permissively licensed open source is a generous act and making the grant conditional is a way of not giving up your ability to form the strongest possible defense when you're brought into patent litigation. If you have been following along the recent years events (where is that patent apocalypse, anyone?) then it should be no surprise why companies need to do that.

Conditional patent grants are not new. Apache License v2.0 has a conditional patent grant [http://www.apache.org/licenses/LICENSE-2.0]. Google added a conditional patent grant to WebM, complementing its Modified BSD license [http://www.webmproject.org/license/additional/]. Google's Dart project is licensed under Modified BSD and has a.. you guessed it - conditional patent grant [https://code.google.com/p/dart/source/browse/trunk/dart/PATE...].


None of the patent grants you mentioned are as one-sided as Facebook's. My problem is not with a conditional patent grant. My problem is with Facebook preventing React users from defending themselves against lawsuits for unrelated patents.

Apache, GPL, MPL, etc. have retaliation clauses that terminate your patent license only if you sue (or in some cases, countersue) in relation to the covered software. Facebook's patent grant says you can never sue Facebook, while being vulnerable to being sued by Facebook for anything but React.

Edited for clarity.


Thanks for being specific. I agree that Facebook's termination clause is crafted to benefit Facebook more than should they have used similar language to Google's (or APL2.0). A less defensive patent grant would have been more generous.

But I'm not sure I agree with your conclusion though.

Scenario one: MYCOMP uses React in a product, decides to sue FB because FB uses the term "It's complicated" which MYCOMP was granted a patent for by the US patent office (the phrase was translated into a dual-ROT13-machine for the purpose of the patent application). MYCOMP had tried to get FB to pay them a reasonable license fee prior to suing but Facebook neglected. Now MYCOMP does not have a patent grant for their use of React any longer but isn't that then ~similar to as if React didn't have any patent grant to begin with (from a litigation perspective) - like most MIT and BSD licensed software we use? Had I been with BIGCORP I'd have asked the legal folks or our favorite patent attorney but now I'm solo so I'm throwing out the question here for further discussion.

Scenario two: FB sues UCOMP (who uses React in one of their products) for patent infringement of FB's "Send message from client to server" patent (nicely masqueraded in the patent application). UCOMP decides to counter-sue and we have a situation similar to scenario one.


When FB gives you a patent grant, it implies they have patents they could sue people over. An MIT or BSD copyright license alone could mean there are no patents to grant.


In spite of being here several times a day, every day, I somehow completely missed this discussion. For anyone else in my situation: https://news.ycombinator.com/item?id=9111849


Link to previous discussion(s)? Having a difficult time understanding it in layman's terms.


Is it possible for another company to create something like React?


Why a company:

https://github.com/Raynos/mercury

All react best practices converge on what mercury has done out of the box since day one. React's advantage is it's community. There are more docs, examples and tutorials.


Yes.


I wonder why they released it without some support for mixins. Right now you might start with a ES6 class and then you need to go back to the old class system if you want the mixins because of a reusable component you use.


It's true that ES6 classes don't cover all existing use cases yet, which is why I specifically mentioned in the blog post that we're continuing to support React.createClass fully. The main Facebook site is still using React.createClass everywhere, though we are starting to use ES6 class components for some smaller projects here.

As I mentioned in another comment on this thread, many mixins can be implemented as higher-order components that we call "containers". Many others relate to data fetching, so we're looking at adding first-class support for data subscriptions which can replace even more uses of mixins. (And in my experience, it's rare to add mixins to a component after it's written.)

ES6 classes aren't suitable for everyone yet ("Ask your doctor if ES6 classes…") but they're a new API which is more convenient for some use cases, so we chose to add it now instead of waiting until we're at perfect feature parity to give people the chance to use the new syntax.


The thing is that I would like to use ES6 classes. There are some situations where it just feels so bad to do "if (this.doFoo !== undefined) { this.doFoo(); }" because you can't really define empty interfaces in mixins.

Subclassing would help a ton here.


Mainly to support ClosureScript and other languages.

There are ways to go around the need for a mixin, usually through composition, so with a certain coding style you might not need mixins at all.


The problem are mixins from elsewhere. But yeah, most of them can be replaced.


I'm really excited for `React.cloneElement` and inlining of `React.createElement`! `React.cloneElement` makes a bunch of tricks that used to require hacks much cleaner, and finally promotes cloneWithProps to non-addon API and removes the confusing magic. And if `React.cloneElement` starts getting compiled into object literals it's going to speed up large render calls significantly, and make the overall React API feel a bit simpler (to me).


Any news about React Native?


Wonderful. I love the new ES6 syntax. To continue the discussion of mixins, the 0.13 beta announcement mentioned there are ways to roll own your mixins but can anyone offer examples of how to accomplish this?


Any idea why React.addons.classSet is now deprecated? It was really helpful.


Not sure but it's very easy to implement it yourself... Check this https://github.com/facebook/react/blob/2aeb8a2a6beb00617a421...

But I also miss it, yeah, very useful addon.


From the release notes:

> React.addons.classSet is now deprecated. This functionality can be replaced with several freely available modules. classnames is one such module.

https://www.npmjs.com/package/classnames


Why is the second paragraph a shout-out backhand compliment to Ember and Angular?


How is it a backhanded compliment? The React team is obviously proud of their work, and used it as a point of reference that they believe they can do better than what is there now too.


the compliment is that the other frameworks are improving their rendering speeds. the backhanded part is it implies they're slow.


They're just acknowledging that everything is moving forwards, I imagine that they're pleased to have influenced the other frameworks. Ember in particular seem to have learned a lot from React and are adopting a virtual-DOM approach to rendering.


sure, the same way i can "just acknowledge" that my friend is losing weight but is still fatter than me.

it's a backhanded compliment.


Considering React says that there are things they can do to improve React even more, suggested to me that React is currently as fast or slower than those other frameworks, but React can once again become faster than them.


i can't be sure about Angular but they directly reference Ember, who published recently that they are improving their (notoriously slow) render times by moving to a virtual DOM model like React.

what they're actually saying is, React is getting even faster while other frameworks try are playing catch-up.


Angular has improved performance 30% from 1.2 to 1.3, and is slated to improve it another 30% from 1.3 to 1.4 (1.4 has a release candidate currently) - that is one of many reveals from ng-conf. Angular 2 has been revealed earlier that it is 5-10x as fast as Angular 1.x (depending on the task), which probably makes it notably faster than React.

Performance is still something that every framework is striving to optimize - this is only a good thing when teams announce that they are working to improve their performance, mobile is still hard with the DOM.

Each of the frameworks draw positive influences from each other, and don't hesitate to give each other credit - the React team praised the idea behind ng-animate for programmatic CSS transitions, the Angular team directly drew from React for the idea of unidirectional flow for Angular 2 and built on top of Ember's route-recognizer for the new router.


> what they're actually saying is, React is getting even faster while other frameworks try are playing catch-up.

Isn't that true?




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: