31

Que es Vanilla js o JavaScript puro

John Andrey
jandrey
22077

Hola que tal amigos como vamos el día de hoy voy a explicarles un poco de cómo usar vanilla js que no es más que otra cosa que JavaScript puro , muchas veces comenzamos a usar JavaScript sin saber escribir JavaScript realmente y de la mejor forma, casi siempre aprendemos JavaScript es usando librerías como Jquery pero realmente terminamos aprendiendo más de la propia librería que del propio lenguaje de programación.

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.

Antes de entrar en materia un poco de teoría de que es JavaScript, JavaScript (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, 3 basado en prototipos, imperativo, débilmente tipado y dinámico.

Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámica aunque existe una forma de JavaScript del lado del servidor(Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo.

Es este artículo voy a mostrar unos ejemplos básicos del uso de vanilla js tomando como ejemplo base ejercicios con jquery pasándolos a javascript puro, bueno sin más que decir vamos a comenzar con los ejemplos tambien encontré este sitio web donde comienza desde lo más básico aprendiendo JavaScript.

El primer ejemplo es la selección de texto o de un elemento primero lo voy hacer con jquery y después con vanilla para que vean la diferencia.

Para seleccionar un texto y pasarlo en otro lado con jquery hacemos lo siguiente.

Jquery

const mensaje = $('#container #title').text();
$('#container #salida').text(mensaje);

Con vanilla js seria de la siguiente manera.

Vanilla JS

const mensajeVanilla = document.getElementById('title').textContent;
document.getElementById('salida').textContent = mensajeVanilla;

Como podemos ver usamos document.getElementById() para seleccionar un elemento del DOM, existen otras forma de hacer selecciones veamos un ejemplo de esto.

Con jquery podemos seleccionar html de la siguiente manera.

Jquery

const texto = $('#container #texto').html();
$('#container #salida').html(texto);

Con vanilla js lo podemos hacer de la siguiente manera.
Vanilla JS

const textVanilla = document.querySelector('#container #texto').innerHTML ;
document.querySelector('#container #salida').innerHTML  = textVanilla;

Como podemos ver hacemos lo mismo que con jquery y además estamos usando otro selector de vanilla que es querySelector(), también existe un selector más el cual es querySelectorAll y lo que hace es seleccionar todos los elementos de una clase o un id que le indiquemos veamos un ejemplo.

Vanilla JS

const element = document.querySelectorAll(".opt");
document.querySelector('#container #salida').innerHTML  = element[0].innerHTML;

La selección de todos los elementos nos devuelve una lista de elementos y seleccionamos la posición para obtener el html de esa selección, también podemos usar un forEach para recorrer esa lista mas adelante vamos a ver un ejemplo de como hacerlo.

Tenemos dos forma de escribir en vanilla js con comillas simples o comillas dobles, tenemos algunas funciones para manejar texto veamos algunas.

Contamos con length que nos permite contar, nos cuenta cuantos caracteres existen.

const length = 'John Serrano'.length; console.log(length)
Esta toLowerCase la cual convierte un texto en minúsculas.

const minusculas = "THE KIDS".toLowerCase(); console.log(minusculas);
Por el contrario también tenemos una función que convierte el texto en mayúscula.

const mayusculas = "I wish I were big.".toUpperCase(); console.log(mayusculas)
Como se puede notar son funcionalidades propias de JavaScript que en ocasiones no sabemos y terminamos usando con Jquery.

Algo más que normalmente usamos en jquery es agregar clases veamos cómo se hace con vanilla js.

Vanilla JS

const el = document.querySelector('#container');
el.classList.add('newClass');
el.classList.remove('otherClass');

/*  Revisamo si existen esas clases */
// alert(el.classList.contains("newClass")); 
// alert(el.classList.contains("otherClass"));

Como último ejemplo voy a mostrar una función que es muy usado en la librería de Jquery la cual es recorrer una lista de elementos, entonces con Jquery normalmente se hace de la siguiente manera.

Jquery

$('#lista li').each(function(indice, valor){
     console.log('Hola soy el índice -> '+ indice + " hay este valor: " + valor);
});

Es bastante sencillo con JavaScript es un poco más extenso pero obtenemos el mismo resultado veamos cómo se hace.

Vanilla JS

constlist = document.querySelectorAll('#lista li');
list.forEach(function(currentValue, indice, array){
   console.log("En el índice " + indice + " hay este 
   valor: " + currentValue);
});

Como puedes ver es el mismo resultado solo un poco más extenso a la hora de escribir el código, podemos obtener el valor, índice que son los dos valores que más usamos a la hora de iterar un array en este caso un array de elementos.

Bueno espero que haya sido de su ayuda este artículo y los ánimo a que sigan aprendiendo más funcionalidades de JavaScript como escribir JavaScript puro, logrando entender más el funcionamiento del lenguaje de programación JavaScript.

Mas información y ejemplos en http://vanilla-js.com.

Todos los ejemplos que vimos los pueden encontrar en codepen saludos y hasta la próxima.

Escribe tu comentario
+ 2
Ordenar por:
6
24Puntos
6 años

Y que hay del uso de Typescript para mejorar el mantenimiento del codigo ademas que compila a JS limpio

2
23791Puntos
5 años

Excelente aporte muchas gracias

2
821Puntos
3 años

Bibliotecas, por favor! No son librerías 👎

1
5 años

En parte de seguridad es aconsejable escribir una aplicación con javascript puro?

1
2 años

Esto es viejo pero lo es… Si los hackers están actualmente más apegados a un framework que a JS les será más complicado entender tu código y que hace. Si el framework tiene huecos hay menos probabilidades de que se corrija el error.

1
2 años

Esto es viejo pero yo les explico la principal causa para aprender el lenguaje y no los frameworks y es la siguiente:

“Si el framework cambia, tu desarrollo se puede estropear y no vas a saber cómo repararlo”

Imagina el siguiente escenario:

Has desarrollado un centenar de sitios durante un año e incluyes una funcion “X” en cada uno de ellos. Esa función es vital para tu sitio web y se encuentra en una librería o framework JS en la web.

Y entonces el sitio principal se cae… O el desarrollador la borra o cambia por capricho…

Si tienes suerte y esta en tus archivos no tendrás problema pero ¿Si solo está enlazado? Con suerte archive,org lo arregla (corres hasta ahí y buscas un enlace que sustituya al original). Eso sí sabes que es esa función la que está fallando. Para desarrollos largos, con múltiples librerías esto es un tormento.

Si no sabes, tus desarrollos de un año se fueron a la basura. Tus clientes reclamarán y te quitarás a algunos de encima (los más viejos) pero el resto será un dolor de muelas.

En este caso tu desarrollo dependerá únicamente del código html y CSS y todo lo demás se vera mal o con errores graves en su funcionamiento.

Si aprendes HTML, CSS y Javascript puro desarrollar es más seguro. Al ser la base las probabilidades de cambios drásticos son mucho menores y no depende de un documento externo para funcionar, solamente del navegador.
Hay un ejemplo claro de lo anterior en adobe flash. Durante mucho tiempo se utilizo este framework para desarrollar aplicaciones web y actualmente solo los sitios web olvidados por sus desarrolladores lo siguen ejecutando. Si esos sitios estuvieran desarrollados con Javascript hoy seguirían tan accesibles como en su tiempo.

1
3646Puntos
6 años

Por fin entendo que es VanillaJS, no es mas que usar document. osea acceder a los nodos mediante el definicion de objetos… DOM Manipulation.

3
5440Puntos
5 años

No realmente, se podría decir que Vanilla JS es solo JS puro y que es una iniciativa para que se comenzara a aprender JS y no solo librerías como Jquery; que por cierto, son muy útiles; sin embargo, los desarrolladores se dieron cuenta que muchas personas sabían más cosas de la librería que del mismo lenguaje.

1
5 años

Entendido el concepto de Vanillajs, pero mi pregunta es… ¿el concepto sólo se aplica si se usa la librería de JQuery o también aplica para otros frameworks (Angular, Vue o Esvelt) y librerías (React)?