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

High Value Apps are Moving to the Desktop

Boris Mann
December 06, 2016

High Value Apps are Moving to the Desktop

Presented at Confoo 2016 in Vancouver, BC

Using Electron & Web Technologies for Great Desktop Experiences

Boris Mann

December 06, 2016

More Decks by Boris Mann

Other Decks in Technology



    • Vancouver, BC Using Electron & Web Technologies for Great Desktop Experiences
  2. OUTLINE ➤ Developers, designers and others whose day job is

    spent using a professional desktop OS are demanding more than having their apps trapped in browser tabs. ➤ High value apps such as Slack, Microsoft Visual Studio Code, Brave browser are using web technologies to run on the desktop ➤ Using Electron to build native desktop apps, and why you should care

    argue this point? ➤ For the “next billion”, mobile will be their first and only computing platform — Android or iOS ➤ Even today, non-professional usage is best served by mobile OS

    multiple screens, multiple hours at a time ➤ Switching between multiple apps ➤ Special hardware: sensors, devices, inputs ➤ e.g. Architecture, Programming, Design, Art, Photo Editing
  5. PROFESSIONAL DESKTOP OS ➤ Roughly, macOS, Windows, Linux ➤ Many

    apps, multiple windows ➤ General purpose: install anything and everything ➤ Context for usage is seated with keyboard, mouse, and screen as primary input / output devices
  6. HIGH VALUE APPS LOST IN TABS $200 - $500 per

    year apps next to cat videos
  7. WHY DO YOU WANT A DESKTOP APP? ➤ Focus: Alt-Tab,

    windowing support ➤ Capabilities: Access native desktop functionality — shortcuts, notifications, menu bar, Spotlight ➤ Convenience: from menu bar to “always there”
  8. WHAT YOU GET WITH ELECTRON ➤ Automatic updates ➤ Native

    menus & notifications ➤ App crash reporting ➤ Debugging & profiling ➤ Windows installers
  9. EXAMPLE: QUIP ➤ Quip is a collaborative note taking /

    wiki thing that is awesome; like the “Slack of documents” ➤ They made a desktop app in Electron ➤ On macOS, it pushes all your documents into local Spotlight search index
  10. MAKER TIME VS. MANAGER TIME ➤ Paul Graham essay, Maker’s

    Schedule, Manager’s Schedule, June 2009 ➤ Makers are sitting at desktops, and customize their professional desktop os, with tools that they use hours at a time ➤ The focus and availability of alt-tab and window management is crucial
  11. “We wanted something that could be available at the touch

    of a button, without even needing to open a browser. We wanted to put every one of our internal tools, the answers they held to our questions, and the solutions they held to our problems at our fingertips. –Algolia Stories
  12. INTERNAL PRODUCTIVITY ➤ The team at Algolia built an Alfred

    / Spotlight inspired desktop app ➤ Most of their staff are on their desktops all day
  13. “Electron combines Chromium and Node.js with a set of custom

    APIs for native operating system functions like open file dialogs, notifications, icons and more. –J Lord, Essential Electron
  14. “Electron is a library you can use to build desktop

    applications with JavaScript, HTML and CSS. These applications can be packaged to run on Mac, Windows and Linux computers as well as be placed in the Mac and Windows app stores. –J Lord, Essential Electron
  15. HOW IS ELECTRON NOT LIKE WEB DEV? ➤ Targeting only

    a single browser — the latest version of Chromium ➤ Can have all assets and code locally ➤ Or mix and match local (large!) assets and remote API calls and assets ➤ In many ways, a more controlled environment
  16. “Unlike a 100% in-box approach that some other apps take,

    Slack takes a hybrid approach where we ship some of the assets as part of the app, but most of the assets and code are loaded remotely. –Slack Engineering
  17. “Our app has migrated from a CoffeeScript application written with

    vanilla DOM APIs to a modern ES6 + async/await React application, and we’re currently incrementally moving our app to TypeScript –Slack Engineering
  18. “…the new Slack Desktop app helps our development team have

    the best of both worlds — the rapid iteration and ecosystem of web development, and the ability (with a bit of C++ and elbow grease!) to access the underlying operating system in ways that websites can’t reach. –Slack Engineering
  19. THE BUSINESS CASE FOR ELECTRON ➤ Single pay desktop apps

    are tough to make sustainable ➤ SaaS apps are stuck in browser tabs and have low switching costs ➤ Companion desktop apps for SaaS add value to the professional desktop OS user ➤ Activate app store distribution channel
  20. WHAT TO BUILD FOR DESKTOP ➤ If you make a

    web app that has high usage on desktop, you should consider making a desktop app ➤ Look at the context and users of your service: support maker activities ➤ Ask yourself, what does it mean to combine the best of the web and the desktop?
  21. RESOURCES ➤ Essential Electron, J Lord http://jlord.us/essential-electron/ ➤ Electron Awesome

    List, Sindre Sorhus https://github.com/ sindresorhus/awesome-electron ➤ Building a Desktop Applications with Electron, Kristian Poslek https://medium.com/developers-writing/building-a-desktop- application-with-electron-204203eeb658#.xewp6hx57 ➤ Building Hybrid Applications with Electron, Slack Engineering https://slack.engineering/building-hybrid-applications-with- electron-dc67686de5fb ➤ How Algolia uses Electron to improve internal productivity, Algolia Stories https://stories.algolia.com/how-algolia-uses-electron-to- improve-internal-productivity-8e89efe60b59