5 Beiträge mit "Features" markiert

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.

Wie funktioniert das?​

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

Welche Schritte sind erforderlich, um deine Electron-App nach der Veröffentlichung der Apple Silicon-Hardware auf dieser zum Laufen zu bringen?

Mit der Veröffentlichung von Electron 11.0.0-beta.1 liefert das Electron-Team eine Version, welche auf der neuen Apple Silicon-Hardware laufen wird, welche Ende dieses Jahres veröffentlicht werden wird. Du kannst die neueste Beta-Version entweder mit Einbindung durch npm install electron@beta oder direkt von unserer Webseite herunterladen.

Wie funktioniert das?​

Ab Electron 11 werden wir für Intel Macs und Apple Silicon Macs verschiedene Versionen liefern. Vor dieser Änderung hatten wir bereits zwei Artefakte, darwin-x64 und mas-x64, geliefert, wobei Letzteres speziell für die Veröffentlichung auf dem Mac App Store ausgerichtet war. Nun liefern wir zwei weitere Artefakte, darwin-arm64 und mas-arm64, welche die entsprechenden Equivalente für Apple Silicon sind.

Was mich ich tun?​

Du musst zwei Versionen deiner App veröffentlichen: eine für x64 (Intel Mac) und eine für arm64 (Apple Silicon). Die gute Nachricht ist, dass electron-packager, electron-rebuild und electron-forge bereits die arm64 -Architektur unterstützen. Solange Du die aktuellsten Versionen dieser Pakete verwendest, sollte Deine App, sobald Du die Zielarchitektur arm64 benutzt, einwandfrei funktionieren.

wir werden in Zukunft ein Paket veröffentlichen, wo du deine arm64 und x64 Apps zu einer Datei "zusammenführen" kannst. Diese Datei währe aber gigantisch und daher nicht ideal zur Veröffentlichung.

Update: Dieses Paket ist ab sofort unter @electron/universal verfügbar. Sie können es verwenden, um zwei gepackte x64 und arm64 Apps zu einem einzigen Binärprogramm zusammenzuführen.

Mögliche Probleme​

Native Module​

Da Sie auf eine neue Architektur abzielen, müssen Sie mehrere Abhängigkeiten aktualisieren, die zu Build-Problemen führen können. Die minimale Version bestimmter Abhängigkeiten ist unten für Ihre Referenz enthalten.

Aufgrund dieser Abhängigkeitsversionsanforderungen müssen Sie unter Umständen bestimmte native Module reparieren/aktualisieren. Eine Anmerkung ist, dass das Xcode Upgrade eine neue Version der macOS SDK einführen wird, was zu Build-Fehlern für Ihre nativen Module führen kann.

Wie kann ich es testen?​

Derzeit laufen die Anwendungen von Apple Silicon nur auf der Apple Silicon Hardware, die zum Zeitpunkt des Schreibens dieses Blogeintrags nicht kommerziell verfügbar ist. Wenn Sie ein Entwickler-Transition Kit haben, können Sie Ihre Anwendung darauf testen. Andernfalls müssen Sie auf die Veröffentlichung der Apple Silicon Hardware warten, um zu testen, ob Ihre Anwendung funktioniert.

Was ist mit Rosetta 2?​

Rosetta 2 ist Apples neueste Iteration ihrer Rosetta Technologie, mit der Sie x64 Intel-Anwendungen auf ihrer neuen arm64 Apple Silicon Hardware ausführen können. Obwohl wir glauben, dass x64 Electron-Apps unter Rosetta 2 laufen werden, gibt es einige wichtige Dinge zu beachten (und Gründe, warum Sie ein natives arm64-Programm erstellen sollten).

• Die Leistung Ihrer App wird erheblich beeinträchtigt. Electron / V8 verwendet JIT Kompilierung für JavaScript und aufgrund der Funktionsweise von Rosetta werden Sie effektiv JIT zweimal laufen lassen (einmal in V8 und einmal in Rosetta).
• Sie verlieren den Vorteil neuer Technologien in Apple Silicon, wie zum Beispiel die erhöhte Speicherseitengröße.
• Haben wir erwähnt, dass die Leistung signifikant beeinträchtigt sein wird?

Die neue Electron 2.0 Release-Linie ist gepackt mit neuen Funktionen und Fehlerbehebungen. Eines der Highlights dieser neuen Hauptversion ist eine neue inAppPurchase API für Apple's Mac App Store.

In-App-Käufe ermöglichen den Kauf von Inhalten oder Abonnements direkt in Apps. Dies gibt Entwicklern eine einfache Möglichkeit, das freemium Geschäftsmodellzu übernehmen, wobei Nutzer nichts zahlen, um eine App herunterzuladen, sondern sie optional In-App-Käufe für Premium-Funktionen, zusätzliche Inhalte oder Abonnements anbieten.

Die neue API wurde zu Electron vom Community-Mitwirkenden Adrien Fery hinzugefügt, um In-App-Käufe in Amanote, einer Notizenanwendung für Vorträge und Konferenzen, zu aktivieren. Amanote kann kostenlos heruntergeladen werden und ermöglicht das Hinzufügen klarer und strukturierter Notizen zu PDFs, mit Funktionen wie mathematische Formeln, Zeichnungen, Audio, Aufzeichnung und mehr.

Adrien hat seit dem Hinzufügen von In-App-Kauf-Support zur Mac-Version von Amanote eine 40% Umsatzsteigerung festgestellt!

Erste Schritte​

Die neue inAppPurchase API ist bereits in der neuesten Electron Beta gelandet:

npm i -D electron@beta

Die Dokumentation für die API kann auf GitHub gefunden werden, und Adrien waren so freundlich, ein Tutorial über die Verwendung der API zu schreiben. Um mit dem Hinzufügen von In-App Käufen in ihrer App zu starten, sehen sie dieses Tutorial.

Weitere Verbesserungen an der API sind in Arbeit und werden bald in einer kommenden Electron Beta-Version landen.

Windows könnte als nächstes sein​

Als nächstes hofft Adrien einen neuen Umsatzkanal für Amanote zu eröffnen, indem er Unterstützung für Microsoft-In-App-Käufe in Electron hinzufügt. Bleiben Sie auf dem Laufenden für Entwicklungen daran!

Die Beta-Version 1.6.3 enthält erste Unterstützung für die macOS Touch Bar.

The new Touch Bar API allows you to add buttons, labels, popovers, color pickers, sliders, and spacers. These elements can be dynamically updated and also emit events when they are interacted with.

This is the first release of this API so it will be evolving over the next few Electron releases. Please check out the release notes for further updates and open issues for any problems or missing functionality.

You can install this version via npm install electron@beta and learn more about it in the TouchBar and BrowserWindow Electron docs.

Big thanks to @MarshallOfSound for contributing this to Electron. 🎉

Touch Bar Example​

Below is an example of creating a simple slot machine game in the touch bar. It demonstrates how to create a touch bar, style the items, associate it with a window, handle button click events, and update the labels dynamically.

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.