Elige un framework o una biblioteca de JavaScript

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 presentan en este documento te ayudarán a sopesar las ventajas y desventajas de encontrar la biblioteca o el framework de JavaScript correcto 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é 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 la aplicación llama al código de 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.

Llamada de ejemplo 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 desde 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 escribe en mayúscula 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 creas el comportamiento de tu aplicación. Es decir, cuando usas 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 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 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 en mantener las bibliotecas 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é tomarte la molestia 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 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 vuelven adecuada o no adecuada 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 ser muy conocida entre los desarrolladores.

Como puedes sospechar, las diferentes características pueden afectar a 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 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 del rendimiento de una biblioteca de JavaScript en una aplicación web del cliente. Una biblioteca de JavaScript de gran tamaño puede interrumpir el rendimiento de carga de tu página. Recuerda que milisegundos generan millones.

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

  • Dada una biblioteca de JavaScript grande, considera usar una alternativa más pequeña. Por ejemplo, date-fns ofrece muchas funciones en un tamaño más razonable que otras opciones.
  • Siguiendo 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 prueba de rendimiento, como Lighthouse, para observar el efecto en el rendimiento que tiene el uso de 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 debas consultar primero con tu empleador.
  • Usa una herramienta de seguimiento de paquetes automatizada, como bundlesize, para detectar actualizaciones de biblioteca grandes de forma inesperada. Es común que una biblioteca de JavaScript crezca con el tiempo. Las incorporaciones de funciones, las correcciones de errores, los casos extremos y otros elementos 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 donde resulta útil recurrir a 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, lo 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 verse comprometido.

A continuación, se incluyen algunas sugerencias de seguridad que debes tener en cuenta cuando uses o evalúes el 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 (o un framework) basada en JavaScript del cliente puede aumentar o disminuir la accesibilidad de tu sitio web. Considera una biblioteca de JavaScript de terceros que agregue 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 carece de funciones críticas, como el control deslizante que se puede navegar con el teclado.

  • ¿El complemento de tipografía responsiva admite usuarios que acercan o alejan la página?
  • ¿El complemento del cargador de archivos admite cargas de archivos desde dispositivos de accesibilidad?
  • ¿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 aportar a la biblioteca una de las funciones que faltan, 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, es posible que a ti y a tu equipo les resulte difícil trabajar con ella.

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, aún tienes algunas opciones:

  • Asegúrate de diferenciar entre el código fuente de la biblioteca y la API que se te expone a ti, 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 las convenciones de programación comunes, puedes usar un patrón de diseño de JavaScript, como el patrón del proxy, para unir y contener todas las interacciones con la biblioteca en un solo archivo en la base de código. Luego, 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 ahorrar muchas horas de trabajo, o incluso días, en comparación con una API contraintuitiva que requiere mucha experimentación para comprenderla.

Actualizaciones

Por ejemplo, para una biblioteca que funciona por completo y realiza algunos cálculos matemáticos, es posible que esta biblioteca 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. Los cambios rotundos a veces son inevitables, pero en un mundo ideal, los cambios son poco frecuentes y no se ven forzados a los consumidores de las 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 asignarle una licencia. 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 aumentar las probabilidades de que se detecten errores temprano y con frecuencia.
  • Una gran comunidad activa podría implicar la incorporación de más tutoriales, guías, videos e incluso cursos en la biblioteca o el framework en cuestión.
  • Una gran comunidad activa podría significar más asistencia en los foros y sitios web de preguntas y respuestas, lo que aumenta 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, los desarrolladores web principiantes o junior pueden sentirse poco bienvenidos en una comunidad determinada debido al control de acceso.

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 las siguientes preguntas:

  • ¿La biblioteca incluye documentación? Si no es así, tendrás que poder averiguar todo 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 de forma completamente automática? 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? El mantenimiento de la documentación a veces se trata como una idea de último momento. 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 una biblioteca o un framework para usar. Puedes usar los encabezados de esta publicación como una lista de tareas. Por ejemplo: ¿es eficaz esta biblioteca? ¿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 ¿la arquitectura general de la biblioteca es razonable?
  • 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.