React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the docs and do not hesitate to ask questions on the Google Group, IRC or Stack Overflow. We are trying our best to help you out!
The Future of JavaScript MVC
David Nolen announced Om, a thin wrapper on-top of React in ClojureScript. It stands out by only using immutable data structures. This unlocks the ability to write a very efficient shouldComponentUpdate and get huge performance improvements on some tasks.
We’ve known this for some time over here in the ClojureScript corner of the world - all of our collections are immutable and modeled directly on the original Clojure versions written in Java. Modern JavaScript engines have now been tuned to the point that it’s no longer uncommon to see collection performance within 2.5X of the Java Virtual Machine.
Wait, wait, wait. What does the performance of persistent data structures have to do with the future of JavaScript MVCs?
Managing the scroll position when new content is inserted is usually very tricky to get right. Vjeux discovered that componentWillUpdate and componentDidUpdate were triggered exactly at the right time to manage the scroll position.
We can check the scroll position before the component has updated with componentWillUpdate and scroll if necessary at componentDidUpdate
componentWillUpdate: function() {
var node = this.getDOMNode();
this.shouldScrollBottom =
(node.scrollTop + node.offsetHeight) === node.scrollHeight;
},
componentDidUpdate: function() {
if (this.shouldScrollBottom) {
var node = this.getDOMNode();
node.scrollTop = node.scrollHeight
}
},
React declarative approach is well suited to write games. Cheng Lou wrote the famous Lights Out game in React. It’s a good example of use of TransitionGroup to implement animations.
Stoyan Stefanov wrote a bookmarklet to process tables on the internet. It adds a little “pop” button that expands to a full-screen view with sorting, editing and export to csv and json.
William Högman Rudenmalm wrote an article on how to write good React components. This is full of good advice.
The idea of dividing software into smaller parts or components is hardly new - It is the essance of good software. The same principles that apply to software in general apply to building React components. That doesn’t mean that writing good React components is just about applying general rules.
The web offers a unique set of challenges, which React offers interesting solutions to. First and foremost among these solutions is the what is called the Mock DOM. Rather than having user code interface with the DOM in a direct fashion, as is the case with most DOM manipulation libraries.
You build a model of how you want the DOM end up like. React then inserts this model into the DOM. This is very useful for updates because React simply compares the model or mock DOM against the actual DOM, and then only updates based on the difference between the two states.
