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

High Value Apps are Moving to the Desktop

725e3e8f63148459cdbb84f4d673d0ad?s=47 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

725e3e8f63148459cdbb84f4d673d0ad?s=128

Boris Mann

December 06, 2016
Tweet

Transcript

  1. HIGH VALUE APPS ARE MOVING TO THE DESKTOP Confoo 2016

    • Vancouver, BC Using Electron & Web Technologies for Great Desktop Experiences
  2. BORIS MANN
 @BMANN Product Consulting & Business Design

  3. 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
  4. MASS MARKET USES MOBILE OS ➤ Do I need to

    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
  5. WHAT IS PROFESSIONAL USAGE OF COMPUTING? ➤ Focused “maker” work:

    multiple screens, multiple hours at a time ➤ Switching between multiple apps ➤ Special hardware: sensors, devices, inputs ➤ e.g. Architecture, Programming, Design, Art, Photo Editing
  6. 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
  7. HIGH VALUE APPS LOST IN TABS $200 - $500 per

    year apps next to cat videos
  8. 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”
  9. ELECTRON electron.atom.io

  10. ORIGINALLY CREATED BY GITHUB FOR ATOM.IO EDITOR atom.io

  11. ELECTRON-POWERED APPS http://electron.atom.io/apps/

  12. WHAT YOU GET WITH ELECTRON ➤ Automatic updates ➤ Native

    menus & notifications ➤ App crash reporting ➤ Debugging & profiling ➤ Windows installers
  13. 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
  14. MOBILE APP? ➤ A mobile app has very different context

    and usage than a desktop app
  15. 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
  16. HIGH VALUE APPS NEED A GREAT DESKTOP EXPERIENCE

  17. “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
  18. INTERNAL PRODUCTIVITY ➤ The team at Algolia built an Alfred

    / Spotlight inspired desktop app ➤ Most of their staff are on their desktops all day
  19. WHAT IS ELECTRON?

  20. –J Lord, Essential Electron

  21. “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
  22. “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
  23. MAIN PROCESS + RENDERER Building a desktop app with Electron,

    Kristian Poslek
  24. 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
  25. “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
  26. “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
  27. “…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
  28. 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
  29. 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?
  30. 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
  31. THANKS! @BMANN http://speakerdeck.com/bmann