5 ms·
This is amazing stuff, thanks Dan! Hopefully it is the beginning of the end of refresh-driven-development. If you are a web developer (front-end/back-end), and
by jasim 12y ago
This is amazing stuff, thanks Dan! Hopefully it is the beginning of the end of refresh-driven-development.
If you are a web developer (front-end/back-end), and you haven't switched to React yet, take this for a spin, and read "Facebook just taught us all how to build websites" (https://medium.com/@ericflo/facebook-just-taught-us-all-how-to-build-websites-51f1e7e996f2 https://medium.com/@ericflo/facebook-just-taught-us-all-how-...), and watch 'React - Rethinking Best Practices' by Pete Hunt (https://www.youtube.com/watch?v=DgVS-zXgMTk https://www.youtube.com/watch?v=DgVS-zXgMTk).
The distinction between the back-end and front-end is a product of the complexity introduced by the web with its 'worse is better' mix of badly integrated tools. It made building user interfaces a dark art with all its quirks:
- a layouting system that had an active vendetta against humans
- Javascript with all its deficiencies
- Connascence introduced by Server <-> Client communication (Server Model <-> API View <-> JS Model <-> JS View)
- declarative views that were ill-suited for web-apps (logic-less templates, what a lie!)
- cross-browser incompatibilities
- difficulty in implementing client-side routing
- immature developer tooling
But worst of them all was DOM mutation and spaghetti code, which was in reality a fundamental deficiency of the development model itself, and not because web developers the world over were being deliberately irresponsible.
React is changing all that with the help of ES6. It simplifies web development both in concept and in practice. In a few years, building UIs would be just another part of writing software, and competent Full-Stack developers would cease to remain unicorns.
Here are a few things that React approaches differently that makes all the difference:
- templates are a bad idea. views are constructed imperatively, not declared. (plug: http://www.jasimabasheer.com/posts/on-react.html http://www.jasimabasheer.com/posts/on-react.html)
- the basic unit of a front-end system is a 'component'. A component knows how it is rendered (HTML), how it is styled (CSS), how it behaves (JS), and has explicit knowledge of the data it handles (states and props).
- everything should be programmable: even HTML and CSS. (https://speakerdeck.com/vjeux/react-css-in-js https://speakerdeck.com/vjeux/react-css-in-js)
The React team seems to be looking at what makes web development actually hard and are thinking outside ill-advised conventional wisdom (like separation of concerns. whose concerns anyway?). For example, Relay (https://gist.github.com/wincent/598fa75e22bdfa44cf47? https://gist.github.com/wincent/598fa75e22bdfa44cf47?), removes the need for writing custom API end-points for each of our components. A component already knows the data it needs, but today we leak that info across the component hierarchy and to the server, creating a lot of accidental complexity.
Another example is Webpack (http://webpack.github.io/ http://webpack.github.io/), which changes asset management on the web by making it completely programmable. All your static assets should have the same bundling conveniences that your JS has. Webpack also makes react-hot-loader possible with Hot Module Replacement.
React seems to have finally figured out the right direction to take the web to. Exciting times.
- zaroth 12y agoA post so nice, would upvote twice! Thank you for the summary and bevy of helpful links!
- nightski 12y agoI like a lot of what I see with react except the lack of 2 way data binding. Mainly, I tend to have input data tables for forecasting, cost estimation, and so forth with a lot of data inter-dependencies and calculations. It seems going back to the method of handling data updates through onchange events in a manual fashion would be a colossal step backwards from say, knockoutjs.
- dlb_ 12y agoYou can do two-way binding of a form field to the component's state using the ReactLink helper: http://facebook.github.io/react/docs/two-way-binding-helpers.html http://facebook.github.io/react/docs/two-way-binding-helpers...
- danabramov 12y agoNope. Lack of two-way binding is a blessing. It makes everything predictable. >It seems going back to the method of handling data updates through onchange events in a manual fashion would be a colossal step backwards from say, knockoutjs. It's not exactly "manual fashion" because React updates everything according to `state` for you. If you have many interdependent fields, make them update `state` correctly, and React will keep them in sync with it. In fact I find it easier to make complex input logic with one-way bindings because the data always flows one way. It's a tad more code to write, but you see exactly where your updates are happening and what's causing them. Two-way binding tends to get very complicated as soon as you need more complex logic. One-way binding doesn't have this problem.
- nightski 12y agoI'm not sold two-way binding tools get inherently complicated, I just haven't seen this increase in complexity in our current app which is quite large. But I am attracted to react for the reasons you mention, the virtual DOM aspect is very nice so I'll give this a shot. Although even though ReactLink works it a.) feels like quite the hack (i.e. not very composable) and b.) is a more code to maintain still when it comes down to it.