Zum Hauptteil springen

40 Beiträge mit "Release" markiert

Blog posts about new Electron releases

Alle Tags anzeigen

Node.js Native Addons and Electron 5.0

· Die Lesezeit beträgt 2 min

If you're having trouble using a native Node.js addon with Electron 5.0, there's a chance it needs to be updated to work with the most recent version of V8.


Goodbye v8::Handle, Hello v8::Local

In 2014, the V8 team deprecated v8::Handle in favor of v8::Local for local handles. Electron 5.0 includes a version of V8 that has finally removed v8::Handle for good, and native Node.js addons that still use it will need to be updated before they can be used with Electron 5.0.

The required code change is minimal, but every native Node module that still uses v8::Handle will fail to build with Electron 5.0 and will need to be modified. The good news is that Node.js v12 will also include this V8 change, so any modules that use v8::Handle will need to be updated anyway to work with the upcoming version of Node.

I maintain a native addon, how can I help?

If you maintain a native addon for Node.js, ensure you replace all occurrences of v8::Handle with v8::Local. The former was just an alias of the latter, so no other changes need to be made to address this specific issue.

You may also be interested in looking into N-API, which is maintained separately from V8 as a part of Node.js itself, and aims to insulate native addons from changes in the underlying JavaScript engine. You can find more information in the N-API documentation on the Node.js website.

Hilfe! I use a native addon in my app and it won't work!

If you're consuming a native addon for Node.js in your app and the native addon will not build because of this issue, check with the author of the addon to see if they've released a new version that fixes the problem. If not, reaching out to the author (or opening a Pull Request!) is probably your best bet.

Electron v5.0.0 Timeline

· Die Lesezeit beträgt 2 min

Zum ersten Mal überhaupt begeistert sich Electron dafür, unseren Veröffentlichungsplan ab Version 5 bekannt zu geben. Dies ist unser erster Schritt, eine öffentliche, langfristige Zeitleiste zu haben.


As mentioned in our v4.0.0 stable release blog post, we are planning to release approximately quarterly to maintain closer cadence with Chromium releases. Chromium releases a new version very quickly -- every 6 weeks.

Take a look at progression in Electron versus Chromium side-by-side:

line graph comparing Electron versus Chromium versions

In the last half of 2018, our top priority was releasing faster and catching up closer to Chromium. We succeeded by sticking to a predetermined timeline. Electron 3.0.0 and 4.0.0 were released in a 2-3 month timeline for each release. We are optimistic about continuing that pace in releasing 5.0.0 and beyond. With a major Electron release approximately every quarter, we're now keeping pace with Chromium's release cadence. Getting ahead of Chromium stable release is always a goal for us and we are taking steps towards that.

We would love to promise future dates like Node.js and Chromium do, but we are not at that place yet. We are optimistic that we will reach a long-term timeline in the future.

In diesem Sinne unternehmen wir erste Schritte, indem wir unseren Veröffentlichungsplan für v5.0.0 öffentlich veröffentlichen. Das findest du hier.

To help us with testing our beta releases and stabilization, please consider joining our App Feedback Program.

Electron 4.0.0

· Die Lesezeit beträgt 6 min

Das Electron Team freut sich, bekannt zu geben, dass die stabile Version von Electron 4 jetzt verfügbar ist! Sie können es von electronjs.org oder von npm über npm install electron@latest installieren. Der Release ist voll mit Upgrades, Korrekturen und neuen Features, und wir können nicht warten, bis wir sehen, was Sie mit ihnen bauen. Read more for details about this release, and please share any feedback you have as you explore!


What's New?

A large part of Electron's functionality is provided by Chromium, Node.js, and V8, the core components that make up Electron. As such, a key goal for the Electron team is to keep up with changes to these projects as much as possible, providing developers who build Electron apps access to new web and JavaScript features. To this end, Electron 4 features major version bumps to each of these components; Electron v4.0.0 includes Chromium 69.0.3497.106, Node 10.11.0, and V8 6.9.427.24.

In addition, Electron 4 includes changes to Electron-specific APIs. You can find a summary of the major changes in Electron 4 below; for the full list of changes, check out the Electron v4.0.0 release notes.

Disabling the remote Module

You now have the ability to disable the remote module for security reasons. The module can be disabled for BrowserWindows and for webview tags:

// BrowserWindow
new BrowserWindow({
webPreferences: {
enableRemoteModule: false
}
})

// webview tag
<webview src="http://www.google.com/" enableremotemodule="false"></webview>

See the BrowserWindow and <webview> Tag documentation for more information.

Filtering remote.require() / remote.getGlobal() Requests

This feature is useful if you don't want to completely disable the remote module in your renderer process or webview but would like additional control over which modules can be required via remote.require.

When a module is required via remote.require in a renderer process, a remote-require event is raised on the app module. You can call event.preventDefault() on the the event (the first argument) to prevent the module from being loaded. The WebContents instance where the require occurred is passed as the second argument, and the name of the module is passed as the third argument. The same event is also emitted on the WebContents instance, but in this case the only arguments are the event and the module name. In both cases, you can return a custom value by setting the value of event.returnValue.

// Control `remote.require` from all WebContents:
app.on('remote-require', function (event, webContents, requestedModuleName) {
// ...
});

// Control `remote.require` from a specific WebContents instance:
browserWin.webContents.on(
'remote-require',
function (event, requestedModuleName) {
// ...
}
);

In a similar fashion, when remote.getGlobal(name) is called, a remote-get-global event is raised. This works the same way as the remote-require event: call preventDefault() to prevent the global from being returned, and set event.returnValue to return a custom value.

// Control `remote.getGlobal` from all WebContents:
app.on(
'remote-get-global',
function (event, webContents, requrestedGlobalName) {
// ...
}
);

// Control `remote.getGlobal` from a specific WebContents instance:
browserWin.webContents.on(
'remote-get-global',
function (event, requestedGlobalName) {
// ...
}
);

For more information, see the following documentation:

JavaScript Access to the About Panel

On macOS, you can now call app.showAboutPanel() to programmatically show the About panel, just like clicking the menu item created via {role: 'about'}. See the showAboutPanel documentation for more information

Controlling WebContents Background Throttling

WebContents instances now have a method setBackgroundThrottling(allowed) to enable or disable throttling of timers and animations when the page is backgrounded.

lassen Sie gewinnen = new BrowserWindow(...)
win.webContents.setBackgroundThrottling(enableBackgroundThrottling)
win.webContents.setBackgroundThrottling(enableBackgroundThrottling)

See the setBackgroundThrottling documentation for more information.

Breaking Changes

Keine macOS 10.9 Unterstützung mehr

Chromium no longer supports macOS 10.9 (OS X Mavericks), and as a result Electron 4.0 and beyond does not support it either.

Single Instance Locking

Previously, to make your app a Single Instance Application (ensuring that only one instance of your app is running at any given time), you could use the app.makeSingleInstance() method. Starting in Electron 4.0, you must use app.requestSingleInstanceLock() instead. The return value of this method indicates whether or not this instance of your application successfully obtained the lock. If it failed to obtain the lock, you can assume that another instance of your application is already running with the lock and exit immediately.

For an example of using requestSingleInstanceLock() and information on nuanced behavior on various platforms, see the documentation for app.requestSingleInstanceLock() and related methods and the second-instance event.

win_delay_load_hook

When building native modules for windows, the win_delay_load_hook variable in the module's binding.gyp must be true (which is the default). If this hook is not present, then the native module will fail to load on Windows, with an error message like Cannot find module. See the native module guide for more information.

Deprecations

The following breaking changes are planned for Electron 5.0, and thus are deprecated in Electron 4.0.

Node.js Integration Disabled for nativeWindowOpen-ed Windows

Starting in Electron 5.0, child windows opened with the nativeWindowOpen option will always have Node.js integration disabled.

webPreferences Standardwerte

When creating a new BrowserWindow with the webPreferences option set, the following webPreferences option defaults are deprecated in favor of new defaults listed below:

PropertyDeprecated DefaultNew Default
contextIsolationfalsetrue
nodeIntegrationtruefalse
webviewTagvalue of nodeIntegration if set, otherwise truefalse

Please note: there is currently a known bug (#9736) that prevents the webview tag from working if contextIsolation is on. Keep an eye on the GitHub issue for up-to-date information!

Learn more about context isolation, Node integration, and the webview tag in the Electron security document.

Electron 4.0 will still use the current defaults, but if you don't pass an explicit value for them, you'll see a deprecation warning. To prepare your app for Electron 5.0, use explicit values for these options. See the BrowserWindow docs for details on each of these options.

webContents.findInPage(text[, options])

The medialCapitalAsWordStart and wordStart options have been deprecated as they have been removed upstream.

App Feedback Programm

The App Feedback Program we instituted during the development of Electron 3.0 was successful, so we've continued it during the development of 4.0 as well. We'd like to extend a massive thank you to Atlassian, Discord, MS Teams, OpenFin, Slack, Symphony, WhatsApp, and the other program members for their involvement during the 4.0 beta cycle. To learn more about the App Feedback Program and to participate in future betas, check out our blog post about the program.

What's Next

In the short term, you can expect the team to continue to focus on keeping up with the development of the major components that make up Electron, including Chromium, Node, and V8. Although we are careful not to make promises about release dates, our plan is release new major versions of Electron with new versions of those components approximately quarterly. See our versioning document for more detailed information about versioning in Electron.

For information on planned breaking changes in upcoming versions of Electron, see our Planned Breaking Changes doc.

Electron 3.0.0

· Die Lesezeit beträgt 4 min

The Electron team is excited to announce that the first stable release of Electron 3 is now available from electronjs.org and via npm install electron@latest! It's jam-packed with upgrades, fixes, and new features, and we can't wait to see what you build with them. Below are details about this release, and we welcome your feedback as you explore.


Release Process

As we undertook development of v3.0.0, we sought to more empirically define criteria for a stable release by formalizing the feedback progress for progressive beta releases. v3.0.0 would not have been possible without our App Feedback Program partners, who provided early testing and feedback during the beta cycle. Thanks to Atlassian, Atom, Microsoft Teams, Oculus, OpenFin, Slack, Symphony, VS Code, and other program members for their work. If you'd like to participate in future betas, please mail us at info@electronjs.org.

Changes / New Features

Major bumps to several important parts of Electron's toolchain, including Chrome v66.0.3359.181, Node v10.2.0, and V8 v6.6.346.23.

  • [#12656] feat: app.isPackaged
  • [#12652] feat: app.whenReady()
  • [#13183] feat: process.getHeapStatistics()
  • [#12485] feat: win.moveTop() to move window z-order to top
  • [#13110] feat: TextField and Button APIs
  • [#13068] feat: netLog API for dynamic logging control
  • [#13539] feat: enable webview in sandbox renderer
  • [#14118] feat: fs.readSync now works with massive files
  • [#14031] feat: node fs wrappers to make fs.realpathSync.native and fs.realpath.native available

Breaking API changes

  • [#12362] feat: updates to menu item order control
  • [#13050] refactor: removed documented deprecated APIs
    • See docs for more details
  • [#12477] refactor: removed did-get-response-details and did-get-redirect-request events
  • [#12655] feat: default to disabling navigating on drag/drop
  • [#12993] feat: Node v4.x or greater is required use the electron npm module
  • [#12008 #12140 #12503 #12514 #12584 #12596 #12637 #12660 #12696 #12716 #12750 #12787 #12858] refactor: NativeWindow
  • [#11968] refactor: menu.popup()
  • [#8953] feat: no longer use JSON to send the result of ipcRenderer.sendSync
  • [#13039] feat: default to ignore command line arguments following a URL
  • [#12004] refactor: rename api::Window to api::BrowserWindow
  • [#12679] feat: visual zoom now turned off by default
  • [#12408] refactor: rename app-command media-play_pause to media-play-pause

macOS

  • [#12093] feat: workspace notifications support
  • [#12496] feat: tray.setIgnoreDoubleClickEvents(ignore) to ignore tray double click events.
  • [#12281] feat: mouse forward functionality on macOS
  • [#12714] feat: screen lock / unlock events

Windows

  • [#12879] feat: added DIP to/from screen coordinate conversions

Nota Bene: Switching to an older version of Electron after running this version will require you to clear out your user data directory to avoid older versions crashing. You can get the user data directory by running console.log(app.getPath("userData")) or see docs for more details.

Fehlerkorrekturen

  • [#13397] fix: issue with fs.statSyncNoException throwing exceptions
  • [#13476, #13452] fix: crash when loading site with jquery
  • [#14092] fix: crash in net::ClientSocketHandle destructor
  • [#14453] fix: notify focus change right away rather not on next tick

MacOS

  • [#13220] fix: issue allowing bundles to be selected in <input file="type"> open file dialog
  • [#12404] fix: issue blocking main process when using async dialog
  • [#12043] fix: context menu click callback
  • [#12527] fix: event leak on reuse of touchbar item
  • [#12352] fix: tray title crash
  • [#12327] fix: non-draggable regions
  • [#12809] fix: to prevent menu update while it's open
  • [#13162] fix: tray icon bounds not allowing negative values
  • [#13085] fix: tray title not inverting when highlighted
  • [#12196] fix: Mac build when enable_run_as_node==false
  • [#12157] fix: additional issues on frameless windows with vibrancy
  • [#13326] fix: to set mac protocol to none after calling app.removeAsDefaultProtocolClient
  • [#13530] fix: incorrect usage of private APIs in MAS build
  • [#13517] fix: tray.setContextMenu crash
  • [#14205] fix: pressing escape on a dialog now closes it even if defaultId is set

Linux

  • [#12507] fix: BrowserWindow.focus() for offscreen windows

Other Notes

  • PDF Viewer is currently not working but is being worked on and will be functional once again soon
  • TextField and Button APIs are experimental and are therefore off by default
    • They can be enabled with the enable_view_api build flag

What's Next

The Electron team continues to work on defining our processes for more rapid and smooth upgrades as we seek to ultimately maintain parity with the development cadences of Chromium, Node, and V8.

Electron 2.0.0

· Die Lesezeit beträgt 5 min

After more than four months of development, eight beta releases, and worldwide testing from many apps' staged rollouts, the release of Electron 2.0.0 is now available from electronjs.org.


Release Process

Starting with 2.0.0, Electron's releases will follow semantic versioning. This means the major version will bump more often and will usually be a major update to Chromium. Patch releases should be more stable because they will contain only high-priority bug fixes.

Electron 2.0.0 also represents an improvement to how Electron is stabilized before a major release. Several large scale Electron apps have included 2.0.0 betas in staged rollouts, providing the best feedback loop Electron's ever had for a beta series.

Changes / New Features

  • Major bumps to several important parts of Electron's toolchain, including Chrome 61, Node 8.9.3, V8 6.1.534.41, GTK+ 3 on Linux, updated spellchecker, and Squirrel.
  • In-app purchases are now supported on MacOS. #11292
  • New API for loading files. #11565
  • New API to enable/disable a window. #11832
  • New API app.setLocale(). #11469
  • New support for logging IPC messages. #11880
  • New menu events. #11754
  • Add a shutdown event to powerMonitor. #11417
  • Add affinity option for gathering several BrowserWindows into a single process. #11501
  • Add the ability for saveDialog to list available extensions. #11873
  • Support for additional notification actions #11647
  • The ability to set macOS notification close button title. #11654
  • Add conditional for menu.popup(window, callback)
  • Memory improvements in touchbar items. #12527
  • Improved security recommendation checklist.
  • Add App-Scoped Security scoped bookmarks. #11711
  • Add ability to set arbitrary arguments in a renderer process. #11850
  • Add accessory view for format picker. #11873
  • Fixed network delegate race condition. #12053
  • Drop support for the mips64el arch on Linux. Electron requires the C++14 toolchain, which was not available for that arch at the time of the release. We hope to re-add support in the future.

Breaking API changes

  • Removed deprecated APIs, including:
    • Changed menu.popup signature. #11968
    • Removed deprecated crashReporter.setExtraParameter #11972
    • Removed deprecated webContents.setZoomLevelLimits and webFrame.setZoomLevelLimits. #11974
    • Removed deprecated clipboard methods. #11973
    • Removed support for boolean parameters for tray.setHighlightMode. #11981

Fehlerkorrekturen

  • Geändert um sicherzustellen, dass webContents.isOffscreen() immer verfügbar ist. #12531
  • BrowserWindow.getFocusedWindow() wurde behoben, wenn DevTools undocked und focused wurden. #12554
  • Fixed preload not loading in sandboxed render if preload path contains special chars. #12643
  • Correct the default of allowRunningInsecureContent as per docs. #12629
  • Fixed transparency on nativeImage. #12683
  • Problem mit Menu.buildFromTemplate behoben. #12703
  • Confirmed menu.popup options are objects. #12330
  • Removed a race condition between new process creation and context release. #12361
  • Update draggable regions when changing BrowserView. #12370
  • Fixed menubar toggle alt key detection on focus. #12235
  • Fixed incorrect warnings in webviews. #12236
  • Fixed inheritance of 'show' option from parent windows. #122444
  • Ensure that getLastCrashReport() is actually the last crash report. #12255
  • Fixed require on network share path. #12287
  • Fixed context menu click callback. #12170
  • Fixed popup menu position. #12181
  • Improved libuv loop cleanup. #11465
  • Fixed hexColorDWORDToRGBA for transparent colors. #11557
  • Fixed null pointer dereference with getWebPreferences api. #12245
  • Fixed a cyclic reference in menu delegate. #11967
  • Fixed protocol filtering of net.request. #11657
  • WebFrame.setVisualZoomLevelLimits now sets user-agent scale constraints #12510
  • Set appropriate defaults for webview options. #12292
  • Improved vibrancy support. #12157 #12171 #11886
  • Fixed timing issue in singleton fixture.
  • Fixed broken production cache in NotifierSupportsActions()
  • Made MenuItem roles camelCase-compatible. #11532
  • Improved touch bar updates. #11812, #11761.
  • Removed extra menu separators. #11827
  • Fixed Bluetooth chooser bug. Closes #11399.
  • Fixed macos Full Screen Toggle menu item label. #11633
  • Improved tooltip hiding when a window is deactivated. #11644
  • Migrated deprecated web-view method. #11798
  • Fixed closing a window opened from a browserview. #11799
  • Fixed Bluetooth chooser bug. #11492
  • Updated to use task scheduler for app.getFileIcon API. #11595
  • Changed to fire console-message event even when rendering offscreen. #11921
  • Fixed downloading from custom protocols using WebContents.downloadURL. #11804
  • Fixed transparent windows losing transparency when devtools detaches. #11956
  • Fixed Electron apps canceling restart or shutdown. #11625

macOS

  • Fixed event leak on reuse of touchbar item. #12624
  • Fixed tray highlight in darkmode. #12398
  • Fixed blocking main process for async dialog. #12407
  • Fixed setTitle tray crash. #12356
  • Fixed crash when setting dock menu. #12087

Linux

Windows

  • Visual Studio 2017 Unterstützung hinzugefügt. #11656
  • Fixed passing of exception to the system crash handler. #12259
  • Fixed hiding tooltip from minimized window. #11644
  • Fixed desktopCapturer to capture the correct screen. #11664
  • Fixed disableHardwareAcceleration with transparency. #11704

What's Next

The Electron team is hard at work to support newer versions of Chromium, Node, and v8. Expect 3.0.0-beta.1 soon!

Electron 2.0 and Beyond - Semantic Versioning

· Eine Minute Lesezeit

Eine neue Hauptversion von Electron ist in Arbeit und damit einige Änderungen an unserer Versionierungsstrategie. Ab Version 2.0.0 wird Electron die Semantic Versionierung strikt einhalten.


This change means you'll see the major version bump more often, and it will usually be a major update to Chromium. Patch releases will also be more stable, as they will now only contain bug fixes with no new features.

Major Version Increments

  • Chromium version updates
  • Node.js major version updates
  • Electron breaking API changes

Minor Version Increments

  • Node.js minor version updates
  • Electron non-breaking API changes

Patch Version Increments

  • Node.js patch version updates
  • fix-related chromium patches
  • Electron bug fixes

Because Electron's semver ranges will now be more meaningful, we recommend installing Electron using npm's default --save-dev flag, which will prefix your version with ^, keeping you safely up to date with minor and patch updates:

npm install --save-dev electron

For developers interested only in bug fixes, you should use the tilde semver prefix e.g. ~2.0.0, which which will never introduce new features, only fixes to improve stability.

For more details, see electronjs.org/docs/tutorial/electron-versioning.

Electron 1.0

· Die Lesezeit beträgt 4 min

In den letzten zwei Jahren hat Electron Entwicklern dabei geholfen, plattformübergreifende Desktop-Apps mit HTML, CSS und JavaScript zu erstellen. Now we're excited to share a major milestone for our framework and for the community that created it. Die Version von Electron 1.0 ist ab sofort bei electronjs.org verfügbar.


Electron 1.0

Electron 1.0 represents a major milestone in API stability and maturity. This release allows you to build apps that act and feel truly native on Windows, Mac, and Linux. Building Electron apps is easier than ever with new docs, new tools, and a new app to walk you through the Electron APIs.

Wenn Sie bereit sind, Ihre allererste Electron-App zu erstellen, hier ist eine Schnellstart-Anleitung um Ihnen beim Start zu helfen.

We are excited to see what you build next with Electron.

Electron's Path

Wir haben Electron freigegeben, als wir vor etwas mehr als zwei Jahren Atom starteten. Electron, then known as Atom Shell, was the framework we'd built Atom on top of. In those days, Atom was the driving force behind the features and functionalities that Electron provided as we pushed to get the initial Atom release out.

Das Fahren von Electron ist eine wachsende Gemeinschaft von Entwicklern und Firmen, die alles aus E-Mail, Chatbauen, und Git Apps bis SQL Analytics Tools, Torrent-Clients, und Roboter.

In these last two years we've seen both companies and open source projects choose Electron as the foundation for their apps. Just in the past year, Electron has been downloaded over 1.2 million times. Machen Sie eine Tour durch einige der erstaunlichen Electron-Apps und fügen Sie Ihre eigene hinzu, wenn sie noch nicht vorhanden ist.

Electron downloads

Electron API Demos

Along with the 1.0 release, we're releasing a new app to help you explore the Electron APIs and learn more about how to make your Electron app feel native. Zusammen mit dem 1. freisetzen, wir veröffentlichen eine neue App, um dir zu helfen, die Electron-APIs zu erkunden und mehr darüber zu erfahren, wie du deine Electron-App einheimisch machen kannst.

Electron API Demos

Devtron

We've also added a new extension to help you debug your Electron apps. Devtron ist eine Open-Source-Erweiterung für die Chrome Developer Tools , die Ihnen helfen sollen, zu prüfen, debuggen und Ihre Electron-App beheben.

Devtron

Features

  • Require graph that helps you visualize your app's internal and external library dependencies in both the main and renderer processes
  • IPC monitor that tracks and displays the messages sent and received between the processes in your app
  • Event inspector that shows you the events and listeners that are registered in your app on the core Electron APIs such as the window, app, and processes
  • App Linter that checks your apps for common mistakes and missing functionality

Spectron

Schließlich veröffentlichen wir eine neue Version von Spectron, dem Integration Test-Framework für Electron-Apps.

Spectron

Spectron 3.0 has comprehensive support for the entire Electron API allowing you to more quickly write tests that verify your application's behavior in various scenarios and environments. Spectron basiert auf ChromeDriver und WebDriverIO so dass es auch volle APIs für die Seitennavigation hat, Benutzer Eingabe und JavaScript-Ausführung.

Community

Electron 1.0 is the result of a community effort by hundreds of developers. Outside of the core framework, there have been hundreds of libraries and tools released to make building, packaging, and deploying Electron apps easier.

Es gibt jetzt eine neue Community Seite, die viele der fantastischen zu entwickelnden Elektrowerkzeuge, Apps, Bibliotheken und Frameworks auflistet. Sie können sich auch die Electron und Electron Userland Organisationen ansehen, um einige dieser fantastischen Projekte zu sehen.

New to Electron? Watch the Electron 1.0 intro video:

Was ist neu in Electron 0.37

· Die Lesezeit beträgt 4 min

Electron 0.37 wurde vor kurzem veröffentlicht und beinhaltet ein großes Upgrade von Chrome 47 zu Chrome 49 und auch mehrere neue Kern-APIs. Dieses neuste Release bringt alle neuen Features von Chrome 48 und Chrome 49 mit. Dies beinhaltet CSS custom Properties, erweiterte ES6-Unterstützung, KeyboardEvent-Verbesserungen, Promise-Verbesserungen und viele andere neue Features, welche jetzt in deiner Electron-App zur Verfügung stehen.


Was ist neu

CSS Custom Properties

Wenn Sie preprocessed Sprachen wie Sass und Less verwendet haben, sind Sie wahrscheinlich mit _Variablen_vertraut, mit denen Sie wiederverwendbare Werte für Dinge wie Farbschemata und Layouts definieren können. Variablen helfen dabei, Ihre Stylesheets DRY und wartbarer zu halten.

CSS custom properties ähneln preprocessed Variablen, da sie wiederverwendbar sind, aber sie haben auch eine einzigartige Qualität, die sie noch mächtiger und flexibler macht: sie können mit JavaScript manipuliert werden. This subtle but powerful feature allows for dynamic changes to visual interfaces while still benefitting from CSS's hardware acceleration, and reduced code duplication between your frontend code and stylesheets.

Weitere Informationen zu CSS custom properties finden Sie im MDN Artikel und in der Google Chrome Demo.

CSS-Variablen in Aktion

Gehen wir durch ein einfaches variables Beispiel, das live in deiner App angepasst werden kann.

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

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

Der Variablenwert kann direkt in JavaScript abgerufen und geändert werden:

// Holt den Variablenwert ' #A5ECFA'
let color = window
.getComputedStyle(document.body)
.getPropertyValue('--awesome-color');

// Variablenwert auf 'orange' setzen
document.body.style.setProperty('--awesome-color', 'orange');

Die Variablenwerte können auch aus dem Styles Abschnitt der Entwicklungstools bearbeitet werden, um schnelle Rückmeldungen und Optimierungen zu erhalten:

CSS Eigenschaften im Stile Tab

KeyboardEvent.code Eigenschaft

Chrome 48 hat die neue code Eigenschaft für KeyboardEvent Ereignisse hinzugefügt, die die physikalische Taste, unabhängig vom Betriebssystem-Tastaturlayout, die gedrückt wurde, angibt.

Dies sollte die Implementierung benutzerdefinierter Tastaturkürzel in Ihrer Electron-App über Maschinen und Konfigurationen hinweg genauer und konsistenter machen.

window.addEventListener('keydown', function (event) {
console.log(`${event.code} wurde gedrückt.`);
});

Schauen Sie sich dieses Beispiel an, um es in Aktion zu sehen.

Promise Rejection Events

Chrome 49 hat zwei neue window Events hinzugefügt, die es Ihnen erlauben, benachrichtigt zu werden, wenn eine abgelehnte Promise nicht verarbeitet wird.

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

Schauen Sie sich dieses Beispiel an, um es in Aktion zu sehen.

ES2015 Updates in V8

Die Version von V8 jetzt in Electron beinhaltet 91% von ES2015. Hier sind ein paar interessante Ergänzungen, die Sie out of the Box verwenden können – ohne Flags oder pre-compilers:

Standardparameter

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

multiply(5); // 5

Destructuring assignment

Mit Chrome 49 wurde die destructuring assignment hinzugefügt, um die Zuweisung von Variablen und Funktionsparametern zu vereinfachen.

Dies macht Electron sauberer und kompakter, um es jetzt zuzuweisen:

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

Neue Electron-APIs

Einige der neuen Electron-APIs sind unten, Sie können jede neue API in den Versionshinweisen für Electron Releases sehen.

show und hide Events auf BrowserWindow

Diese Ereignisse werden emittiert, wenn das Fenster entweder angezeigt oder ausgeblendet wird.

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

let window = new BrowserWindow({ width: 500, height: 500 });
window.on('show', function () {
console.log('Fenster wurde angezeigt');
});
window.on('hide', function () {
console.log('Fenster wurde versteckt');
});

platform-theme-changed auf app für OS X

Dieses Event wird emittiert, wenn der Dunkle Modus des Systems aktiviert ist.

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

app.on('platform-theme-changed', function () {
console.log(`Plattform Thema geändert. Im dunklen Modus? ${app.isDarkMode()}`);
});

app.isDarkMode() für OS X

Diese Methode gibt true zurück, wenn sich das System im Dunklen Modus befindet, andernfalls false.

scroll-touch-begin und scroll-touch-end Ereignisse im BrowserWindow für OS X

Diese Ereignisse werden emittiert, wenn die scroll wheel event Phase begonnen hat oder beendet ist.

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

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

API Changes Coming in Electron 1.0

· Die Lesezeit beträgt 4 min

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

Built-in modules are now grouped into one module, instead of being separated into independent modules, so you can use them without conflicts with other 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:

// Im Hauptprozess.
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

Was ist neu in Electron

· Die Lesezeit beträgt 2 min

Kürzlich gab es einige interessante Neuigkeiten und Diskussionen über Electron. Hier ist eine Zusammenfassung.


Source

Electron v0.32.0 ist nun mit Chrome 45 aktualisiert worden. Weitere Aktualisierungen beinhalten...

Bessere Dokumentation

new docs

Die Dokumentation wurde von uns restrukturiert und standardisiert, damit sie besser aussieht und leichter zu lesen ist. Es sind auch Übersetzungen der Dokumentation vorhanden, die von einer Gemeinschaft freiwilliger Übersetzer angefertigt worden sind, beispielsweise Japanisch und Koreanisch.

Verwandte Pull-Anfrage: 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

Electron wird ab v0.33.0 mit Node.js 4.1.0 geliefert.

Verwandte Pull-Anfrage: electron/electron#2817.

node-pre-gyp

Modules relying on node-pre-gyp can now be compiled against Electron when building from source.

Related pull request: mapbox/node-pre-gyp#175.

ARM Support

Electron now provides builds for Linux on ARMv7. It runs on popular platforms like Chromebook and Raspberry Pi 2.

Related issues: atom/libchromiumcontent#138, electron/electron#2094, electron/electron#366.

Yosemite-style Frameless Window

frameless window

A patch by @jaanus has been merged that, like the other built-in OS X apps, allows creating frameless windows with system traffic lights integrated on OS X Yosemite and later.

Related pull request: electron/electron#2776.

Google Summer of Code Printing Support

After the Google Summer of Code we have merged patches by @hokein to improve printing support, and add the ability to print the page into PDF files.

Related issues: electron/electron#2677, electron/electron#1935, electron/electron#1532, electron/electron#805, electron/electron#1669, electron/electron#1835.

Atom

Atom has now upgraded to Electron v0.30.6 running Chrome 44. An upgrade to v0.33.0 is in progress on atom/atom#8779.

Vorträge

GitHubber Amy Palamountain gave a great introduction to Electron in a talk at Nordic.js. She also created the electron-accelerator library.

Building native applications with Electron by Amy Palomountain

Ben Ogle, also on the Atom team, gave an Electron talk at YAPC Asia:

Building Desktop Apps with Web Technologies by Ben Ogle

Atom team member Kevin Sawicki and others gave talks on Electron at the Bay Are Electron User Group meetup recently. The videos have been posted, here are a couple:

The History of Electron by Kevin Sawicki

Making a web app feel native by Ben Gotow