Building Native Experiences with Electron

1. Building “Native” Experiences with Electron Ben Gotow (@bengotow)

2. Building “Native” Experiences with Electron Beautiful apps that behave the way users expect Ben Gotow (@bengotow)

3. Kitematic

4. Window Frame Remove the standard frame by passing BrowserWindow the  {frame: false} option.  Add custom window controls to the document body.  <div name="ToolbarWindowControls" class="toolbar-window-controls"> <button class="close" onClick="require('remote').getCurrentWindow().close()"></button> <button class="minimize" onClick="require('remote').getCurrentWindow().minimize()"></button> <button class="maximize" onClick="require('remote').getCurrentWindow().maximize()"></button> </div>

5. Draggable Toolbars -webkit-app-region allows you to specify that all or part of the DOM is the window drag handle. Caveats: • The visibility and z-index of drag regions does not matter. • Your app does not receive any click events inside drag regions. .toolbar { -webkit-app-region: drag; .toolbar-window-controls { -webkit-app-region: no-drag; } }

6. Kitematic, Mac OS X Kitematic, Windows

7. Add a platform class to the document body, and use it to change the appearance of toolbars and buttons.    Really intense: Read Mac OS X defaults to detect appropriate gumdrop colors and styles. Platform-speciﬁc Style document.body.classList.add(“platform" + process.platform) defaults read -g AppleAquaColorVariant defaults read -g AppleInterfaceStyle

8. Focus

9. Focus Attach an additional blurred CSS class to <body> when the window is blurred, adjust styling of: • Window frame • Selected items • Buttons Caveats: • Listen to BrowserWindow blur/ focus, not window blur/focus, which triggers when you focus iFrames.

10. Focus Main Process Renderer Process @browserWindow.on ’focus’, =>  @browserWindow.webContents.send(‘browser-window-focus’) @browserWindow.on ’blur’, =>  @browserWindow.webContents.send(‘browser-window-blur’) ipc.on ’browser-window-focus’, =>  document.body.classList.remove(‘blurred’)  ipc.on ’browser-window-blur’, =>  document.body.classList.add(‘blurred’)

11. First Mouse • Use accept-first-mouse: true • On Windows, you can click window contents from the background. • On Mac OS X, you can click toolbar items and window controls from the background. (Use pointer-events:none to disable background interaction with everything else.)

12. Cursor Considerations for Mac OS X • Stick to standard cursors. Use the hand cursor sparingly. On the Mac, it is typically only seen in web views. • Hover states are only used to reveal additional hidden options (like an X on a tab). Buttons, tabs, links, etc. have no hover states.

13. Images • Apply -webkit-user-drag: none to all images and   -webkit-user-drag: text to everything else. • Support Retina displays! Choose images based on window.devicePixelRatio  • Scale images by manually declaring their width and height, or specifying CSS zoom:0.5 when on a retina display.  

14. Sound • Use with care! Unlike mobile apps, desktop software rarely makes noise. There are no audible clicks, pops, bounces. • Sound should accompany actions when impact may not be obvious. playSound: (filename) ->  a = new Audio() a.src = path.join(resourcePath, ‘static’, ‘sounds’, filename) a.autoplay = true a.play()

15. Retina Borders • Chrome CSS borders must be 1pt - on Retina displays, they render as two pixels. But you /can/ make half-point box shadows. box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15), 0 1px 1px rgba(0, 0, 0, 0.15);

16. ben@nylas.com

17. Meet user expectations, or communicate new expectations?

18. Meet user expectations, or communicate new expectations?

19. Change Expectations • Avoids the uncanny valley by using interface elements that communicate platform standards do not apply. • Users don’t expect Spotify to behave like Windows or Mac OS X