Building Desktop Applications with Electron, JSConf Colombia 2016

Transcript

1. http://bit.ly/electron-jsconfco 
 Clone down the two repositories and run npm install in each.
2. Building Desktop Applications with Electron Steve Kinney — @stevekinney JSConf Colombia 2016
3. Hi. I'm Steve
 @stevekinney
4. http://turing.io
5. http://dinosaurjs.org
6. http://bit.ly/electronjs
10. Electron (née Atom Shell)
11. Electron (née Atom Shell) A framework for building cross-platform desktop applications with web technologies.
13. So, why would you want to use this Electron thing?
14. You want to build an application that has advanced permissions like accessing the file system.
15. You want to build a small application that lives in the user’s menubar or system tray.
16. You want to build an app that works well offline.
17. You want to be able to Command/Alt-Tab to your application.
18. You want to build a GUI for your Node application.
23. sindresorhus/caprine
24. Why is Electron so super cool?
26. Chrome Content Module HTML5 support GPU acceleration Blink and V8
27. Node 6.5.0 Filesystem access Native modules
30. Electron uses a pretty modern build of Chromium. Electron: 1.4.3 Node: 6.5.0 Chromium: 53.0.2785.113 V8: 5.3.332.45
34. The web browser lives in a kind of sandbox with a bunch of restrictions in place in the name of security.
37. Electron applications have all of the freedom of any other Node process.
39. require(…);
43. hij1nx/levelui
54. muan/mojibar
55. How does Electron work?
56. Let's take a look at a everything from a high level before we dig in.
57. npm install -g electron-prebuilt
77. Inherently, offline first.
85. versus
93. No good.
95. electron.remote
105. Building a menu
106. electron.Menu
115. electron.globalShortcut
116. electron.globalShortcut
117. electron.globalShortcut
118. And more…
125. Let's get started.
127. npm install electron-prebuilt
128. npm install menubar
131. What about JSX or SASS or LESS?
132. npm install electron-prebuilt-compile npm install electron-packager-compile
133. What about Ember CLI?
134. ember install ember-electron
135. npm install electron-packager
138. sindresorhus/awesome-electron
140. Turing School: http://turing.io Electron in Action: http://bit.ly/electronjs ¡Gracias! Twitter: @stevekinney