React - Virtual DOM

//English

Hi guys, today I'm going to talk about ReactJS, the facebook's framework for Front End Development.

<!-- Virtual DOM -->

Basically React works with something called: "Virtual DOM", what exactly is it? Well, React try to answer the questions:

• When should I re-render?
• What should I re-render?

If you have worked with angular, you know that angular works with a queue, and when you need to update or interact with the DOM, let's say something like this:

<div>
    <input ng-model="myModel"/>
</div>

Angular will update your model each time this model change! I mean, imagine you press the letter 's' 3353453345534 times, angular will fetch those actions and it will add those changes to the queue in order to update the model, this would be easy for angular to interact with the DOM, I mean you are typing in a normal input field, but what happened if you have something like this:

<div>
    <input ng-model="myModel"/>
    <h1 ng-bind="myModel"></h1>
</div>

Angular will render the H1 tag 3353453345534 times!, this would be a K.O. to the performance on our app.

Now, let's back again to React. React works entirely with JS, so the translation of the code above will be:

    <div id="container-update-model"></div>
    <script type="text/jsx">
      /** @jsx React.DOM */
      
      var UpdateModel = React.createClass({
        getInitialState:function(){
          return {
            myModel:''
          }
        },
        render:function(){
          var myModel = this.state.myModel;
          return (
            <div>
              <input onChange={this.handleChange} />
              <h1>{myModel}</h1>
            </div>
          );
        },
        handleChange:function(ev){
          this.setState({myModel:ev.target.value});
        }
      });
      
      React.render(<UpdateModel />, document.getElementById('container-update-model'));
    </script>

Well, obviously there are more lines of code, but the impact on the performance will be minimal. Do you remember the 2 questions above? Let's answer them:

• When should I re-render?

React will detect when it needs to render the DOM, but just once, instead of 3353453345534 times. Basically it will reload the Virtual DOM 3353453345534 times and just once the real DOM:

The user will see how the change is performed immediately, but what the user will see, would be the virtual DOM, a layer between the App and the DOM element (HTML), when react detects that there's no more operations, that's when it updates the real DOM, with the changes of the virtual DOM.

Each change and actions performed, will be done on the virtual DOM, the real DOM will be updated with the information of the virtual DOM.

In contrast to Angular, React tries to update the DOM the less possible to enhance the performance of the App, that's why React implements a middle layer between the App and the HTML. It's easier to update something virtual than something Real.

• What should I re-render?

Let's continue with the analogy of Angular, each change performed in an angular app, will reload the entire section of the DOM element, no matter if you just change a single H1 tag, it will reload the entire section! But React will reload just what you changed, if you change an SPAN, just that SPAN will be the one update:

As you may know HTML is a DOM document, and this kind of documents are node-based documents (see the image above), the parent node will be the HTML tag, its children would be the HEAD and BODY tag and so on.

If you just change the red node (let's say an SPAN tag), then React will just update that tag

NOTE: As I said before, the real DOM will be updated with the virtual DOM, it does not mean that the virtual DOM is erased, the virtual DOM changes to an "stand by" status, waiting for changes or actions to be done.

<!-- Example -->

To see the example you just need to go to my Plunker :)

//Español

Hola chavos, Hoy voy a hablerles acerca de ReactJS, el framework de Facebook para trabajar el Front.

<!-- DOM Virtual -->

Basicamente React trabaja con algo llamado: "DOM Virtual", que es exactamente? Bueno React trata de responser las preguntas:

• Que debo de renderear de nuevo?
• Cuando lo debo de renderear?

Si has trabajado con angular, ya sabes que angular trabaja con una cola, y cuando tu necesitas actualizar o interactuar con el DOM, digamos algo como esto:

<div>
    <input ng-model="myModel"/>
</div>

Angular va a actualizar tu modelo, cada vez que el modelo cambie! Esto quiere decir que si tu presionas la letra 's' 3353453345534 veces, angular va a a obtener esas acciones y los va a añadir a la cola, para despues actualizar el modelo. En este ejemplo va a aser muy simple para angular, porque estamos usando un campo de texto tipico. Pero que pasa si tenemos algo como esto:

<div>
    <input ng-model="myModel"/>
    <h1 ng-bind="myModel"></h1>
</div>

Angular va a rederear la etiqueta H1 3353453345534 veces! Esto va a ocasionar un K.O. a nuestra aplicacion si de performance hablamos.

Ahora hablemos de React de nuevo, React trabaja entramente con JS. Si traducimos el codigo de arriba, de angular a react, nos quedaria algo como lo siguiente:

    <div id="container-update-model"></div>
    <script type="text/jsx">
      /** @jsx React.DOM */
      
      var UpdateModel = React.createClass({
        getInitialState:function(){
          return {
            myModel:''
          }
        },
        render:function(){
          var myModel = this.state.myModel;
          return (
            <div>
              <input onChange={this.handleChange} />
              <h1>{myModel}</h1>
            </div>
          );
        },
        handleChange:function(ev){
          this.setState({myModel:ev.target.value});
        }
      });
      
      React.render(<UpdateModel />, document.getElementById('container-update-model'));
    </script>

Bueno, obviamente, hay mas lineas de codigo, pero el impacto en performance es minimo, Se acuerdan de las 2 preguntas anteriores? Vamos a responderlas:

• Cuando debo de renderear?

React va a detectar cuando se necesita renderear el DOM, pero solo una vez en lugar de 3353453345534 veces! Basicamente lo que actualizaria 3353453345534 veces, serial el DOM virtual y solo 1 vez el DOM verdadero

El usuario veria que el cambio de realiza inmediatamente, pero lo que el usuario veria, seria el DOM virtual, una capa entre la App y el elemento DOM real (HTML), cuando react detecte que ya no hay mas operaciones por hacer, es en ese momento cuando se actualiza el DOM verdadero con la informacion en el DOM virtual

Cada cambio y accion realizados, van a ser realizados en el DOM virtual, el DOM verdadero solo va a ser actualizado por la informacion en el Virtual DOM.

Al contrario de Angular, react trata de actualizar el DOM lo menos posible, para mejorar el performance de la App, es por eso que React implemente una capa intermedia. Es mas facil actualizar algo virtual a algo real.

• Que debo de renderear?
• Que debo renderear?

Continuemos con la analogia de Angular, cada cambio realizado en angular, va a actualizar la seccion entera del elemento DOM. Sin importar si solo se actualiza una simple etiqueta H1, Angular va a actualizar la seccion entera! Pero React solo actualizara lo que se cambio, Si solo actualizas un SPAN, solo ese SPAN va a actualizarse:

Como ustedes saben HTML es un documento DOM, y esta clase de documentos estan basados en nodos (vean la imagen arriba). El elemento padre seria la etiqueta HTML, sus nodos hijos serian las etiquetas HEAD y BODY y asi sucesivamente.

Si solo se actualiza el nodo en rojo(digamos un SPAN), entonces React solo actualiza ese nodo.

NOTA: Como dije anteriormente, el DOM real, sera actualizado con la informacion del DOM virtual, esto no quiere decir que el DOM virtual se reinicie o algo por el estilo, si no se detectan cambios, la DOM virtual cambia a un estado de "espera", esperando por cambios o acciones a realizar.

<!-- Ejemplo -->

Para ver mi ejemplo, solo necesitan ir a mi Plunker :)