Electron, Node, and the New Desktop @ SFNode

Javascript development has been traditionally confined to either web development or server-side development. But what if we could have the best of both worlds in one single Javascript environment? What if we could use the set of tools we know and love to build beautiful, cross-platform Mac, Linux, and Windows desktop applications?

For the past year at Nylas we’ve been using Node, Electron, and modern web technologies to build N1; a highly extensible desktop email client. In this talk we’ll explore how we’ve used these tools to build a whole new kind of desktop app, and peek inside some of the innards behind building an extensible email client while we discover the possibilities this new environment has to offer.

Transcript

1. Electron, Node, and the New Desktop Juan Tejada | @juanstejada | juan@nylas.com | March 2016
2. Building desktop apps is hard
3. Building cross-platform desktop apps is even harder
13. Let’s just build web apps and be done
14. ???
20. github/atom/electron April, 2013 April, 2015 github/atom/atom
22. • New runtime environment for your javascript! • Access to all of Node’s APIs • Access to rich set of Electron APIs • Access to awesome rendering engine and all browser APIs
23. Chromium Browser aka Backend aka Main Process C++ Renderer Renderer Renderer HTML / JS (DOM) HTML / JS (DOM) HTML / JS (DOM) ipc
24. Browser aka Backend aka Main Process Renderer Renderer Renderer HTML / JS (DOM) HTML / JS (DOM) HTML / JS (DOM) ipc
25. main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show() index.html index.js React.render() Work Window Funsies Window ipc
26. Unlocking possibilities
28. Perks of the New Desktop • Many typical front end concerns disappear • No cross-browser concerns • No JS bundling concerns • Access to latest APIs (Chrome and Node are bumped regularly) • Full File System access, robust local data storage
29. Perks of the New Desktop • Native node modules • Full process control — do anything you can imagine with `child_process.spawn` • Lower entry barrier for desktop dev • Faster development, more versatile teams • Open Source
30. Building desktop apps is fun
31. The New Desktop
35. https://github.com/nylas/n1 Open Source
36. github.com/atom-archive/electron-starter Get started
37. Juan Tejada | @juanstejada | juan@nylas.com | March 2016 Thank you Slides here!