This is a talk on how to design an Electron app (made up websites) so that it feels like a native desktop application (which don't feel like websites) and at home on different operating systems (different systems are different).
one browser & getting to use Node & OS features. Apps are HTML, CSS and JS files—there’s a lot of overlap in designing for Electron and the web. You get to write an app once, instead once for each platform.
create a draggable region, make any titlebar text non-selectable and use context menus outside of draggable regions which won’t receive click events. http://electron.atom.io/docs/api/frameless-window
and is also used by Windows. Mac and Windows app icons are set when the app is packaged. Setting Icons var win = new BrowserWindow({ icon: __dirname + 'assets/icon.png', }
Chrome will work in your app: CSS variables, CSS constraints, shadow DOM v1, custom elements v1 (soon) and over 90% of ES6. caniuse.com blog.chromium.org
of the page’s resources have been loaded. var win = new BrowserWindow({ show: false }) win.once('ready-to-show'), function() { win.show() }) INTERACTIONS
want a dock icon or for it to show the app at all initially, but you want the resources to load before the first click. var win = new BrowserWindow({ show: false }) tray.on(‘click’, function (event, bounds) { win.show() }) INTERACTIONS
Electron. When developing, have it open automatically. DevTools var win = new BrowserWindow({ width: 800, height: 600 }) win.loadURL(`file://${__dirname}/index.html`) win.webContents.openDevTools() github.com/sindresorhus/electron-is-dev
Quick Start—Barebones Electron app to get started with. github.com/electron/electron-quick-start Essential Electron—Electron explained simply. jlord.us/essential-electron Awesome Electron—Canonical list of all Electron resources. github.com/sindresorhus/awesome-electron Repos Using Electron—See what people are building with. github.com/zeke/repos-using-electron RESOURCES