Saltar al contenido

Vanilla JS

Es posible que haya oído hablar de Vanilla JS o Vanilla JavaScript muchas veces si es un desarrollador web. Cuando lo escuché al principio, estaba pensando: «Oh, debe ser otro marco de JS o biblioteca genial con un nombre delicioso». Y luego, cuando traté de buscarlo en Google para verificarlo, resultó que estaba completamente equivocado.

Vanilla JS

vanilla js

La mayoría de la gente piensa en Vanilla en forma de sustantivo como «Helado con sabor a vainilla». Seguro que pensaste igual, pero, ¿Realmente quieres saber qué es vanilla js?

Vanilla JS, o JavaScript puro, se refiere al uso del lenguaje de programación JavaScript sin la incorporación de librerías o frameworks externos. En otras palabras, se trata de escribir código JavaScript utilizando solamente las características y funcionalidades nativas proporcionadas por el propio lenguaje, sin depender de bibliotecas externas.

Vanilla JS es la forma original y básica de utilizar JavaScript para crear interacciones dinámicas en páginas web. Permite a los desarrolladores aprovechar las capacidades intrínsecas de JavaScript, como manipulación del DOM (Document Object Model), manejo de eventos, operaciones de datos, y mucho más, sin depender de librerías o frameworks adicionales.

Aunque existen numerosos frameworks y librerías populares como jQuery, React, Angular, Vue, y otros, que facilitan el desarrollo de aplicaciones web, el uso de Vanilla JS puede ser beneficioso en ciertos escenarios donde se busca un mayor control, rendimiento y simplicidad en el código. Además, tener un buen entendimiento de JavaScript puro es fundamental para comprender cómo funcionan estos frameworks y librerías en su núcleo.

Te puede interesar:   Tutorial de Three.js - Hola Mundo Cubo

En resumen, Vanilla JS se refiere al uso del lenguaje JavaScript sin la incorporación de librerías externas, y puede ser una opción preferida en algunos casos para desarrolladores que buscan mayor control y comprensión del lenguaje en su forma original.

Vanilla JS o JavaScript vanilla en forma de adjetivo tiene un significado completamente diferente:

¡Sí, estás en lo correcto! JS Vanilla es solo una broma. Un término sofisticado (o sarcástico) para llamar a javascript puro.

Pero entiendo por qué. En estos días, hay toneladas de framework y javascript disponibles para ti. ¡Y ellos también son buenos! Entonces, ¿por qué escribir su propio código cuando puede usar el complemento y terminar con él? Y las estadísticas a continuación confirmadas.

Alrededor del 75% de todos los sitios web utilizan al menos 1 biblioteca o framework javascript. Sin embargo, no es sorprendente que se pueda olvidar que hoy en día se pueden hacer muchas cosas sin la necesidad de bibliotecas JavaScript adicionales. Una vez, vi a mi colega junior incluir toda la biblioteca JQuery solo para seleccionar el elemento DOM por ID.

Te puede interesar:   📖 El gran Libro de HTML5, CSS3 y Javascript

Le pregunté por qué durante la revisión del código de pares. Dijo: «No lo sé, siempre seleccionamos el elemento con jQuery selector. Simplemente no me sentía bien si volvía a ser nativo «.

No me malinterpretes No estoy en contra de usar bibliotecas. (De hecho, los usé mucho) Pero con ES6 javascript, podemos hacer muchas cosas sin tener bibliotecas adicionales. ¡Y usar vanillaJS ayuda a que tu página se cargue / procese un poco más rápido también!

Por último, hay personas que incluso van lejos para configurar un tipo de página de biblioteca oficial para vanilla JS con tutorial. Mira el video de abajo. Es bastante gracioso debo decir🙂

Aquí te presento un ejemplo básico de Vanilla JS que muestra cómo manipular el DOM (Document Object Model) para cambiar el contenido de un elemento HTML cuando se hace clic en un botón:

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de Vanilla JS</title>
</head>
<body>
  <h1 id="titulo">¡Hola, Mundo!</h1>
  <button id="boton">Haz clic</button>

  <script>
    // Obtener referencia al elemento del DOM
    var titulo = document.getElementById('titulo');
    var boton = document.getElementById('boton');

    // Agregar un evento de clic al botón
    boton.addEventListener('click', function() {
      // Cambiar el contenido del título cuando se hace clic en el botón
      titulo.textContent = '¡Hola, Vanilla JS!';
    });
  </script>
</body>
</html>

 

Te puede interesar:   Frases de Programadores

En este ejemplo, utilizamos Vanilla JS para obtener referencias a elementos del DOM utilizando document.getElementById() y luego agregamos un evento de clic al botón utilizando addEventListener() para cambiar el contenido del elemento de título (<h1>) cuando se hace clic en el botón.

Es importante destacar que este es solo un ejemplo básico y que Vanilla JS ofrece muchas más funcionalidades para manipular y trabajar con el DOM, manejar eventos, operar con datos, hacer peticiones HTTP y mucho más. Con Vanilla JS, los desarrolladores tienen un mayor control sobre el código y pueden aprovechar al máximo las capacidades nativas de JavaScript para crear aplicaciones web personalizadas y eficientes.

Vanilla JS página: http://vanilla-js.com/ 

Continua aprendiendo con nosotros:

Detectar dispositivo móvil JavaScript
Sistema de inventario en php y MySQL completo gratis
¡Haz clic para puntuar esta entrada!
(Votos: 1 Promedio: 5)
Comparte