HIGH VALUE APPS ARE MOVING TO THE DESKTOP Confoo 2016 • Vancouver, BC Using Electron & Web Technologies for Great Desktop Experiences 

BORIS MANN
 @BMANN Product Consulting & Business Design 

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 

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 

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 

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 

HIGH VALUE APPS LOST IN TABS $200 - $500 per year apps next to cat videos 

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” 

ELECTRON electron.atom.io 

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

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

WHAT YOU GET WITH ELECTRON ➤ Automatic updates ➤ Native menus & notifications ➤ App crash reporting ➤ Debugging & profiling ➤ Windows installers 

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 

MOBILE APP? ➤ A mobile app has very different context and usage than a desktop app 

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 

HIGH VALUE APPS NEED A GREAT DESKTOP EXPERIENCE 

“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 

INTERNAL PRODUCTIVITY ➤ The team at Algolia built an Alfred / Spotlight inspired desktop app ➤ Most of their staff are on their desktops all day 

WHAT IS ELECTRON? 

–J Lord, Essential Electron 

“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 

“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 

MAIN PROCESS + RENDERER Building a desktop app with Electron, Kristian Poslek 

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 

“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 

“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 

“…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 

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 

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? 

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 

THANKS! @BMANN http://speakerdeck.com/bmann