Elige un framework o una biblioteca de JavaScript

Umar Hansa

En este artículo, se comparten estadísticas sobre cómo puedes elegir una biblioteca o un framework para usar en tu aplicación web. Los debates que se hagan en este documento te ayudarán a sopesar las ventajas y desventajas de encontrar la biblioteca o el framework de JavaScript adecuados para el problema empresarial que intentas resolver. Comprender qué ventajas y desventajas se aplican en diferentes situaciones es clave para evaluar la gran cantidad de opciones de bibliotecas de JavaScript disponibles.

Qué son las bibliotecas y los frameworks de JavaScript

¿Qué es una biblioteca de JavaScript? En su forma más sencilla, una biblioteca de JavaScript es un código predefinido que puedes llamar en el código de tu proyecto para realizar una tarea específica.

Esta publicación menciona principalmente las "bibliotecas". Sin embargo, muchos de los debates también se aplican a los marcos de trabajo. Básicamente, la diferencia entre los dos se puede resumir de la siguiente manera:

  • Para una biblioteca, el código de la aplicación llama al código de la biblioteca.
  • En el caso de un framework, el framework llama al código de la aplicación.

Los siguientes ejemplos prácticos ayudan a ilustrar las diferencias.

Ejemplo de llamada a una biblioteca de JavaScript

Una biblioteca JavaScript realiza una tarea específica y luego devuelve el control a tu aplicación. Cuando usas una biblioteca, controlas el flujo de la aplicación y eliges cuándo llamar a ella.

En el siguiente ejemplo, el código de la aplicación importa un método de la biblioteca lodash. Una vez que se completa la función, se devuelve el control a tu aplicación.

import capitalize from 'lodash.capitalize';
capitalize('hello'); // Hello

Cuando se ejecuta el método lodash.capitalize, llama al código JavaScript escrito previamente que capitaliza el primer carácter de una cadena.

Ejemplo de uso de un framework de JavaScript

Un framework de JavaScript es una plantilla de código predefinida dentro de la cual construyes el comportamiento de tu aplicación. Es decir, cuando se usa un framework, este controla el flujo de la aplicación. Para usar un framework, debes escribir el código personalizado de la aplicación y, luego, el framework llama al código de la aplicación.

En el siguiente ejemplo, se muestra un fragmento de código que usa el framework Preact de JavaScript:

import { createElement } from 'preact';

export default function App() {
  return (
    <p class="big">Hello World!</p>
  )
}

En el ejemplo, observa que el framework tiene mucho más control sobre el código que escribes y, en algunos casos, incluso controla cuándo ejecutar tu código.

¿Por qué usar una biblioteca?

Usar una biblioteca de JavaScript puede ayudar a evitar la repetición de código innecesaria. Las bibliotecas pueden abstraer la lógica compleja, como la manipulación de fechas o los cálculos financieros. Una biblioteca también puede ayudarte a sacar tu producto inicial, en lugar de tener que escribir todo el código desde cero, lo que puede llevar tiempo.

Algunas bibliotecas de JavaScript del cliente ayudan a abstraer las peculiaridades de la plataforma web. Una biblioteca también puede servir como herramienta de aprendizaje. Por ejemplo, si no conoces las funciones de aceleración de animación, el código fuente de una biblioteca puede enseñarte cómo funcionan.

Algunas bibliotecas están respaldadas por grandes empresas que invierten tiempo y dinero para mantenerlas actualizadas y seguras. Muchas bibliotecas incluyen mucha documentación, lo que les ofrece a ti y a tu equipo una forma rápida de familiarizarse con el uso de la biblioteca.

En última instancia, usar una biblioteca de JavaScript te permite ahorrar tiempo.

¿Por qué debería importarte el uso de la biblioteca?

Técnicamente, puedes desarrollar tu aplicación web desde cero, pero ¿por qué meterte en el problema cuando puedes usar software gratuito (de código abierto) o comprar una solución que, a largo plazo, puede ahorrar tiempo y dinero? Hay una gran cantidad de bibliotecas y frameworks de JavaScript disponibles, cada una de las cuales ofrece un enfoque único para resolver problemas y tiene diferentes características. Por ejemplo:

  • Una biblioteca se puede escribir y mantener internamente en lugar de un tercero.
  • Una biblioteca puede tener licencias legales específicas que la hacen apropiada o no para tu aplicación web.
  • Una biblioteca puede estar desactualizada o no tener mantenimiento.
  • Una biblioteca puede simplificar un conjunto de tareas complejas y ahorrarte mucho tiempo y dinero.
  • Una biblioteca puede usarse ampliamente en la comunidad y puede ser muy conocida entre los desarrolladores.

Como puedes sospechar, diferentes características pueden afectar a tu aplicación web de diferentes maneras. A veces, la decisión no es tan profunda y, si no te gusta, puedes intercambiar una biblioteca con seguridad. Sin embargo, a veces una biblioteca puede tener un efecto significativo en tu trabajo y en tu aplicación web, lo que sugiere que podría ser necesario un enfoque más informado.

Hay algunos entornos de JavaScript que no son del cliente, como en el servidor (ejecutado en un entorno de nube) o en Raspberry Pi, en los que es posible que debas ajustar los criterios que usas para revisar bibliotecas y frameworks.

Rendimiento

El efecto en el rendimiento de una biblioteca JavaScript en una aplicación web del cliente no debe ignorarse. Una biblioteca JavaScript de gran tamaño puede alterar el rendimiento de carga de tu página. Recuerda que los milisegundos generan millones.

Supongamos que usas una biblioteca de JavaScript para animaciones. Algunas bibliotecas pueden agregar fácilmente decenas de kilobytes y, en algunos casos, incluso cientos de kilobytes. Los recursos de JavaScript como este pueden agregar una demora significativa a la carga de la página, ya que el navegador debe descargar, analizar, compilar y ejecutar el código.

Cuanto más grande sea la biblioteca de JavaScript, mayor será el efecto en el rendimiento de tus usuarios.

Cuando evalúes o uses una biblioteca o un framework de JavaScript, ten en cuenta las siguientes sugerencias para mejorar el rendimiento:

  • Dado que tienes una biblioteca de JavaScript de gran tamaño, considera usar una alternativa más pequeña. Por ejemplo, date-fns ofrece muchas funciones con un tamaño más razonable que otras opciones.
  • A continuación del ejemplo anterior de date-fns, importa solo las funciones que necesitas, por ejemplo: import { format } from 'date-fns'. Asegúrate de combinar este enfoque con la eliminación de código no utilizado para que se compile y se envíe una carga útil mínima de JavaScript a los usuarios.
  • Usa herramientas de prueba de rendimiento, como Lighthouse, para observar el efecto de rendimiento que tiene usar una biblioteca JavaScript determinada. Si una biblioteca agrega un retraso de un segundo al tiempo de carga de la página (no olvides limitar la red y la CPU durante las pruebas), es posible que debas volver a evaluar la biblioteca que elegiste. Además de verificar la carga de la página, asegúrate de perfilar cualquier comportamiento de la página web que invoque código de la biblioteca en cuestión; el rendimiento de carga de la página no lo cuenta por completo.
  • Si el autor de la biblioteca acepta comentarios, envía tus observaciones sobre rendimiento, sugerencias y hasta contribuciones al proyecto. Aquí es donde se destaca la comunidad de código abierto. Si decides hacer una contribución, es posible que primero debas consultar con tu empleador.
  • Usa una herramienta automatizada de seguimiento de paquetes, como bundlesize, para buscar actualizaciones inesperadamente grandes en una biblioteca. Es común que una biblioteca de JavaScript crezca con el tiempo. Las incorporaciones de funciones, las correcciones de errores y los casos extremos, entre otros, pueden aumentar el tamaño de archivo de una biblioteca. Una vez que tú o tu equipo hayan aceptado usar una biblioteca, actualizarla puede ser menos problemático y generar pocas preguntas o ninguna. En este punto es útil confiar en la automatización.
  • Observa tus requisitos para una biblioteca y evalúa si la plataforma web ofrece o no la misma funcionalidad de forma nativa. Por ejemplo, la plataforma web ya ofrece un selector de color, que elimina la necesidad de utilizar una biblioteca JavaScript de terceros para implementar la misma funcionalidad.

Seguridad

El uso de un módulo de terceros conlleva algunos riesgos de seguridad inherentes. Un paquete malicioso dentro de la base de código de tu aplicación web puede comprometer la seguridad tanto de tu equipo de desarrollo como de tus usuarios.

Considera una biblioteca publicada en el ecosistema de NPM. Este paquete puede ser legítimo. Sin embargo, con el tiempo, el paquete puede verse comprometido.

A continuación, se incluyen algunas sugerencias de seguridad que se deben tener en cuenta cuando se usa o se evalúa el código de terceros:

  • Si usa GitHub, considere las ofertas de seguridad del código, como Dependabot. También considera servicios alternativos que analicen en busca de vulnerabilidades en tu código, como snyk.io.
  • Considere usar servicios de auditoría de código, un equipo de ingenieros que pueden auditar manualmente el código de terceros que está usando.
  • Evalúa si debes bloquear tus dependencias en una versión específica o confirmar el código de terceros dentro de tu control de versión. Esto puede ayudar a bloquear tu dependencia a una versión en particular, que se considera segura. Irónicamente, esto puede tener un contraefecto para la seguridad, ya que podrías perderte actualizaciones importantes de la biblioteca.
  • Analiza la página principal del proyecto o la página de GitHub, si existe. Investiga si existen problemas de seguridad pendientes y si los problemas de seguridad anteriores se resolvieron dentro de un plazo razonable.
  • El código de terceros que usa otro código de terceros puede suponer más riesgo que una biblioteca que tiene cero dependencias. Ten en cuenta este riesgo.

Accesibilidad

Es posible que te preguntes de qué manera se relacionan las bibliotecas de software con la accesibilidad web. Si bien una biblioteca de software se puede usar en diferentes entornos, en el contexto de una biblioteca del cliente basada en JavaScript, la accesibilidad web es de gran importancia.

Una biblioteca del cliente basada en JavaScript (o framework, para el caso) puede aumentar o disminuir la accesibilidad de tu sitio web. Considera una biblioteca JavaScript de terceros que agrega un control deslizante de imágenes a una página. Si el control deslizante de imágenes no tiene en cuenta la accesibilidad web, tú, como desarrollador web, puedes pasar por alto una función tan importante y lanzar un producto que no incluya funciones esenciales, como que el control deslizante es navegable por el teclado.

  • ¿El complemento de tipografía responsiva admite usuarios que acercan o alejan la página?
  • ¿El complemento para subir archivos admite la carga de archivos desde dispositivos de asistencia?
  • ¿La biblioteca de animaciones ofrece compatibilidad para los usuarios que prefieren un movimiento reducido?
  • ¿El complemento de mapas interactivos admite el uso solo del teclado?
  • ¿La biblioteca del reproductor de audio ofrece una experiencia adecuada en los lectores de pantalla?

Es razonable esperar que tú, el desarrollador web, necesites algún nivel de participación para cumplir con dichos requisitos de accesibilidad. Por ejemplo:

  • Para cualquier función faltante, puedes implementarlas dentro de tu base de código, incluso mientras continúas usando la biblioteca en cuestión.
  • Con el apoyo de tu empleador, puedes contribuir a la biblioteca con una función que falta, si el autor de la biblioteca lo permite.
  • Puedes abrir un diálogo con el autor de la biblioteca. Por ejemplo, ¿estas funciones de accesibilidad específicas están en tu hoja de ruta? ¿Te parece que pertenecen a la biblioteca?
  • En casos de uso populares, puedes explorar opciones de bibliotecas alternativas que sean más accesibles; pueden existir, pero son más difíciles de encontrar.
  • En el caso extremo, es posible que debas abandonar una biblioteca por completo e implementar las funciones desde cero. Esto puede ocurrir cuando una biblioteca o un framework tienen una experiencia de accesibilidad degradada en el uso inicial y necesitas deshacer gran parte de lo que la biblioteca o el framework te ofrece de forma gratuita.

Convenciones

Es más fácil trabajar con una biblioteca de software que usa convenciones de codificación establecidas. Si una biblioteca usa una convención de codificación que no se conoce, puede ser difícil para ti y tu equipo trabajar con una biblioteca de este tipo.

Si una biblioteca no sigue las convenciones de codificación comunes (por ejemplo, una guía de estilo común), no hay mucho que puedas hacer como solución inmediata. Sin embargo, hay algunas opciones:

  • Asegúrate de diferenciar entre el código fuente de la biblioteca y la API que se te expone, el usuario de la biblioteca. Si bien es posible que el código fuente interno use convenciones desconocidas, si la API (la parte de la biblioteca con la que interactúas) usa convenciones conocidas, entonces es posible que no debas preocuparte.
  • Si la API de la biblioteca no sigue convenciones de programación comunes, puedes usar un patrón de diseño de JavaScript, como el patrón de proxy, para unir y contener todas las interacciones con la biblioteca en un solo archivo en la base de código. Tu proxy puede ofrecer una API más intuitiva para otras partes del código dentro de tu base de código.

Las convenciones son muy importantes para la facilidad de uso. Una biblioteca que incluye una API intuitiva puede ahorrarle muchas horas, o incluso días, de horas de usuario, en comparación con una API contraintuitiva que necesita mucha experimentación para descifrar.

Actualizaciones

Por ejemplo, para una biblioteca completamente funcional que realiza algunos cálculos matemáticos, es posible que rara vez necesite actualizaciones. De hecho, una biblioteca de funciones completas es un hallazgo poco común en el cambiante mundo del desarrollo web. Sin embargo, hay ocasiones en las que querrás que el autor de la biblioteca sea receptivo y esté dispuesto a hacer actualizaciones. Las nuevas investigaciones y hallazgos pueden revelar mejores formas de hacer las cosas, por lo que las técnicas utilizadas en las bibliotecas y los frameworks siempre están sujetas a cambios.

Cuando elijas una biblioteca o un framework, presta atención a cómo se manejan las actualizaciones y ten en cuenta que esas decisiones pueden afectarte:

  • ¿La biblioteca tiene un programa de lanzamientos razonable? Por ejemplo, las actualizaciones en el repositorio de código fuente pueden ocurrir con frecuencia, pero si esas actualizaciones no se "publican" o "lanzan" según corresponda, te resultará muy difícil descargarlas.
  • ¿La versión de la biblioteca se actualiza con un esquema de control de versiones de software razonable? Una biblioteca debería ahorrarte tiempo. Si tienes que cambiar tu código de forma inesperada cada vez que actualizas la versión de la biblioteca, es posible que, en primer lugar, se anule el uso de esa biblioteca. Los cambios rotundos a veces son inevitables, pero en un mundo ideal, son poco frecuentes y no se ven obligados a afectar a los consumidores de las bibliotecas.
  • ¿La biblioteca invierte esfuerzo en lograr la retrocompatibilidad? A veces, las actualizaciones de software pueden incluir cambios rotundos, pero también proporcionan una capa de retrocompatibilidad. Esto permite que el consumidor de la biblioteca use la versión más reciente de la biblioteca con cambios mínimos en su código.

Licencias

Las licencias de software son un aspecto importante del uso de bibliotecas de software de terceros. El autor de la biblioteca puede asignarle una licencia. Si estás considerando usar la biblioteca, es posible que la licencia que elijas te afecte.

Por ejemplo, una biblioteca JavaScript puede tener una licencia de software que te permite usarla en un entorno no comercial. Para un proyecto de pasatiempo personal, esta podría ser una gran elección. Si tu proyecto tiene un elemento comercial, es posible que debas considerar una licencia empresarial.

Si tienes dudas, puedes buscar asesoramiento legal profesional o derivarlo al equipo legal de tu empresa.

Comunidad

Una biblioteca o un framework que tenga una gran comunidad de usuarios o colaboradores puede ser beneficioso, pero esto no es una garantía. En general, cuantos más usuarios tenga una biblioteca o un framework, más probable será que se beneficie. Considera los siguientes pros y contras de participar en una comunidad de desarrollo:

Ventajas:

  • Una base de usuarios grande podría implicar una mayor probabilidad de que los errores se detecten a tiempo y con frecuencia.
  • Una gran comunidad activa podría implicar más tutoriales, guías, videos e incluso cursos en la biblioteca o el framework en cuestión.
  • Una comunidad activa numerosa podría significar más apoyo en los foros y sitios web de preguntas y respuestas, lo que aumentaría la probabilidad de que las preguntas de apoyo se respondan.
  • Una comunidad comprometida puede significar más colaboradores externos para la biblioteca o el marco de trabajo. Pueden ayudar a ofrecer funciones que, de otro modo, no estarían en la hoja de ruta del autor.
  • Cuando una biblioteca o un framework es popular dentro de una comunidad, es más probable que tus compañeros y colegas conozcan o, incluso, se familiaricen con esa biblioteca o marco de trabajo.

Desventajas:

  • Un proyecto con una base de usuarios grande y diversa puede sobrecargarse debido a la adición constante de funciones. Las bibliotecas sobrecargadas pueden dañar el rendimiento web.
  • Un proyecto con una comunidad activa y comprometida puede ser estresante para los autores y encargados de mantenimiento, y puede requerir mucha moderación de la comunidad.
  • Un proyecto que crece rápidamente, pero que no cuenta con el apoyo adecuado, puede comenzar a mostrar signos de presencia de una comunidad tóxica. Por ejemplo, puede hacer que los desarrolladores web principiantes o júnior no se sientan bienvenidos en una comunidad específica debido a las restricciones de acceso.

Documentación

Sin importar cuán simple o compleja sea una biblioteca o un framework de JavaScript, la documentación del software siempre puede ser de ayuda. Incluso los desarrolladores más experimentados usan la documentación, en lugar de descifrar el código por sí mismos. En la documentación, se aclara qué API debes usar y cómo.

La documentación incluso puede proporcionar código de muestra, lo que te permite comenzar rápidamente. Cuando evalúes una biblioteca o un marco de trabajo, puedes hacerte algunas de estas preguntas:

  • ¿La biblioteca incluye documentación? Si no es así, tendrás que sentirte cómodo mientras descubres las cosas por tu cuenta.
  • ¿La documentación es clara, fácil de entender y no contiene ambigüedades? Muchos desarrolladores dedican grandes cantidades de tiempo a la documentación. Puede parecer poco, pero la claridad en la documentación textual puede tener un gran efecto en tu productividad.
  • ¿La documentación se genera de forma completamente automática? Esta documentación puede ser más difícil de asimilar y no siempre proporciona orientación clara sobre cómo usar una API.
  • ¿La documentación está actualizada? El mantenimiento de la documentación a veces se trata como un tema secundario. Si se actualiza la biblioteca, pero la documentación no, se puede desperdiciar tiempo de desarrollo.
  • ¿La documentación es exhaustiva y está disponible en varios formatos? Las guías del usuario, el código de muestra, la documentación de referencia, las demostraciones en vivo y los instructivos son formatos de documentación valiosos que pueden ayudarte a tener éxito en el uso de una biblioteca o un framework.

La documentación no siempre está completa, y eso está bien. Deberás evaluar las necesidades de tu organización, los requisitos del proyecto y la complejidad del software, y usarlos para determinar el nivel de documentación que necesitas.

Conclusión

Es normal sentir abrumado cuando eliges una biblioteca o un framework por primera vez. Como todo lo demás, cuanto más aprendas y practiques una tarea, mejor te irás. Puede resultar útil consultar esta publicación la próxima vez que elijas una biblioteca o un framework para usar. Puedes usar los encabezados de esta publicación como una lista de verificación. Por ejemplo: ¿tiene un buen rendimiento esta biblioteca? ¿Esta biblioteca cumple con los estándares de accesibilidad de mi empresa?

Hay otros aspectos de las bibliotecas y los frameworks que te recomendamos tener en cuenta, y que no se analizaron mucho en esta publicación:

  • Extendibilidad: ¿Qué tan fácil es extender la biblioteca con un comportamiento o una lógica personalizados?
  • Herramientas: Si corresponde, ¿la biblioteca tiene herramientas como complementos de editor de código, herramientas de depuración y complementos del sistema de compilación?
  • Arquitectura: El código limpio es importante, pero ¿la arquitectura general de la biblioteca es confidencial?
  • Pruebas: ¿El proyecto tiene un paquete de pruebas? ¿El sitio web del proyecto usa insignias o indicadores que el paquete de pruebas aprueba con el último compromiso?
  • Compatibilidad: ¿La biblioteca funciona bien con otras bibliotecas o frameworks que usas actualmente?
  • Costo: ¿Cuál es el costo de un framework? ¿Es de código abierto o está disponible para la compra?
  • Métricas personalizadas: Deben estar en una parte inferior de la lista de criterios o incluso ignorarse por completo, pero te recomendamos considerar los "votos" del proyecto, las cuentas de redes sociales que representan el proyecto o la cantidad de errores o problemas abiertos que hay en la página del proyecto.