Para ejemplificar y combinar el uso de BigInt con los Web Workers en JavaScript me di a la tarea de crear una sencilla aplicación web que permite calcular el factorial de cualquier número, todo desde el navegador, es decir, online.
El uso de los Web workers es para hacer cálculos extensos, y el de BigInt para no quedarnos cortos a la hora de trabajar con números grandes. Por el momento sólo funciona en Chrome y Opera, ya que usa BigInt y no quise usar el polyfill.
Voy a explicar la creación de la aplicación web y cómo utilicé cada cosa para crear todo esto.
Posts recomendados
Para que entiendas un poco mejor de lo que se habla aquí, te invito a ver los posts que cito abajo. De esta manera sabrás a lo que me refiero en cada caso, pues no me detendré a explicar las cosas básicas.
Trabajar con el portapapeles en JavaScript
BigInt: números sin límite en JavaScript
Algoritmo para calcular el factorial en JavaScript
Probar aplicación en línea
El proyecto es 100 % open source y puede ser usado en línea, de hecho ese es su uso principal. Mira la calculadora de factorial online aquí, y el repositorio aquí.
Herramientas utilizadas
Para el diseño utilicé BulmaCSS, y para el comportamiento mi framework de JavaScript favorito, Vue. Lo demás es HTML, CSS y JavaScript puro.
El algoritmo y los web workers
Me decidí por el que usa el ciclo while con números de tipo BigInt, pues así no excedo las llamadas a la pila. De esta manera pude calcular el factorial de 123456 sin problemas (llevó su tiempo, pero sí se pudo). Cosa que con la calculadora de Windows 10 no se puede:
En cambio con la aplicación web sí:
Claro, claro, yo sé que seguramente hay maneras de lograrlo o calculadoras más potentes, sólo estaba indicando lo que se pudo lograr.
Los Web workers son de gran uso, pues gracias a los mismos la interfaz no se congela y se puede mostrar una linda animación de que hay un proceso en segundo plano gracias a que el botón se pone en un estado de carga cuando lo indico.
El uso de Vue
Se usa para la interacción del usuario, pero no para la resolución del problema. En cambio, sólo se encarga de crear el Web Worker y esperar a que el mismo traiga datos.
También se encarga de copiar el texto al portapapeles y de enfocar el input, cosas básicas y validaciones, eso es todo.
Aunque parezca que no, pero es de gran utilidad, pues con JavaScript plano me habría llevado más tiempo. Por cierto, esto también permite que llame a la función tanto al presionar Enter como al hacer click en el botón, agregar clases dependiendo del estado de la app y mostrar el resultado condicionalmente.
Cuando el número cambia, el número se resetea, esto lo logramos gracias a que se vigila a numero con watch.
Los estilos
Agregué un poco de estilos, que son los siguientes (también puedes verlos en el repositorio de GitHub):
strong.factorial{
word-break: break-all;
}
button.copiar{
position: absolute;
right: .5rem;
top: .5rem;
background-color: transparent;
border: none;
}
button.copiar:hover{
border: 1px solid white;
}No soy muy bueno con el diseño, pero sí soy bueno programando. Bulma ya tiene un diseño de botones llamado delete, el cual pone el botón en la esquina superior derecha con una equis para indicar que la notificación sea cerrada, así que me aproveché de eso, vi los estilos (los podía extraer con CSS used pero no lo hice) y los copié a mi botón.
De esta manera pude alinear el botón y poner el icono de copiar. Ah, también hice que si el número era muy largo se rompiera, evitando una línea muy larga, esto gracias a word-break.
Conclusión
Sé que no es mucho, pero combina muchas cosas y algoritmos que ayudan a que las aplicaciones sean más ricas y poderosas. Recuerda que puedes analizar y modificar el código. La app está aquí, por si no habías leído.
