Qué aprender ¿jQuery o JavaScript nativo?

Si has llegado hasta este enlace, seguramente estés buscando respuesta a la disyuntiva que cita el título de este artículo. «Qué aprender ¿jQuery o JavaScript nativo? Este artículo es una guía para que con las razones recogidas en él puedas tomar una decisión.

Quizás eres una persona desesperada y no tienes paciencia para leer un extenso artículo, la respuesta corta es: «no lo pienses, aprende JavaScript nativo» y si quieres, después puedes aprender jQuery. Si tienes curiosidad en conocer mi opinión al respecto y las razones que me llevan a declarar la anterior afirmación, puedes seguir leyendo.

¿Qué ha sido jQuery para el desarrollo web?

Para comenzar, debo mencionar que jQuery es una de las más grandiosas librerías JavaScript que se han creado en los últimos tiempos. Sin duda alguna ha impulsado el desarrollo web a lo que es hoy en día. Con ella los desarrolladores web hemos podido crear cosas que antes ni imaginábamos y seguro ha obligado a los navegadores a implementar muchas de las funciones que tienen de manera nativa en este momento. Todo esto es cierto, pero también lo es que la fragmentación que existía hace muchos años atrás hoy es casi inexistente. Si no necesitas soportar navegadores como Internet Explorer 9 o inferiores (teniendo en cuenta que no deberías necesitarlo), puedes escribir código nativo que funcione en más del 95% de los dispositivos actuales de manera correcta.

¿Por qué usar jQuery?

¿Por qué usar entonces una librería que sirva de intermediaria entre nuestro código y las funciones que pueden hacer los navegadores de manera nativa? Las respuestas comunes a esta pregunta son variopintas: capacidad de animar, modificar fácilmente el DOM, manejo sencillo de las peticiones AJAX, rapidez de desarrollo, facilidad de mantener el código, etc. La verdad es que la única respuesta verdadera a dicha pregunta, en la mayoría de los casos es: «por comodidad». Ninguna de las respuestas anteriores es totalmente cierta y aquí te dejo algunas razones:

Es muy versátil y veloz para animar

Hay múltiples librerías más versátiles y más veloces que jQuery para animar, buenos ejemplos son GSAP o Velocity.js. Esta no debería ser ni de cerca una de las razones por las que has escogido jQuery.

Puedo modificar el DOM de manera sencilla, sin utilizarla es muy complicado

Se puede modificar el DOM usando solamente JavaScript, ¿que puede ser un poco más larga de escribir una línea de código?, esto es cierto, pero no por eso está totalmente justificado usar una librería de estas características sólo para este propósito.

Es muy versátil para manejar peticiones AJAX sin importar el navegador

Esto es cierto, pero hoy en día se puede crear un único código usando una petición XMLHttpRequest y éste será soportado por cualquier navegador superior a Internet Explorer 9. Es cierto, una petición AJAX con jQuery requiere un código más pequeño. Nada que no pueda solventar un pequeño snippet que haga esta función o librerías muy populares para este propósito como axios, ajax-request, request o superagent. Ésta tampoco es una justificación para cargar toda una librería.

Es muy sencillo y rápido de escribir

Si se ha escogido jQuery, realmente no ha sido porque es sencillo y rápido de programar. Existen disímiles lenguajes que compilan a JavaScript que ayudan verdaderamente a acelerar la escritura de código como CoffeScript  o LiveScript. Si hemos escogido jQuery es por otras razones, pero no por éstas.

El código es muy comprensible y fácil de leer

Todos los proyectos basados en jQuery en los que he trabajado, han terminado siendo una amalgama de código nativo y código jQuery. Aunque se utilice la técnica de nombrar a las variables jQuery empezando por un símbolo de $, al final se termina mezclando todo. Muchas veces se necesita acceder al elemento nativo dentro de un objeto jQuery, usando para ello el método $.get o accediendo directamente a él usando la nomenclatura de Array[]. Mientras que por otro lado en reiteradas ocasiones necesitamos usar métodos de jQuery en una variable que no lo es, y para ello englobamos dicha variable en $() para lograr nuestro propósito. El resultado es un código complejo y muy lejano a lo que se esperaba en un inicio.

Es muy fácil de escalar y mantener

Esto no es muy cierto. Aparte del punto anterior, casi todo proyecto basado únicamente en jQuery termina siendo una mezcla del acceso a los datos, con el manejo de los eventos y la modificación del DOM. Muchos intentan separar esto creando sus propios módulos, pero por mucho esfuerzo que se haga, normalmente termina mezclándose. Es muy común que un proyecto jQuery muy grande termine convirtiéndose en un espagueti, a no ser que seamos demasiado pulcros con el código o utilicemos un framework que nos facilite la tarea. El problema reside en que jQuery no es un framework, es solamente una librería para facilitarnos el manejo del DOM, los eventos y las peticiones AJAX, nada más. Si deseamos que nuestro proyecto sea realmente sencillo de mantener y fácil de extender lo mejor es ir a por un modelo MVC. Aquí tenemos para escoger pues los hay de todos los colores y sabores. Los más populares: Angular.js, Backbone.js o React.js

Concluyendo, qué debo aprender ¿jQuery o JavaScript nativo?

Una de las cosas buenas de jQuery es que se puede asimilar rápidamente debido a su baja curva de aprendizaje. Pero esta misma razón es una de las cosas más negativas. Muchos desarrolladores nóveles han aprendido esta librería y no se han preocupado en aprender cómo hacer lo mismo en JavaScript nativo. Esto provoca que les cueste más trabajo adoptar otras librerías o frameworks, algo fundamental hoy en día.

Por otro lado, muchos de los desarrolladores con mucho tiempo programando en JavaScript y para los cuales jQuery fue la salvación en los tiempos en que aun se daba soporte a Internet Explorer 6, han seguido utilizándola y les cuesta trabajo cambiar el chip e intentar volver a programar sin usar jQuery. Mi consejo, aprende JavaScript nativo, esto te ayudará a tener un espectro más amplio y poder adoptar después cualquier librería o framework de manera más sencilla, incluyendo jQuery.

Entonces, ¿no debo usar nunca más jQuery?

Para nada quiero decir con este artículo que jQuery debe desaparecer de nuestras vidas. Dependiendo del proyecto puede ser la clave para resolver un problema de manera rápida y eficaz. La verdad es que no existe una fórmula mágica para determinar qué tecnología usar en un proyecto, esto es algo que se debe determinar sobre la marcha. Pero mi consejo de manera general es que si se trata de un proyecto de mediana o gran complejidad intentes ir por un framework verdadero, muchos de los cuales son transparentes a jQuery, dándote la posibilidad de usarlo o no.

Eso sí, te recomiendo que al menos te preocupes por buscar cómo hacer lo mismo que logras con jQuery con JavaScript nativo. Esto provocará que no uses una librería completa para hacer funciones que quizás hubieras resuelto de manera nativa.

¿Cómo comenzar?

Si dominas jQuery, no sabes programar en JavaScript nativo y no estás convencido en cambiar aunque tu proyecto no necesite depender de esta librería, aquí te dejo pequeñas operaciones cotidianas escritas en JavaScript nativo. Quizás observar cómo hacer las cosas puedan ayudarte a prescindir de jQuery cuando realmente no haga falta:

1) Seleccionar elementos

Existen varios métodos para recorrer el DOM y seleccionar un elemento. Aunque los más potentes son querySelector y querySelectorAll, ya que con ellos se puede seleccionar cualquier elemento usando para ello los selectores de CSS, también he situado otros más antiguos que incluso pueden aplicarse en versiones antiguas de Internet Explorer.

Código HTML

<div id="container">

	<h2>Sección</h2>

	<form action="POST">
		<input type="radio" name="option" value="1">Sección 1<br>
		<input type="radio" name="option" value="2" checked>Sección 2<br>
		<input type="radio" name="option" value="3">Sección 3
	</form>

	<div class="section">
		<span>Sección 1</span>
	</div>

	<div class="section active">
		<span>Sección 2</span>
	</div>

	<div class="section">
		<span>Sección 3</span>
	</div>

</div>

Código JavaScript

//---Seleccionar el elemento con id "container"
var container = document.getElementById("container");

//---Seleccionar el primer elemento de tipo h2 dentro de #container
var h2 = container.getElementsByTagName("h2")[0];

//---Seleccionar todos los elementos que tengan la clase .active dentro de #container
var actives = container.getElementsByClassName("active");

//---Seleccionar el input de tipo radio que se encuentre activado dentro de #container
var selected = container.querySelector("input[type='radio']:checked");

//---Seleccionar todos los elementos "span" que se encuentren dentro de algún "div" dentro de #container
var spans = container.querySelectorAll("div > span");

2) Guardar datos en los elementos

Usando la propiedad dataset de los elementos HTML, podemos leer y escribir variables directamente en éstos. Esto quedará guardado en los atributos de tipo data-* disponibles en HTML5. Para acceder a una variable llamada data-variable-name debemos usar el estilo CamelCase y utilizar variableName:

Código HTML

<div
  class="person"
  data-name="Juan"
  data-last-name="Márquez"
  data-year="1997"
  data-age="20"
>
</div>

Código JavaScript

//---Acceder al elemento
var person = document.querySelector(".person");

//---Acceder a las variables "name" y "age"
var name = person.dataset.name;
var age = person.dataset.age;

//---Variar las variables "last-name" y "year"
person.dataset.lastName = "Martínez";
person.dataset.year = 1996;

//---Determinar si existe el dataset "person-gender" y si no existe crearlo
if("personGender" in person.dataset === false){
	person.dataset.personGender = "male";
}

3) Manipular atributos y clases de los elementos

Para este ejemplo usaremos el mismo código HTML y las mismas variables de la sección 1)

//---Añadir un atributo "rel" con valor "section" al elemento #container
container.setAttribute("rel", "section");

//---Si existe el atributo "rel" en el elemento #container removerlo
if(container.hasAttribute("rel")){
	container.removeAttribute("rel");
}

//---Añadir la clase .wide al elemento #container si la clase no existe
if(!container.classList.contains("wide")){
	container.classList.add("wide");
}

//---Remover la clase .wide del elemento #container
container.classList.remove("wide");

//---Añadir la clase .active o removerla si existe
container.classList.toggle("active");

//---Añadir la clase .active si la variable "select" es igual a 1 si no es igual a 1 eliminarla
container.classList.toggle("active", select === 1);

4) Manipular el DOM

Para manipular el DOM hay también varios métodos nativos:

Código HTML

<div id="container">
	<div class="section">
		<span>Texto</span>
	</div>
</div>

Código JavaScript

//---Variables
var container = document.querySelector("#container");
var span1 = container.querySelector(".section span");

//---Variar el texto del "span1"
span1.innerText = "Texto manipulado";

//---Crear un nuevo "span" (span0) y añadirlo antes del anterior "span" (span1)
var span0 = document.createElement("span");
span0.innerText = "Antes del texto manipulado";

span1.parentNode.insertBefore(span1, span0);

//---Clonar el "span1" e insertar el elemento clonado al final
var span2 = span1.cloneNode(true);

span2.innerText = "Después de texto manipulado";

span1.parentNode.appendChild(span2);

5) Eventos

El manejo de eventos también puede ser realizado de manera nativa

//---Al leer el DOM
document.addEventListener("DOMContentLoaded", function(){

	//---Al clickear el elemento #container
	container.addEventListener("click", clickElement);

});

//---Función clickElement
function clickElement(){

	alert("elemento presionado y evento eliminado");

	//---Remover el evento del elemento #container
	container.removeEventListener("click", clickElement);

}

Peticiones AJAX

Las peticiones AJAX ya pueden ser realizadas de manera estándar y que funcionen en más del 90% de los navegadores actuales. El siguiente código es soportado por Internet Explorer 10+.

var request = new XMLHttpRequest();

request.open("GET", '/rest/url', true);

//---Al recibir respuesta del servidor
request.onload = function() {

	if (this.status >= 200 && this.status < 400) {

		//---Acceder a los datos
		var data = this.response;

	} else {

		console.log("Se ha alcanzado el servidor pero ha retornado error");

	}

};

//---Si no se puede alcanzar el servidor
request.onerror = function() {

	console.log("error");

};

//---Enviar la petición
request.send();