Get it on Google Play
23-05-2018
 

Desarrollo frontend: Guía para dominar Javascript vainilla(Vanilla JS)

Vanilla JS

Vanilla JS

Hubo un tiempo en que no eras nadie si no dominabas JQuery. JQuery era el rey para el desarrollo frontend, llegó a ser estándar de facto y se utilizaba en casi todos los proyecto. Pero el mundo de la tecnología es cruel, nadie ni nada escapa a quedar obsoleto y ahora pasa a ser la nueva ‘peste’ que hay que eliminar. Ahora se requiere desarrollar webs, widgets, etc. agnósticos de librerías y versiones(Desarrollos que se pueden soltar en cualquier proyecto y funcionan sin dependencias). El pecado de JQuery es que ya no arregla nada, los problemas que solucionaba ya no existen y es un coste(tiempo de carga, peso, problemas de versiones, etc.) que no lo vale.

Después de esta introducción apocalíptica hay que explicar que Vanilla JS no es nada mas que escribir código Javascript ‘nativo’ o ‘a pelo'(Como os guste mas), sin hacer uso de otras librerías para hacer peticiones Ajax, trabajar con el DOM, etc.

En el artículo de hoy vamos a ver como hacemos las cosas que hacíamos con JQuery pero a pelo:

Seleccionar un elemento y añadirle/consultar contenido en Vanilla JS

var html=document.querySelector('#article').innerHTML;
document.querySelector('#article').innerHTML="Hello World";

var txt=document.querySelector('#article').textContent;
document.querySelector('#article').textContent="Hello World";

Añadirle/quitarle classes a un elemento en Vanilla JS

document.querySelector('#container').classList.add('mi-classe');

document.querySelector('#container').classList.remove('mi-classe');

Seleccionar y recorrer elementos en Vanilla JS

document.querySelectorAll('#container li').forEach(function(currentValue, indice, array){
	/* Aquí el código */
	});

Ver/Modificar un atributo en Vanilla JS

document.querySelector('#container').setAttribute( 'data-scale', '15' );

document.querySelector('#container').getAttribute( 'data-scale' );

Hacer una petición Ajax en Vanilla JS

fetch('url').then(function(response) {
	response.text().then(function(text) {
		document.querySelector("#youtube-videos").innerHTML=text;				      	
		});
	});

Hacer que algo se ejecute al inicio en Vanilla JS

document.addEventListener("DOMContentLoaded", function(event) { 
	/* Aquí el código */
	});

Añadir eventos en Vanilla JS

document.querySelector("#youtube-videos").addEventListener('click', function (event) {
	/* Aquí el código */
	});

Transiciones

Para el tema de las animaciones me voy a remitir al post de 2016 Formación y Desarrollo UX: Transiciones con CSS 3

Si te ha servido, por favor comparte
 

Leave a Reply