Aller au contenu principal

43 articles tagués avec "Release"

Blog posts about new Electron releases

Voir tous les tags

Quoi de neuf dans Electron 0.37

· 4 mins de lecture

Electron 0.37 was recently released and included a major upgrade from Chrome 47 to Chrome 49 and also several new core APIs. This latest release brings in all the new features shipped in Chrome 48 and Chrome 49. This includes CSS custom properties, increased ES6 support, KeyboardEvent improvements, Promise improvements, and many other new features now available in your Electron app.


Quoi de neuf

Propriétés personnalisées CSS

Si vous avez utilisé des langages prétraités comme Sass et Less, vous êtes probablement familier avec les variables __, qui vous permettent de définir des valeurs réutilisables pour des choses comme les modèles de couleurs et les mises en page. Variables help keep your stylesheets DRY and more maintainable.

CSS custom properties are similar to preprocessed variables in that they are reusable, but they also have a unique quality that makes them even more powerful and flexible: they can be manipulated with JavaScript. Cette fonctionnalité subtile mais puissante permet des changements dynamiques aux interfaces visuelles tout en profitant de l'accélération matérielle du CSS, et réduit la duplication de code entre votre code frontend et vos feuilles de style.

For more info on CSS custom properties, see the MDN article and the Google Chrome demo.

Variables CSS en action

Voyons un exemple de variable simple qui peut être ajusté en direct dans votre application.

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

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

La valeur de la variable peut être récupérée et modifiée directement en JavaScript :

// Get the variable value ' #A5ECFA'
let color = window
.getComputedStyle(document.body)
.getPropertyValue('--awesome-color');

// Set the variable value to 'orange'
document.body.style.setProperty('--awesome-color', 'orange');

Les valeurs de la variable peuvent également être modifiées à partir de la section Styles des outils de développement pour un feedback rapide et des ajustements :

Propriétés CSS dans l'onglet Styles

Propriété KeyboardEvent.code

Chrome 48 added the new code property available on KeyboardEvent events that will be the physical key pressed independent of the operating system keyboard layout.

This should make implementing custom keyboard shortcuts in your Electron app more accurate and consistent across machines and configurations.

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

Consultez cet exemple pour le voir en action.

Promise Rejection Events

Chrome 49 added two new window events that allow you to be notified when an rejected Promise goes unhandled.

window.addEventListener('unhandledrejection', function (event) {
console.log('A rejected promise was unhandled', event.promise, event.reason);
});

window.addEventListener('rejectionhandled', function (event) {
console.log('A rejected promise was handled', event.promise, event.reason);
});

Consultez cet exemple pour le voir en action.

Mises à jour ES2015 en V8

La version de V8 maintenant dans Electron incorpore 91 % de ES2015. Voici quelques ajouts intéressants que vous pouvez utiliser sans options ni pré-compilateurs :

Paramètres par défaut

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

multiply(5); // 5

Affectation par décomposition

Chrome 49 added destructuring assignment to make assigning variables and function parameters much easier.

This makes Electron requires cleaner and more compact to assign now:

Browser Process Requires
const { app, BrowserWindow, Menu } = require('electron');
Renderer Process Requires
const { dialog, Tray } = require('electron').remote;
Autres exemples
// 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();

Nouvelles API Electron

A few of the new Electron APIs are below, you can see each new API in the release notes for Electron releases.

show and hide events on BrowserWindow

These events are emitted when the window is either shown or hidden.

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 on app for OS X

This event is emitted when the system’s Dark Mode theme is toggled.

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

app.on('platform-theme-changed', function () {
console.log(`Platform theme changed. In dark mode? ${app.isDarkMode()}`);
});

app.isDarkMode() pour OS X

Cette méthode retourne true si le système est en Mode Sombre, ou false autrement.

scroll-touch-begin and scroll-touch-end events to BrowserWindow for OS X

These events are emitted when the scroll wheel event phase has begun or has ended.

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

let window = new BrowserWindow({ width: 500, height: 500 });
window.on('scroll-touch-begin', function () {
console.log('Scroll touch started');
});
window.on('scroll-touch-end', function () {
console.log('Scroll touch ended');
});

API Changes Coming in Electron 1.0

· 4 mins de lecture

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

Par défaut, des avertissements s'afficheront si vous utilisez des API obsolètes. 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

Les modules intégrés sont maintenant regroupés en un seul module, au lieu d'être séparés en modules indépendants, pour que vous puissiez les utiliser sans conflits avec d'autres modules :

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:

// Dans le processus principal .
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

Quoi de neuf dans Electron

· 3 mins de lecture

Il y a eu quelques mises à jour et discussions intéressantes sur Electron récemment, voici un récapitulatif.


Source

Electron est maintenant à jour avec Chrome 45 à partir de la version v0.32.0. Les autres mises à jour comprennent...

Amélioration de la documentation

nouvelles docs

Nous avons restructuré et normalisé la documentation pour qu'elle soit plus attrayante et plus lisible. Il existe également des traductions de la documentation fournies par la communauté, comme le japonais et le coréen.

Pull requests similair: 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

Depuis la version v0.33.0 Electron est livré avec Node.js 4.1.0.

Questions apparentées : electron/electron#2817.

node-pre-gyp

Les modules reposant sur node-pre-gyp peuvent désormais être compilés dans Electron lors de la compilation à partir des sources.

Demande de téléchargement connexe : mapbox/node-pre-gyp#175.

Support ARM

Electron fournit maintenant des modules pour Linux sur ARMv7. Il fonctionne sur des plateformes populaires comme le Chromebook et le Raspberry Pi 2.

Questions apparentées : atom/libchromiumcontent#138, electron/electron#2094, electron/electron#366.

Fenêtre sans cadre style Yosemite

fenêtre sans cadre

Un correctif par @jaanus a été fusionné qui, comme les autres applications OS X intégrées, permet de créer des fenêtres sans cadre avec le système de feux de circulation intégré sur OS X Yosemite et les versions ultérieures.

Questions apparentées : electron/electron#2776.

Google Summer of Code, support d'impression

Après le Google Summer of Code nous avons fusionné des correctifs de @hokein pour améliorer le support de l'impression et ajoutez la possibilité d'imprimer la page dans des fichiers PDF.

Questions apparentées : electron/electron#2677, electron/electron#1935, electron/electron#1532, electron/electron#805, electron/electron#1669, electron/electron#1835.

Atom

Atom a maintenant été mis à jour vers Electron v0.30.6 qui fonctionne avec Chrome 44. Une mise à jour vers la v0.33.0 est en cours sur atom/atom#8779.

Talks

Amy Palamountain, membre de GitHubber, a présenté une excellente introduction à Electron lors d'une conférence à Nordic.js. Elle a également créé la bibliothèque electron-accelerator.

Créer des applications natives avec Electron par Amy Palomountain

Ben OgleBen Ogle, qui fait également partie de l'équipe Atom, a donné une conférence sur Electron à YAPC Asia :

Création d'Applications de Bureau avec les Technologies Web par Ben Ogle

Un membre de l'équipe Atom Kevin Sawicki et d'autres personnes ont récemment donné des conférences sur Electron lors de la réunion Bay Are Electron User Group. Les vidéos ont été postées, en voici quelques-unes :

L'histoire d'Electron par Kevin Sawicki

Créant une application web native par Ben Gotow