Saltar al contenido principal

Novedades en Electron 0.37

· 5 lectura mínima
zeke
zeke

Electron 0.37 fue publicado recientemente e incluye una gran actualización de Chrome 47 a Chrome 49, además de algunas nuevas APIs principales. Este último lanzamiento proporciona todas las nuevas características incluidas en Chrome 48 y Chrome 49. Esto incluye las propiedades personalizadas de CSS, soporte incrementado de ES6, mejoras en KeyboardEvent, mejoras en Promise y otras nuevas características disponibles en tu aplicación de Electron.

What's New​

Propiedades personalizadas de CSS​

Si anteriormente has utilizado lenguajes procesados previamente como Sass y Less, es probablemente que estés familiarizado con las variables, que te permiten definir valores reutilizables en cosas como esquemas de color y diseños. Las variables ayudan a mantener las hojas de estilo SECAS y más fáciles de mantener.

Las propiedades personalizadas de CSS son similares a las variables previamente procesadas en el sentido de que son reutilizables, pero también tienen una cualidad única que las hace más poderosas y flexibles: estas pueden ser manipuladas con JavaScript. Esta sutil pero poderosa característica permite realizar cambios dinámicos a las interfaces visuales, mientras estas se benefician de la aceleración por hardware de CSS y la reducción de código duplicado entre el código de la interfaz y las hojas de estilo.

Para más información sobre las propiedades personalizadas de CSS, lea el artículo de MDN y la demostración de Google Chrome.

Variables de CSS en acción​

Veamos un ejemplo de variable simple que puede modificarse sobre la marcha en tu app.

:root {
  --awesome-color: #a5ecfa;
}

body {
  background-color: var(--awesome-color);
}

El valor de la variable puede ser recuperado y modificado directamente en JavaScript:

// Obtener el valor de la variable ' #A5ECFA'
let color = window
  .getComputedStyle(document.body)
  .getPropertyValue('--awesome-color');

// Establece el valor de la variable a 'orange'
document.body.style.setProperty('--awesome-color', 'orange');

Los valores de las variables también pueden ser editadas desde la sección de Estilos en las herramientas de desarrollo para una retroalimentación y cambios rápidos:

Propiedades CSS en la pestaña Estilos

Propiedad KeyboardEvent.code​

Chrome 48 añadió la nueva propiedad code, disponible en los eventos KeyboardEvent, que representará la tecla física presionada, independientemente de la distribución del teclado del sistema operativo.

Esto debería hacer que la implementación de atajos de teclado personalizados en tu aplicación Electron sea más precisa y consistente en diferentes máquinas y configuraciones.

window.addEventListener('keydown', function (event) {
  console.log(`Has pulsado ${event.code}.`);
});

Consulta este ejemplo para verlo en acción.

Eventos de rechazo de promesas (Promise Rejection Events)​

Chrome 49 añadió dos nuevos eventos a window que te permiten ser notificado cuando no se controla una promesa rechazada.

window.addEventListener('unhandledrejection', function (event) {
  console.log('Promesa rechazada sin controlar', event.promise, event.reason);
});

window.addEventListener('rejectionhandled', function (event) {
  console.log('Promesa rechazada controlada', event.promise, event.reason);
});

Consulta este ejemplo para verlo en acción.

Actualizaciones de ES2015 en V8​

La versión de V8 incorpora a Electron un 91% de ES2015. Aquí tienes algunas adiciones interesantes que puedes usar directamente, sin flags ni precompiladores:

Parámetros por defecto​

function multiply(x, y = 1) {
  return x * y;
}

multiply(5); // 5

Asignación de desestructuración​

Chrome 49 añadió asignación por desestructuración para facilitar la asignación de variables y parámetros de funciones.

Esto hace que las asignaciones de Electron sean más limpias y compactas ahora:

Para importar el Browser​
const { app, BrowserWindow, Menu } = require('electron');
Para importar el Renderizador​
const { dialog, Tray } = require('electron').remote;
Otros ejemplos​
// Destructuring an array and skipping the second element
const [first, , last] = findAll();

// Destructuring function parameters
function whois({ displayName: displayName, fullName: { firstName: name } }) {
  console.log(`${displayName} is ${name}`);
}

let user = {
  displayName: 'jdoe',
  fullName: {
    firstName: 'John',
    lastName: 'Doe',
  },
};
whois(user); // "jdoe is John"

// Destructuring an object
let { name, avatar } = getUser();

Nuevas APIs de Electron​

A continuación, se muestran algunas de las nuevas APIs de Electron. Puedes ver cada nueva API en las notas de la versión de las versiones de Electron.

Eventos show y hide en BrowserWindow​

Estos eventos se disparan cuando la ventana (window) se muestra o se oculta.

const { BrowserWindow } = require('electron');

let window = new BrowserWindow({ width: 500, height: 500 });
window.on('show', function () {
  console.log('Window was shown');
});
window.on('hide', function () {
  console.log('Window was hidden');
});

platform-theme-changed en app para OS X​

Este evento se dispara cuando el Modo Oscuro del sistema cambie.

const { app } = require('electron');

app.on('platform-theme-changed', function () {
  console.log(`Ha cambiado el tema. ¿En modo oscuro? ${app.isDarkMode()}`);
});

app.isDarkMode() para OS X​

Este método devuelve true si el sistema está en Modo Oscuro y false en caso contrario.

Eventos scroll-touch-begin y scroll-touch-end en BrowserWindow para OS X​

Esos eventos se disparan cuando empieza o termina un evento de la rueda de scroll.

const { BrowserWindow } = require('electron');

let window = new BrowserWindow({ width: 500, height: 500 });
window.on('scroll-touch-begin', function () {
  console.log('Inicio de scroll táctil');
});
window.on('scroll-touch-end', function () {
  console.log('Fin de scroll táctil');
});