5 publicaciones etiquetados con "Características"

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.

¿Cómo funciona?​

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

Con el hardware de Apple Silicon que se publicará a finales de este año, ¿Cómo se ve la ruta para que tu aplicación Electron funcione en el nuevo hardware?

Con el lanzamiento de Electron 11.0.0-beta, el equipo Electron está enviando versiones de Electron que funcionan con el nuevo hardware de Apple Silicon que Apple planea enviar más adelante este año. Puedes obtener la última versión beta con npm install electron@beta o descargarla directamente desde nuestra página web de lanzamientos.

¿Cómo funciona?​

A partir de Electron 11, enviaremos versiones separadas de Electron para Intel Macs y Apple Silicon Macs. Antes de este cambio, ya estábamos enviando dos artefactos, darwin-x64 y mas-x64, siendo este último para uso de compatibilidad de la App Store de Mac. Ahora estamos enviando otros dos artículos, darwin-arm64 y mas-arm64, que son los equivalentes de Apple Silicon de los principales artefactos.

¿Qué debo hacer?​

Necesitarás enviar dos versiones de tu aplicación: una para x64 (Intel Mac) y otra para arm64 (Apple Silicon). La buena noticia es que electron-packager, electron-rebuild y electron-forge ya soportan la arquitectura arm64. Mientras estés ejecutando las últimas versiones de esos paquetes, tu aplicación debería funcionar sin problemas una vez que actualices la arquitectura de destino a arm64.

En el futuro, lanzaremos un paquete que te permite "combinar" tus arm64 y x64 aplicaciones en un solo binario universal, pero vale la pena señalar que este binario sería enorme y probablemente no sea ideal para enviar a los usuarios.

Actualización: Este paquete ya está disponible en @electron/universal. Puede usarlo para combinar dos aplicaciones x64 empaquetadas y arm64 en un solo binario.

Posibles problemas​

Módulos nativos​

Como está apuntando a una nueva arquitectura, necesitará actualizar varias dependencias que pueden causar problemas de compilación. La versión mínima de ciertas dependencias se incluye a continuación para su referencia.

Como resultado de estos requerimientos de la versión de dependencias, es posible que tengas que arreglar/actualizar ciertos módulos nativos. Una cosa importante es que la actualización de Xcode introducirá una nueva versión del SDK de macOS, que puede causar fallos en la compilación de sus módulos nativos.

¿Cómo lo compruebo?​

Actualmente, las aplicaciones de Apple Silicon sólo funcionan con el hardware de Apple Silicon que no está disponible comercialmente en el momento de escribir este post en el blog. Si tienes un kit de transición de desarrollador, puedes probar tu aplicación con él. De lo contrario, tendrá que esperar a la liberación de la producción de hardware Apple Silicon para probar si su aplicación funciona.

¿Y qué ocurre con Rosetta 2?​

Rosetta 2 es la última iteración de su tecnología de Rosetta que le permite ejecutar aplicaciones x64 Intel en su nuevo hardware de Apple Silicon arm64. Aunque creemos que las aplicaciones x64 Electron funcionarán en Rosetta 2, hay algunas cosas importantes a tener en cuenta (y razones por las que debería enviar un binario arm64 nativo).

• El rendimiento de su aplicación se degradará significativamente. Electron / V8 usa la compilación JIT para JavaScript, y debido a cómo funciona Rosetta Usted ejecutará efectivamente JIT dos veces (una en V8 y otra en Rosetta).
• Usted pierde el beneficio de la nueva tecnología en Apple Silicon, como el mayor tamaño de la página de memoria.
• ¿Mencionamos que el rendimiento será significativamente degradado?

La nueva línea de lanzamiento Electron 2.0 es empaquetada con nuevas características y arreglos. Uno de los puntos destacados de esta nueva versión principal es una nueva API inAppPurchase para el Mac App Store de Apple.

Las compras dentro de la aplicación permite que el contenido o las suscripciones se compren directamente desde las aplicaciones. Esto le proporciona a los desarrolladores una manera sencilla de adherirse al modelo de negocio freemium, donde los usuarios no deben pagar para descargar una aplicación y se les ofrecen compras opcionales dentro de la aplicación para obtener características premium, contenido adicional o suscripciones.

Esta nueva API fue agregada a Electron por el colaborador comunitario Adrien Fery para habilitar las compras dentro de la aplicación en Amanote, una aplicación de Electron para tomar notas de lecturas y conferencias. La descarga de Amanote es gratuita y permite que agregar notas claras y estructuradas en archivos PDF, con características como fórmulas matemáticas, dibujos, grabación de audios y más.

¡Desde la implementación del soporte para las compras dentro de la aplicación en la versión para Mac de Amanote, Adrien ha notado un aumento del 40% en las ventas!

Empezar​

La nueva API inAppPurchase ha llegado en la última beta de Electron:

npm i -D electron@beta

La documentación para el API se puede encontrar en GitHub y Adrien ha tenido la amabilidad de escribir un tutorial sobre cómo utilizar el API. Para iniciar con la implementación de las compras dentro de la aplicación a tu proyecto, vea el tutorial.

Más mejoras en la API se encuentran en proceso y pronto llegarán en la próxima beta de Electron.

Windows podría ser el siguiente​

Próximamente, Adrien espera abrir un nuevo canal de ingresos para Amanote, al agregar el soporte para las compras dentro de la aplicación con la Tienda de Microsoft en Electron. ¡Continúe en sintonía para actualizaciones sobre eso!

La versión beta de Electron 1.6.3 contiene soporte inicial para la 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​

A continuación se muestra un ejemplo de la creación de un juego sencillo de tragaperras en la barra táctil. 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.