Saltar al contenido principal

43 publicaciones etiquetados con "lanzamiento"

Ver todas las categorías

Novedades en Electron 0.37

· 5 lectura mínima

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');
});

API Changes Coming in Electron 1.0

· 4 lectura mínima

Since the beginning of Electron, starting way back when it used to be called Atom-Shell, we have been experimenting with providing a nice cross-platform JavaScript API for Chromium's content module and native GUI components. The APIs started very organically, and over time we have made several changes to improve the initial designs.


Now with Electron gearing up for a 1.0 release, we'd like to take the opportunity for change by addressing the last niggling API details. The changes described below are included in 0.35.x, with the old APIs reporting deprecation warnings so you can get up to date for the future 1.0 release. An Electron 1.0 won't be out for a few months so you have some time before these changes become breaking.

Deprecation warnings

By default, warnings will show if you are using deprecated APIs. To turn them off you can set process.noDeprecation to true. To track the sources of deprecated API usages, you can set process.throwDeprecation to true to throw exceptions instead of printing warnings, or set process.traceDeprecation to true to print the traces of the deprecations.

New way of using built-in modules

Los módulos integrados ahora se agrupan en un solo módulo, en lugar de separarse en módulos independientes, así que puedes usarlos sin conflictos con otros módulos:

var app = require('electron').app;
var BrowserWindow = require('electron').BrowserWindow;

The old way of require('app') is still supported for backward compatibility, but you can also turn if off:

require('electron').hideInternalModules();
require('app'); // throws error.

An easier way to use the remote module

Because of the way using built-in modules has changed, we have made it easier to use main-process-side modules in renderer process. You can now just access remote's attributes to use them:

// New way.
var app = require('electron').remote.app;
var BrowserWindow = require('electron').remote.BrowserWindow;

Instead of using a long require chain:

// Old way.
var app = require('electron').remote.require('app');
var BrowserWindow = require('electron').remote.require('BrowserWindow');

Splitting the ipc module

The ipc module existed on both the main process and renderer process and the API was different on each side, which is quite confusing for new users. We have renamed the module to ipcMain in the main process, and ipcRenderer in the renderer process to avoid confusion:

// In main process.
var ipcMain = require('electron').ipcMain;
// In renderer process.
var ipcRenderer = require('electron').ipcRenderer;

And for the ipcRenderer module, an extra event object has been added when receiving messages, to match how messages are handled in ipcMain modules:

ipcRenderer.on('message', function (event) {
console.log(event);
});

Standardizing BrowserWindow options

The BrowserWindow options had different styles based on the options of other APIs, and were a bit hard to use in JavaScript because of the - in the names. They are now standardized to the traditional JavaScript names:

new BrowserWindow({ minWidth: 800, minHeight: 600 });

Following DOM's conventions for API names

The API names in Electron used to prefer camelCase for all API names, like Url to URL, but the DOM has its own conventions, and they prefer URL to Url, while using Id instead of ID. We have done the following API renames to match the DOM's styles:

  • Url is renamed to URL
  • Csp is renamed to CSP

You will notice lots of deprecations when using Electron v0.35.0 for your app because of these changes. An easy way to fix them is to replace all instances of Url with URL.

Changes to Tray's event names

The style of Tray event names was a bit different from other modules so a rename has been done to make it match the others.

  • clicked is renamed to click
  • double-clicked is renamed to double-click
  • right-clicked is renamed to right-click

Novedades en Electrón

· 2 lectura mínima

Ha habido algunas actualizaciones interesantes y charlas dadas recientemente en Electron, aquí hay un resumen.


Origen

Electron está actualizado con Chrome 45 a partir v0.32.0. Otras actualizaciones incluyen...

Mejor Documentación

nuevos documentos

Hemos reestructurado y estandarizado la documentación para que luzca y se lea mejor. Además hay traducciones de la documentación aportadas por la comunidad, como el japonés y el coreano.

Pull requests relacionados: electron/electron#2028, electron/electron#2533, electron/electron#2557, electron/electron#2709, electron/electron#2725, electron/electron#2698, electron/electron#2649.

Node.js 4.1.0

Desde v0.33.0 Electron viene con Node.js 4.1.0.

Pull request relacionado: electron/electron#2817.

node-pre-gyp

Los módulos que dependen de node-pre-gyp ahora pueden ser compilados contra Electron cuando se construye desde la fuente.

Pull request relacionado: mapbox/node-pre-gyp#175.

Soporte ARM

Ahora Electron proporciona compilaciones para Linux en ARMv7. Se ejecuta en plataformas populares como Chromebook y Raspberry Pi 2.

Temas relacionados: atom/libchromiumcontent#138, electron/electron#2094, electron/electron#366.

Ventana sin marco al estilo Yosemite

ventana sin borde

Se ha integrado un parche de @jaanus que, al igual que otras aplicaciones integradas de OS X, permite crear ventanas sin marcos con luces de tráfico del sistema integradas en OS X Yosemite y posteriores.

Pull request relacionado: electron/electron#2776.

Soporte para impresión de Google Summer of Code

Después del Google Summer of Code hemos incorporado parches de @hokein para mejorar el soporte de impresión y agregar la habilidad de imprimir la página en archivos PDF.

Temas relacionados: electron/electron#2677, electron/electron#1935, electron/electron#1532, electron/electron#805, electron/electron#1669, electron/electron#1835.

Atom

Atom se ha actualizado ahora a Electron v0.30.6 ejecutando Chrome 44. Una actualización a v0.33.0 está en progreso en atom/atom#8779.

Talks

GitHubber Amy Palamountain dio una gran introducción a Electron en una charla en Nordic.js. Además creó la libreria electron-accelerator.

Construir aplicaciones nativas con Electron por Amy Palomountain

Ben Ogle, también en el equipo de Atom, dio una charla de Electron en YAPC Asia:

Crear Aplicaciones de Escritorio con Tecnologías Web por Ben Ogle

El miembro del equipo Atom Kevin Sawicki y otros dieron una charla sobre Electron en la reunión Bay Are Electron User Group recientemente. Los videos han sido publicados, aquí hay un par:

La historia de Electron por Kevin Sawicki

Hacer que una aplicación web parezca nativa por Ben Gotow