React Hot Loader: Tweak React Components in Real Time
This is amazing stuff, thanks Dan! Hopefully it is the beginning of the end of refresh-driven-development.<p>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" (<a href="https://medium.com/@ericflo/facebook-just-taught-us-all-how-to-build-websites-51f1e7e996f2" rel="nofollow">https://medium.com/@ericflo/facebook-just-taught-us-all-how-...</a>), and watch 'React - Rethinking Best Practices' by Pete Hunt (<a href="https://www.youtube.com/watch?v=DgVS-zXgMTk" rel="nofollow">https://www.youtube.com/watch?v=DgVS-zXgMTk</a>).<p>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:<p>- a layouting system that had an active vendetta against humans<p>- Javascript with all its deficiencies<p>- Connascence introduced by Server <-> Client communication (Server Model <-> API View <-> JS Model <-> JS View)<p>- declarative views that were ill-suited for web-apps (logic-less templates, what a lie!)<p>- cross-browser incompatibilities<p>- difficulty in implementing client-side routing<p>- immature developer tooling<p>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.<p>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.<p>Here are a few things that React approaches differently that makes all the difference:<p>- templates are a bad idea. views are constructed imperatively, not declared. (plug: <a href="http://www.jasimabasheer.com/posts/on-react.html" rel="nofollow">http://www.jasimabasheer.com/posts/on-react.html</a>)<p>- 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).<p>- everything should be programmable: even HTML and CSS. (<a href="https://speakerdeck.com/vjeux/react-css-in-js" rel="nofollow">https://speakerdeck.com/vjeux/react-css-in-js</a>)<p>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 (<a href="https://gist.github.com/wincent/598fa75e22bdfa44cf47?" rel="nofollow">https://gist.github.com/wincent/598fa75e22bdfa44cf47?</a>), 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.<p>Another example is Webpack (<a href="http://webpack.github.io/" rel="nofollow">http://webpack.github.io/</a>), 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.<p>React seems to have finally figured out the right direction to take the web to. Exciting times.