High Value Apps are Moving to the Desktop

Presented at Confoo 2016 in Vancouver, BC

Using Electron & Web Technologies for Great Desktop Experiences

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