Más allá del marco de trabajo: Distribuye tu aplicación de escritorio como un profesional

Bienvenidos. Mi masterclass se llama Más Allá del Marco, donde hablaremos sobre las aplicaciones de escritorio, pero no nos enfocaremos en un marco de trabajo específico. Vamos a ir más allá del marco de trabajo. Nos enfocaremos en lo que hace que una aplicación de escritorio sea una aplicación de escritorio, cómo construir una y en qué enfocarnos y no quedarnos atrapados en los detalles. Porque al final del día, un marco de trabajo es solo una herramienta.

Entonces, esta será la agenda para este masterclass. Bueno, primero les contaré un poco sobre la historia de las aplicaciones y la historia de la web, porque siento que eso es algo que se pasa por alto. Luego hablaremos un poco sobre cómo elegir un marco de trabajo, qué cosas tener en cuenta y algunas categorías que hemos encontrado útiles al elegir un marco de trabajo. Por último, hablaremos sobre cómo pensar en las aplicaciones, cómo estructurar tu código, cómo trabajar con aplicaciones de escritorio y algunas cosas que son diferentes a tu desarrollo tradicional de sitios web, tal vez, y cosas a tener en cuenta.

¿Quién soy yo? ¿Quién es el tipo que les está hablando? Soy miembro del Grupo de Trabajo Towery, pero también soy DevRel en Kript Nebula. Y para explicarlo un poco más, Towery, si no estás familiarizado, es un marco de trabajo para construir aplicaciones de escritorio utilizando tecnología web. Y nos enfocamos mucho en binarios pequeños, en aplicaciones seguras y en lo que me gusta llamar elección, porque Towery es un marco de trabajo completo. Eso tendrá más sentido más adelante cuando pasemos a los ejercicios. Y sí, pero también soy devrel en Kript Nebula. Kript Nebula es una empresa, como empresa, que fundamos para llevar las cosas más lejos y ayudarte, potencialmente, a ti y a las empresas a llevar sus aplicaciones de escritorio al siguiente nivel. Y hacemos consultoría, auditoría y también estamos trabajando en herramientas para mejorar la experiencia de las aplicaciones de escritorio utilizando tecnología web. También mantengo un par de bibliotecas y herramientas de código abierto y crates en el ecosistema Vite, por ejemplo, y luego crates de Rust. Porque empecé con JavaScript, lo hice durante mucho tiempo, pero ahora, desde hace aproximadamente un año, empecé con Rust y realmente me gusta. Y si miras en Twitter, eso ha surgido una y otra vez, personas del JavaScript interesadas en Rust. Si eres una de ellas y quieres hablar conmigo sobre los problemas que enfrentas, o no estás seguro de cómo empezar, definitivamente contáctame en Twitter o Mastodon. Los nombres de usuario están en la pantalla en este momento. Genial. Eso es todo sobre mí.

A continuación, preparémonos para los ejercicios. Tenemos algunos ejercicios para que puedas jugar con algunas aplicaciones y ver por ti mismo las cosas de las que voy a hablar. Las instrucciones están en este sitio web, así que voy a poner el mismo enlace en el chat. No necesitas escanear el código QR si no quieres o escribir la URL tú mismo. Allí verás un enlace a... Habrá una tarjeta que dice masterclass, y luego habrá un enlace a los recursos, los cuales son un repositorio Git en GitHub. Puedes revisarlo. Asegúrate de tener los requisitos previos si quieres seguir usando el marco de trabajo Tauri, pero el enlace también debería estar en el repositorio. Todo está contenido en ese único repositorio. Tenemos una opción. Dependiendo del lenguaje que estés buscando, si quieres probar un poco de rust, tenemos Tauri. Si solo quieres quedarte en JavaScript, también puedes seguir usando Electron. Por último, también tenemos PWA como opción. Aplicación Web Progresiva. Creo que eso debería ser bueno para todos. Esas son ramas en ese repositorio. Puedes revisar la rama que desees. Las ramas están nombradas en consecuencia. Si solo estás aquí para leer y seguir, por supuesto también puedes hacerlo. Genial. Oh, eso es una cosa más para mencionar. Todos estamos aquí para pasar un buen rato. Si tienes alguna pregunta, no dudes en hacerla. Guárdalas para el final. No te olvides de ellas. Siéntete libre de hacer preguntas en cualquier momento en el chat y me aseguraré de responderlas si puedo.

Genial. Lección de historia. Excelente. Aprendiendo algo nuevo. La web y las aplicaciones, porque esto es algo que siento que a menudo se pasa por alto y algo que la gente realmente no conoce. Eso es muy interesante para mí porque a menudo escucho a la gente decir: oh, construyes una aplicación utilizando tecnología web, pero eso no es nativo. Eso no es una aplicación real. Eso no es adecuado. E investigué un poco más y la web y las aplicaciones están muy entrelazadas.

Así que comenzando en 1945, el trabajo académico que condujo a las computadoras que eran utilizadas por lo que entonces se llamaba trabajadores del conocimiento, lo que ahora llamaríamos personas comunes que usan computadoras, Vannevar Bush, no sé si estoy pronunciando eso correctamente, pero él ideó un sistema llamado Memex, que tenía como objetivo mejorar la mente humana utilizando computadoras. Y esto fue muy teórico. Y luego, simplemente porque en los años 40, la tecnología informática realmente, realmente no estaba advanced lo suficiente como para poner en práctica sus ideas.

Pero en la década de 1960, Douglas Engelbart, tal vez hayas escuchado el nombre, también uno de los pioneros de la tecnología informática. Trabajó en el sistema en línea, que estuvo muy influenciado por lo que propuso Vannevar Bush, y algo que luego influiría en gran medida en el hipertexto. También estaban hablando de enlaces y documentos interconectados, y cosas así eso. Y de esta investigación en la década de 1960, muchas de las personas que trabajaron en ese proyecto con Douglas Engelbart, luego fueron a trabajar en Xerox PARC, donde estaban trabajando en una de las primeras computadoras personales con un sistema operativo GUI.

Y nuevamente, gran parte de la inspiration en el fondo de sus mentes provenía de estos documentos interconectados de trabajadores del conocimiento, argumentando la mente humana. Y esto, ya sabes, para darte un poco de perspectiva, esto fue muy temprano en tiempo, ya sabes, puedes ver aquí, de 1970 a 1980. Gran parte de esto todavía estaba atrapado, ya sabes, en la investigación y en los círculos académicos, pero luego, ya sabes, en 1985, se lanzó Windows 1.0. Entonces, ya sabes, si quieres, en el mundo de las computadoras, la adopción generalizada de sistemas operativos gráficos.

Y luego, en 1987, esto es algo que se habla a menudo, un concepto muy importante o un producto muy importante, no se usa mucho, pero como influencia, el Apple Hypercard fue uno de los primeros, que conozco y pude encontrar, sistemas en los que los usuarios podían programar su propia computadora de una manera gráfica. Y tener esta interfaz programable muy fácil de usar en sus computadoras, usando tarjetas y pilas de tarjetas, una metáfora muy física, pero nuevamente muy influenciada el trabajo, ya sabes, el trabajo teórico sobre hipertexto y sobre, ya sabes, mejorar la mente humana. Pero de ninguna manera relacionado con nada que consideremos la web.

Entonces, esto era como construir aplicaciones pequeñas en tu computadora. Entonces, ya sabes, la aplicación original de bajo código, sin código, si quieres. Y luego, en 1989, aquí es donde finalmente comenzamos a ganar impulso en la web. Tim Berners-Lee inventa la World Wide Web. Y, nuevamente, no es el mismo grupo de personas, pero nuevamente influenciado por, ya sabes, el hipertexto y los documentos interconectados y toda esta noción de llevar una computadora para mejorar la mente humana. Y ahora estamos avanzando hacia el territorio de las páginas web, ¿verdad? Hasta este punto, todo eran aplicaciones y lo que considerarías nativo. Y ahora de repente tenemos sitios web. Por supuesto, al principio muy básicos. Y luego, en 1993, se lanzó Mosaic. Y con esa progresión comenzó lo que, bueno, en realidad, todos los navegadores modernos que tenemos hasta el día de hoy. Y esto, solo, ya sabes, un breve extracto porque no quiero aburrirte. Solo demuestra que desde el principio de la web y las aplicaciones, esto ha estado muy entrelazado. Entonces, la noción de hipertexto e hipervínculos y documentos interconectados ha estado con las computadoras, no solo con la web, sino con las computadoras desde el principio. Muy influenciado por todos los sistemas de interfaz de usuario y GUI que han surgido de la ciencia de la computación en ese momento tan temprano, están muy influenciados por el hipertexto, lo cual es increíble si lo piensas, porque la World Wide Web como concepto, la web en la que trabajamos hasta el día de hoy, llegó mucho después que eso. Siento que esta historia tiene un arco muy agradable, porque si saltamos al día moderno ahora, el anuncio, la historia reciente de Apple de que el iPhone no ejecutaría aplicaciones nativas, sino que ejecutaría web apps. Increíble si lo piensas, pero solo demuestra que la línea, y si estás en Twitter o Reddit o Hacker News, la línea que a las personas les gusta trazar en la arena, que dice, esta aplicación es nativa y esta aplicación no es nativa, esa línea es muy borrosa. Si existe en absoluto. Y esta línea se vuelve aún más borrosa a medida que pasa el tiempo, porque es posible que no hayas escuchado el nombre, pero Google en 2019 anunció lo que llamaron Project Fugu, que es simplemente un esfuerzo de seguimiento para muchas de las API web que hemos obtenido recientemente. Cosas como medios web o interfaz con dispositivos USB, cosas así. Todas estas API realmente difuminan la línea nuevamente entre lo que un sitio web puede hacer y lo que una aplicación puede hacer, el proyecto realmente comenzó a difuminar la línea nuevamente. Si en los primeros años 2000, teníamos una separación muy clara entre lo que son los sitios web y lo que son las aplicaciones nativas, ahora, nuevamente, al igual que en los primeros días, esta línea se está difuminando mucho en este momento. Entonces hay muchas tecnologías para hacer esto, ¿verdad? Y una pregunta que siempre nos hacen es que hay muchas opciones, ¿verdad? ¿Qué hago? ¿Cómo elijo una? Y tengo algunas. Tengo algunas opciones selectas. Hay muchas, muchas más opciones por ahí. Y lo que siempre digo a las personas y lo que siempre les decimos a las personas es que hay algunas categorías en las que debes fijarte. Y la mayoría de estas categorías, si eres un desarrollador web, te sonarán familiares, ¿verdad? Porque al final del día, muchas de las categorías por las que eliges el marco de trabajo de front-end web son muy similares a lo que elegirías un marco de trabajo de aplicaciones de escritorio. Por ejemplo, la primera categoría que siempre les digo a las personas son las características principales, ¿verdad? Como ¿cuáles son las características del marco de trabajo? ¿Qué tipo de soporte tiene? Y eso, por ejemplo, incluye cosas como, hey, tengo mucha experiencia en

Um, permíteme abrir VS Code. Bien, genial. Aquí estamos. Entonces, la forma en que tengo estructurado este repositorio es que tenemos esta carpeta con puntos de control. Y cada punto de control representa un momento específico de nuestra aplicación. ¿De acuerdo? Entonces, a medida que avanzamos en esta masterclass, te diré, um, bien. Te diré en qué punto estamos, punto de control uno, punto de control dos, punto de control tres. Y puedes saltar adelante si quieres. Y más tarde, si quieres retroceder, puedes viajar en el tiempo. Y puedes usar estos puntos de control como puntos de partida para tu propia exploración y tu propio. Eso será importante más adelante. Entonces, genial. Comencemos con el Hola Mundo de PWA. ¿De acuerdo? Y porque realmente es el más simple. Y eso se debe a que las aplicaciones web progresivas son simplemente sitios web, ¿verdad? Sitios web que el navegador te permite instalar. Y como cualquier sitio web, es un archivo HTML. No del todo. También hay un archivo manifest.json. Y este archivo manifest.json describe tu aplicación. Puedes darle un nombre, un nombre corto y establecer algunas otras cosas que luego se reflejarán en esta aplicación. Por ejemplo, aquí establecí un color de tema y se tomó como el color de la barra de título. Pero lo que realmente nos importa es este archivo index.html principal. Y puedes ver, muy simple. Tenemos una hoja de estilo incluida al principio para que todo se vea bien. Por supuesto, también podrías tener esto como un archivo separado. Elegí incluirlo para tener un archivo html independiente y ordenado. Y luego solo tenemos nuestro html. Hola, JS Nation, ¿verdad? Lo único que necesitarás para que una aplicación web progresiva funcione es lo que se llama un service worker. Si no estás familiarizado con eso, un service worker es una especie de script JavaScript independiente que se ejecutará en segundo plano de tu navegador. Y eso es responsable de asegurarse de que tu aplicación esté disponible sin conexión, ¿verdad? También puede hacer algunas otras cosas, pero este service worker es lo que impulsa tu aplicación en segundo plano. Y puede hacer mucho más que simplemente almacenar en caché tus recursos y hacerlos disponibles sin conexión. También puede realizar sincronizaciones en segundo plano. Por ejemplo, puedes configurarlo para que cada dos horas busque nuevos datos de un servidor o algo así. Y esta etiqueta de script que ves aquí, todo este código es necesario para cargar el service worker. Lo leeremos desde un archivo y luego lo registraremos. Y eso se encarga de eso. El service worker en sí también es muy simple. No lo modificaremos en absoluto. No volveremos a tocar esto. Y esto simplemente almacenará en caché todos nuestros recursos web en la primera carga si aún no están en caché. Y una de las cosas que lo diferencia de un sitio web tradicional es que las aplicaciones de escritorio suelen funcionar sin conexión. Entonces, lo que un usuario espera de una aplicación de escritorio es que simplemente pueda abrir la aplicación. Si estoy en algún lugar de Alemania rural, donde la señal de celular y el internet móvil no son muy buenos, espero que mi aplicación se inicie

Pasemos al ejemplo de Electron porque el ejemplo de Electron también es muy similar. Entonces, si estás siguiendo con Electron, navega hasta los puntos de control, y luego la primera carpeta y verás, nuevamente, tenemos un archivo index.html. Y este es aún más simple. Es solo la hoja de estilo y, ya sabes, el html que dice, hola, JS Nation. Y Electron tiene algo muy similar a un service worker, que en el mundo de Electron se llama el hilo principal. Y a diferencia del service worker en el mundo web, donde el service worker es opcional, ¿verdad? Puedes optar por usar el service worker. La forma en que esto funciona es que tu sitio web se cargará primero. Tu sitio web iniciará el service worker. Y luego las cosas funcionarán sin conexión. En el mundo de Electron, esto es exactamente lo contrario, ¿verdad? Entonces tienes el hilo principal que se inicia primero, y el hilo principal realmente está en control de tu aplicación, ¿verdad? El hilo principal, esa es tu aplicación, y el hilo principal puede crear una ventana con tu HTML dentro de ella. Así que es de alguna manera al revés. Y este hilo principal está ejecutando este archivo main.JavaScript, archivo main.js. Y como puedes ver, lo que hace este archivo es que esperamos hasta que la aplicación esté lista, ¿verdad? Permíteme aumentar el tamaño de fuente para que puedas leerlo. ¿Está bien así? Espero que sí. Si no, avísame. Entonces lo que hacemos es esperar hasta que la aplicación esté lista. Y luego creamos una ventana usando esta función aquí. Y este es un código específico de macOS que básicamente replica este comportamiento en macOS donde, una vez que cierras una ventana, la aplicación no se cierra inmediatamente como en Windows, sino que permanece abierta. Y luego, una vez que haces clic en el icono nuevamente, se volverá a abrir una ventana. Estas líneas aquí son muy específicas de macOS. Solo para que lo sepas, la parte sustancial de este archivo es la función 'create window'. Y esto creará una nueva ventana del navegador, con un ancho y alto predefinidos. Y luego le indicamos a la ventana principal que cargue nuestro archivo index.html. Así que como dije, esto funciona de manera un poco diferente, donde nuestro hilo principal carga el html y no el html carga el service worker, el hilo principal, por así decirlo. Y sí, si puedes, nuevamente, ejecútalo usando el comando 'Start', así que permíteme abrir este terminal un poco más. Si ejecutas 'Start' en esta carpeta o utilizando esta sintaxis de filtro, oh, se abrió en el monitor equivocado, pero aquí estamos. Se abrió una aplicación nativa, nuevamente, que dice, hola, JS Nation. Y esta aplicación, a diferencia de, y esta es una diferencia, esto es una diferencia con lo que hemos visto anteriormente. Esta aplicación, luego podrías empaquetarla y distribuirla como cualquier otra aplicación. El problema con las PWAs, o no es un problema, es una diferencia. La diferencia con las PWAs es que siempre debes descubrirlas a través de tu navegador, mientras que con Electron, puedes distribuirlas como binarios independientes que funcionan independientemente de cualquier navegador o algo así. Cerramos esto.

Si vuelvo a abrir esto, como pudiste ver, si cierro esta ventana, la aplicación no desaparece, sino que se queda en segundo plano. Eso es exactamente lo que hizo este código. Cerrémoslo de una vez por todas y pasemos a la versión de Tauri. Aquí estamos, la versión de Tauri. ¿Tengo cambios sin confirmar? Oh, está bien, está bien. Solo cambié el nombre de la aplicación. Lo siento. No hay problema. Si estás siguiendo con Tauri, navega hasta la primera carpeta y notarás que esto se ve algo diferente, ¿verdad? Aquí está mi archivo HTML. Y el archivo HTML está en la carpeta source. Entonces, nuevamente, hoja de estilos HTML, ya conocemos esto, ¿verdad? Es lo mismo. Entonces, una cosa que ya aprendimos, todos estos utilizan básicamente la misma capa web, ¿verdad? No hay diferencia en la capa web como esperábamos, ¿verdad? Porque se trata de construir aplicaciones utilizando tecnología web. La parte de tecnología web de esto no cambia. Es muy similar, ya sabes, lo mismo. Pero, la diferencia con las aplicaciones de Tauri es la carpeta Tauri de origen. Y aquí es donde necesito explicar un poco, porque no asumo que estés familiarizado con Tauri en absoluto. La forma en que funciona Tauri, a diferencia de Electron, donde Electron se distribuye como un solo binario, ¿verdad? Ese es el binario de Electron y le dices al binario de Electron que ejecute tu JavaScript. Muy similar a cómo le dices a Node.js que ejecute tu JavaScript, ¿verdad? Pero la forma en que funciona Tauri es que Tauri es solo una caja de herramientas de Rust. Y es una caja de herramientas de Rust que puedes incluir en tu proyecto de Rust y luego construir tu propia aplicación de escritorio con eso, ¿verdad? Puedes decirle a la aplicación de escritorio que cargue el archivo, puedes hacer lo que quieras. Pero lo importante es que aún tienes el control del binario de Rust, ¿verdad? Dado que el binario de Rust se compila en tu máquina, realmente puedes elegir qué partes del framework necesitas, qué partes necesitas y luego también puedes agregar partes opcionales para ampliar la funcionalidad. Y todo eso sucede en tiempo de compilación. Entonces realmente solo obtienes lo que necesitas, porque está compilado, ¿verdad? No es solo un binario estático, sino que está compilado en un binario. Y eso te brinda algunas ventajas, y eso es en parte por qué comenzamos el proyecto en primer lugar. Las ventajas son que, dado que solo obtienes lo que realmente necesitas, los binarios de Tauri son mucho, mucho, mucho más pequeños y también más seguros, porque no leemos ningún archivo JavaScript del disco ni nada por el estilo. Los archivos JavaScript se incluyen en tu aplicación en tiempo de compilación. Eso es lo que podemos hacer, ya que es algo compilado. Lo que acabo de abrir, el archivo main.js, es básicamente nuestro equivalente del archivo main.js. Entonces, en Electron, tenías el archivo main.js, que creaba tu hilo principal y luego abría una nueva ventana, cargaba tu HTML y hacía todo eso. Y esto es esencialmente lo mismo. Puedes ver que tenemos una función principal aquí porque Rust necesita eso para ejecutarse. Y lo primero que hacemos es crear nuestra aplicación de Tauri. Y luego, en esta línea, ejecutamos nuestra aplicación. Eso es todo.

Otro archivo muy importante en un proyecto de Tauri es el archivo tauri.conf.json. Y esto, nuevamente, es muy similar a lo que vimos con las PWAs, ¿verdad? Donde teníamos el archivo manifest.json, donde describíamos nuestra aplicación, donde establecíamos un nombre y algunas otras cosas. Y el archivo tauri.conf.json realmente es lo mismo. Solo que con más opciones y orientado a Tauri, ¿verdad? Aquí, nuevamente, podemos dar un nombre especial a nuestra aplicación, podemos establecer la versión de la misma. Y podemos establecer muchas más opciones. Y esto va en contra del punto que estaba haciendo, donde probablemente estás buscando un framework de aplicaciones de escritorio porque quieres ir más allá de lo que el navegador puede ofrecerte, ¿verdad? Entonces esto es muy similar a tu archivo manifest.json de las PWAs, pero va más allá de lo que el navegador puede ofrecerte. Y este archivo se leerá en tiempo de compilación y Tauri tomará, ya sabes, las decisiones correctas para ti en el binario final en función de las opciones que establezcas aquí. Entonces, eso es algo en lo que el grupo de trabajo de Tauri ha invertido mucho tiempo. Hemos visto que aprender Rust es un desafío. Aprender Rust no es fácil. Y, ya sabes, si tienes una gran idea para una aplicación, probablemente quieras terminarla y sacarla lo más rápido posible. No tienes tiempo para aprender Rust, ya sabes. Entonces tratamos de asegurarnos, y creo que lo logramos muy bien ahora, de que no necesites ningún Rust.

Entonces sí, con eso, podemos comenzar a usar pnpm, podemos iniciar nuestra aplicación de Tauri y lo que acaba de hacer es compilar nuestra aplicación y ahora la ejecutó. ¡Y ta-da boom! Tenemos nuestra aplicación y está en ejecución. Y nuevamente, similar a electron, pero diferente a las PWAs, así que diferencias y similitudes, ¿verdad? Una aplicación de Tauri producirá un solo binario al final que puedes distribuir de forma independiente sin necesidad de navegadores ni nada parecido.

Entonces, cerremos esto y volvamos a nuestras diapositivas. ¡Genial! ¿Algún pregunta hasta ahora? ¿Tuviste problemas con los ejemplos de Hola Mundo? ¿Algo no se inició, no se compiló? ¿O estamos bien? ¿Te sientes listo para continuar? Tal vez podemos obtener un poco de retroalimentación en el chat, para que no te sientas rezagado. Vale, silencio en el chat, todo bien. Muy bien. Genial. Así que me enfocaré principalmente en la variante de electron de esto, ¿verdad? También mostraré un poco de Tauri. Pero como asumí que estás más familiarizado con la variante de electron, es más fácil de entender. La usaré para mostrar los ejercicios y trabajar en ellos.

Lo más importante, y siento que esto es como la base de cualquier desarrollo de aplicaciones, y se está volviendo cada vez más importante en la web también, ya sabes, como dije, los proveedores de navegadores están constantemente aumentando la borrosidad de la línea entre lo que es una aplicación nativa y lo que es un sitio web, pero lo principal en lo que debes pensar cuando trabajas en aplicaciones es el hilo principal y el hilo de renderizado, y eso es un modelo que fue introducido primero, creo que por Chrome, y eso es el multihilo en tu navegador web, ¿verdad?, y la idea es que tienes un hilo que controla tu aplicación, ese es el que inicia las ventanas, el que interactúa con el sistema operativo, y luego ese hilo principal genera una serie de hilos de renderizado y de utilidad para dibujar cosas en la pantalla, ¿verdad? Entonces, en Chromium o Chrome, un hilo de renderizado sería equivalente a una pestaña o una ventana, ¿verdad?, así que el contexto de cada sitio web se ejecutaría en su propio hilo de renderizado, ¿verdad? Y eso tiene la ventaja de aprovechar las máquinas multinúcleo que todos usamos ahora, pero también aumenta la estabilidad de tu aplicación, ¿verdad? Entonces, si, por ejemplo, en el caso de Chrome, un sitio web tiene un error, no afecta a todo el navegador, solo afecta a ese hilo, ¿verdad? Lo mismo ocurre con tu aplicación de escritorio. Si una ventana tiene un problema o experimenta problemas, si se bloquea, no afecta a toda la aplicación, solo afecta a esa ventana, y puedes recuperarte y seguir adelante y tal vez, ya sabes, manejar el error y luego mostrar un mensaje de error al usuario o algo así. Entonces, el modelo de hilos es importante por esa razón, pero también es importante por un par de razones más, y, ya sabes, ahora veremos por qué y aquí es donde volveremos a algunos ejercicios. Así que ahora estamos en el punto de control 2. Así que pasemos a eso.

Llama a este, llama a aquel. Y antes de sumergirnos en el código real, permíteme decirte qué hace la aplicación de demostración en la que estamos trabajando ahora mismo. Y teníamos una pequeña y bonita aplicación de hola mundo, pero en realidad no hace nada y no te enfrentas a ninguna limitación con eso porque solo estás mostrando un H1, ¿verdad? Así que pensé en algo muy simple que hiciera un poco más que solo hola mundo, pero que aún demostrara mi punto, ¿verdad? Y se me ocurrió, okay, hagamos una aplicación simple que simplemente calcule números de Fibonacci. ¿De acuerdo? Los números de Fibonacci, esa serie de números donde, ya sabes, cada número depende de los dos números anteriores. Y eso es interesante porque hay una forma de expresar esto usando recursión, que no es muy eficiente. Y ese es el punto, ¿verdad? Así que esta función aquí es la versión menos eficiente para implementar el algoritmo de Fibonacci. Y eso es para mostrarte un problema de rendimiento más adelante. Y ahora, si el hecho de que esta sea la versión menos eficiente de este algoritmo te molesta, si eso te motiva, si eso te inspira, si eso te despierta algo, si eso te hace querer refactorizar esto, hay algunas variantes más eficientes. Pero quería centrarme en esta aplicación como una demostración simple. Y lo que hace esta aplicación es que puedo ingresar un número y me dará los primeros n números de la secuencia de Fibonacci, dependiendo del número que ingresé. Así que 0, 1, 1, 2, 3, 5, 8. Puedo aumentar esto, puedo ir a 10, puedo ir a 25, y puedes ver que los números se vuelven realmente grandes muy rápido. Y si aumentas mucho este número, digamos 40, notarás algo interesante. Así que hice clic en 40, y ahora no puedo... Okay, lo tengo. Hagamos 50, ya sabes, hagamos 50, calcula... Y así, puedes ver que mientras se está calculando, ya no puedo interactuar con la página. Todavía puedo moverla, pero pasar el cursor sobre este botón no hace nada. El desplazamiento todavía funciona, porque no depende de ningún elemento HTML, pero no puedo hacer clic en este campo de entrada, no puedo cambiarlo. Esta aplicación, en todos los sentidos, está completamente congelada ahora mismo. No puedo hacer nada con esta aplicación en este momento. Y eso es porque este cálculo se realiza en un solo hilo, ¿verdad? Así que, esto es un término con el que probablemente estés familiarizado. Si no, déjame explicártelo rápidamente. JavaScript, de forma predeterminada, se ejecuta en un solo hilo, lo que significa que solo habrá una instrucción ejecutándose a la vez. Solo habrá una cosa sucediendo a la vez, aunque tu máquina, tu computadora, pueda ejecutar algo de código al mismo tiempo con los múltiples núcleos que tiene. Puede hacer varias cosas al mismo tiempo. Y lo peor es que con esta implementación que hemos elegido aquí, nunca volverá al hilo principal hasta que haya terminado. En realidad, ha terminado de calcular todos los 51 números de Fibonacci. Y eso es malo, porque en este mundo, donde solo tenemos un solo hilo para hacer cualquier cosa, este hilo también es responsable de calcular el color de fondo de este botón. Permitirme interactuar con este elemento de entrada, renderizar estos dos botones que tenía aquí anteriormente, donde podía incrementar y decrementar el número. Es responsable de hacer esto interactivo. Todo esto ahora está congelado porque en lugar de manejar cualquier entrada del usuario en este momento, lo que estamos haciendo es calcular números increíblemente grandes y lo estamos haciendo de manera muy ineficiente. No en segundo plano, sino en primer plano en lugar de manejar la entrada del usuario, estamos calculando números. Y eso está causando un problema. Y puedes ver que, aunque todavía puedo cambiar el tamaño, no puedo hacer nada más. Y aún sigue, ¿verdad? Esto todavía está sucediendo. Y sí, los números de Fibonacci y calcular eso pueden ser un ejemplo un poco forzado, un poco estúpido, podrías decir. Pero esto también podría ser, ya sabes, decodificar un video, o codificar un video, o hacer cualquier cosa que requiera un procesamiento pesado. Y sí, déjame cerrarlo para que se detenga de verdad.

Y de manera similar, ya sabes, si ahora navegamos al tercer punto de control, y también nos movemos al tercer punto de control, lo que esta, ya sabes, tercera versión de la aplicación agregó es un botón al final aquí. Así que aquí en el HTML, agregué un nuevo botón llamado botón de nueva ventana, y ese botón simplemente, ya sabes, inicia una nueva ventana que muestra el mismo contenido, ¿verdad?, como crear una segunda ventana de esta aplicación o una tercera o una cuarta. Y esto, ya sabes, se asemeja a lo que podrías encontrar en cualquier aplicación del mundo real, ¿verdad?, porque lo más probable es que tu aplicación no esté limitada a una sola ventana. Y si lo está, es posible que aún desees poder abrir múltiples instancias de ella, ya sabes, para tener una vista lado a lado o algo así. Y notaremos algo más. Y eso es, ya sabes, si calculamos los números de Fibonacci aquí y ahora abrimos una nueva ventana, esto ya no está sincronizado, ¿verdad? Ahora está desincronizado. Esto no refleja el estado de la aplicación en una ventana en esta ventana. Si hago, ya sabes, si calculo 10 aquí e incluso si, ya sabes, voy a ver y recargo, esto no está sincronizado. Esto no se lleva a las otras ventanas, lo cual es una lástima. Ya sabes, en este ejemplo, ya sabes, un poco artificial, lo siento, en este ejemplo artificial, esto puede parecer un poco inútil. Pero, digamos, ya sabes, nuevamente estás trabajando en una aplicación que es como una aplicación de estación de trabajo, ¿verdad?, entonces sería muy útil si tienes una ventana de configuración, ¿verdad?, y cambias algún estado en esa ventana de configuración, que luego se refleje en la ventana principal, ¿verdad? Esa es toda la idea de la configuración, así. Si vuelvo a las diapositivas, esto es como la segunda gran razón por la que realmente deberías pensar en los hilos, de manera consciente, cuando estás trabajando en la aplicación.

Y, ya sabes, el otro punto es, ya sabes esto, piensa en los hilos de renderizado y principal, no como hilos de renderizado y principal, sino piensa en ellos como cliente-servidor, ¿verdad? Piensa en ellos como páginas web y tu servidor. La página web no es dueña del estado, ¿verdad? Si tengo un servidor donde un usuario puede iniciar sesión, mantengo, ya sabes, los detalles del usuario y todos los documentos que ha creado o lo que sea, los mantengo en el servidor, ¿verdad? El servidor es el que es dueño del estado y el cliente solo se encarga de renderizar eso al usuario, mostrarlo de una manera agradable y también recibir la entrada del usuario para luego manipular ese estado en el servidor. Y así es realmente como deberías pensar en el hilo de renderizado versus el hilo principal, ¿verdad? Entonces tu hilo principal es el que se encarga de trabajar, uh... Lo siento, no, no, no. El hilo principal es el que se encarga del estado y de interactuar con el sistema operativo, de hacer las cosas privilegiadas. Y el hilo de renderizado es para renderizar. Y con ese punto, pasemos al punto de control 3 y aquí quiero que me sigas si quieres. Esta es la mejor oportunidad para que realmente juegues ahora. Y lo que quiero que hagas es, ¿cómo podemos refactorizar este código? ¿Cómo podemos refactorizar la aplicación del punto de control 3? ¿Cómo podemos refactorizarla para que la lógica del hilo principal no se congele cuando hacemos clic en el botón? Este es el primer problema que abordaremos. Y tal vez puedas pensar en esto por un segundo por ti mismo. Y luego también te mostraré cómo lo hice yo. Y la forma en que lo hice también será la que se encuentra en el punto de control 4. Entonces, si quieres adelantarte o simplemente quieres saber cómo terminará esto, también puedes hacerlo. Pero te animo a que te tomes un minuto. Piensa en esto Te animo a que te tomes un minuto. Piensa en esto, ¿cómo harías para que esto no suceda en el hilo principal? ¿Cómo podemos aprovechar el hecho de que tenemos múltiples hilos en ejecución? ¿Cómo podemos aprovechar eso a nuestro favor? Voy a hacer una pausa aquí por un segundo. Quiero hacer eso. Juega con el código si quieres. Y voy a abrir la versión de Tauri de esto. Mientras tanto, es un poco más fácil en mi opinión para demostrar. De acuerdo, solo para mostrarte, ahora si hago clic en esto en la aplicación de Tauri, se congela de la misma manera. Ahora no puedo hacer clic, no puedo crear una nueva ventana, no puedo hacer nada. Esto está completamente congelado. Entonces, ¿cómo podemos mover esto fuera del hilo principal? Cierra esto. Ábrelo de nuevo. ¡Boom, okay! Genial. Bien. Solo una pregunta rápida. ¿Estás bien si sigo adelante? Quiero, ya sabes, quiero dejarte suficiente tiempo para que juegues con esto a tu propio ritmo, pero también quiero mostrar esto ahora,

Genial. Por último, representémoslo. Y eso es todo. Este es todo el código, ya saben, necesario para mover esta carga de trabajo fuera del hilo de representación y desbloquear nuestra interfaz de usuario. Así que, volvamos a ejecutar esto. Veamos si cometí algún error grave. ¿Esto sigue funcionando? Boom. Muy bien. Y ahora, ya saben, probemos esto correctamente. Ejecutemos esto y digamos, 40. Y pueden ver, en primer lugar, esto fue realmente rápido. De hecho, tan rápido que no puedo realmente mostrarles esto. Ok, tal vez, ¿puedo inspeccionar los elementos? Sí, genial. Bien. Ya saben, todavía puedo, esto es un poco difícil de mostrar, pero todavía puedo interactuar con este elemento aquí, aunque esté, ya saben, ejecutando y calculando un montón de números en segundo plano. Y eso es realmente en lo que Rust es muy bueno, ¿verdad? Calcular muchos números. Y por eso, también, elegí demostrar esto con Towers. Pero con eso, sigamos... no, no volvamos a las diapositivas. Abordemos lo siguiente. Y no voy a... en esto, no voy a, ya saben, hacer todo el proceso y codificar esto con ustedes también. Pero déjenme hablarles de cómo abordamos el segundo problema. El segundo problema era que ahora tenemos una aplicación genial, ya saben, que se mantiene receptiva, que utiliza los hilos que tenemos, que utiliza esta paradigma de hilo principal versus hilo de representación, pero si creo una nueva ventana, esto aún no está sincronizado, ¿verdad? Entonces, ¿cómo sincronizamos nuestros hilos? ¿Cómo estructuramos nuestra aplicación para sacar el estado de este hilo y llevarlo al hilo principal para que pueda estar sincronizado? Y en Tauri eso es igual de simple, y permítanme ir directamente al número cinco.

Ok, lo que hacemos esencialmente es, ¿recuerdan nuestra función Fibonacci? Sí, lo que hicimos esencialmente es crear una estructura y la estructura es como un objeto en Rust, ¿verdad? Y este objeto contendrá nuestro array de valores. Así que ahora, movimos el array de valores de JavaScript a Rust. Así que lo movimos del hilo de representación a nuestro hilo principal, a nuestro hilo de Rust. Y de manera similar, ya saben, Calculate, tuvimos que hacer un poco más para, ya saben, bloquear nuestro acceso a ese objeto porque es Rust. No se preocupen por eso. Lo que quiero que entiendan de esto es que ahora movimos este valor, como movimos este valor, movimos el estado de nuestra aplicación que este estado es muy simple, ¿verdad? Este estado es solo un objeto, solo un array de números. Movimos este array de números para que ya no viva en el hilo de representación . Ya saben, no vive en una copia separada del estado en cada hilo de representación, sino que tenemos uno que vive en nuestro hilo principal. Y puedo mostrarles qué efecto tiene o cuál es el efecto de eso ejecutando el punto de control 5, ¿verdad? Esperen un segundo. Ok, ahora tenemos una ventana y digamos, no tan loco como 67 números Fibonacci, pero digamos 20. Calcular, boom, muy rápido. Pero ahora abrimos una nueva ventana. Oh, vean eso. Sí, obtuvo los números Fibonacci del hilo principal y los mostró de inmediato. Bien. Y si ahora, ya saben, digamos 10, ahora actualizaste esta lista y pueden ver que esto no se actualizó, pero si recargamos se actualiza. Y eso es porque simplifiqué esta demostración porque no quería complicarla más de lo que ya está. Ahora podrían agregar fácilmente también actualizaciones en tiempo real. ¿Verdad? Podrían emitir eventos desde el hilo principal al hilo de representación para decirle, oye, ya saben, el estado acaba de actualizarse. Pero en este caso,

Ese proceso de cuatro pasos consiste en la construcción, que es el proceso de tomar tu HTML, tu JavaScript, tu CSS, pero en el caso de, por ejemplo, Tauri, también tu código Rust, compilar todo eso, transpilarlo, ejecutar un paquete, como, estás tomando eso, creando archivos a partir de eso en un formato en el que ahora es ejecutable. Ya no es código fuente más. Es algo en lo que puedes hacer doble clic y se ejecutará. Y dependiendo de tu framework, ese paso podría ser opcional. Ese paso podría llevar más tiempo. Ese paso podría no existir en absoluto. Porque con las PWAs, por ejemplo, no hay ningún paso de construcción en absoluto, a menos que uses un framework de front-end que requiera un paso de construcción como Svelte o Vue o lo que sea. Pero con Tauri, por ejemplo, nuevamente, diferencias y similitudes. Con Tauri, esto es muy pronunciado porque el paso de construcción, ahí es donde ocurre la magia. Pero genial, ahora tienes tu ejecutable, ¿y ahora qué? El segundo paso, eso es el empaquetado. Y el empaquetado, muy similar al paso anterior de construcción, pero el empaquetado ahora toma tu ejecutable y un montón de metadatos, y cosas como iconos, por ejemplo, y los empaqueta en uno de los muchos, muchos formatos de aplicaciones posibles, ¿verdad? Este es el paso donde a partir de un EXE en Windows, creas un MSI, o en macOS, a partir de un ejecutable ELF, lo conviertes en una aplicación con un icono. Y ahora, esto ya se siente mucho, mucho más como una aplicación real que cualquier ejecutable regular. Paso muy importante. Aquí también estableces la descripción de tu aplicación y cosas así. El tercer paso, a menudo pasado por alto, pero si realmente te adentras en los detalles, a menudo es el paso más doloroso, y eso es la firma de código. Y esto es requerido en macOS, por lo que macOS no instalará, si por supuesto hay como soluciones para desarrolladores, pero en el caso común, no instalará tu aplicación si no está firmada. Y es requerido-ish en Windows, si estás familiarizado con esta advertencia, esta aplicación podría contener malware porque no se pudo, no se pudo haber verificado y no es de un desarrollador autenticado. Esta advertencia en Windows, también desaparece si firmas tu aplicación. Entonces, este paso, ya sabes, es realmente importante si quieres aumentar la confianza con tus usuarios, lo cual, ya sabes, para aplicaciones de código abierto, no es tan importante. Además, firmar el código a menudo cuesta dinero. En macOS, tienes que registrarte en el programa para desarrolladores. En Windows, tienes que comprar este certificado. Y esto es un poco, este paso, ya sabes, es un poco molesto. Este paso es un poco tedioso, engorroso, pero en esencia, lo que hace es asegurarse de que los usuarios de la aplicación que descargan proviene del desarrollador que ellos pretendían, ¿verdad? Usando eso, realmente demuestras que tú eres quien construyó esta aplicación. Que este binario que un usuario descarga realmente proviene de ti y no de una parte malintencionada. Entonces, realmente, ya sabes, es realmente importante. Ahora estoy hablando de que proviene de ti versus alguien más. Último paso, distribución. Ahora tienes tu aplicación construida, empaquetada y con código firmado. ¿Cómo llevas esto a tus usuarios? Porque eso es lo que realmente cuenta, ¿verdad? Llevar esto al mundo, llegar