Reading about Facebook's React

Those of you that are active in the front-end and JavaScript development world probably know that there is a lot of buzz around React lately. I've heard it mentioned a few times on JavaScript Jabber and on a segment on DotNet Rocks when ClojureScript was mentioned. So I added it to my list and have been reading up on it lately (and watching a few videos) but I haven't actually tried to build anything with it just yet.

It's a library that Facebook has been using for a few years now, and while I don't actively use Facebook, I have gotten into using their open source testing framework Jest.  So because of that, I became more inclined to look into React.  Another motivation for me was finding out that Github's Atom editor was going to start moving over to using React.


Initial Reaction (Pun intended)

Seeing JSX code reminded me of how I used to write JavaScript back in 2008/2009.  I would hard code blocks of html in strings and inject values by hand, then use jQuery to display it.  Shortly thereafter, I learned to use jQuery Templates.

Also, the structure of React objects along with their events reminds me a lot of Backbone.  It's been a while since I've written Backbone code but I remember there being a render function and events to listen to that you add as methods of the Backbone class.


Other thoughts

I'm sure the React team has faced a fair amount of fire about html markup in the script but I can actually get on board with it.  I've used both Ember and Angular, more of the latter, and I find myself jumping back and forth between an html page (or template) and a controller a lot.  Yes, the code splitting windows of Visual Studio and Sublime accommodate this kind of volleyball well but there's something nice about a true single, self-contained component.

One of the key strengths React attests to is composability. Their concept of making components that contain other components is much cleaner and more obvious.  Not having built components with Ember yet, I can only compare my experience with Angular directives.  Now, I've only had to build very simple directives but I do remember that learning the terminology and structure of directives was tricky.  It took a few reads and re-reads to get the ideas down.  After seeing one example of a React component that contains another, it clicked right away.  They say that learning React is a lot easier than learning Angular.  So far, based off just the code samples on the React homepage I would agree.


Questions

Many articles I've seen claim that React is fast.  Definitely faster than the aforementioned frameworks.  But why?  Some say it is the way that it uses Virtual DOM.  When I first saw this I mistakenly took it to mean Shadow DOM which I learned about when researching Polymer.  Turns out that it's not the same thing.  So what IS Virtual DOM?  The concept of it is still fuzzy to me, and even more how they use it to update the DOM in a much quicker way than Angular.

On StackOverflow, I read suggestions that Virtual DOM and dirty checking possibly involved hashing and checking of immutable objects.  But again, it seemed like more confusion as to how this was actually faster when going to update DOM elements.

I'm hoping to uncover more of this as I start to actually use React in the near future.