> Manuales > Desarrollo en Javascript del lado del cliente

Cuáles son las librerías de manipulación del DOM y Ajax más conocidas, que vinieron a aportar algo de luz al desarrollo Javascript con la llegada de las web 2.0.

Listado librerías Javascript para manipular el DOM

Actualizado: este artículo se escribió cuando se inició una nueva etapa en el desarrollo con Javascript, en la que aparecieron diversas herramientas que nos permitían resolver un problema crítico con el que nos encontrábamos al desarrollar código del lado del cliente. Actualmente muchas de estas librerías han desaparecido o simplemente existen pero no se usan prácticamente nada. De entre todas ellas, hoy te recomendaríamos jQuery, pero lo cierto es que de un tiempo para aquí ya ni es necesaria, dado que todos los navegadores tienen un Javascript muy fiel al estándar, por lo que los problemas que resolvía jQuery hoy realmente no son problemas realmente y se puede hacer todo fácilmente con Javascript.

Contexto histórico

Durante muchos años asistimos a lo que se conoce como la Guerra de los navegadores. Cada navegador hacía sus propios lenguajes o los adaptaba a su manera, en parte por ir más rápido que otros navegadores y en parte por hacer que los desarrolladores desarrollasen de manera específica para ellos, evitando que otros browser se beneficiasen de su popularidad y sus avances.

Debido a las diferencias que existían en los navegadores. En aquella época era un auténtico sufrimiento desarrollar con Javascript porque en cada navegador las cosas funcionaban de manera distinta y los desarrolladores teníamos que hacer código que funcionase en navegadores distintos, que implementaban en Javascript a su manera, sin atender a un estándar.

En aquella época aparecieron multitud de librerías en un panorama que acabó dominando de manera abrumadora jQuery. Son esas librerías las que hemos cubierto en este artículo. Hoy de todos modos estamos en otra etapa, en la de las librerías y frameworks basados en componentes, de las que no hablamos nada en este artículo, pero que tienes enlazadas en la categoría de Javascript.

Librerías para manipulación del DOM y Ajax

Estoy haciendo una investigación sobre librerías Javascript y Ajax para elegir uno de ellos y utilizarlo en uno de nuestros proyectos. En principio he visto que en la web hay infinidad de opciones, algunas con muy buena pinta.

Parece que el mundo de los framework para Javascript se está popularizando mucho, a juzgar por las numerosas opciones. Nosotros hasta ahora para hacer Javascript Cross-browser (compatible con todos los navegadores) venimos utilizando unas librerías que explicamos en el manual Cross Browser Javascript DHTML. Por otra parte, para trabajar con Ajax y PHP venimos utilizando las librerías Xajax, que también hemos relatado en el manual Trabajo con Ajax en PHP utilizando Xajax. Pero claro, con un Framework de Javascript igual matamos dos pájaros de un tiro y nos facilita mucho la creación de interfaces de usuario avanzadas en Javascript, necesarias para hacer proyectos de la web 2.0.

Para empezar estoy haciendo un listado de las distintas opciones que he encontrado. Luego investigaré a fondo los framework que he visto que están teniendo más aceptación por la comunidad de desarrolladores y los probaré. Entonces escribiré artículos más técnicos y didácticos.

Entonces, sin más tardar, aquí va el listado de Frameworks Javascript:

Mootools: "El framework javascript compacto"
Este producto tiene buena pinta. Según parece es sencillo y bien planificado. Entre las virtudes que he visto más destacadas es que es ligero, pudiendo incluso definir qué partes del framework incluir y cuales no, para que se carguen los scripts más rápido en el cliente. A mi algunas personas me han hablado muy positivamente de este framework, así que quizás sea por el que empiece la investigación en detalle.
http://mootools.net/

Actualizado: definitivamente, Mootools es una joya. El aprendizaje no ha sido fácil, pero una vez lo controlas, puedes ver que el modo de desarrollo se hace sencillo, escalable y todo muy reutilizable. Está muy libre de errores y se está mejorando con bastante rapidez. Es ligero y además te permite un tipo de descarga en el que eliges los componentes que quieres utilizar, para que el peso del framework sea sólo el imprescindible para cada sitio. Existen además muchos componentes y plugins que se pueden integrar fácilmente.

Si te interesa, visita el Manual de Mootools que hemos publicado en DesarrolloWeb.com, que te ayudará mucho a aprender a programar con esta potente solución.

jQuery: "Librería Javascript para escribir menos y hacer más"
Parece ser que este es uno de los frameworks con más aceptación, por estar estupendamente documentado y por ser muy simple y permitir desarrollar con un código limpio y elegante. El peso de las librerías es razonable y además tiene muchos fans incondicionales, por lo que no me cabe duda que será un buen proyecto.
http://jquery.com/

Actualizado: estamos publicando un Manual de jQuery, con el que podréis aprender este Framework. Puedo decir que, a medida que lo voy conociendo mejor, más me va gustando y realmente hay muchas cosas que se hacen con una sencillez muy de agradecer.

Prototype: "El framework javascript cuyo propósito es facilitar el desarrollo de aplicaciones dinámicas"
Este framework también resulta muy interesante, pues hay muchos usuarios que lo utilizan habitualmente y con éxito. Parece una opción altamente profesional y además tiene la garantía que lo utilizan para la creación de sus webs empresas muy conocidas a nivel mundial. A mi me ofrece muchas garantías, pero hay ciertos detractores que acusan a este framework de ser muy pesado y ralentizar los sitios web donde se utiliza.
http://www.prototypejs.org/

YUI: "The Yahoo! User Interface Library"
Es un framework que utilizan los desarrolladores de Yahoo! para hacer su portal, que hace tiempo se ha distribuido para uso libre. Que provenga de Yahoo! para mi ya resulta una importante garantía y parece que tiene desarrollados una importante gama de controles y componentes. Tendría que probarlo personalmente para dar una opinión, pero parece que hay muchas personas que también lo acusan de ser un poco pesado. Esta librería ya no se mantiene.
http://developer.yahoo.com/yui/

Dojo: "Experiencias grandes… para cualquiera"
Parece un producto también bastante atractivo y una opción seria. No obstante, he leído opiniones discordantes acerca de él. Algunos no dudan en calificarlo entre los mejores frameworks Javascript y otros acusan que es pesado y poco depurado, que arroja errores bastante fácilmente.
http://www.dojotoolkit.org/

Qooxdoo: "La nueva era del desarrollo web"
Es un framework Javascript ajax multipropósito, opensource con dos tipos de licencia. Her leído pocas opiniones sobre este software, pero parece digno de considerar.
http://qooxdoo.org/

GWT Google Web Toolkit: "construye aplicaciones Ajax en lenguaje Java"
Es un conjunto framework opensource desarrollado en Java, con el que se han creado aplicaciones populares de Google, como Google Maps o Gmail. Sin duda, al tratarse de un producto de Google, no cabe duda que es una opción a considerar seriamente. Tiene un compilador que convierte las clases Java en código Javascript y HTML compatible con todos los navegadores.
http://code.google.com/webtoolkit/

Rico: "Javascript para aplicaciones de Internet de contenido enriquecido"
Otra de las opciones más conocidas para desarrollar aplicaciones para la web 2.0. Es open source y ya se encuentra en la versión 2.0, con lo que se supone que el tiempo de vida le haya ayudado a ser más depurado. He leído por ahí que está poco documentado.
Esta librería ya no se mantiene.

Ext JS: "Documentación, diseño y código limpio"
Este framework Javascript parece ser otra de las opciones serias. Se distribuye bajo licencia Open Source (gratis) y licencia comercial (de pago, pero con soporte y alguna funcionalidad adicional). Lo utilizan empresas bastante importantes, como Adobe. Me ha llamado la atención que tiene soporte para Adobe Air.
http://extjs.com/

Todavía quedan más opciones, pero voy a dejarlas listadas sin muchos comentarios, porque tampoco he investigado mucho y no las he visto en ningún sitio comentadas como opciones de primera línea.

Cómo está el panorama de las librerías Javascript en la actualidad

Actualmente (y estamos en este momento en 2022) el panorama de las librerías Javascript para trabajar con la página ha cambiado bastante. Vamos a resumir los puntos más importantes del estado actual.

Dominio de jQuery como librería de manipulación del DOM

De todas las opciones presentadas en este artículo ha quedado un claro ganador, que es jQuery.

Sin embargo, como hemos dicho antes, ya no existe una necesidad real de usar jQuery, dado que el Javascript en todos los navegadores es muy similar. Hacer las cosas con otras librerías menos pesadas, centradas en lo que realmente se necesita, o solamente con Javascript es una práctica aconsejada.

A Pesar de que jQuery no es realmente necesario, el número de webs que lo usan es mayoritario todavía en la actualidad, principalmente porque forma parte como dependencia de muchas herramientas de desarrollo como CMS y plugins. Cerca del 77% de las webs actualmente usan jQuery, lo que es un número brutal de proyectos.

Librerías basadas en componentes

Actualmente lo que está más recomendado es el desarrollo basado en componentes. Los componentes serían como los plugin de jQuery. En vez de realizar funcionalidades mediante scripts sueltos, difíciles de colaborar entre sí, difíciles de mantener, la tendencia es desarrollar siempre componentes que encapsulan una funcionalidad dada, de modo que puedas reutilizarlos en todos los proyectos.

El desarrollo basado en componentes es como la evolución que la programación orientada a objetos trajo con respecto a la programación estructurada. Permitir un desarrollo más sencillo, flexible, mantenible y a la par, una experiencia mejor para los desarrolladores.

Librerías como React son pioneras en el desarrollo basado en componentes. De hecho React es la que más se usa de las librerías basdadas en componentes.

Aunque estadísticas en 2022 indican que su uso a nivel global sigue siendo mucho mejor en relación a jQuery. Cerca de un 3% de los sitios de Internet usa React, lo que es un número elevado, pero no es nada en comparación. ¿Entonces por qué está tan de moda React?

Actualmente proyectos con una experiencia más elaborada, que son los que verdaderamente requieren profesionales porque necesitan un desarrollo a medida, se hacen con librerías basadas en componentes. Pocas personas confían en jQuery para hacer proyectos avanzadados, porque no facilita el desarrollo de aplicaciones, sino de pequeños plugin de uso puntual que no es fácil hacerlos funcionar de manera orquestada.

Otras librerías o frameworks que promueven el desarrollo basado en componentes son Angular y Vue, las cuales están pensadas para el desarrollo de aplicaciones modernas y avanzadas, fáciles de escalar.

La respuesta del estándar Javascript: Web Components

No podemos dejar de mencioar los Web Components, que es un estándar Javascript para desarrollar componentes. Con Web Components puedes hacer cosas similares a lo que haces con React, desarrollar componentes reutilizables y encapsulados, pero solamente con el propio lenguaje Javascript.

Los Web Components tardaron tiempo en establecerse, porque ha sido lento llegar al soporte total de la actualidad, pero proponen hacer con Javascript cosas para las que antes necesitabas librerías. Sin embargo, para cubrir todo el espectro de ventajas que te ofrece React, como templates vitaminados y reactivos, todavía hay que recurrir a librerías como Lit (en 5Kb consigue toda la funcionalidad de React, pero mucho más cercana al desarrollo estándar). Existen diversas librerías basadas en Web Components en la actualidad.

Lo bueno de Web Components es que tienes un desarrollo transversal, con componentes que funcionan bien en cualquier proyecto, como sitios web básicos hasta aplicaciones React, Angular, etc. Por ello es normal que las empresas comiencen a migrar todas sus bibliotecas de componentes de interfaz gráfica a Web Components, porque saben que los podrán usar en cualquier proyecto donde los necesiten y al ser estándar garantizan que estos componentes se puedan usar por mucho más tiempo que los basados en otras abstracciones de componentes.

Esto es todo por el momento. Esperamos que estas explicaciones te hayan resultado de interés y te hayan aclarado bastante las ideas.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual