5 articles tagués avec "Fonctionnalités"

Electron’s API Working Group is adopting an open Requests for Comments (RFC) process to help shepherd larger changes to Electron core.

Why RFCs?​

In short, we want to smooth out the process of landing significant changes to Electron core.

Currently, new code changes are mostly discussed through issues and pull requests on GitHub. For most changes to Electron, this is a good system. Many bug fixes, documentation changes, and even new features are straightforward enough to review and merge asynchronously through standard GitHub flows.

For changes that are more significant—for instance, large API surfaces or breaking changes that would affect the majority of Electron apps—it makes sense for review to happen at the ideation stage before most of the code is written.

This process is designed to be open to the public, which will also make it easier for the open source community at large to give feedback on potential changes before they land in Electron.

Comment ça marche ?​

The entire RFC process lives in the electron/rfcs repository on GitHub. The steps are described in detail in the repository README.

In brief, an RFC is Proposed once a PR is made to the electron/rfcs repository. A Proposed RFC becomes:

• Active when the PR is merged into the main branch of the repository, which means that Electron maintainers are amenable to an implementation in electron/electron, or
• Declined if the PR is ultimately rejected.

An Active RFC is Completed if the implementation has been merged into electron/electron.

Who can participate?​

Anyone in the Electron community can submit RFCs or leave feedback on the electron/rfcs repository!

• To see the list of active RFCs, refer to the text folder in the repository.
• To leave feedback on proposed RFCs, check out the list of open PRs.
• To submit a new RFC, check out the repo’s README and the RFC template.

We wanted to make this process a two-way dialogue and encourage community participation to get a diverse set of opinions from Electron apps that might consume these APIs in the future. If you’re interested in leaving feedback on currently proposed RFCs, the Electron maintainers have already created a few:

• Electron C APIs
• Preload Realm for Service Workers

Credits​

Electron's RFC process was modeled on many established open source RFC processes. Inspiration for many ideas and major portions of copywriting go to:

• emberjs/rfcs
• reactjs/rfcs
• rust-lang/rfcs
• tauri-apps/rfcs
• vuejs/rfcs
• yarnpkg/rfcs

Avec la sortie de matériel Apple Silicon plus tard dans l'année, à quoi ressemble le chemin d'accès pour que votre application Electron fonctionne sur le nouveau matériel ?

Avec la sortie d'Electron 11.0.0-beta.1, l'équipe d'Electron est maintenant en train de livrer des versions d'Electron qui fonctionnent sur le nouveau matériel Apple Silicon qu'Apple prévoit d'expédier plus tard cette année. Vous pouvez récupérer la dernière version bêta avec npm install electron@beta ou la télécharger directement à partir de notre site des versions.

Comment ça marche ?​

À partir d'Electron 11, nous expédierons des versions séparées d'Electron pour les Mac Intel et Apple Silicon Macs. Avant cette modification, nous proposions déjà deux artefacts, darwin-x64 et mas-x64, ce dernier étant destiné à la compatibilité avec le Mac App Store. Nous expédions désormais deux autres artefacts, darwin-arm64 et mas-arm64, qui sont les équivalents Apple Silicon des artefacts susmentionnés.

Que devez-vous faire ?​

Vous devrez d'expédier deux versions de votre application : un pour la x64 (Intel Mac) et un autre pour am64 (Apple Silicon). La bonne nouvelle, c'est qu'il existe electron-packager, electron-rebuild et electron-forge prennent déjà en charge l'architecture arm64. Tant que vous utilisez les dernières versions de ces paquets, votre application devrait fonctionner parfaitement une fois que vous aurez mis à jour l'architecture cible vers arm64.

À l'avenir, nous publierons un package qui vous permettra de « fusionner » vos applications arm64 et x64 en un seul binaire universel, mais il convient de noter que ce binaire serait énorme et ne serait probablement pas idéal pour être distribué aux utilisateurs.

Mise à jour : ce package est désormais disponible à l'adresse @electron/universal. Vous pouvez l'utiliser pour fusionner deux applications x64 et arm64 packagées en un seul binaire.

Problèmes potentiels​

Modules natifs​

Comme vous visez une nouvelle architecture, vous devrez mettre à jour plusieurs dépendances qui peuvent causer des problèmes de construction. La version minimale de certaines dépendances est incluse ci-dessous pour votre référence.

En raison de ces exigences de version de dépendance, vous devrez peut-être corriger/mettre à jour certains modules natifs. Il est important de noter que la mise à niveau de Xcode introduira une nouvelle version du SDK macOS, ce qui pourrait entraîner des échecs de compilation pour vos modules natifs.

Comment puis-je le tester ?​

Actuellement, les applications Apple Silicon ne fonctionnent que sur du matériel Apple Silicon, qui n'est pas disponible dans le commerce au moment de la rédaction de cet article. Si vous disposez d'un kit de transition pour développeurs, vous pouvez tester votre application dessus. Sinon, vous devrez attendre la sortie du matériel Apple Silicon pour tester si votre application fonctionne.

Qu’en est-il de Rosetta 2 ?​

Rosetta 2 est la dernière version de la technologie Rosetta d'Apple, qui vous permet d'exécuter des applications Intel x64 sur leur nouveau matériel Apple Silicon arm64. Bien que nous pensions que les applications x64 Electron fonctionneront sous Rosetta 2, il y a quelques points importants à noter (et des raisons pour lesquelles vous devriez fournir un binaire arm64 natif).

• Les performances de votre application seront considérablement réduites. Electron / V8 utilise la compilation JIT pour JavaScript, et en raison du fonctionnement de Rosetta, vous exécuterez en fait JIT deux fois (une fois dans V8 et une fois dans Rosetta).
• Vous perdez les avantages des nouvelles technologies d'Apple Silicon, telles que l'augmentation de la taille des pages mémoire.
• Avons-nous mentionné que la performance sera significativement dégradée?

The new Electron 2.0 release line is packed with new features and fixes. One of the highlights from this new major version is a new inAppPurchase API for Apple's Mac App Store.

In-app purchases enable content or subscriptions to be purchased directly from within apps. This gives developers an easy way to embrace the freemium business model, wherein users pay nothing to download an app and are offered optional in-app purchases for premium features, additional content, or subscriptions.

The new API was added to Electron by community contributor Adrien Fery to enable in-app purchases in Amanote, a note-taking Electron app for lectures and conferences. Amanote is free to download and allows clear and structured notes to be added to PDFs, with features like mathematical formulae, drawings, audio recording, and more.

Since adding in-app purchase support to the Mac version of Amanote, Adrien has noted a 40% increase in sales!

Démarrer​

The new inAppPurchase API has already landed in the latest Electron beta:

npm i -D electron@beta

The docs for the API can be found on GitHub, and Adrien has been kind enough to write a tutorial on how to use the API. To get started adding in-app purchases to your app, see the tutorial.

More improvements to the API are in the works, and will soon be landing in an upcoming Electron beta release.

Windows Could Be Next​

Up next, Adrien is hoping to open a new revenue channel for Amanote by adding support for Microsoft Store in-app purchases in Electron. Stay tuned for developments on that!

La version bêta d'Electron 1.6.3 contient la prise en charge initiale de la Touch Bar de macOS.

La nouvelle API Touch Bar vous permet d'ajouter des boutons, des étiquettes, des popovers, des sélecteurs de couleurs, des curseurs et des espaceurs. Ces éléments peuvent être mis à jour dynamiquement et émettent également des événements lorsqu'ils interagissent avec eux.

Il s'agit de la première version de cette API, elle évoluera donc au cours de la prochaine quelques rejets d'électrons. Veuillez consulter les notes de version pour d'autres mises à jour et ouvrez issues pour tout problème ou fonctionnalité manquante.

Vous pouvez installer cette version via npm install electron@beta et apprendre plus d'informations à ce sujet dans la TouchBar et BrowserWindow Documents électroniques.

Un grand merci à @MarshallOfSound pour sa contribution à Electron. 🎉

Exemple de barre tactile​

Voici un exemple de création d'un jeu de machine à sous simple dans la Touch Bar. Il montre comment créer une barre tactile, styliser les éléments, l'associer à un fenêtre, gérer les événements de clic de bouton et mettre à jour les étiquettes de manière dynamique.

const { app, BrowserWindow, TouchBar } = require('electron');

const { TouchBarButton, TouchBarLabel, TouchBarSpacer } = TouchBar;

let spinning = false;

// Reel labels
const reel1 = new TouchBarLabel();
const reel2 = new TouchBarLabel();
const reel3 = new TouchBarLabel();

// Spin result label
const result = new TouchBarLabel();

// Spin button
const spin = new TouchBarButton({
  label: '🎰 Spin',
  backgroundColor: '#7851A9',
  click: () => {
    // Ignore clicks if already spinning
    if (spinning) {
      return;
    }

    spinning = true;
    result.label = '';

    let timeout = 10;
    const spinLength = 4 * 1000; // 4 seconds
    const startTime = Date.now();

    const spinReels = () => {
      updateReels();

      if (Date.now() - startTime >= spinLength) {
        finishSpin();
      } else {
        // Slow down a bit on each spin
        timeout *= 1.1;
        setTimeout(spinReels, timeout);
      }
    };

    spinReels();
  },
});

const getRandomValue = () => {
  const values = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇', '🍀'];
  return values[Math.floor(Math.random() * values.length)];
};

const updateReels = () => {
  reel1.label = getRandomValue();
  reel2.label = getRandomValue();
  reel3.label = getRandomValue();
};

const finishSpin = () => {
  const uniqueValues = new Set([reel1.label, reel2.label, reel3.label]).size;
  if (uniqueValues === 1) {
    // All 3 values are the same
    result.label = '💰 Jackpot!';
    result.textColor = '#FDFF00';
  } else if (uniqueValues === 2) {
    // 2 values are the same
    result.label = '😍 Winner!';
    result.textColor = '#FDFF00';
  } else {
    // No values are the same
    result.label = '🙁 Spin Again';
    result.textColor = null;
  }
  spinning = false;
};

const touchBar = new TouchBar([
  spin,
  new TouchBarSpacer({ size: 'large' }),
  reel1,
  new TouchBarSpacer({ size: 'small' }),
  reel2,
  new TouchBarSpacer({ size: 'small' }),
  reel3,
  new TouchBarSpacer({ size: 'large' }),
  result,
]);

let window;

app.once('ready', () => {
  window = new BrowserWindow({
    frame: false,
    titleBarStyle: 'hidden-inset',
    width: 200,
    height: 200,
    backgroundColor: '#000',
  });
  window.loadURL('about:blank');
  window.setTouchBar(touchBar);
});

Building an Electron application means you only need to create one codebase and design for one browser, which is pretty handy. But because Electron stays up to date with Node.js and Chromium as they release, you also get to make use of the great features they ship with. In some cases this eliminates dependencies you might have previously needed to include in a web app.

There are many features and we'll cover some here as examples, but if you're interested in learning about all features you can keep an eye on the Google Chromium blog and Node.js changelogs. You can see what versions of Node.js, Chromium and V8 Electron is using at electronjs.org/#electron-versions.

ES6 Support through V8​

Electron combines Chromium's rendering library with Node.js. The two share the same JavaScript engine, V8. Many ECMAScript 2015 (ES6) features are already built into V8 which means you can use them in your Electron application without any compilers.

Below are a few examples but you can also get classes (in strict mode), block scoping, promises, typed arrays and more. Check out this list for more information on ES6 features in V8.

Arrow Functions

findTime () => {
  console.log(new Date())
}

String Interpolation

var octocat = 'Mona Lisa';
console.log(`The octocat's name is ${octocat}`);

New Target

Octocat() => {
  if (!new.target) throw "Not new";
  console.log("New Octocat");
}

// Throws
Octocat();
// Logs
new Octocat();

Array Includes

// Returns true
[1, 2].includes(2);

Rest Parameters

// Represent indefinite number of arguments as an array
(o, c, ...args) => {
  console.log(args.length);
};

Chromium Features​

Thanks to all the hard work Google and contributors put into Chromium, when you build Electron apps you can also use cool things like (but not limited to):

• MouseEvent.getModifierState()
• CSS.escape()
• Fetch API Streaming

Follow along with the Google Chromium blog to learn about features as new versions ship and again, you can check the version of Chromium that Electron uses here.

What are you excited about?​

Tweet to us @ElectronJS with your favorite features built into V8 or Chromium.