8

Que es Vanilla js o JavaScript puro

John Andrey
jandrey
16385

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:
2
15Puntos

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

1
9532Puntos

Es muy útil para mi esta info, hace poco empecé con JS y entre javascript puro, ES2015 y ES2016 tengo un lío que mejor no te cuento. Saludos!

1
15863Puntos

o sea vainilla seria escribir javascript nativo, el problema que traia era la compatibildiad , pero ahora con babel esta solicionado eso ya creo

0
3Puntos
3 años

El tema de viabilidad de implementar vanilla javascript viene dada por que los navegadores agregaron soporte para html5 y la especificación ES5, antes de esto la manera mas eficiente de hacer código javascript en todos los navegadores era con el uso de Jquery, aaaa ni mencionar que el uso de IE tenia un amplio mercado en su entonces.

1

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

1
3506Puntos

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

1
3988Puntos
5 meses

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
5363Puntos

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)?

0
238Puntos

¡wow! es una valiosa herramienta para una mejor funcionalidad de nuestros proyectos, debo reconocer que es mi primer acercamiento con esto; hasta me anima a implementarlo en mis prácticas.