Don't React
staltz.com
staltz.com
To get an idea of the size of the app, it has about 20 components. However, some of the components could (and probably should) be broken down. My hunch is that with refactoring the final number would probably be around 30 to 40.
Other frameworks that I have used professionally include Backbone.js, Knockout.js, and Angular.js. My subjective (i.e. non-scientifically-measured) experience with React.js was that it took less time to build a comparatively sized application, and there were fewer bugs. All frameworks have a learning curve, but I felt React.js was pretty easy to get into. There are not a lot of "things" you have to learn about. In this project I didn't have to train anyone else to use React.js, but I believe it would have been relatively easier to do than training for other frameworks, which I have also done in the past.
The bottom line is that my experience was very positive and I will definitely use React.js again on future projects, should a suitable one come my way. I'm sure react.js could be better, but the authors recommendation not to use it based on not being pure enough is total bs.
What did you use to manage state, data flow, communication to servers, etc?
Or are advocating reinventing the wheel and writing a bunch of boiler plate javascript to marshal data, update state, etc?
----
One major reason to use a JS framework is to enforce good design and coding practices to allow for more maintainable code.
You can certainly implement these patterns yourself in Javascript, but you are reinventing the wheel, which is an antipattern in pretty much all but the edgiest cases.
There is some stuff like routers etc. that you might not want to write yourself. Luckily there is a universe of components you can choose from, instead of one that some guy at google thought was good.
Of the implementations of Flux, Reflux is pretty good, with less hassle of a centralized dispatcher, and extra boilerplate.
What I don't get is that the `trigger` is essentially a store created action, which goes against the unidirectional data flow model.
That said the stores and trigger method are definitely one of the rougher areas in the app. Thinking back, the stores were probably the largest source of bugs, but they also contain more logic so it's reasonable to assume they would have higher bug density.
Reflux was a great stepping stone, but this is the area I would most like to refactor and/or spend more time on in future projects. Fortunately there's a lot of interesting work going on in this area right now.
Nonetheless I disagree with the point. My opinion after actually having used React.js is that it is more than a UI library. I've used other UI libraries and React.js is more "comprehensive." I do grant, however, that React.js alone will not suit most needs. You will generally want to add a few other pieces. In my case I also used refluxjs and react-router. I also used store.js as an abstraction for browser storage.
The React team clearly states their design goals here: https://facebook.github.io/react/ ... and they have nothing to do with reactive programming.
"Presentation author here. I should have taken this down before it popped up on HN or elsewhere. The video of this presentation is worth watching, because it's tongue-in-cheek through-out. But the slides are not worth reading, otherwise people take it seriously like it's happening here now. Cycle isn't the solution to everything, it's just one guy's ongoing experiment."
https://news.ycombinator.com/item?id=8819422
Anyways, I found the ideas interesting because I think that its use of Reactive Extensions solves a variety of frontend problems elegantly (and Rx works on backend problems too, making it even more compelling). I made a jsfiddle that explains a bit about Rx to hopefully provide enough context for "why would you use this?" http://jsfiddle.net/nmd88wum/
Anyways, sorry for the respost, and sorry to the author for dragging up something he apparently didn't want being dragged up again. :(
How that data gets into the components is your responsibility; you can easily use something like Baconjs/RxJS to do this.
EDIT: This apparently wasn't intended to be navigated by the general public, as explained by a comment below.
I love it when a page telling you not to use something fails at UX.
After entering the presentation, arrow keys work too.
You can also easily navigate it with your cursor keys though.
Programmers love to make things. When you make something, you want to bash the thing that you are "better" at. This comes will all kinds of blindfolds though (you may be on the right track, but you need to be aware of these blindfolds). There are so many examples as to why his criticisms don't hold. If you don't like something about React, it's easy to make your own base component and add your own Observable semantics. Check out Om, a ClojureScript framework on top of React, which changes all sorts of stuff (https://github.com/omcljs/om). React is a platform (https://www.youtube.com/watch?v=5hGHdETNteE).
Why is it so important to reuse React? When you author a new framework, another blindfold is lack of community. You don't understand how important it is that authors of React can download tens to hundreds of incredibly advanced components ready to use (like https://github.com/gaearon/react-dnd).
EDIT: Apparently, this presentation was tongue-in-cheek (https://news.ycombinator.com/item?id=9316187), which totally changes everything. I hate just seeing the slides!
I think it is important to weigh criticisms just as much as praise. This lets the best ideas get vetted by the community and developers can focus their mindshare solving other important problems.
It's definitely important to look at criticisms, but honestly, these aren't very good ones. It would have been easy to build his library on top of React.
EDIT: stronger criticisms in my opinions focus on how hard it can be to get started with an advanced app w/React compared to Ember, which takes a "bundle everything in" approach (the classic lib vs framework debate). Ember is a strong contender especially because it has a great community as well.
The author is probably wrong to dismiss React because of all the other benefits, and the community/platform aspects you brought up, but him complaining about these issues (the subset of his issues that are valid, that is) still provides a lot of value to the community.
By the way, virtual-dom is a little bit early to use for production application. For example, if you have some elements in your vdom, that are changing after you render it (i.e. like buttons, embeded posts, etc.), virtual-dom will be totally confused and unpredictable. For example, it can duplicate some elements on the page.
I believe it happens because vdom depends on its internal index to traverse real dom nodes. It is still a remarkably good piece of software.
I can't think of a reason that someone would use react and still bypass it do their own dom modifications.
On the one hand, yes, and on the other hand, I have never in practice had this happen when it was not my fault. I've also never had it be my fault unless I fell back on some old jQuery plugin or Google Maps or something that directly manipulates the DOM because I'm trying not to reinvent the wheel.
However, you can deal with these things gracefully by diligently recognizing these instances in which you, for one reason or another, need to directly manipulate the DOM. React's lifecycle methods like `componentDidMount`, `componentWillUpdate`, and `componentWillUnmount` are the place to deal with those kinds of issues.
It definitely takes you out of the React philosophy and forces you to manage your own state carefully. But that's generally confined to a single component, so if you get the component innards right, everything that calls it can be ignorant of the ugly stuff inside.
Unless you're talking about something else entirely that I've just been lucky to never encounter.
And you forgot fun.
You can very easily implement his 'subscribe' scenario in React. In fact, in 0.14 they are planning on having observe[0] to help you do just this.
Now, for my little plug. I've been working on Reapp since launch building a couple real-world apps and I agree that React needs an observe/subscribe model. In fact, I fell onto it while exploring a number of different patterns, and it's stuck the best.
We launched reapp-kit[1] (in beta) a few days ago. It unifies a router, immutable data, and a simple action system that lets you implement flux as well as sideways data loading almost no time. And it's all run through React's awesome contexts[2].
Here's a video of me writing a sideways actions in React, in seconds, using reapp-kit: https://www.youtube.com/watch?v=FALQU-pVKJo
[0] https://github.com/facebook/react/issues/3398 [1] https://github.com/reapp/reapp-kit [2] https://www.tildedave.com/2014/11/15/introduction-to-context...
We do need to optimize it further. It's actually React that is getting in the way here, but we don't want to cheat and break out of React because that would mean so pretty major disadvantages. We're thinking about building out either a separate animate() pipeline that works differently from render and just lets you use refs to animate things. Or, just optimizing further as there is some stuff we can do.
The author used it that way here: https://www.youtube.com/watch?v=9QObt0SGriI
(I haven't seen the whole presentation so I can't comment if it's worthwhile to watch.)
Second, the Cycle.js code on slide 18 is some of the nastiest, kludgey looking JS I've ever seen.
I get the ideas behind Reactive Programming the author is presenting, and they are interesting, but if that's the code his implementation is meant to produce, no thank you.
TodoMVC in Cycle is... intense: https://github.com/staltz/todomvc-cycle
- it isn't a framework
- thinking in terms of components can improve your code
- very easy to prototype
- react native
It's quite possible that React 1.0 or 2.0 will address all of the issues staltz points out. No harm in pointing out flaws but React does have a lot of good things going for it.
I think Facebook do a great job explaining what React is and as far as I am aware, they don't go claiming that React.js is a 100% reactive library. There are no unclear intentions, Facebook saw a need to improve DOM performance and they achieved it in a great library that I think is a pleasure to use.
I have built two projects solely using React and the Flux architecture. I don't have exact figures, but it saved me a lot of time compared to using something like AngularJS which has too many conventions and opinionated ways of doing things. I was able to get a nice performant CRUD application running in the space of a few days, most of the time was spent creating the API and getting it to return the appropriate data.
How can you write off a library like React.js when it goes beyond just another open source project, and unlike Google with AngularJS, Facebook aren't dogfooding their own product and they are actually using it for parts of Facebook, the Instagram website and a few other places. React.js is a battle-tested library. Those who have used React.js on a proper project know that it is very easy to use and its performance is better than any other SPA framework by far. Unlike other frameworks and libraries, React.js can back up its claims and has proven benchmark after benchmark it can render UI components extremely fast and efficiently (with a concentrated effort to make it even faster).
Sure, React might do things differently and it might not be a pure form of reactive programming, but it works and it works very well. Coupled with Flux, you actually do get a nice and reactive development environment where events are emitted and things are updated throughout your application from your stores. I don't really see Flux being mentioned in the slideshow which is a shame because Flux is the missing piece of the reactive puzzle.
It's easy to say something sucks without really giving an adequate reason why it sucks. Seems like the author had a bad experience with React or perhaps just wanted to ruffle some feathers. I also got the impression the author was trying to pedal their own library Cycle.js which will no doubt be abandoned in 12 months time when it doesn't get as popular as he would have hoped. Nice try, but not a very well thought out argument in my opinion.
I like to joke that it's because here in America, corporations are people too, you know.
Also Reactive programming is more of having a declarative way to structure data flow so that changes can happen automatically, like a spreadsheet.
1 - https://github.com/lihaoyi/scala.rx 2 - https://github.com/lihaoyi/scalatags 3 - https://github.com/rtimush/scalatags-rx 4 - https://github.com/japgolly/scalacss/
To give some background, I started with virtual-dom when we were transitioning away from angular. I built a bunch of "proof of concepts" with it, and tried to build out a micro-framework around it for our company. Then we had a quick meeting where we presented quickly on react, mithril and my homebrew. The guy who did the react example had done it in like 20 minutes, and it was WAY more elegant.
So my point here is that, yes, virtual-dom is a great project, but it just doesn't have the "full package" like react. So we chose react and haven't looked back.
Some important things I want to make clear:
1. React is revolutionary. I really like the core idea inside it, which is basically just this https://joshaber.github.io/2015/01/30/why-react-native-matte...
2. Apart from the core ideas, the surfacing API has its problems: synchronous render (a problem for server-side rendering https://github.com/andreypopp/react-async), mutable API (setState) etc, and most of my presentation. I've spoken to others in the industry (would not like to mention names, but top experts anyway), and they both love React and agree it is contaminated with a bit of bad API.
3. React probably doesn't have the perfect API for the "UIs as pure function of state" approach. It can be improved https://github.com/facebook/react/issues/3398 and https://twitter.com/sebmarkbage/status/543660526908088320
4. This presentation was given at a small meetup and I made it provocative on purpose just to have some fun with friends. The type of stuff you talk about in a small circle, not meant to publish on HN for the whole world https://www.youtube.com/watch?v=9QObt0SGriI
5. Cycle.js is not _better_ than React, it is my personal ongoing exploration in how to make React (or React's ideas) better. It is work in progress, and I'm breaking it apart whenever I find a better way of doing stuff. E.g. https://github.com/staltz/cycle/issues/99
6. Cycle.js is not an antagonist to React. I am currently experimenting with Cycle.js + React Native. https://github.com/staltz/cycle/issues/91 If React's API would be a bit less restrictive, I would use it for the web too. But virtual-dom by MattEsch is lighter and less restrictive, so I use that.
7. Don't be so harsh on HN as if I would be intentionally shouting to the whole world that React sucks.
With regards to #2, I used to think that a fully sync render function was a limitation of React, but have come to appreciate the fact that React tries to restrict its concerns to a very small, but significant piece. We've been working on solving the async data fetching use case in the router over the past few months, working with the Relay team as well, and we're starting to converge on some ideas and patterns that we think will help. But it's my personal opinion that sync render isn't a problem.
React is under BSD, but includes additional terms in a PATENTS file. Very generous terms. And yet ...
I'm not a lawyer, I couldn't even play one on TV. But it is profoundly bloody annoying that they didn't pick a well-understood, well-known license instead of baking up their own Frankenlicense.
I'm sure their lawyers have a reason for not just using the Apache 2 license. I'd love to know what it is.
In the meantime, every single company with fastidious lawyers is going to be dealing with Legal yanking the emergency brake when they see React, because it does not neatly fit into a known license.
To understand his criticism requires some familiarity with the cross-platform Reactive Extensions library and its approach. I made a jsfiddle a while back that illustrates how this works in a way that I hope is very straightforward: http://jsfiddle.net/nmd88wum/
For example, given the simplest case of a Flux store handling events from a single ajax call, I find I have to write code like this:
onLoad() {
this.loading = true;
this.errorMsg = null;
this.data = null;
this.condition1 = null;
this.condition2 = null;
this.something = null;
}
onSuccess(data) {
this.loading = false;
this.errorMsg = null;
this.data = data;
this.condition1 = data.blah === 'Hello';
this.condition2 = data.blah2 === 'World';
this.something = data.something;
}
onFailure(errorMsg) {
this.loading = false;
this.errorMsg = errorMsg;
this.data = null;
this.condition1 = null;
this.condition2 = null;
this.something = null;
}
If for some reason I was feeling crazy and I wanted the store to handle a second Ajax call, the store code becomes much more cumbersome so I avoid this.Even with some of the slicker Flux implementations, I still have tons more boilerplate than a traditional MVC app which for the simple UIs makes the code more difficult to reason about. For example, I find that in my store, I frequently forget to "reset" some property thus making the state "invalid". I've come up with this type of pattern, but it just feels... odd:
resetInitialState() {
this.loading = false;
this.errorMsg = null;
this.data = null;
this.condition1 = null;
this.condition2 = null;
this.something = null;
}
onFailure(errorMsg) {
this.resetInitialState();
this.errorMsg = errorMsg;
}I think this is just the relative immaturity of the ReactJS/Flux stack, and having to do this boilerplate is just part of the cost of being bleeding edge (much like struggling with understanding Transclusion/Directives/et-al when Angular was first released with crappy documentation).
Its kinda make sense in this context.
But from what I can tell, it does seem like React is moving in a more reactive direction.
One example: https://github.com/facebook/react/issues/3398 Another (not sure if this counts, but I think it does): https://github.com/reactjs/react-future/blob/master/09%20-%2...
I've built a few non-trivial apps with React this year (e.g., https://github.com/robmclarty/barss), and after years spent building and maintaining apps made with backbone, angular, jquery, and other libraries (considering the domain of React => the view) I can easily say that React has saved oodles of time, allowed me to greatly understand my apps as a whole much more clearly, and enabled me to think less about propping up a structure for my app and focus on actually designing my app.
The point is, it's not about what's passive or reactive or [insert enlightened path to programming here]. It's about what works; what keeps the ball rolling; what gets your app online and in front of users.
When it's snowing outside and I'm making a decision about what I should cover my feet with, I'm concerned about "what will keep my feet dry?". When I'm moving across town into a new apartment, I'm concerned with "what will have enough volume to transport all my junk?". When I'm making an app, I'm concerned with "what will make this design in my head work in a browser?". Whether I wear boots or shoes, whether I use a diesel truck or a gasoline van, or whether I use React or Whatever; that's not what's important.
I like that React doesn't drag me into event-listener hell where stuff is firing from somewhere that I don't know where. I like that React compartmentalizes templates with the behaviours that manipulate them. I like that React passively alters itself based on state changes.
When it comes down to it, an app is, simply, an interface for mutating and presenting data. It can be in one of many possible states at any given time. React just presents a view of the app that is based on its current state of data. With React, all I have to worry about, conceptually, is "what's the data?" and my app reconfigures its presentation accordingly.
TL;DR At the end of the day it doesn't matter what's right or wrong, it matters what realizes your intentions as a programmer (and as a human). The way React works makes my job easier, more productive, and faster. It doesn't suck at all.
Slide decks are (mostly) meaningless without context.