Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nativize is the new Normalize

Bf47d3b9da3655bf19e815aaa5446d4a?s=47 Jessica
September 26, 2016

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



September 26, 2016

More Decks by Jessica

Other Decks in Programming


  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

  16. How do we design for this new environment?

  17. Electron apps should feel like apps, not websites. The catch

  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

  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