Nativize is the new Normalize

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).

Transcript

1. Nativize is the New Normalize Jessica Lord @jllord CSSConf 2016
2. Hello!
3. Nativize is the new normalize when websites become desktop apps with Electron.
4. Making an app made up of websites feel native.
5. Before we begin, what is Electron, even?
6. Electron is library for creating desktop apps with web technology.
7. Electron A library for creating desktop apps with web technology. JavaScript, HTML, CSS Windows, Mac, Linux
8. Electron Open source, maintained by GitHub & contributors. github.com/electron
9. Electron’s Insides Chromium Node.js Native APIs Electron + + = filesystems, networks for 3 operating systems for drawing webpages
10. Chromium So you get the DOM, everything that ships in the latest Chrome plus all of Node. 53 soon to be 54 Electron uses the part of the open source core of Chrome that renders web pages.
11. Node.js Seamlessly use Node everywhere. Even in your HTML. <script> var os = require(‘os’) console.log(os.homedir()) <script>
12. var dialog = require(‘electron').dialog dialog.showOpenDialog({ properties: [‘openFile’] })) Native APIs Electron provides an API for native OS operations & targets the right OS.
13. Electron It’s like making a website, but only caring about 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.
14. Electron API Demos App
15. (A few) Electron Apps ATO M S L AC K V I S UA L ST U D I O C O D E P I X AT E B R AV E
16. How do we design for this new environment?
17. Electron apps should feel like apps, not websites. The catch is—
18. You trade supporting multiple browsers for multiple systems. The other one is—
19. Design
20. Nativize your CSS In Electron apps, to nativize is to do what you wouldn’t do on the web, but that’s the point—don’t act like a website. DESIGN
21. No selecting, dragging or gloves html { -webkit-user-select: none; /* disable selection */ -webkit-user-drag: none; /* disable dragging */ cursor: default; /* use default cursor */ } button { cursor: default; } DESIGN
22. No dragging images DESIGN img { -webkit-user-drag: none; /* disable dragging */ }
23. Unless you need it DESIGN External link, pointer Button, default cursor Code sample, selectable
24. Unless you need it .is-selectable, pre, code { -webkit-user-select: auto; cursor: auto; } DESIGN a { cursor: pointer; text-decoration: none; border-bottom: 1px dashed; outline: none; }
25. Target external links DESIGN a[target], a[href^="https://"], a[href^="http://"] { border-bottom: 1px solid; } This targets all links that open into a new window, styles here should consider accessibility.
26. No rubber-banding DESIGN html { /* Prevents rubber-band scrolling of the whole "page" */ height: 100%; overflow: hidden; }
27. Custom UI or native Electron provides access to native menus and dialogs but your app’s UI is up to you. DESIGN emulate or follow your heart
28. Window frames DESIGN default frame: false titleBarStyle: ‘hidden’ titleBarStyle: ‘hidden-inset’ Mac Mac
29. Window frames You can keep the native window frame or not. DESIGN var BrowserWindow = require(‘electron’).BrowserWindow var win = new BrowserWindow({ frame: false }) win.show()
30. Transparent Windows DESIGN frame: false, transparent: true html, body { background: rgba(239, 180, 158, 0.61); }
31. Frameless Windows DESIGN You must roll your own toolbar UI, 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
32. Invisible Windows DESIGN You can create as many windows as you want in your app as well as create invisible windows just to be running JS in the background.
33. DESIGN Frame
34. DESIGN Hidden
35. DESIGN HyperTerm & WebTorrent
36. DESIGN Custom UI Vectr
37. DESIGN Custom UI Simplenote
38. DESIGN Emulate Native UI Nylas’s N1 app on Mac
39. DESIGN Nylas’s N1 app on Windows Emulate Native UI
40. DESIGN Swap UI with classes document.body.classList.add("platform" + process.platform)
41. DESIGN Customizing systemPreferences.isDarkMode() SystemPreferences.getAccentColor() Go beyond the operating system and get the colors the users has set on their machine. Mac Windows
42. DESIGN mzdr.github.io/timestamp
43. DESIGN Photon (Mac only, below), React Desktop (Mac, Windows) Toolkits reactdesktop.js.org photonkit.com
44. DESIGN Avoid web-like flashing and loading between pages. Single Page Apps
45. DESIGN Pick your favorite flavor of front end framework—or don’t and use HTML Imports. Single Page Apps DevTools extension support for: Ember, React, Backbone, jQuery, AngularJS Batarang, Vue.js and Cerebral.
46. .icns .ico .png DESIGN Mac Windows Linux You need an icon file for each platform you want to ship to. Icons iconverticons.com/online img2icnsapp.com
47. DESIGN Linux icons are set when the window is created 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', }
48. DESIGN Chrome Features You’re designing for one browser—whatever works in 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
49. Interactions
50. INTERACTIONS Change the background color of your window to match your app and/or consider a snazzy CSS transition. Start up var win = new BrowserWindow({ backgroundColor: ‘#2e2c29' })
51. Start up You can also hide your window until all of the page’s resources have been loaded. var win = new BrowserWindow({ show: false }) win.once('ready-to-show'), function() { win.show() }) INTERACTIONS
52. Start up If you’re making a menubar app, you don’t 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
53. Use the menu conventions of each of the platforms. For example, ‘Preferences…’ on Mac and ‘Settings’ on Windows. Menus INTERACTIONS
54. You can handle these different naming conventions with if statements based on the platform when creating your menu—you’re still creating just one app. Menus INTERACTIONS
55. Menus Add important parts of your app’s UI to the menu and you’ll be able to create shortcuts and make it discoverable via Help. INTERACTIONS
56. INTERACTIONS Protocol Make your app the default for files or have its own protocol.
57. INTERACTIONS Saving the screen state (size and position) Use desktop notifications Drag and drop onto app icon Launch app upon startup Other nice things
58. While you are designing
59. DEVELOPING The devtools you know and love are built into 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
60. DEVELOPING Electron’s Devtron devtools extension uses Google’s accessibility auditing library. Khan Academy’s tota11y pairs well, too. Accessibility
61. DEVELOPING Spectron
62. DEVELOPING Menubar apps are a great gateway into Electron. Menubar apps gh/muan/mojibar gh/maxogden/menubar
63. Electron API Demos app—Demos and useful source code.
 github.com/electron/electron-api-demos Electron 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
64. Spectron—Electron testing library
 electron.atom.io/spectron Devtron—Electron devtools extension (with accessibility audit)
 electron.atom.io/devtron RESOURCES
65. Thanks @catmapper