# ¿Por qué discutimos el futuro de jQuery?

¡No te pierdas el video de arriba del artículo!

Porque jQuery todavía ejecuta la mayoría de la lógica web del frontend! Alimenta alrededor del 70% de las principales páginas web y el 20% de toda la web (Fuente). Eso es enorme!

Pero esto hace que la pregunta sobre su futuro sea aún más extraña.

jQuery tiene problemas. Está en todas partes y no es a prueba de futuro. Era una herramienta increíble cuando se lanzó en 2006, pero los problemas principales que solucionó en ese momento ya no son problemas. En su lugar, ahora puede encontrarse con muchos más problemas al usar jQuery.

Para entender esto, consideremos los problemas que jQuery solucionó en 2006.

JavaScript estaba un poco roto y los navegadores lo implementaron de manera muy diferente

Esta fue una de las principales cosas con las que jQuery ayudó. De repente, tenías una API fácil de usar que te permitía manipular el DOM. Y aún mejor que eso: ¡La misma API funcionó en todos los principales navegadores!

$('h1').text('Awesome!')

JavaScript y la web en su conjunto eran mucho menos maduros

jQuery permitía a los desarrolladores simplemente «hacer más» en la web, en la interfaz para ser precisos. Crear interfaces de usuario atractivas (para las que necesita JavaScript) era más fácil porque podía usar una API bien documentada. Animar elementos, agregar y eliminar contenido, cambiar estilos y reordenar elementos fue significativamente más fácil de lograr que con JavaScript vainilla. jQuery también agregó una potente y accesible API Ajax que también facilitó el envío de solicitudes en segundo plano. Este es un componente básico de las IU impulsadas por JavaScript, ya que no tiene que cargar una nueva página en cada acción del usuario y puede cargar o manipular datos del lado del servidor detrás de escena.

    Aprender Vue.js

    Vue.js simplifica la creación de páginas web reactivas. Una sintaxis agradable + funciones potentes, ese no es el peor paquete que podría obtener.

    Learn React

    React es una gran alternativa a Vue.js. ¡Es extremadamente popular y no debes perdértelo!

    Aprender Angulares

    Angular empezó todo! Aprende el marco que es la madre de React.js y Vue!

    # ¿Qué ha cambiado?

    Los problemas solucionados por jQuery ya no son problemas.

    JavaScript maduró, la compatibilidad con navegadores mejoró mucho. Tenemos un ecosistema de desarrollo de frontend vibrante con miles de paquetes y herramientas, podemos usar bibliotecas Ajax mucho más potentes como Axios si queremos.

    Esto no significa que todo sea genial, pero los problemas principales que solucionó jQuery ya no existen.

    En su lugar, jQuery ahora es una herramienta que a menudo (no siempre, por supuesto) utilizan los desarrolladores web menos experimentados que nunca hicieron el cambio a JavaScript vainilla o marcos como Angular o React.

    Y eso es importante de entender por cierto: No estamos hablando solo de jQuery vs Angular. JavaScript Vainilla es una alternativa real!

    Mientras que el recorrido y la manipulación del DOM era mucho más difícil en 2006, ahora tenemos muchas funcionalidades como el selector de consultas integrado en JavaScript de vainilla. Estas cosas funcionan e incluso funcionan en navegadores.

    Si tienes la posibilidad de usar JavaScript vainilla en lugar de lograr básicamente lo mismo con jQuery, obviamente es mejor usar la opción vainilla. Guardas la descarga del paquete adicional y no tienes que aprender una sintaxis adicional.

    # No es solo JavaScript vainilla

    Aunque no es solo JavaScript vainilla. Simplemente tenemos mejores alternativas en estos días.

    JavaScript vainilla claramente todavía tiene sus límites. Si está creando una interfaz de usuario compleja con mucha lógica implementada a través de JavaScript, rápidamente termina en situaciones en las que esencialmente tiene que escribir algún tipo de código espagueti. Administrar el estado DOM es difícil después de todo.

    Y no solo eso. Regularmente se encuentra con situaciones en las que su lógica de recorrido DOM se rompe si alguna vez decide reordenar su código HTML (o introducir nuevos elementos).

    <div> <h1>What's new?</h1> <div> <p>An interesting discussion over the future of jQuery evolved over the last days.</p> </div></div>
    $('#news') .find('div') .find('p') .text('This replaces the paragraph text - hopefully')

    Este código va a dejar de trabajar si cambia el código HTML como este.

    <div> <h1>What's new?</h1> <p>An interesting discussion over the future of jQuery evolved over the last days.</p></div>

    Y lo mismo sería cierto para JavaScript cruce de las técnicas.

    Obviamente, puede escribir código que aún funcionaría en el escenario anterior. Pero podría romperse en diferentes circunstancias. O terminas con una larga cadena de métodos transversales para seleccionar de forma segura lo que planeas manipular. Y esto solo se vuelve más difícil si crea o elimina manualmente elementos DOM a través de jQuery.

    Si alguna vez tuvo un caso de uso en el que necesitó agregar y eliminar elementos de forma dinámica, por ejemplo, en función de algunos datos de array de JavaScript, conoce el dolor que se asocia con eso cuando usa jQuery o JavaScript vainilla. Déjelo en paz si luego desea trabajar con estos elementos (por ejemplo, adjuntar oyentes de clics o estilos).

    # Frameworks al rescate!

    ¡Hay una solución para eso!

    Frameworks de JavaScript como Angular, React (oh, eso es una biblioteca en realidad, perdónenme, amigos de React) o Vue, por ejemplo.

    Todos estos frameworks tienen una diferencia fundamental en comparación con jQuery( y JavaScript de vainilla): No escribes código para navegar manualmente por el DOM.

    En su lugar, se utiliza un enfoque declarativo.

    ¿Qué significa esto?

    Bueno, aquí es cómo usted puede seleccionar y manipular el contenido HTML de anteriormente en este artículo – esta vez utilizando Vue:

    <div> <h1>What's new?</h1> <div> <p>{{ myText }}</p> </div></div>
    new Vue({ el: '#news', data: { myText: 'This never fails to hit its target', },})

    Como puede ver, Vue sigue claramente una filosofía diferente de jQuery hace. Lo mismo sería cierto para React y Angular, por cierto.

    Para el resto de este artículo, usaré Vue para los ejemplos, simplemente porque tiene una sintaxis muy agradable y es fácil de comenzar. Importa Vue a tu página web y listo.

    Pero Angular y React también siguen enfoques comparables. Si desea obtener más información sobre estos, tengo recursos útiles para usted:

    • Angular-La Guía completa
    • React-La Guía completa
    • Angular vs React vs Vue

    Y, por supuesto, en caso de que desee profundizar en Vue, también tengo recursos sobre eso: Vue – La Guía completa.

    Todos se centran en permitirle marcar simplemente los lugares en el DOM donde se debe mostrar el contenido. No tiene que describir el camino a ese lugar, ¡el marco lo calculará por usted!

    # ¡Pero la solución de Sdv es más larga!

    Si compara la solución jQuery con la solución Vue, verá claramente que el enfoque Vue es un poco más largo (en términos de líneas de código escritas).

    Pero este fue un ejemplo muy simple! Los ejemplos más complejos crecen rápidamente en tamaño y, lo que es peor, en complejidad cuando se trata de código jQuery requerido. Pero no para Vue (u otros frameworks).

    Esto se debe a que el enfoque general es muy diferente. Si solo describe su estructura de datos, su lógica y cómo conecta sus datos al DOM (su plantilla, por así decirlo), no tiene que escribir tanto código adicional cuando su código HTML o lógica de negocios se vuelve más compleja.

    Para jQuery, eso es algo diferente. Si necesita llegar a elementos que están profundamente anidados o si necesita hacer cosas complejas como bucear a través de elementos que se crearán, rápidamente terminará con el código más complejo (y también propenso a errores) que vio anteriormente.

    Esto producirá:

    <div> <div>Apples</div> <div>Bananas</div> <div>Milk</div></div>

    Los elementos anidados <div> se puede hacer clic en los elementos y la clase CSS highlighted se agregará a cualquier elemento al hacer clic.

    Considere el fragmento de código Vue (y HTML) que lograría lo mismo:

    new Vue({ el: '#output', data: { shoppingList: , },})

    Sigue siendo una línea de códigos que necesita aquí, pero es mucho más fácil de entender, mantener y editar! Declaras cómo debería ser tu código HTML al final, describes tus datos y administras tu estado selected en tu código JS.

    La magia sucede con la ayuda de las llamadas directivas-v-for (para bucear), v-on (para escuchar eventos) y v-bind (para cambiar el elemento HTML) están haciendo todo el trabajo aquí. React y Angular generalmente tienen soluciones comparables, aunque React no usa directivas. Todavía no te obligará a escribir manualmente todo el código para seleccionar y crear elementos.

    A medida que su aplicación web (frontend) crece y crea UIs aún más complejas, le encantará un enfoque declarativo que no lo obligue a entrar en cadenas interminables e inalcanzables de llamadas css()$(...) y appendTo().

    # ¿Es jQuery más pequeño al menos?

    Vue ofrece una sintaxis claramente diferente: hace mucho del trabajo pesado con respecto al acceso y la manipulación del DOM por usted.

    Que claramente tiene que tener un precio, ¿no? jQuery ciertamente es más pequeño, ¿verdad?

    Bueno … no. Ese no es el caso.

    a partir de Marzo de 2018 jQuery pesa 29kb record y en formato gzip, mientras que Vue viene a 30kb record y gzip. ¿Qué pasa con React y Angular?

    React en realidad consta de dos paquetes: ReactDOM y React mismo. Combinado, usted tiene que descargar aproximadamente 34kb record + gzip para ponerla en funcionamiento.

    Angular es mucho más grande que eso, ya que Angular es un marco mucho más grande que es especialmente adecuado para aplicaciones de grandes empresas. Para este tipo de aplicaciones, ganará contra jQuery no por su tamaño de paquete, sino por todo el dolor que le ahorra.

    # Así que never ¿no volver a usar jQuery?

    La pregunta ahora, por supuesto, es si siempre debe usar Vue, Angular o React entonces. ¿O hay casos de uso en los que el uso de jQuery sigue teniendo sentido?

    En general, creo que el tiempo de jQuery está llegando a su fin. Al menos en su forma actual.

    Todavía podría elegirlo para casos triviales, pero ¿por qué no usar JavaScript de vainilla para eso y guardar los 30 kbs adicionales + la sintaxis adicional en la que debe ingresar? Serás un mejor desarrollador web si conoces vanilla JS de todos modos.

    jQuery, obviamente, sigue siendo muy útil en muchas aplicaciones web heredadas y permanecerá allí durante bastante tiempo.

    Si necesita trabajar en este tipo de aplicaciones web, probablemente no encuentre una manera de evitar jQuery por ahora y, por lo tanto, aprenderlo podría ser algo que valga la pena.

    Muchos paquetes populares de terceros también siguen dependiendo de jQuery-Bootstrap, el framework CSS, lo hace, por ejemplo (desafortunadamente, incluso lo hace en su última versión-4.x). Tener que agregar la dependencia adicional debido a un paquete de este tipo es molesto, por lo que siempre trato de averiguar qué hace exactamente jQuery para ese paquete dado. Una vez que obtenga esa información, puede reconstruir la funcionalidad con vanilla JS o algún otro marco y deshacerse con éxito de jQuery a partir de entonces.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.