Conceptos básicos para crear una aplicación de escritorio multiplataforma con electrón

Cuando las computadoras se hicieron populares por primera vez y comenzaron a funcionar con facilidad en los lugares de trabajo y en los hogares, fueron las aplicaciones de escritorio las que llamaron la atención. Sin embargo, con el advenimiento de Internet y el auge del comercio en línea, las cosas cambiaron drásticamente y las aplicaciones web se hicieron más prominentes. Se predijo un futuro sombrío para las aplicaciones de software, y si bien la popularidad de las aplicaciones de escritorio se descartó, nunca desapareció por completo. Hubo algunas diferencias fundamentales entre los dos que hicieron evidente que no se puede simplemente lanzar el desarrollo de aplicaciones de software en el contenedor.

Aplicaciones basadas en escritorio

Una aplicación basada en escritorio es un software instalado en una sola computadora que realizará funciones y tareas específicas para las cuales fue diseñado. Sin embargo, el mismo dispositivo puede acomodar a múltiples usuarios con la ayuda de redes. Ejemplos serían reproductores multimedia, procesadores de texto, etc.

Aplicaciones basadas en web

Como su nombre indica, las aplicaciones basadas en la web son aquellas aplicaciones que funcionan con la ayuda de internet. Pueden ejecutarse en múltiples dispositivos independientemente de la red local, especialmente si la codificación se hace así. Estas se llaman aplicaciones web multiplataforma. Estas aplicaciones generalmente se crean en el servidor del cliente y usan un navegador web como interfaz del cliente. El concepto de codificación una vez y que se ejecute en múltiples dispositivos ayuda a los desarrolladores a desarrollar nuevas aplicaciones rápidamente para los clientes.

Aquí es donde la diferencia entre las dos mentiras. No puede desarrollar una aplicación de escritorio que funcione para sistemas operativos múltiples con un presupuesto simple.

Los lenguajes modernos como Javascript y Python demostraron ser útiles porque te permiten crear aplicaciones para los tres sistemas operativos principales. Sin embargo, tampoco fue fácil porque el principal desafío al que se enfrentaron los desarrolladores web fue aprender idiomas y sus API por separado para desarrollar las aplicaciones.

Esto fue cuando los desarrolladores comenzaron a pensar en desarrollar una aplicación de escritorio que funcionara igual de bien en varios SO, y el desarrollo web multiplataforma comenzó a ganar importancia. Pero para hacer eso necesitan algo que los ayude a construir aplicaciones que funcionen en varios escritorios.

Es en esta coyuntura que Electron entró en existencia, y luego prominencia. Electron permite a los desarrolladores hacer el mejor uso de su conjunto de habilidades y crear aplicaciones de escritorio altamente funcionales. Electron es el marco que se usa para crear el código abierto, el editor de código fuente: Visual Studio Code y una aplicación de herramientas y servicios de colaboración en equipo basada en la nube: Slack.

¿Por qué las aplicaciones de escritorio?

No es posible reemplazar las aplicaciones de escritorio porque son realmente necesarias cuando desea que sus aplicaciones cumplan con ciertos criterios. Veamos algunos de ellos:

1. Seguridad de los datos: a diferencia de las aplicaciones web, todos los datos se almacenan en el sistema informático del usuario, por lo que no hay que preocuparse de que sean pirateados. El usuario tiene control total sobre las aplicaciones independientes y, por lo tanto, permite la protección contra diversas vulnerabilidades. Las aplicaciones web están abiertas a una gran comunidad de usuarios conectados a través de Internet, y esto amplía la amenaza.

2. Controles disponibles: en comparación con los proyectos basados ??en navegador, las aplicaciones de escritorio incluyen varios controles interactivos. Estos controles interactivos incluyen Visual Studio para Windows y controles de terceros para desarrolladores de aplicaciones de escritorio. Los controles también le permiten acceder al hardware subyacente y a los componentes del sistema operativo. Además, también hay controles de teclado que vienen con una capa adicional de capacidades interactivas, incluido el uso de las teclas de flecha en el teclado.

3. Flexibilidad: para escribir aplicaciones de escritorio, los desarrolladores pueden usar el hardware de la computadora del usuario, como puertos serie, cámara, puertos de red, escáneres y Wi-Fi.

4. Rendimiento: las aplicaciones de escritorio son considerablemente más rápidas y más receptivas en comparación con las aplicaciones web. Esto se debe a que las aplicaciones web llevan inherentemente la sobrecarga que se ve con un servidor web de propósito general. Por otro lado, una aplicación de escritorio, si está diseñada correctamente, solo cargará lo que se necesita. Por lo tanto, ocupan menos memoria y menos recursos, lo que mejora el rendimiento y aumenta la eficacia de la aplicación.

Desarrollar una aplicación multiplataforma tiene sentido porque ahorra tiempo. Todos los desarrolladores deben hacer una vez el código y la aplicación se ejecutará en todas las plataformas principales. Esto es también lo que hace que el electrón sea único. Permite a las personas desarrollar aplicaciones de forma un poco diferente en comparación con los lenguajes de programación tradicionales. Esta es también la razón por la cual las aplicaciones que usan Electron utilizan los tres componentes principales, los lenguajes generalmente usados ??para scripting que son HTML, JS y CSS. Esto permite una mayor productividad, menos TTM (time to market) y una aplicación de alta calidad que funciona notablemente bien en dispositivos iOS, Android, Linux y Windows.

Los frameworks multiplataforma han recibido gran publicidad a lo largo de los años porque tienen algunas ventajas realmente notables sobre los frameworks nativos. Algunos de ellos son:

Código reutilizable : mantener e implementar códigos hace que el desarrollo de aplicaciones móviles multiplataforma sea una tarea fácil porque evita por completo las tareas repetitivas. No es necesario escribir una nueva pieza de código para cada acción mientras se desarrollan aplicaciones para todas las plataformas principales.

Tiempo de comercialización más rápido : aprovechar la base de código unificada facilita a las empresas crear aplicaciones más rápidamente y enviarlas a tiempo. Los plazos se cumplen con precisión.

Implementación sencilla : los marcos multiplataforma incluyen una gran cantidad de módulos y extensiones que facilitan la implementación y el mantenimiento de códigos para que las aplicaciones se ejecuten en las principales plataformas. Cada vez que realice una actualización de la aplicación, se actualizará fácilmente en todas las aplicaciones que funcionan en varios dispositivos y plataformas.

Experiencia de usuario uniforme : los desarrolladores toman grandes precauciones para brindar una Experiencia de usuario (UX) impecable. Esto se hace a través de una única base de código, e incluso del aspecto general, la sensación y la coherencia de la aplicación en múltiples plataformas.

Rentabilidad : al aprovechar una única base de código, los desarrolladores pueden crear aplicaciones móviles multiplataforma, lo que facilita a las empresas el manejo de proyectos dentro de un presupuesto .

Fuera de muchos frameworks multiplataforma, Electron es uno de los mejores porque puede construir una aplicación de escritorio con tecnologías web como CSS, HTML y Javascript.

¿Qué es exactamente el electrón y cómo funciona?

Electron fue conocido como Atom cuando Cheng Zhao lo creó el 15 de julio de 2013. Ahora está desarrollado por GitHub y pretende ser un framework de código abierto escrito en C ++, Javascript, Objective-C y Python. Inicialmente, el marco fue diseñado para su uso por Atom, un editor de texto multiplataforma con todas las funciones, así es como nació el nombre "Electron". Puede hacer que el desarrollo multiplataforma sea muy fácil.

El marco utiliza componentes de front-end y back-end desarrollados para aplicaciones web para desarrollar las aplicaciones de GUI de escritorio. Para los requisitos del front-end, se utiliza Chromium, mientras que Node.js es para el back-end. Electron hace esto combinando Node.js y Chromium en un único tiempo de ejecución y paquetes de aplicaciones multiplataforma.

La estructura de una aplicación electrónica

La más simple de las aplicaciones de Electron viene con tres archivos principales. Son:

package.json (metadata, archivo npm): este es el archivo más importante en una aplicación Electron. Está integrado con información sobre el paquete como nombre, versión, etc.

main.js : este es el código

index.html (GUI): se trata de la interfaz gráfica de usuario

Cómo funciona la aplicación de electrón

Se ejecutará el archivo principal definido en el archivo package.json. El archivo main.js crea una ventana de aplicación o una instancia de ventana del navegador para ejecutar páginas web. Esto será lo suficientemente potente como para interactuar con la interfaz gráfica de usuario nativa del sistema operativo.

Para ejecutar la aplicación Electron, necesitarás tener instalado npm. Como npm se distribuye junto con Code.js, automáticamente obtiene npm instalado en su computadora cuando descarga Node.js.

Electron es el marco principal detrás de los dos principales editores de código fuente de código abierto: el código Visual Studio de Microsoft y Atom de GitHub. El archivo ejecutable de Electron (electron.exe en Windows, electron.app en OS X y electron en Linux) proporciona el marco. El archivo ejecutable de Electron se puede editar fácilmente de acuerdo con los requisitos del desarrollador (por ejemplo: agregar marcas, iconos personalizados, etc.)

La página web ejecuta sus propios procesos conocidos como el proceso Renderer. Las instancias de la ventana del navegador ejecutan las páginas web a través de su propio proceso de renderizado. Por lo tanto, cuando se destruye la instancia de la ventana del navegador, también se destruirá el proceso del procesador asociado.

Para comprender el proceso de electrones, echemos un vistazo a una aplicación de muestra.

Hay dos tipos principales de procesos electrónicos. Son:

El proceso principal : este es el punto de entrada de la aplicación. Este es el archivo que se ejecutará una vez que ejecute la aplicación.

El proceso de Renderer – Este es el controlador para una ventana dada en la aplicación. Cada ventana tiene su propio proceso Renderer.

Para asegurarse de que el código sea claro, cada proceso de Renderer necesita un archivo separado. Para definir el Proceso principal de la aplicación, abra src / app.js e incluya el módulo de la aplicación para iniciar la aplicación, y el módulo de la ventana del navegador para crear las distintas ventanas de la aplicación (ambas partes del núcleo de Electron), como tal:

var app = require ('app'),
BrowserWindow = require ('ventana del navegador');

Una vez que se inicia la aplicación, se activa un evento listo, al que se puede vincular. Crea una instancia de la ventana principal de la aplicación de esta manera:

var mainWindow = null;
app.on ('listo', función () {
mainWindow = new BrowserWindow ({
ancho: 1024,
altura: 768
});
mainWindow.loadUrl ('file: //' + __dirname + '/windows/main/main.html');
mainWindow.openDevTools ();
});

De un vistazo:

Crea una nueva ventana con una nueva instancia de objeto BrowserWindow .

Puede definir las diversas configuraciones del objeto y cambiar su configuración predeterminada tomando cada objeto como un único argumento.

Puede cargar el contenido de un archivo HTML local o remoto a través del método loadUrl () .

La depuración es posible a través del método de opción openDevTools () , donde puede abrir una instancia de las herramientas de desarrollo de Chrome.

Como paso siguiente, debes organizar el código. Una forma ideal de hacerlo sería creando una carpeta de windows / en nuestra carpeta src / y creando una subcarpeta después.

my-app
| – src /
| – ventanas /
| – – principal/
| – – main.controller.js
| – – main.html
| – – main.view.js

La lógica del lado del servidor de la aplicación está en main.controller.js , mientras que la lógica del lado del cliente de la aplicación sería en main.view.js.

El archivo main.html es una página web HTML5 y será así:

<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> Password Keychain </ title>
</ head>
<cuerpo>
<h1> Llavero de contraseña </ h1>
</ body>
</ html>

La aplicación estará lista ahora. Escriba esto en la raíz de la carpeta src:

$ electron

Este proceso puede automatizarse definiendo el script de inicio del archivo package.son.

Créditos: Toptal

¿Por qué debería usarlo?

Los desarrolladores de código abierto, las startups y las empresas establecidas han comenzado a usar Electron para crear aplicaciones de escritorio. Han utilizado el marco electrónico para crear lo siguiente:

  • Aplicación Slack Desktop
  • Aplicación de escritorio de WordPress
  • Código de Visual Studio

Electron se ha convertido en un marco popular para crear aplicaciones de escritorio multiplataforma porque ofrece muchos beneficios, como:

Libertad para usar funciones de vanguardia respaldadas por Node.Js y Chromium : uno de los mayores beneficios de Electron es que siempre viene con las últimas versiones de Node.js y Chromium, lo que les brinda a los desarrolladores la libertad de usar funciones de plataforma de vanguardia respaldadas por ambos. . Electron viene con la versión estable de Chromium que siempre está a 2 semanas de la próxima versión.

Aprovechando sus conjuntos de habilidades existentes : Y la otra ventaja es que el mismo conjunto de habilidades que tiene para desarrollar aplicaciones web será suficiente para desarrollar aplicaciones de escritorio. Este es un gran factor para ahorrar dinero y tiempo. Si su conocimiento de HTML, Javascript y CSS es sólido, eso es todo lo que necesita. No hay necesidad de invertir en aprender un nuevo lenguaje de programación.

Electron tiene acceso a las API del sistema operativo : Electron viene con una serie de API que le permiten acceder a varias características del sistema operativo como las que se mencionan a continuación:

  • Los desarrolladores pueden agregar menús a la ventana de la aplicación
  • Pueden agregar menús contextuales a la aplicación
  • Haga uso del sistema de notificaciones del sistema operativo para enviar notificaciones a los usuarios
  • Menú de muelle personalizado y tareas de usuario
  • Incluir barra de progreso en la barra de tareas
  • Actualiza la lista de elementos recientes

Acceso directo a las API de Node.js y los módulos de NPM : el marco ofrece acceso directo a la API Node.js, módulos NPI de las páginas web dentro de la aplicación. Y la diferencia con las aplicaciones web aquí es que todo el tiempo de ejecución de Node.js está disponible dentro de la aplicación de escritorio. Los desarrolladores pueden usar fácilmente nódulos personalizados y los módulos nativos compilados Node.js escritos en C o C ++.

¿Quién ha usado Electron para su desarrollo de aplicaciones?

Algunas de las principales compañías en el mundo usan Electron. Eche un vistazo a algunas de las aplicaciones increíbles construidas con el marco:

Editor de GitHub Atom:

Crédito: Wikipedia

Escrito en Javascript, y construido en el marco de Electron, Atom es un editor de código abierto y multiplataforma gratuito, hackable y de código abierto del siglo XXI. Es altamente personalizable a nivel de aplicación y posee funcionalidad ampliable a través de temas, paquetes, etc. Estas extensiones mejoran la funcionalidad central de Atom.

Los desarrolladores crean fragmentos de código para que no tengan que perder tiempo en fragmentos repetidos de código. Además, el editor incluye varias funciones listas para usar, como edición multiplataforma, administrador de paquetes integrado, autocompletado inteligente, buscador de sistema de archivos, paneles múltiples, y búsqueda y reemplazo para todo tipo de proyectos. Puede crear un entorno de aplicaciones tal como lo desea.

Código de Microsoft Visual Studio:

Crédito: Wikipedia

MS Code es un editor de código fuente multiplataforma desarrollado por Microsoft. Es compatible con la depuración, el control integrado de Git, el resaltado de sintaxis, la finalización inteligente de código, los fragmentos y la refactorización de código. El código fuente brinda flexibilidad a los usuarios para personalizar el tema, las preferencias y los atajos de teclado. Visual Studio Code se combina con JavaScript y Node.js para crear aplicaciones que tengan la velocidad y flexibilidad de las aplicaciones nativas.

Flojo:

Créditos: Slack

Slack no necesita mucha presentación. Tiene algunas de las herramientas y servicios de colaboración en equipo más populares basados ??en la nube. Viene con una plétora de características que son casi similares a IRC (Internet Relay Chat). Otros beneficios incluyen salas de chat organizadas por tema (canales), grupos privados y mensajes directos. Slack puede integrar servicios de terceros e integraciones integradas por la comunidad en su redil.

Además de estas aplicaciones, hay una serie de otras aplicaciones desarrolladas con Electron framework. La lista completa está disponible en la comunidad Awesome Electron en GitHub .

Conclusión

Se debe tener especial cuidado al escribir el código para las aplicaciones de escritorio, ya que estos códigos deberán ejecutarse de la manera en que deberían estar en la computadora del cliente. Y los usuarios podrían estar usando una amplia gama de navegadores, desde el viejo Internet Explorer hasta las versiones más modernas de Safari.

En resumen, Electron es un marco impresionante que permite a los desarrolladores crear aplicaciones de escritorio complejas fácilmente, y eliminando las partes más difíciles del código. Los desarrolladores ahora pueden enfocarse en construir una aplicación exitosa en lugar de preocuparse por los aspectos de codificación y programación que consumen mucho tiempo.

¿Interesado en el desarrollo de aplicaciones de escritorio multiplataforma usando Electron? Estamos felices de ayudar.

¡Póngase en contacto con nosotros hoy!

Publicado originalmente en el Blog de Cabot Solutions el 16 de noviembre de 2017