Elige un framework o una biblioteca de JavaScript

Umar Hansa

En este artículo, se comparten estadísticas sobre cómo elegir una biblioteca o un framework para usar en tu aplicación web. Los análisis que se incluyen aquí te ayudarán a sopesar los pros y los contras 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 simple, una biblioteca de JavaScript es un código escrito previamente al que puedes llamar en el código de tu proyecto para realizar una tarea específica.

En esta publicación, se mencionan principalmente las "bibliotecas". Sin embargo, muchos de los debates también se aplican a los frameworks. Básicamente, la diferencia entre ambos se puede resumir de la siguiente manera:

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

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

Ejemplo de llamada a una biblioteca de JavaScript

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

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 pone en mayúsculas 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 usas un framework, este controla el flujo de la aplicación. Para usar un framework, escribes el código de tu aplicación personalizado y, luego, el framework llama a tu código de aplicación.

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

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 ejecutarlo.

¿Por qué usar una biblioteca?

El uso de 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 lanzar 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 suavizació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 documentación extensa, que les ofrece a ti y a tu equipo una forma rápida de familiarizarse con el uso de la biblioteca.

En última instancia, el uso de una biblioteca de JavaScript te ahorra tiempo.

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

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

  • Una biblioteca se puede escribir y mantener de forma interna en lugar de que lo haga un tercero.
  • Una biblioteca puede tener licencias legales específicas que la hacen adecuada o no para tu aplicación web.
  • Una biblioteca puede estar desactualizada o tener falta de 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 ser muy conocida entre los desarrolladores.

Como puedes sospechar, diferentes características pueden afectar tu aplicación web de diferentes maneras. A veces, la decisión no es tan importante, y puedes cambiar una biblioteca de forma segura si no te gusta. 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.

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

Rendimiento

No se debe ignorar el efecto sobre el rendimiento de una biblioteca de JavaScript en una aplicación web del cliente. Una biblioteca de JavaScript grande puede interrumpir el rendimiento de carga de tu página. Recuerda que los milisegundos suman millones.

Imagina una situación en la que usas una biblioteca de JavaScript para la animación. 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:

  • Si tienes una biblioteca de JavaScript grande, considera usar una alternativa más pequeña. Por ejemplo, date-fns ofrece mucha funcionalidad con un tamaño más razonable que el de algunas otras opciones.
  • Siguiendo con el ejemplo anterior de date-fns, importa solo las funciones que necesitas, como import { format } from 'date-fns'. Asegúrate de combinar este enfoque con la eliminación de código obsoleto para que se compile y envíe una carga útil mínima de JavaScript a tus usuarios.
  • Usa herramientas de pruebas de rendimiento, como Lighthouse, para observar el efecto en el rendimiento de usar una biblioteca de JavaScript determinada. Si una biblioteca agrega una demora 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 crear perfiles de cualquier comportamiento de la página web que invoque código de la biblioteca en cuestión. El rendimiento de la carga de la página no cuenta toda la historia.
  • Si el autor de la biblioteca acepta comentarios, envía tus observaciones sobre el rendimiento, sugerencias y hasta contribuciones al proyecto. Aquí es donde la comunidad de código abierto se destaca. 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 adiciones de funciones, las correcciones de errores, los casos límite, entre otros, pueden aumentar el tamaño de archivo de una biblioteca. Una vez que tú o tu equipo acepten usar una biblioteca, actualizarla puede ser menos problemático y no generar muchas preguntas. Aquí es útil confiar en la automatización.
  • Observa los requisitos de 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 usar una biblioteca de 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 poner en riesgo la seguridad de tu equipo de desarrollo y de tus usuarios.

Considera una biblioteca publicada en el ecosistema de NPM. Es posible que ese paquete sea legítimo. Sin embargo, con el tiempo, el paquete puede estar comprometido.

Estas son algunas sugerencias de seguridad que debes tener en cuenta cuando uses o evalúes código de terceros:

  • Si usas GitHub, considera las ofertas de seguridad del código, como Dependabot. También puedes considerar servicios alternativos que realicen análisis en busca de vulnerabilidades en tu código, como snyk.io.
  • Considera usar servicios de auditoría de código o un equipo de ingenieros que puedan auditar manualmente el código de terceros que usas.
  • Evalúa si debes bloquear tus dependencias en una versión específica o confirmar tu código de terceros en el control de versiones. Esto puede ayudar a bloquear tu dependencia en una versión en particular, que se considera segura. Irónicamente, esto puede tener un efecto contrario en la seguridad, ya que es posible que te pierdas actualizaciones vitales de la biblioteca.
  • Explora la página principal del proyecto o la página de GitHub, si existe una. Investiga si existen problemas de seguridad pendientes y si los problemas anteriores se resolvieron en un plazo razonable.
  • El código de terceros que usa otro código de terceros puede ser más riesgoso que una biblioteca que no tenga ninguna dependencia. Ten en cuenta este riesgo.

Accesibilidad

Es posible que te preguntes cómo 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 basada en JavaScript del cliente, la accesibilidad web es de gran importancia.

Una biblioteca del cliente basada en JavaScript (o framework, en realidad) puede aumentar o disminuir la accesibilidad de tu sitio web. Considera usar una biblioteca de 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, es posible que, como desarrollador web, pases por alto una función tan importante y lances un producto que no tenga funciones esenciales, como que el control deslizante sea navegable con el teclado.

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

Es razonable esperar que sea necesario algún nivel de participación de tu parte, el desarrollador web, para cumplir con esos requisitos de accesibilidad. Por ejemplo:

  • En el caso de las funciones que faltan, puedes implementarlas en tu base de código, incluso mientras sigues usando la biblioteca en cuestión.
  • Con el apoyo de tu empleador, puedes agregar esa función faltante a la biblioteca, si el autor de la biblioteca lo permite.
  • Puedes iniciar un diálogo con el autor de la biblioteca. Por ejemplo, ¿estas funciones de accesibilidad específicas están en tu plan de trabajo? ¿Entiendes que deben estar en la biblioteca?
  • En el caso de los casos de uso populares, puedes explorar opciones de bibliotecas alternativas que sean más accesibles. Es posible que existan, pero son más difíciles de encontrar.
  • En casos extremos, es posible que debas descartar una biblioteca por completo y, luego, implementar tus funciones desde cero. Esto puede ocurrir cuando una biblioteca o un framework tienen una experiencia de accesibilidad degradada en el uso inicial y debes deshacer mucho de lo que la biblioteca o el framework supuestamente te brindan 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 desconocida, puede ser difícil para ti y tu equipo trabajar con una biblioteca de este tipo.

Si una biblioteca no sigue convenciones de codificación comunes (por ejemplo, un manual 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 el código fuente interno puede usar convenciones desconocidas, si la API (la parte de la biblioteca con la que interactúas) usa convenciones conocidas, es posible que no haya nada de qué preocuparse.
  • Si la API de la biblioteca no sigue convenciones de codificació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. Así, tu proxy puede ofrecer una API más intuitiva a otras partes del código dentro de tu base de código.

Las convenciones cumplen una función importante con la facilidad de uso. Una biblioteca que incluye una API intuitiva puede ahorrarles muchas horas, o incluso días, a horas de personas, en comparación con una API contraintuitiva que necesita mucha experimentación para descifrar.

Actualizaciones

Por ejemplo, en el caso de una biblioteca que funciona completamente y realiza algunos cálculos matemáticos, es posible que rara vez necesite actualizaciones. De hecho, una biblioteca con todas las funciones es un hallazgo poco común en el mundo en constante cambio del desarrollo web. Sin embargo, hay ocasiones en las que querrás que el autor de la biblioteca sea receptivo y esté dispuesto a realizar actualizaciones. Las nuevas investigaciones y hallazgos pueden revelar mejores formas de hacer las cosas, por lo que las técnicas que se usan 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 del repositorio de código fuente pueden ocurrir con frecuencia, pero si no se “publican” o “lanzan” según corresponda, es posible que te resulte difícil descargarlas.
  • ¿La biblioteca lanza actualizaciones 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 se anule el propósito de usar esa biblioteca en primer lugar. A veces, los cambios de ruptura son inevitables, pero en un mundo ideal, los cambios son poco frecuentes y no se imponen a los consumidores de bibliotecas.
  • ¿La biblioteca invierte esfuerzo en 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 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 una biblioteca puede asignar una licencia a su biblioteca. Si estás considerando usar la biblioteca, la elección de la licencia puede afectarte.

Por ejemplo, una biblioteca de 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 excelente opción. Si tu proyecto tiene un elemento comercial, es posible que debas considerar una licencia empresarial.

Si tienes dudas, considera buscar asesoramiento legal profesional o consultar 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 probabilidades habrá de que te beneficie. Considera los siguientes pros y contras de participar en una comunidad de desarrollo:

Ventajas:

  • Una gran base de usuarios podría significar una mayor probabilidad de que los errores se detecten con anticipación y con frecuencia.
  • Una gran comunidad activa podría significar más instructivos, guías, videos y hasta cursos sobre la biblioteca o el framework en cuestión.
  • Una gran comunidad activa podría significar más apoyo en foros y sitios web de preguntas y respuestas, lo que aumentará la probabilidad de que se respondan las preguntas de asistencia.
  • Una comunidad comprometida puede significar más colaboradores externos para la biblioteca o el framework. 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 son populares en una comunidad, es más probable que tus colegas y compañeros hayan oído hablar de ellos o incluso estén familiarizados con ellos.

Desventajas:

  • Un proyecto con una base de usuarios grande y diversa puede sobrecargarse si se agregan funciones constantemente. Las bibliotecas sobrecargadas pueden perjudicar el rendimiento de la Web.
  • Un proyecto con una comunidad activa y comprometida puede ser estresante para los autores y los encargados del mantenimiento, y puede requerir una moderación intensa de la comunidad.
  • Un proyecto que crece rápidamente, pero no tiene el apoyo adecuado, puede comenzar a mostrar signos de tener una comunidad tóxica. Por ejemplo, puede hacer que los desarrolladores web principiantes o júnior se sientan no bienvenidos en una determinada comunidad debido a su control.

Documentación

No importa lo simple o complejo que sea una biblioteca o un framework de JavaScript, la documentación de software siempre puede ayudar. Incluso los desarrolladores con mucha experiencia usan documentación en lugar de tratar de descifrar el código por su cuenta. 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 con mayor rapidez. Cuando evalúes una biblioteca o un framework, puedes hacer algunas de estas preguntas:

  • ¿La biblioteca incluye documentación? De lo contrario, deberás estar a gusto con resolver los problemas por tu cuenta.
  • ¿La documentación es clara, fácil de entender y no es ambigua? Muchos desarrolladores dedican grandes cantidades de tiempo a la documentación. Puede parecer algo menor, pero la claridad en la documentación textual puede tener un gran efecto en tu productividad.
  • ¿La documentación se genera completamente automáticamente? Esta documentación puede ser más difícil de entender y no siempre proporciona una guía clara sobre cómo usar una API.
  • ¿La documentación está actualizada? A veces, el mantenimiento de la documentación se considera una tarea secundaria. Si se actualiza la biblioteca, pero no la documentación, se puede desperdiciar tiempo de desarrollo.
  • ¿La documentación es exhaustiva y está disponible en varios formatos? Las guías para el 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 usar una biblioteca o un framework con éxito.

No siempre es posible tener una documentación completa, y eso está bien. Deberás evaluar las necesidades de tu organización, los requisitos de tu proyecto y la complejidad de tu software, y usar eso para determinar el nivel de documentación que necesitas.

Conclusión

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

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

  • Extensibilidad: ¿Qué tan fácil es extender la biblioteca con lógica o comportamiento personalizados?
  • Herramientas: Si corresponde, ¿la biblioteca tiene herramientas como complementos de editores de código, herramientas de depuración y complementos de sistemas de compilación?
  • Arquitectura: El código limpio es importante, pero ¿es razonable la arquitectura general de la biblioteca?
  • Pruebas: ¿el proyecto tiene un conjunto de pruebas? ¿El sitio web del proyecto usa insignias o indicadores que el paquete de pruebas pasa en la confirmación más reciente?
  • 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 comprarlo?
  • Métricas de vanidad: Deberían estar en la parte inferior de la lista de criterios o incluso ignorarse por completo, pero te recomendamos que consideres los "votos" del proyecto, las cuentas de redes sociales que lo representan o la cantidad de errores o problemas abiertos que hay en la página del proyecto.