Electron, Frontend Masters

Transcript

1. Setup Instructions http://tinyurl.com/fem-electron (Pull from master one more time on each repository if you cloned them yesterday.)
2. Building Desktop Applications with Electron Steve Kinney — @stevekinney
3. I'm Steve. @stevekinney
4. http://turing.io
5. http://bit.ly/electronjs
6. http://dinosaurjs.org
7. Today's Flow Take a 10,000 Foot View Build a Simple Bookmarking Application Build a More Complicated Markdown Text Editor Build a Menu Bar Application Package an Application Distribution Tour Some of the Finer Points of the Ecosystem
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.
19. @noopkat
24. sindresorhus/caprine
25. Why is Electron so super cool?
28. Chrome Content Module HTML5 support GPU acceleration Blink and V8
29. Node 6.5.0 Filesystem access Native modules
32. 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
35. HTML Imports Shadow DOM Custom Elements Web MIDI API (…and other hard to draw APIs…)
37. The web browser lives in a kind of sandbox with a bunch of restrictions in place in the name of security.
40. Electron applications have all of the freedom of any other Node process.
42. require(…);
46. You get to choose.
58. muan/mojibar
59. How does Electron work?
60. Let's take a look at a everything from a high level before we dig in.
61. npm install -g electron
81. Inherently, offline first.
88. Building a menu
89. And more…
91. versus
99. No good.
101. electron.remote
109. Let's get started. https://tinyurl.com/fem-electron http://41391da0.ngrok.io
110. Code time.
111. Building Menu Bar Applications with Electron
112. npm install menubar
115. Code time.
116. Distribution
117. npm install electron-packager
119. Code time.
121. npm install electron
122. What about JSX or SASS or LESS?
123. npm install electron-prebuilt-compile npm install electron-packager-compile
124. Want better insight into the user's macOS settings?
125. npm install electron-osx-appearance
126. What about an application that launches when the OS boots?
127. npm install auto-launch
128. Need a graphical user interface for sudo?
129. npm install electron-sudo
130. Want to have local shortcuts that aren't menu items?
131. npm install electron-localshortcut
132. Want to use the latest and greatest features coming to JavaScript?
133. npm install babel-preset-electron
134. Did watching me try to manage state make you want to cry?
135. npm install electron-redux
136. What about Ember CLI?
137. ember install ember-electron
140. sindresorhus/awesome-electron
142. Electron in Action: http://bit.ly/electronjs Turing School: http://turing.io Thank You Twitter: @stevekinney