El secreto principal para desarrollar buenas aplicaciones de electrones

Algunos odian ferozmente las aplicaciones Electron . Que la aplicación incluya el navegador Chromium parece, por decirlo suavemente, extraño. Este sentimiento se mejora durante el trabajo con tales aplicaciones. Consumen mucha memoria, se cargan lentamente y no tienen una velocidad de reacción particularmente alta a las interacciones del usuario. No es fácil desarrollar una buena aplicación web. ¿Por qué las tecnologías web son arrastradas al entorno de escritorio? Después de todo, ¿existe la sensación de que en este entorno crean muchos problemas?

El autor del material, cuya traducción publicamos hoy, dice que no desempeñará el papel de defensor de Electron, aunque todo habla del éxito de esta plataforma. Es cierto que nadie va a descontar los excesos inherentes a las aplicaciones Electron. ¿Es posible, mientras se desarrollan tales aplicaciones, matar dos pájaros de un tiro de un tiro?


Algunos de los problemas de Electron (archivos de gran tamaño, carga lenta) son un legado de las tecnologías en las que se basa esta plataforma. Deben abordarse a un nivel bajo. Los problemas más graves (consumo de memoria, lentitud de las interfaces) se pueden resolver al nivel en el que se desarrollan las aplicaciones electrónicas. Sin embargo, resolver estos problemas no es fácil. ¿Qué pasa si hay un secreto, sabiendo que puede, en modo automático, minimizar estas deficiencias?

Si desea leer el código del programa, puede buscar inmediatamente en este repositorio. Aquí está el proyecto que se considerará en este material.

La esencia del secreto

El secreto para desarrollar aplicaciones Electron de alta calidad es realizar la mayor parte de los cálculos en el sistema local, en los procesos en segundo plano. Cuanto menos confíe en los servicios en la nube y más trabajo dedique a los procesos en segundo plano, más podrá experimentar los siguientes efectos positivos:

• Carga de datos instantánea. Los usuarios de la aplicación nunca tendrán que esperar a que los datos se descarguen a través de la red. Los datos se descargan del almacenamiento local. Esto le da inmediatamente a la aplicación un aumento tangible del rendimiento.
• Bajos requisitos de almacenamiento en caché. La aplicación cliente no necesita preocuparse especialmente por el almacenamiento en caché. Esto se debe a que todos los datos que necesita están disponibles localmente. Para que una aplicación web alcance un nivel de rendimiento decente, generalmente necesita cargar una cantidad impresionante de datos en su estado local. Esta es una de las razones del consumo de memoria muy alto de las aplicaciones Electron.

Aquí no estoy hablando de otras ventajas del almacenamiento local de datos, por ejemplo, sobre la posibilidad de trabajar sin conectarse a una red.

Eche un vistazo a la cantidad de memoria que consume mi aplicación Electron: el gerente de finanzas personales de Actual . Este programa almacena todos sus datos localmente. La sincronización de datos entre diferentes dispositivos es una característica opcional, no afecta la funcionalidad principal. Supongo que, dado que esta aplicación está diseñada para trabajar con grandes cantidades de datos, sus cifras de consumo de memoria hablan por sí mismas.


Consumo de memoria real

Una aplicación que no realiza ninguna acción activa ocupa un total de 239,1 MB de memoria. Este indicador puede ser más, depende de lo que esté sucediendo exactamente en la aplicación, pero es posible tomar el número especificado como base. Esto no es perfecto, pero no tan malo. Al menos, mejor que los 1371 MB de memoria que se requieren en mi computadora Slack. Debo decir que Slack es un ejemplo atípico de una aplicación Electron, caracterizada por problemas específicos. Hubo cierta sensación alrededor de Electron debido a Slack. Otras aplicaciones, como Notion o Airtable, consumen aproximadamente 400-600 MB de memoria. Y esto significa que mi aplicación gana bien en este sentido y lo han hecho.

Debo decir que obtuve la cifra de 239.1 MB antes de cualquier optimización. Planeo reescribir algunas de las partes extremadamente importantes e intensivas en memoria de la aplicación en Rust. Esto debería reducir significativamente los requisitos de memoria de la aplicación.

El servidor en segundo plano puede optimizar su propio consumo de memoria cargando en la memoria solo los datos que se necesitan en un momento determinado. Es mejor usar algo como SQLite para el almacenamiento de datos. Este DBMS ya está muy optimizado para resolver tales problemas (en serio, solo use SQLite). Además, debe tenerse en cuenta que mover varios cálculos a procesos en segundo plano permite que la interfaz de usuario de la aplicación responda a las influencias del usuario lo más rápido posible.

Resultó que el uso de un servidor en segundo plano en una aplicación Electron le brinda al desarrollador interesantes oportunidades. En la siguiente sección, hablaremos sobre todas esas cosas increíbles que se pueden hacer con su uso.

Incluso si su aplicación está seriamente vinculada a los datos en la nube, es posible que necesite un proceso en segundo plano si tiene la intención de trabajar con la API Node.js. La interacción con estas API solo es posible desde procesos en segundo plano. De hecho, cualquiera que sea su aplicación Electron, creo que conocer el proyecto que vamos a examinar ahora puede darle algunas ideas útiles.

Aplicación de ejemplo Electron-with-server

Creé la aplicación electron-with-server-example para mostrar todo lo que necesita ser configurado para desarrollar aplicaciones Electron verdaderamente locales usando su ejemplo. Hice esto en un esfuerzo por cautivar a los programadores creando proyectos similares. Me gustaría conocer un proyecto similar en un momento en que recién comenzaba a trabajar con Electron.

La información técnica sobre la aplicación se puede encontrar en el README . Aquí hay una descripción general del proyecto:

• Crea el proceso habitual de Node.js, que se utiliza para ejecutar el código del servidor en segundo plano.
• En él, usando node-ipc , se crea un canal IPC, que está diseñado para organizar la interacción directa entre el backend y la interfaz de usuario de la aplicación.
• Si el proyecto se inicia en modo de desarrollo, el servidor no se inicia como un proceso en segundo plano. Puede interactuar con él a través de una ventana de navegador separada. Esto es para fines de depuración.

Ahora reduzcamos la velocidad un poco y echemos un vistazo más de cerca al último elemento de esta lista. En el modo de desarrollo, ¿puede interactuar con el servidor a través de una ventana de navegador separada?


Cliente y servidor de la aplicación.

Si lo es. Después de aprender a iniciar procesos en segundo plano, me di cuenta, en primer lugar, de que tenía a mi disposición las herramientas del desarrollador de Chromium. Y en segundo lugar, me di cuenta de que, para fines de depuración, puedo usarlos para depurar el código Node.js. Como resultado, estoy hablando del hecho de que puedes interactuar con Node.js a través de un navegador. Esto le permite utilizar el rico kit de herramientas para desarrolladores de navegadores basado en Chromium para depurar el código del servidor.

Ahora veamos todas las cosas interesantes que podemos hacer gracias a la aplicación del esquema de inicio de la aplicación anterior.

Usando la consola

server-ipc.js comandos para registrar solicitudes y respuestas al archivo server-ipc.js . Puedo explorarlos usando la consola del navegador.


Depuración de aplicaciones Node.js en la consola del navegador

Ejecución paso a paso del código

Al depurar el lado del servidor de la aplicación usando un navegador, puede usar la ejecución de código paso a paso. Esto no quiere decir que sea algo absolutamente fantástico. Pero es muy conveniente que esta función esté siempre a mano y no requiera el uso de programas adicionales.


Ejecución paso a paso del código

Perfilado

Quizás esta sea mi herramienta favorita. Esta es una herramienta estándar brillante para investigar el rendimiento del código, que le permite perfilar el lado del servidor de la aplicación.


Investigación del rendimiento del código del servidor

Usando las herramientas del desarrollador del navegador, incluso puede explorar lo que sucede cuando se inicia el proceso en segundo plano (esta es probablemente la parte más difícil de iniciar la aplicación).

Para hacer esto, simplemente inicie el proceso de grabación de indicadores y vuelva a cargar la ventana. El reinicio hará que el servidor se reinicie. Esto nos lleva al siguiente paso.

Reiniciar el servidor usando la combinación de teclas Cmd + R o Ctrl + R

Otra de las opciones para depurar el código del servidor en un navegador es que, dado que la depuración del servidor se realiza en una ventana del navegador, ¡simplemente recargar el contenido de la ventana hace que el servidor se reinicie! Es suficiente usar la combinación de teclas Cmd+R (o, para Windows, Ctrl+R ), y están a su disposición los últimos cambios realizados en el código del servidor. En este caso, se guardan los datos del front-end. Esto significa que puede continuar trabajando con la parte del cliente de la aplicación, pero, después de reiniciar el servidor, la parte del cliente ya funcionará con la nueva versión del código del servidor. Esto recuerda algo así como un intercambio de código "activo" en un servidor en ejecución.

La siguiente figura muestra cómo, cambiando el código del servidor, volví a cargar la página presionando Cmd+R Después de eso, continué trabajando con el cliente, que ahora está interactuando con la nueva versión del servidor.


Reinicio del servidor

Investigar el lado del servidor en ejecución de la aplicación y el código de intercambio en caliente

Por lo general, al depurar el servidor, simplemente agrego el comando console.log() a los lugares correctos en el código y lo reinicio. Pero a veces, en casos especialmente difíciles, sucede que sería extremadamente útil observar lo que está sucediendo en un servidor en ejecución, en lugar de reiniciarlo. Es posible que no solo "mire" dentro del servidor, sino que también cambie algo en él para ver cómo esto afectará el problema.

En la consola, puede usar el comando Node.js require . Esto significa que con su ayuda puede conectar cualquier módulo de servidor y trabajar con ellos en la consola.

Supongamos que necesitamos trabajar con el server-handler.js . Para hacer esto, simplemente ejecute el comando let handlers = require('./server-handlers') en la consola.

Creemos un sistema para almacenar el estado del servidor. En nuestro caso, esta será una lista de todos los datos pasados ​​a la función make-factorial (el estado del servidor de la aplicación real será mucho más complicado):

 handlers._history = [] handlers['make-factorial'] = async ({ num }) => {  handlers._history.push(num) } 

Puede handlers._history estado del servidor desde la consola conectando el módulo apropiado y mirando handlers._history . Si lo desea, durante la ejecución del programa, ¡incluso podemos reemplazar por completo la implementación de make-factorial !


Investigación del estado del servidor

Resumen

Eche un vistazo al repositorio de ejemplos de electrones con servidor para leer sobre los detalles de la implementación del proyecto y ver el código del lado del servidor de la aplicación Electron.

Si usa Visual Studio Code, puede estar acostumbrado a una integración de alta calidad de herramientas de desarrollador con el servidor Node.js. Con este enfoque, puede iniciar el servidor usted mismo, por separado de la aplicación Electron. Después de eso, puede decirle a Electron que necesita conectarse al proceso propiedad de VS Code. Sin embargo, prefiero usar las herramientas de desarrollo de Electron existentes.

Esto significa que el programador tiene la oportunidad de usar herramientas de edición de código de terceros y al mismo tiempo tener acceso completo a todas las herramientas de desarrollo del navegador.

En los últimos años, he estado desarrollando la aplicación Actual y uso constantemente lo que acabo de hablar. Y quiero decir que realmente me gusta todo esto. Quizás el trabajo en la parte de Node.js de esta aplicación se haya convertido en la fuente de la experiencia de programación más agradable que jamás haya experimentado.

Además, es muy importante que los principios descritos anteriormente nos ayuden a desarrollar aplicaciones verdaderamente locales. Ya tenemos todas las tecnologías necesarias para esto. Lo principal es usarlos correctamente.

Estimados lectores! ¿Cómo te sientes acerca de las aplicaciones basadas en Electron?