Introduction to Electron: Turing School Edition

Transcript

1. Building Desktop Applications with Electron Steve Kinney — @stevekinney
3. Electron (née Atom Shell)
4. Electron (née Atom Shell) A framework for building cross-platform desktop applications with web technologies.
6. So, why would you want to use this Electron thing?
7. You want to build an application that has advanced permissions like accessing the file system.
8. You want to build a small application that lives in the user’s menubar or system tray.
9. You want to build an app that works well offline.
10. You want to be able to Command/Alt-Tab to your application.
11. You want to build a GUI for your Node application.
12. @noopkat
17. sindresorhus/caprine
18. Why is Electron so super cool?
21. Chrome Content Module HTML5 support GPU acceleration Blink and V8
22. Node 6.5.0 Filesystem access Native modules
25. Electron uses a pretty modern build of Chromium. Electron: 1.4.6 Node: 6.5.0 Chromium: 53.0.2785.143 V8: 5.3.332.47
28. HTML Imports Shadow DOM Custom Elements Web MIDI API (…and other hard to draw APIs…)
30. The web browser lives in a kind of sandbox with a bunch of restrictions in place in the name of security.
33. Electron applications have all of the freedom of any other Node process.
35. require(…);
39. You get to choose.
51. muan/mojibar
52. How does Electron work?
53. Let's take a look at a everything from a high level before we dig in.
54. npm install -g electron
74. Inherently, offline first.
81. Building a menu
82. And more…
84. versus
92. No good.
94. electron.remote
102. npm install menubar
105. Distribution
106. npm install electron-packager
109. npm install electron
110. What about JSX or SASS or LESS?
111. npm install electron-prebuilt-compile npm install electron-packager-compile
112. Want better insight into the user's macOS settings?
113. npm install electron-osx-appearance
114. What about an application that launches when the OS boots?
115. npm install auto-launch
116. Need a graphical user interface for sudo?
117. npm install electron-sudo
118. Want to have local shortcuts that aren't menu items?
119. npm install electron-localshortcut
120. Want to use the latest and greatest features coming to JavaScript?
121. npm install babel-preset-electron
122. Did watching me try to manage state make you want to cry?
123. npm install electron-redux
124. What about Ember CLI?
125. ember install ember-electron
128. sindresorhus/awesome-electron
130. Fin.