Logotipo de Xitrus.
sígueme en facebook

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
15
10

Vanilla JS es el framework más usado y eficiente

Vanilla JS actualmente es el framework más usado en Internet, siendo usado por Google, Amazon, Twitter y muchas otras webs, incluida Xitrus.
A la hora de acceder al DOM por IDs es el doble de rápido que Dojo y 100 veces más rápido que Prototype JS cuando accedemos a los elementos por el nombre de la etiqueta, siendo estos unos de los framework más eficiente en cuanto a acceder al DOM, solo superado por Vanilla JS.

Vanilla JS es el framework más usado en Internet.

Primero, voy a hacer una comparación de tiempos de acceso a los elementos del DOM para distintos frameworks, basándome en los datos que proporciona Vanila JS.
Posteriormente veremos cómo hacer nuestras webs mucho más eficientes y rápidas con el uso de Vanilla JS, se puede hacer cualquier cosa con él, más incluso que con jQuery, MooTools o Prototype JS, por poner unos ejemplos.

Comparativa de eficiencia

Voy a usar los datos de Vanilla JS, para comparar primero el tiempo para acceder al DOM con una ID, y además compararemos el distinto código a usar por cada herramienta.
El número de la comparativa representa la cantidad de veces que se puede acceder a un elemento del DOM por segundo según el framework.

Vanilla JS 12,137,211
Dojo 5,443,343
Prototype JS 2,940,734
Ext JS 997,562
jQuery 350,557
YUI 326,534
MooTools 78,802

De las siguientes formas accedemos a cualquier ID de una web en los anteriores frameworks.

  1. // Vanilla JS
  2. document.getElementById('ID');
  3. // Dojo
  4. dojo.byId('ID');
  5. // Prototype JS
  6. $('ID');
  7. // Ext JS
  8. delete Ext.elCache['ID']; Ext.get('ID');
  9. // jQuery
  10. $jq('#ID');
  11. // YUI
  12. YAHOO.util.Dom.get('ID');
  13. // MooTools
  14. document.id('ID');

Ahora vamos a comparar los tiempos para acceder al DOM a través del nombre de la etiqueta de un elemento con los mismos frameworks.

Vanilla JS 8,280,893
Prototype JS 62,872
YUI 48,545
Ext JS 46,915
jQuery 19,449
Dojo 10,335
MooTools 5,457

Como podemos comprobar la eficiencia de el resto de frameworks es pésima, vamos a ver como accedemos a estas etiquetas por su nombre con ellos.

  1. // Vanilla JS
  2. document.getElementsByTagName('span');
  3. // Prototype JS
  4. Prototype.Selector.select('span', document);
  5. // YUI
  6. YAHOO.util.Dom.getElementsBy(function(){return true;},'span');
  7. // Ext JS
  8. Ext.query('span');
  9. // jQuery
  10. $jq('span');
  11. // Dojo
  12. dojo.query('span');
  13. // MooTools
  14. Slick.search(document, 'span', new Elements);

Descargar Vanilla JS

Podéis descargaros Vanilla JS, que en su versión completa incorpora selectores y manipuladores de DOM, orientación a objetos basada en prototipos, AJAX, animaciones, eventos del sistema, expresiones regulares y varias librerías extra.

También tiene soporte para las nuevas APIs de HTML5, como Web Worker, de la que os he hablado recientemente.

Esencia de Vanilla JS

Ahora hablando en serio, Vanilla JS es una iniciativa, en forma de framework que intenta enseñar las grandes ventajas de no usar frameworks y potenciar nuestras aplicaciones sin necesidad de añadir grandes archivos extra.

No dicen que sean malos, simplemente que son lentos y sus funciones se pueden llevar a cabo sin ellos, pero que en muchas ocasiones abusamos de estos frameworks para cosas que no son necesarias.

Bajo mi punto de vista, como muchas veces he dicho, tenemos que saber diferenciar esos proyectos que no necesitan usar un framework, ya sea Mootools o jQuery.
Un ejemplo de donde no se debe de usar es en una landing page preparada para móviles que usa un par de slider, un par de animaciones y un validador de formularios, este es un caso donde sobra totalmente un framework.
Un caso en el que bajo mi punto de vista puede ser muy útil, aunque no esencial, es en grandes proyectos, que hacen uso de muchas funciones distintas en la que se manipulan muchos elementos e incluso funcione solo con AJAX (manipulando el contenido directamente en una página).

  1. // Contenido del <strong> dentro de .titulo dentro de #contenedor
  2. document.querySelector('#contenedor .titulo strong').textContent
  3. // Todos los <span> y <img> de una página
  4. document.querySelectorAll('span, img')

También puede que algunos prefiráis estos frameworks por permitir seleccionar de forma más simple los elementos del DOM, pero también recuerdo que existe querySelector() que de forma nativa selecciona elementos como lo hace el CSS.

Resumen

Las funciones nativas de JavaScript son potentísimas, ya que se ejecutan a un nivel más bajo que el de JavaScript y eso les proporciona mayor velocidad a la hora de analizar los nodos de una web y seleccionarlos de la forma correcta.
Con este artículo quiero que se sepa que se puede hacer de todo sin los típicos frameworks y que debemos de pensar más en la eficiencia de una web, ya que para ejecutar una simple acción 100 o 200 veces más lento se nota cuando se realiza muchas veces y puede disminuir la experiencia de usuario.

Comentarios

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
Cerrar sesión
Usuario: Contraseña: