Community Round-up #12

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?

A whole lot.

Read the full article…

Scroll Position with React

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
  }
},

Check out the blog article…

Lights Out

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.

Try it out!

Reactive Table Bookmarklet

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.

Check out the blog post…

MontageJS Tutorial in React

Ross Allen implemented MontageJS’s Reddit tutorial in React. This is a good opportunity to compare the philosophies of the two libraries.

View the source on JSFiddle…

Writing Good React Components

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.

Read the full article …

Hoodie React TodoMVC

Sven Lito integrated the React TodoMVC example within an Hoodie web app environment. This should let you get started using Hoodie and React.

hoodie new todomvc -t "hoodiehq/hoodie-react-todomvc"

Check out on GitHub…

JSX Compiler

Ever wanted to have a quick way to see what a JSX tag would be converted to? Tim Yung made a page for it.

Try it out!

Random Tweet