Lo Último de Deno

Ahora hablaré sobre cómo hacer aplicaciones de escritorio con Dino. Esto se implementó hace cinco minutos. Vamos a ello. Así que primero, sí, soy Leo. Trabajo en Dino. Me ocupo de la experiencia del desarrollador, las APIs web, mantengo JSR si lo usas, y desde hace muy poco, también soy delegado de TC39.

Así que construiste una buena aplicación web. Tienes un producto. Quieres que tu cosa sea un sitio web. Pero de repente, la gente pregunta, oye, ¿puedo obtenerlo como una aplicación de escritorio? Y entonces tienes que configurar Electron. Electron, aunque es muy poderoso, es mucho para configurar. No es fácil. Y quiero decir, tienes una decisión entre, bueno, puedes elegir entre tres cosas diferentes. O bien obtienes una interfaz de usuario consistente, pequeña y rápida, o obtienes el ecosistema de JS.

Y dado que somos JS Nation, supongo que la mayoría de la gente aquí quiere poder usar NPM, los frameworks, la compatibilidad con node, todo lo que te resulta familiar. Así que el problema es que hoy en día, la mayoría de las cosas, estás atrapado con dos de estas opciones. No puedes obtener las tres. Pero las compensaciones suelen ser con Electron, es un paquete masivo, incluyendo todo Chromium. Eso no es pequeño. Pero si usas Aria en los Rxs, obtienes binarios pequeños porque usan el webview del sistema.

Pero debido a que es webview, es inconsistente, y no obtienes el ecosistema de JS lo cual es una gran desventaja. Y sí, todos ellos son un segundo proyecto, una segunda cadena de herramientas. Tienes que pensar en esto por separado. Es como aplicaciones separadas. No puedes simplemente usar tu aplicación web normal como tus aplicaciones de escritorio.

Pero, ¿y si pudieras simplemente hacer eso? Muy, muy simplemente. No necesitas hacer ningún cambio. No necesitas descargar una cadena de herramientas separada a menos que no estés usando Deno. Pero esa es una cadena de herramientas adicional, supongo. Pero es solo un comando. Y es denodesktop. Literalmente tienes que llamar a denodesktop y convertirá tu aplicación en una aplicación de escritorio.

Esta es una primera vista pública. Hubo un tweet hace unos días de Ryan. Pero ahora hemos decidido que realmente vamos a seguir con esto. Esto se está lanzando como una característica experimental. Así que hay muchos cambios disruptivos. Y muy buggy hasta cierto punto todavía. Eso es de esperar. Por eso lo lanzamos como una característica experimental. Queremos que lo pruebes y nos des tu opinión.

Así que denodesktop. Puedes apuntar a cualquiera de los frameworks que estés usando. Si estás usando Next.js, puedes simplemente usar eso. Y simplemente llamas a denodesktop. Obtienes una aplicación de escritorio, como un exe, un .app, simplemente un ejecutable en Linux, o incluso un distribuible como .msi, o DMG, puedes obtener cualquiera de estos sin ninguna configuración en absoluto. Simplemente funcionará. O si no tienes uno de estos frameworks, puedes simplemente usar un servidor HTTP. Es bastante sencillo.

Simplemente creas tu aplicación Express, o DNServe, fetch por defecto, tu aplicación Express, o si tienes tu framework separado que no está listado y genera un servidor HTTP, puedes simplemente usar eso. Simplemente entiende HTTP. Por ejemplo, aquí, simplemente tenemos denodesktop, este archivo main TS, simplemente una aplicación Express, y obtienes una aplicación de escritorio muy básica porque no hay estilos. Es simplemente HTML puro con un H1. Obviamente querrías hacer más que eso. Si configuras el título, por ejemplo, también tomará el título, y muchas más cosas.

Así que intentemos construir una. Esto puede salir mal. Podría muy probablemente salir mal. Pero, sí, estamos en un directorio vacío. Quiero decir, tengo un directorio de respaldo allí por si acaso realmente sale completamente mal. Pero usemos MPX, create next app. Simplemente mi app. Claro. Usamos los valores predeterminados. Y con suerte la red colabora, de lo contrario vamos al respaldo. ¿Por favor? Bien. De acuerdo. Y obtenemos una aplicación Next.js bastante estándar como cualquiera ha visto, así que puedo cd en mi app, y, sí, es simplemente lo estándar. Así que vamos a convertirla en una aplicación de escritorio. Tengo un binario separado aquí que es r underscore dino, que con suerte, déjame probar esto ya que parece estar cortado de la pantalla. Debería haber comprobado esto de antemano.

Mi error. ¿Puedo redimensionar esto? No, no puedo. Déjame mostrar eso. Tengo rdino. Eso es solo dino local que uso. De todos modos, es rdino desktop. Voy a desplazarme hacia abajo un segundo para ti. Voy a pasar la bandera dash A, porque Next.js pide muchos permisos, y no voy a pasar cada uno de los que quieren. Y eso es prácticamente todo.

Así que comenzará a construirlo. Tomará un momento. Y simplemente lo empaquetará todo. Y creará un binario. Y obtenemos una aplicación. Así que si yo... Así que ahí está myapp.app. Puedo simplemente llamar a open en ella. Y la primera vez, tomará un momento para lanzarse. Y se lanzó en el otro... ¿Cuándo se lanzó? Ahí es donde los dioses de la demo decidieron no cooperar. Déjame lanzarlo de nuevo. Confía en mí. Confía en mí. Probé esto de antemano, y estaba funcionando completamente bien. Lo prometo. Siempre es el caso. Oh, vamos ahora. ¿En serio? Está bien. Eso no es como estaba planeado.

Pero quiero decir, tengo una aplicación de demostración diferente que mostraré en un momento más tarde. Pero imagina que esto funcionó. ¡Sí! Está bien. Podemos intentar otra cosa.

Así que Dino Desktop también tiene una bandera HMR. Así que puedes compilar con HMR. Y con suerte tal vez esa funcione. Y obtienes una aplicación de escritorio que puedes modificar en vivo sobre la marcha. Va a tardar un poco más en compilar esta.

Solo porque configura toda la infraestructura de HMR. Pero parece que lo está haciendo. Pero inició la aplicación. Y la veo en mi otra pantalla. Dale un segundo. Configurando. Next.js está compilando. Muy, muy rápido. Oh, vamos. Hmm.

Okay. Así que imagina que esto funcionó. De nuevo. Debería haber hecho esto con una aplicación separada que realmente funcione. Pero sí, esto debería haber funcionado. Estaba funcionando hace diez minutos. Así que debería haber hecho una grabación. Eso es culpa mía. Pero sí.

Así que conceptualmente hablando, esto se habría convertido en una aplicación de escritorio. Puedes modificar sobre la marcha. Y la típica recarga de módulos en caliente, simplemente puedes construir tu aplicación de escritorio. Pero una aplicación de escritorio no es solo poder usar el navegador que viene con ella y tener tu aplicación web allí. También se trata de poder usar el sistema operativo nativo.

Como si quisieras modificar la ventana. Como un título personalizado, redimensionar algunos eventos. Quieres modificar la bandeja. Quieres poder... Oh. Estoy... Eso es... Espera un segundo. Ahí vamos. Lo siento. Así que, sí, quieres poder modificar la ventana, quieres modificar la bandeja, o el dock, e interactuar con eso, o todos estos diferentes tipos de eventos. Y también, como, diálogos nativos. Todo el tipo de cosas que usas para, como, una aplicación de escritorio. Y, tenemos... Como aquí hay un poco de un ejemplo. Puedes simplemente crear una ventana de navegador en un binding.

Así que los bindings te permiten llamar funciones desde el sitio de Deno en el navegador. Así que puedes simplemente configurar una función para hacer lo que necesites que el navegador no tiene acceso. Y luego este confirm, por ejemplo, simplemente crea un popup nativo. Ahora, estas son cosas que actualmente soportamos, pero vamos a soportar más. Así que de nuevo, diálogos nativos, notificaciones, bandeja del sistema, para que puedas interactuar completamente con la bandeja del sistema. El binding es compatible con la mayoría de los sistemas operativos, por lo que funciona en Linux y Windows. Hay algunas limitaciones en Linux que estamos resolviendo. De nuevo, muy experimental.

El dock o la barra de tareas, menús, así que eso, y también las ventanas, eventos de entrada, y de nuevo, estamos agregando más cosas. Esto es solo, como, el primer paso que implementamos. Los bindings no son IPC como en Electron o Tauri, donde básicamente el backend habla a través de un socket de serialización de procesos cruzados. En realidad estamos en el mismo proceso. Así que esto da algunos beneficios que podemos transferir datos entre el navegador y Deno muy eficientemente, muy rápido, y bajo el capó, hasta donde recuerdo, Electron en realidad solo soporta cadenas y hace su propia serialización. Puedes mover un tipo de JavaScript de un lado a otro. Con algunas limitaciones, pero hay más que se puede hacer en comparación con Electron. Sí, no hay sockets, no hay copias de procesos cruzados, así que muy eficiente.

Ahora, el ciclo de desarrollo. De nuevo, HMR, simplemente editas, guardas y lo ves instantáneamente. Simplemente funciona. Y eso funciona puramente con, eso funciona principalmente bien con los frameworks, pero también funciona muy bien con cualquier aplicación independiente, que no es parte de los frameworks que mostré anteriormente. Simplemente funcionará. Así que sí, las aplicaciones de framework simplemente funcionan. Aplicaciones simples. Deno observa el proceso y simplemente hace cualquiera de las recargas. No necesitas tener ninguna herramienta separada. Simplemente hace todo esto por ti. Y sí, el tiempo de ejecución y las ventanas permanecen vivas. No tienes que ver constantemente un reinicio. Con Electron, esto es un poco lento, así que intentamos hacer esto mucho más agradable. Pero un motor no es suficiente.

Quiero decir, con Electron, estás atrapado con WebView, con Chromium. Con Tauri, estás atrapado con WebView. ¿Qué pasa si quieres elegir? Quiero decir, la gente debería tener el poder de decidir con qué quieren mientras mantienen la tecnología que están usando. Así que, hicimos posible simplemente poder usar ya sea el WebView, que es el predeterminado, o puedes usar Chromium. Todo esto se hace a través de una simple bandera. No cambia. No hace que tu tiempo de compilación sea más lento al construir la aplicación. Simplemente funciona. Simplemente elegimos lo correcto para ti. Y simplemente hace que funcione.

Así que, sí, Ceph obviamente te da más consistencia, pero te da un binario masivo, como un ejemplo de binario era de 300 megabytes. Todavía estamos tratando de optimizarlo un poco. Y WebView es muy pequeño, como 100 megabytes. Para referencia, el binario de Deno en sí es, creo que hoy en día, como de 80 megabytes. Quizás un poco más, quizás un poco menos, no estoy completamente seguro. Pero sí, depende del sistema operativo. Así que, en cualquier máquina en la que estés, si estás en un Mac, potencialmente verás cosas diferentes de las que ves en, como, una máquina con Windows, solo porque en Mac, usaría Safari. En Windows era Chrome bajo el capó.

O también puedes simplemente no usar un motor. Quiero decir, si no quieres renderizar una ventana de navegador, no tienes que hacerlo. Tenemos un backend muy ligero, que es el backend crudo, que simplemente te permite gestionar ventanas, obtener todos los eventos, etcétera, así de simple. No obtienes una ventana de navegador, pero obtienes una ventana que puedes usar WebGPU en. Así que, si quieres renderizar tal vez usando, como, 3.js a una ventana, puedes hacerlo bastante simplemente. Sí. Obviamente, no obtienes DOM, ni Chromium, nada, solo una ventana de GPU directamente. Y es el binario más pequeño, obviamente, porque no tenemos que incluir todo el navegador. Sí. Así que, si quieres, de nuevo, simplemente crear una ventana, obtener el dispositivo GPU, obtener la superficie de Windows subyacente a la que quieres renderizar, y configurar, como la superficie de Windows es como Canvas. Usa exactamente la misma API. Si estás familiarizado con Canvas, simplemente reutiliza eso.

Así es como lo hace compatible con 3.js u otros sistemas que usan Canvas. Sí. Simplemente lo configuras y luego haces la magia que quieras hacer y lo muestras en la ventana, y simplemente funcionará.

Ahora, todo esto está bien. Pero, ¿qué pasa con querer depurar tu código? Entonces, usualmente, tendrías una depuración separada para el proceso de Deno o el proceso de node o lo que sea, pero también una depuración separada para, como, la ventana real del navegador, lo cual, sí, estás manejando depuradores. Es un poco molesto.

¿Qué pasa si puedes tener ambos en uno solo? Entonces, con dash dash inspect, simplemente obtendrás una ventana de depuración singular que muestra ambos resultados de ambos procesos. Puedes modificar. Puedes interactuar con ellos. Puedes, no sé, agregar puntos de interrupción. Puedes hacer todo lo que estás acostumbrado a hacer con un depurador. Puedes hacerlo tanto para la ventana del navegador como para el proceso de Deno en una sola vista. No tienes que complicarte. Y, sí, simplemente puedes seleccionarlo a través de un menú desplegable en la esquina. Hay ya sea renderer, que es la ventana, como la ventana de Chromium, o el proceso de Deno.

Ahora, esta característica solo funciona con el backend de Ceph, no con el backend de Chromium, no con el backend de WebView. Eso es simplemente porque no podemos transformar de manera confiable el protocolo del inspector de, por ejemplo, Safari en uno viable para V8. Ese es un aspecto técnico en el que no estoy dispuesto a profundizar en la traducción de protocolos.

Entonces, ahora, quieres enviar esta aplicación. ¿Cómo haces esto? La distribución siempre es complicada, pero, sí, proporcionamos diferentes salidas. Soportamos dot app, dot exe y dot app image para los diferentes navegadores como base predeterminada. También puedes obtener dot DMG en macOS, pero también estamos agregando los archivos dot MSI y dot dev y archivos dot RPM para Linux y Windows, respectivamente.

Podríamos agregar algunos más, pero estos son la base para realmente soportar casi la mayoría de los casos de uso. Estos se enviarán muy pronto, como, en los próximos días además. Quieres construir para cada plataforma en una máquina porque puedes simplemente compilar cruzadamente. Porque de lo contrario esto se vuelve muy complicado. Entonces, puedes compilar cruzadamente para cualquier máquina que quieras apuntar, y soportamos los casos de uso más comunes, así que macOS, Linux, Windows, tanto en ARM como no ARM, excepto Windows en ARM no es una cosa aún para nosotros, pero todo lo demás simplemente funciona.

No necesitas ejecutar CI en diferentes máquinas y hacerlo funcionar y compilar en todas. Simplemente funcionará. Hay una pequeña limitación del tab anterior y es que dot DMG solo es posible hacerlo en macOS. Eso es simplemente porque es una herramienta específica de macOS, por lo que es un poco difícil de evitar.

Ahora, quieres actualizar. Entonces, tenemos un auto-updater, y esta es la API, y, sí, siempre que tu actualización esté lista, puedes simplemente aplicar la actualización y revertir. Básicamente, puede definir el comportamiento que deseas realizar. Pero se envía con diferencias binarias. No se envía el binario completo. Si haces un pequeño cambio, no envías una aplicación completa de 200 o 400 megabytes nuevamente. Solo descargas la diferencia.

Esto se hace simplemente a través de diferencias binarias, lo cual es muy agradable y muy conveniente para los usuarios, especialmente cuando la red es muy mala, o están en una conferencia donde usualmente no es la mejor. Así que sí, se aplica al próximo lanzamiento que el usuario relance la aplicación, pero tienes el callback onUpdateReady, por lo que técnicamente puedes forzar un relanzamiento y aplicarlo inmediatamente. O, si la actualización falla, simplemente hay un rollback. Ahora, sí, también hay una versión de dno.desktop para obtener la última versión de la aplicación que estás construyendo. La mayoría de estas cosas son configurables a través del archivo de configuración.

Y, sí, es dno, por lo que está utilizando todos los permisos y sandboxing que dno proporciona, y por defecto, estamos en sandbox, por lo que tu aplicación de escritorio no puede acceder repentinamente al sistema de archivos del usuario o etcétera. Obviamente, eso es más interesante para el usuario final y no para ti. Probablemente estés tratando de recopilar la mayor cantidad de datos de calamidad sobre el usuario como sea posible, seamos honestos. Así que probablemente solo ejecutes esto con dash all, pero esta es una opción. Ya que ya lo tenemos, ¿por qué no usarlo?

Entonces, ¿dónde aterriza? Nuevamente, Electron es la forma principal de hacer esto actualmente, pero no tiene HMR, no tiene la autodetección del framework, y no tiene el sistema de permisos. Todo lo demás funciona, entonces, nuevamente, actualizaciones, vas a enviar un binario completo nuevamente, no es ideal. Tari es agradable, pequeño y conveniente, pero entonces estás comenzando a usar Rust. La mayoría de las personas no quieren lidiar con otro lenguaje de programación o Rust. La mayoría de las personas aquí están familiarizadas con JavaScript y quieren quedarse con JavaScript.

Así que tratamos de hacer lo mejor de ambos mundos y no tener que tocar otros lenguajes. Ahora, esto es solo un primer vistazo. Hoy, es muy experimental. Está solo en una rama. De hecho, nuevamente, debería haber aterrizado, con suerte, hace unos minutos, justo antes de esta charla, y, sí, funciona en todos los sistemas operativos. Nuevamente, hay algunas limitaciones dependiendo del sistema operativo en el que estés, pero estamos tratando de resolver esto. Sí, es solo un toolkit listo para escritorio. Puedes simplemente llamar a todas estas cosas. No tienes que recapitular. Esto es todo lo que tienes que hacer.

Ahora, puedes probar esto ya. Puedes usar Deno upgrade PR, el PR número 33441, o puedes esperar hasta esta noche, y estará en Deno 2.8.3, creo, habrá un lanzamiento. Sé que ya estoy un poco pasado de tiempo, pero voy a mostrar rápidamente una demostración rápida de una aplicación que funciona realmente, porque no pude mostrar eso antes. Así que en realidad tengo una aplicación de ejemplo que hice hace unos días, que es un cliente de matrix. Para aquellos de ustedes que quieren saber, es como una plataforma de chat, similar a Discord o lo que sea. Tengo otra ventana aquí que es mi cliente principal que uso yo mismo, y luego esta es la aplicación real, y puedo enviar un mensaje aquí, y esto se está ejecutando a través del dash dash HMR flag también, así que puedo modificar el código en un momento y mostrarte eso, pero si envío un mensaje, tomará un momento, y verás que recibo una notificación en la parte inferior, y actualmente tengo las notificaciones desactivadas durante la charla, pero tengo una notificación que llegó. Veamos si puedo mostrar esto aquí. Déjame intentar. ¿Qué pasa si desactivo eso y envío otro mensaje? Aparece en mi portátil. Me gustaría poder mostrarte eso, pero las notificaciones funcionan. MacOS no te permite establecer dónde aparecen las notificaciones, y en esta aplicación de demostración, también tenemos un menú personalizado, puedes iniciar una nueva sala, cosas así, o también tenemos este menú, así que si envío, de nuevo, una aplicación de prueba más, un mensaje de prueba, y voy aquí, tengo como este pequeño panel con eso, y puedo hacer lo que quiera. Es solo otra ventana del navegador. Sí, esto es Deno desktop, y, como noté, vamos a impulsar esto, y Deno es compatible con Node. Pasamos más del 75 por ciento de las pruebas de Node.js. No necesitas estar en el ecosistema de Deno para usar esto. Puedes usarlo desde tu aplicación actual de Node.js. Por favor, pruébalo. Gracias.

¿Puede Deno integrarse con el sistema de diseño nativo del SO, como botones, diálogos, campos de entrada, como macOS Liquid UI o Windows UI? Actualmente no, pero lo hemos estado discutiendo. Es un mundo diferente de dolor de implementar, y actualmente, nuestro sistema se basa en navegadores, y el único backend no es nada. Estamos considerando, de hecho, ya hay un proyecto que hace esto, que es NativeScript. Primero comencemos compitiendo con Electron. No quiero competir con múltiples proyectos al mismo tiempo. Eso es un gran lío. Pero tal vez en el futuro.

Bien, genial. Me encanta lo fluido que parece construir para navegadores, así que eso es genial. Siguiente pregunta de Jan. Según la salida de Deno Desktop, el tamaño del comando de la aplicación de escritorio Next.js vacía es alrededor de 395 megabytes. ¿Cuánto más pequeño es el paquete de producción, y es eso diferente de Electron en ese aspecto? Sí, así que el paquete es algo que todavía estamos optimizando. Ahora mismo, lo que viste, incluía todo el directorio de Node modules. Básicamente incluyendo todo lo que probablemente nunca tocarás. Tenemos un parche para eso listo, simplemente no es parte de allí todavía.

Podrás simplemente empaquetar, y luego usar eso. O quiero decir, también puedes simplemente ejecutar tu propio paso de empaquetado, y no usar la detección del framework, y simplemente llamar a Deno Desktop en tu directorio siempre que haya un servidor HTTP que esté ejecutándose en él, simplemente funcionará. Aunque también podríamos agregar, solo para un directorio estático, simplemente poder llamar a Deno Desktop en eso, y puedes simplemente usarlo. Muy genial. Así que próximamente. Sí. ¿Deno soporta barras de menú superiores y barras laterales nativas? Barras de menú superiores y barras laterales nativas. No estoy seguro de lo que eso implica. Si te refieres a las barras de menú superiores, como la barra de navegación superior que mostré durante la demostración? Quiero decir, sí.

Con barras laterales nativas, no estoy muy seguro de a qué te refieres con eso. Bien, bueno, podrás hablar con Leo después en la sección de masterclass. Así que ve con esa pregunta para él. Pero pasaré a otra. Leo, ¿qué limitaciones existen con el backend en bruto? ¿Son compatibles los workers, audio y otras características? Bien, actualmente no. Eso es algo que cambiará, porque básicamente estás en el lado de Deno. No tenemos un navegador. Así que Deno va a implementar estas APIs para el sistema de escritorio. No va a ser como una ejecución normal de Deno, como tener APIs de audio, eso está fuera del alcance para Deno en sí. Pero para el sistema de escritorio, tiene sentido. Así que actualmente, no. Las limitaciones son solo, sí, no tienes un navegador. Solo tienes una ventana nativa y lo que sea que las APIs de Deno proporcionen. Genial, bien.

Y alguien ha dicho, Leo, esto se ve increíble. ¿Cuándo podemos ejecutar las aplicaciones en Android slash OS X? De hecho, esto es algo que estamos considerando. Podemos realmente compilar esto para iOS y Android. Necesitamos experimentar más con esto. Pero es algo que estamos investigando y parece viable. Increíble. ¿Soporta las ventanas sin bordes? Sí, hay, como, el constructor de ventanas tiene muchas opciones. Puedes modificar la ventana, puedes hacerla sin bordes, puedes ocultar la barra superior y no hacerla sin bordes, pero aún tener los controles, ocultar los controles. Es como Electron relativamente similar en términos de lo que puedes cambiar. Tal vez algunas cosas aún falten, pero estamos expandiéndolo. Nuevamente, esto es experimental. Necesitamos que la gente lo pruebe. Muy genial.

Empieza a experimentar. ¿Cómo se compara la aplicación nativa con un PWA? No estoy muy seguro.

Oh, I see. Quiero decir, un PWA, por mucho que a la gente le gusten, nunca despegaron realmente. Quiero decir, los PWAs en el escritorio siento que no son tan comunes o populares. La mayoría de la gente los usa en iPhone, pero incluso entonces, la mayoría de la gente no usa un PWA al final del día. Bien. Interesante.

Y la aplicación, el comentario de alguien dice que la aplicación funciona y se lanzó. El título mostró mi aplicación. ¿Qué hay del soporte de keychain y para los usuarios que intentan migrar de Electron a Deno, migración de keychain? No estoy muy seguro de a qué te refieres con eso. Si te refieres, como, al keychain, como acceder al keychain del sistema, no tenemos una API para eso todavía, pero ese es uno de los próximos pasos que estamos agregando. Deno ya tiene esto bajo el capó. Así que esto es relativamente simple para nosotros de agregar. Bien, genial. Solo es cuestión de exponerlo. Increíble.

¿Y qué motor de renderizado está usando y qué características de CSS son compatibles? Bueno, el motor de renderizado depende de qué backend elijas. Así que si pones el backend de Chromium o Ceph, obtienes lo que sea que Chrome soporte. Si usas WebView, entonces buena suerte averiguando lo que puedes porque lo que sea que el sistema de tus usuarios esté ejecutando, eso es lo que vas a obtener. Así que si estás en Mac OS, entonces lo que sea que Safari soporte. Buena suerte. Gracias. Tengo una última pregunta.