Performance is often cited as the "big win" that React brings to web development; I really wish that wasn't the focus that (what seems like) most people take.<p>The DOM isn't (that) slow; it's all the crap we do to it that makes it slow.<p>React's strongest selling point is its ergonomics: It frees the developer from having to write huge swaths of code that they otherwise would be with most previous libraries/frameworks.<p>It achieves that with its immediate mode rendering: you no longer have to reason about how to transition the DOM from one state to another (in nearly all cases).
Every point made in this article also applies to Google's Polymer framework. The stuff about having handlers which trigger when an element is attached or detached, the point about updating only the sections of the DOM which changed, the speed, the data binding magic, everything... It all applies to Polymer as well. Except that Polymer was around long before React. Also Polymer doesn't require any special tooling and no build steps necessary.<p>The point about attachment/detachment handlers also applies to Angular directives by the way. So it is extremely misleading to claim that React is revolutionary because of this. I think Angular was revolutionary, the only real new thing that React brings to the table is that you can have your HTML inline with your code - Some people think that this is the "secret sauce" which makes react so modular and makes its components so well encapsulated, but it is not - Polymer achieves the same level of encapsulation without combining logic with markup.<p>React is just one of multiple good alternatives which may be better in some scenarios and worse in others.<p>Developers are being too idealistic about this. I think the web would be a better place for developers if we were more aware of the irrational nature of hype.<p>I dont have anything against React but I don't like hype. Hype is just excitement in the absense of reasoning. It's the result of good marketing and nothing more.
<i>React has, ironically, allowed us to once again think about writing web applications as a series of pages rather than a monolithic blob of JavaScript code. It's no wonder that developers have become so engaged with React and React Router: it's the same mental model as traditional server-only applications. A page is rendered, some changes are requested, then a page is rendered with those changes. The only difference is that this can all happen client-side.</i><p>Our framework does this, without virtual DOM. You build apps by placing reusable components on pages. The pages honor existing web conventions -- so everything works like on the web. But then the framework manages HTML5 history for you, and even swaps javascript/stylesheets in and out as you load pages. It loads the code for pages and components on demand, as you navigate the app, and doesn't need a monolithic js and css file (although you could have one). Part of sticking to web standards is you can do things like caching on CDN, or even support caching files inside a PhoneGap bundle, so they load instantly on a "native app", which you can make.<p><a href="http://qbix.com/platform/guide/pages" rel="nofollow">http://qbix.com/platform/guide/pages</a><p>All this does not require a virtual DOM. React and Mithril are great for virtual DOM but you don't NEED it. In fact, the fastest approach to components re-rendering themselves is:<p>1) Have the constructor insert the HTML elements, eg by rendering a template, and <i>store references</i> inside the component to the elements it might want to update.<p>2) When some of the component's state changes, simply requestAnimationFrame and make a batched update, using the same convention as react's "render" method. Only the components whose state changed will update. That's what Angular does: dirty checks the state instead of the DOM.<p>3) Traversing parents and children should be done via the component object tree, not the DOM.<p>And voila. You have the speed you need, where you need it. The main challenges are other things, like registering/unregistering events, activating/removing components while navigating pages, caching, retaining data until you don't need it anymore etc. And for that you need a framework.
I don't think performance concerns really got people to avoid DOM manipulation in practice, but it did mean that more thoughtful developers had to jump through a large number of hoops to make things perform well.