Xitrus está alojado en:
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.
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.
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.
De las siguientes formas accedemos a cualquier ID de una web en los anteriores frameworks.
- // Vanilla JS
- document.getElementById('ID');
- // Dojo
- dojo.byId('ID');
- // Prototype JS
- $('ID');
- // Ext JS
- delete Ext.elCache['ID']; Ext.get('ID');
- // jQuery
- $jq('#ID');
- // YUI
- YAHOO.util.Dom.get('ID');
- // MooTools
- 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.
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.
- // Vanilla JS
- document.getElementsByTagName('span');
- // Prototype JS
- Prototype.Selector.select('span', document);
- // YUI
- YAHOO.util.Dom.getElementsBy(function(){return true;},'span');
- // Ext JS
- Ext.query('span');
- // jQuery
- $jq('span');
- // Dojo
- dojo.query('span');
- // MooTools
- Slick.search(document, 'span', new Elements);
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.
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).
- // Contenido del <strong> dentro de .titulo dentro de #contenedor
- document.querySelector('#contenedor .titulo strong').textContent
- // Todos los <span> y <img> de una página
- 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.
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.
Xitrus está alojado en:
