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

Nativize is the new Normalize

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

Jessica

September 26, 2016
Tweet

More Decks by Jessica

Other Decks in Programming

Transcript

  1. Electron A library for creating desktop apps with web technology.

    JavaScript, HTML, CSS Windows, Mac, Linux
  2. Electron’s Insides Chromium Node.js Native APIs Electron + + =

    filesystems, networks for 3 operating systems for drawing webpages
  3. 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.
  4. Node.js Seamlessly use Node everywhere. Even in your HTML. <script>

    var os = require(‘os’) console.log(os.homedir()) <script>
  5. var dialog = require(‘electron').dialog dialog.showOpenDialog({ properties: [‘openFile’] })) Native APIs

    Electron provides an API for native OS operations & targets the right OS.
  6. 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.
  7. (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
  8. 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
  9. 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
  10. 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; }
  11. 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.
  12. No rubber-banding DESIGN html { /* Prevents rubber-band scrolling of

    the whole "page" */ height: 100%; overflow: hidden; }
  13. 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
  14. 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()
  15. 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
  16. 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.
  17. 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.
  18. .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
  19. 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', }
  20. 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
  21. 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' })
  22. 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
  23. 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
  24. Use the menu conventions of each of the platforms. For

    example, ‘Preferences…’ on Mac and ‘Settings’ on Windows. Menus INTERACTIONS
  25. 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
  26. 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
  27. INTERACTIONS Saving the screen state (size and position) Use desktop

    notifications Drag and drop onto app icon Launch app upon startup Other nice things
  28. 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
  29. 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