Actualizado en junio de 2018.
De todos los lenguajes que puedes utilizar para crear aplicaciones web, JavaScript tiene quizás la selección más robusta de bibliotecas y frameworks realmente útiles. De hecho, hay tantas que puede ser difícil averiguar cuáles usar, especialmente cuando se está empezando.
La diferencia clave entre las bibliotecas y los frameworks de JavaScript es que las bibliotecas consisten en funciones que una aplicación puede llamar para realizar una tarea, mientras que un framework define cómo un desarrollador diseña una aplicación. En otras palabras, el marco de trabajo llama al código de la aplicación, y no al revés. Por supuesto, los desarrolladores siguen necesitando bibliotecas para realizar tareas básicas en la web utilizando JavaScript.
La naturaleza de estas herramientas ha cambiado en los últimos años. En 2015, por ejemplo, jQuery era la principal biblioteca de JavaScript. Hoy en día, según JavaScript Scene, las bibliotecas JavaScript tradicionales siguen siendo importantes, pero se enfrentan a una mayor competencia de los frameworks JavaScript como React, Angular, Node.js y Ember.js.
Al considerar cualquier biblioteca o marco de trabajo de JavaScript, es posible que desee hacer algunas preguntas clave:
- ¿Es la biblioteca o el marco de trabajo lo suficientemente flexible para satisfacer sus necesidades?
- ¿Con qué frecuencia se actualiza la biblioteca o el marco de trabajo para cumplir con los nuevos requisitos de la aplicación y para garantizar la compatibilidad con los nuevos estándares?
- ¿Es la biblioteca o el marco de trabajo seguro? Puede ser muy difícil arreglar los problemas de seguridad más adelante.
- ¿La biblioteca o marco de trabajo goza de un fuerte apoyo de la comunidad? Podría sorprenderse de la frecuencia con la que lo necesitará.
- ¿Existen aplicaciones de ejemplo sencillas? Quieres estar seguro de que la biblioteca o el marco está bien escrito y proporciona documentación utilizable.
Con esto en mente, estamos actualizando nuestra lista, publicada originalmente en 2015, para cubrir bibliotecas y marcos bien conocidos empleados por casi todos los sitios en la web, así como opciones más especializadas diseñadas para apoyar funcionalidades específicas del sitio. Para ayudarte a entender las opciones, hemos enumerado las bibliotecas y frameworks por separado (en orden alfabético):
Bibliotecas JavaScript
D3.js
Muchos sitios web modernos se basan en datos. Los sitios de noticias, por ejemplo, deben refrescar constantemente su contenido, lo que hace imposible reconfigurar la configuración cada pocos segundos para soportar estos cambios. La librería Data Driven Documents, o D3.js, es única porque pone los datos en primer lugar. La captura de pantalla siguiente muestra sólo algunas de las muchas presentaciones de datos que encontrarás en el índice visual de D3.js:
Al hacer clic en una entrada del índice visual se accede a una página de detalles en la que se puede ver una vista completa de la presentación de datos (mostrada a continuación), así como el código subyacente y los datos utilizados para crear la presentación:
El sitio proporciona ejemplos completos diseñados para ayudarle a entender el poder de la biblioteca.
La principal ventaja de esta biblioteca es su manejo extremadamente flexible del contenido. La otra cara de la moneda, sin embargo, es que D3.js no ofrece mucho dinamismo. Si estás trabajando en un sitio de comercio electrónico, por ejemplo, en lugar de simplemente presentar información, esta biblioteca puede no ser la mejor opción. Además de la extrema flexibilidad, la presentación relativamente simplificada de D3.js ayuda a mejorar la velocidad al evitar gran parte del equipaje que otras bibliotecas utilizan para crear presentaciones deslumbrantes. Y si usted encuentra que D3.js es todavía un poco demasiado para sus necesidades, considere Chart.js, una biblioteca más pequeña dedicada a proporcionar gráficos.
jQuery
jQuery se ha ganado su estatus de larga duración como el gobernante reinante de la página web. Muchos sitios siguen utilizando jQuery para la manipulación básica del Modelo de Objetos del Documento (DOM) por tres razones esenciales:
- jQuery es increíblemente fácil de aprender. Proporciona más ejemplos que la mayoría de las bibliotecas, por lo que es muy probable que encuentre un ejemplo que demuestre exactamente cómo realizar su tarea específica.
- jQuery es increíblemente rápido. Debido a que se centra en la realización de tareas específicas bien, jQuery hace que sea posible realizar esas tareas rápidamente.
- jQuery tiene una enorme base instalada. También cuenta con una cantidad significativa de apoyo de la comunidad y colaboradores del proyecto.
Puedes esperar que esta biblioteca esté presente durante mucho tiempo. El tiempo de desarrollo adicional también significa que la documentación está bastante pulida. Como puedes ver a continuación, la documentación desglosa los temas en piezas de fácil comprensión y luego puedes profundizar en detalles adicionales según sea necesario:
Por supuesto, nada es perfecto. Por ejemplo, hay veces que jQuery no funciona del todo igual en varios navegadores. JQuery es sincero sobre estos problemas, y puedes encontrar información sobre el soporte de los navegadores en el sitio.
Por último, a diferencia de otras bibliotecas, jQuery no es una solución completa. Necesitas otro producto, como jQuery UI (ver la siguiente entrada) para construir una aplicación completa. Es importante darse cuenta de que su sitio será más modular y dependerá de más bibliotecas cuando trabaje con jQuery (lo que no es necesariamente algo malo).
jQuery UI
jQuery UI es sólo uno de los muchos complementos para jQuery, pero es el que se ve más a menudo, por lo que lo hemos incluido aquí. Usas jQuery UI para añadir elementos gráficos básicos a tu aplicación después de incorporar jQuery. La biblioteca de jQuery UI viene con todo tipo de widgets interesantes, como acordeones, deslizadores, información sobre herramientas y selectores de fechas, que permiten configurar tu aplicación para que ofrezca servicios útiles.
Puedes profundizar en determinados widgets u otros controles para ver cómo funcionan. Una página suele contener el control en la parte superior, seguido de instrucciones de uso y código de ejemplo. Al igual que con jQuery, se comienza con un ejemplo sencillo, pero se profundiza según sea necesario para ver las adiciones que se pueden hacer.
Esta biblioteca destaca por varias razones. La más importante es que JQuery UI funciona con casi cualquier navegador, por lo que es menos probable que los usuarios se quejen de que su aplicación no funciona como se esperaba. jQuery UI también ofrece un gran número de complementos. Por ejemplo, mientras que jQuery UI carece de un selector de tiempo, puede obtener complementos para realizar esa tarea en lugares como trentrichardson.com/examples/timepicker.
El único problema con el grupo de bibliotecas jQuery es que se han hecho grandes… realmente grandes. A veces una biblioteca simplemente llega a ser demasiado rica en características. El tamaño de las bibliotecas JQuery puede hacer que sean lentas de cargar en los dispositivos más pequeños. Bibliotecas alternativas de terceros como Granim.js y Multiple.js han surgido para proporcionar un subconjunto de características de jQuery, a veces con un conjunto enfocado de características adicionales, con tiempos de carga significativamente más rápidos.
Parsley
La validación de formularios es una tarea esencial. Debido a que los datos son ahora tan a menudo analizados por las máquinas, los datos limpios son más esenciales que nunca. Limpiar los datos a posteriori lleva mucho tiempo y nunca es tan preciso como conseguir que el usuario proporcione la información correcta en primer lugar.
Parsley proporciona más técnicas de validación de formularios que casi cualquier otra biblioteca de JavaScript. Tú eliges el nivel de validación que necesitas, pero pueden llegar a ser bastante complejas:
Incluso la validación supuestamente sencilla que se muestra a continuación contiene muchos tipos de validación diferentes, junto con el código necesario para realizar la tarea. Es sorprendente lo fácil que es realizar las validaciones más comunes. (No necesitarás una codificación pesada a menos que estés tratando de validar datos complejos.)
QUnit
La funcionalidad de prueba proporcionada por muchas bibliotecas deja mucho que desear. Incluso si se utiliza un script, las pruebas manuales de aplicaciones complejas están destinadas a ser engorrosas y a consumir mucho tiempo, si es que pueden encontrar todos los errores.
QUnit es una de las varias bibliotecas de pruebas unitarias disponibles para JavaScript. Aunque algunos podrían considerarla un poco anticuada, es relativamente completa y se destaca con un gran apoyo de la comunidad y una corta curva de aprendizaje. El sitio de QUnit proporciona una gran cantidad de información para empezar, incluyendo un tutorial completo sobre las pruebas unitarias.
Incluso se puede utilizar QUnit para probar QUnit (suponiendo que alguna vez quieras hacerlo)!
React
Usualmente se considera una biblioteca, React se refiere a veces como un marco. En el contexto del enfoque Modelo-Vista-Controlador (MVC) para crear aplicaciones a gran escala, React proporciona la parte de la vista. No asume nada sobre la pila de tecnología subyacente que estás usando para modelar o controlar los datos. Todo lo que le interesa a React es mostrar los datos en la pantalla. Con esto en mente, no se basa en el Modelo de Objetos del Documento (DOM) del navegador, sino que utiliza un DOM virtual ligero que muestra la información rápidamente. Una de las mejores cosas de React es que es declarativo, lo que significa que le dices al framework lo que quieres hacer, no cómo hacerlo.
El precio que pagas por la velocidad y la capacidad de usar MVC es cierto grado de complejidad añadida. Incluso un pequeño componente requiere bastante código (como demuestran los ejemplos en el sitio de React). Lo que se gana es flexibilidad y velocidad cuando se trabaja con proyectos realmente grandes.
Framas de JavaScript
Angular
El marco de trabajo Angular hace posible extender el HTML actuando como la parte del controlador de MVC. Los controladores son el comportamiento detrás de los componentes del DOM. Angular hace posible crear nuevos comportamientos de una manera que es a la vez natural y directa. Las extensiones acaban pareciendo adiciones al HTML, en lugar de algo atornillado. El sitio de Angular deja claras las dos razones esenciales para utilizar este producto: «velocidad & rendimiento» y «herramientas increíbles»
Sin embargo, la codificación puede llegar a ser compleja, y este marco puede ser más adecuado para las empresas que para las pequeñas startups. Incluso los ejemplos simples en el sitio de Angular dependen de múltiples archivos que rápidamente crean complejidad. Es importante tener en cuenta que la última versión de Angular también se basa en TypeScript en lugar de JavaScript puro, lo que aumenta la curva de aprendizaje pero proporciona escalabilidad.
Afortunadamente, Angular viene con un extenso tutorial, que se muestra aquí, que debería facilitar a los desarrolladores experimentados comenzar a producir resultados rápidamente.
Un problema potencial: la última versión de Angular no es compatible con una gama tan amplia de navegadores como lo hicieron las versiones anteriores. Asegúrate de que es compatible con los navegadores que soporta tu sitio.
Ember.js
Hay algo serio en un framework que se refiere a sí mismo como un «marco para desarrolladores web ambiciosos». Empresas conocidas como Microsoft, Netflix y LinkedIn utilizan Ember.js porque emplea el patrón Modelo-Vista-Vista-Modelo (MVVM) e incorpora las mejores prácticas como parte del framework. Lo mejor de todo es que se adapta muy bien. Curiosamente, aunque Ember.js se centra en el desarrollo web, también puedes utilizarlo para crear aplicaciones móviles y de escritorio -se utilizó para crear Apple Music.
A diferencia de muchos otros frameworks, puedes utilizar el conjunto completo de herramientas basadas en Ember para crear un entorno de desarrollo altamente compatible. La CLI (interfaz de línea de comandos) de Ember proporciona acceso a una gran cantidad de herramientas que puedes automatizar mediante scripts. Ember Data, por ejemplo, proporciona acceso a datos orientados a la web mediante el mapeo relacional de objetos (ORM). Ember Inspector, por su parte, es un plugin para los navegadores Firefox y Chrome diseñado para facilitar la depuración.
Incluso con toda su potencia, sin embargo, el tutorial de inicio rápido de Ember.js tarda sólo cinco minutos en completarse. Por supuesto, el tutorial estándar lleva bastante más tiempo, pero produce resultados más respetables, como se muestra aquí:
La documentación de este framework incluye todos los temas que necesitas, incluyendo discusiones sobre el modelo de objetos, plantillas, componentes, controladores y modelos. También hay un blog, y la comunidad de Ember.js puede proporcionar ayuda adicional.
Node.js
Node.js es un tiempo de ejecución de JavaScript asíncrono y basado en eventos con algunas características únicas. Por un lado, si no tiene trabajo que hacer, simplemente «se va a dormir». Esto puede no parecer un gran problema, pero si está alojando su sitio en la nube pública, «ponerlo a dormir» podría ahorrarle dinero, posiblemente mucho dinero. Además, como Node.js no requiere bloqueos para hacer su trabajo, no tiende a bloquearse como pueden hacer otros frameworks. Este producto se parece más a jQuery que a jQueryUI, en el sentido de que no lo utilizas para crear una interfaz de usuario. En su lugar, se crea un código que reacciona a los eventos – un cliente genera eventos, y el servidor responde a esos eventos. La interfaz de usuario es un elemento separado que muestra cualquier resultado.
Debido a que Node.js es tan sencillo y rápido, con un apoyo de la comunidad insuperable, puedes encontrarlo en los lugares más insospechados. Incluso si crees que no tienes el paquete completo instalado, es probable que tengas al menos parte de él instalado como parte del gestor de paquetes de Node.js (NPM). Según la fundación Node.js, hay 9 millones de instancias que se ejecutan en más de 50.000 mil paquetes. En otras palabras, Node.js constituye la base de gran parte de los paquetes que se utilizan. Con Node.js, los desarrolladores pueden construir:
- Aplicaciones de backend
- Blogs
- Sistemas de gestión de clientes
- Servicios en tiempo real, como apps de chat y juegos
- Aplicaciones APIREST
- Aplicaciones de redes sociales
- Utilidades y herramientas
Vue.js
Un versátil framework JavaScript de código abierto, Vue es «progresivo», lo que significa que a diferencia de los «frameworks monolíticos, Vue está diseñado desde el principio para ser adoptado de forma incremental.» A caballo entre una librería y un framework completo, Vue utiliza un «modelo de desarrollo basado en componentes» que te permite mezclar y combinar componentes de Vue en tus proyectos.
Las características clave de Vue incluyen componentes, plantillas, transiciones y vinculación de datos bidireccional, pero quizás su característica más distintiva es su sistema de «reactividad». Básicamente, la reactividad significa que la actualización de un objeto JavaScript en Vue actualiza automáticamente y de forma discreta las plantillas de Vue.
Vue fue construido para ser utilizado por cualquier persona con un conocimiento práctico de HTML, CSS y JavaScript. Para tener una idea de cómo funciona, mira el vídeo de abajo:
Para más información, puedes ver cómo se compara Vue con otros Frameworks aquí.
Otras opciones
No olvides que hay muchas más bibliotecas, comunidades, colecciones y frameworks de JavaScript disponibles, a menudo con áreas de enfoque específicas.
Por ejemplo, CodePen es una comunidad online gratuita para probar y mostrar mezclas de HTML, CSS y JavaScript. Piensa en ello como un entorno social para diseñadores y desarrolladores de frontend, una comunidad de desarrollo online y un editor con una interfaz uniforme. Cada entrada de CodePen se llama Pen y puedes verlas en acción como parte de una colección. Algunas colecciones son bastante extravagantes, como anime.js, mientras que otras, como Funny JS, tienen widgets interesantes que no se ven en otros sitios. También funciona con directamente con React.
De manera similar, Jest es una solución de pruebas de JavaScript de «configuración cero» diseñada para trabajar out-of-the-box con React.
BIDEO.JS, por su parte, proporciona un método para mostrar vídeos de fondo a pantalla completa, útil si estás construyendo un sitio para una agencia de viajes, por ejemplo.
El resultado final
Como ya debería estar claro, el problema no es encontrar una biblioteca o un marco de trabajo de JavaScript que pueda ayudarte a hacer algo interesante, sino encontrar la biblioteca que te ayude a realizar la única tarea que necesitas llevar a cabo.
Además, debes asegurarte de que confías en bibliotecas que seguirán existiendo mañana. Nadie quiere tener que rehacer su aplicación porque la biblioteca de JavaScript que utiliza ya no está disponible. Y aunque la mayoría de las bibliotecas y marcos de trabajo de JavaScript modernos son ahora extremadamente fiables, todavía tienes que asegurarte de que funcionan con todos los dispositivos y navegadores en los que confían tus usuarios.