Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Introduction to Electron: Turing School Edition

Avatar for Steve Kinney Steve Kinney
November 30, 2016
0
270

Introduction to Electron: Turing School Edition

Avatar for Steve Kinney

Steve Kinney

November 30, 2016
Tweet

More Decks by Steve Kinney

See All by Steve Kinney
Introduction to Testing
Avatar for Steve Kinney stevekinney
0
100
Web Security, Frontend Masters
Avatar for Steve Kinney stevekinney
0
3.2k
Making Music with the Web Audio API, JSConf Colombia 2023
Avatar for Steve Kinney stevekinney
0
99
React and TypeScript, Turing School
Avatar for Steve Kinney stevekinney
0
330
Redux Workshop, 2021-05-05
Avatar for Steve Kinney stevekinney
2
2.1k
TypeScript and React Utility Types
Avatar for Steve Kinney stevekinney
1
200
A Gentle Introduction to GraphQL Resolvers
Avatar for Steve Kinney stevekinney
1
160
React State
Avatar for Steve Kinney stevekinney
11
10k
React State: useEffect and Custom Hooks
Avatar for Steve Kinney stevekinney
0
240

Featured

See All Featured
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.1k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
30
5.7k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
990
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.9k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
54k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.4k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k

Transcript

  1. Building Desktop Applications with Electron Steve Kinney — @stevekinney

  2. None

  3. Electron (née Atom Shell)

  4. Electron (née Atom Shell) A framework for building cross-platform desktop

    applications with web technologies.
  5. None

  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

  13. None
  14. None
  15. None
  16. None

  17. sindresorhus/caprine

  18. Why is Electron so super cool?

  19. None
  20. None

  21. Chrome Content Module HTML5 support GPU acceleration Blink and V8

  22. Node 6.5.0 Filesystem access Native modules

  23. None
  24. None

  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
  26. None
  27. None

  28. HTML Imports Shadow DOM Custom Elements Web MIDI API (…and

    other hard to draw APIs…)
  29. None

  30. The web browser lives in a kind of sandbox with

    a bunch of restrictions in place in the name of security.
  31. None
  32. None

  33. Electron applications have all of the freedom of any other

    Node process.
  34. None

  35. require(…);

  36. None
  37. None
  38. None

  39. You get to choose.

  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None

  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

  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None

  74. Inherently, offline first.

  75. None
  76. None
  77. None
  78. None
  79. None
  80. None

  81. Building a menu

  82. And more…

  83. None

  84. versus

  85. None
  86. None
  87. None
  88. None
  89. None
  90. None
  91. None

  92. No good.

  93. None

  94. electron.remote

  95. None
  96. None
  97. None
  98. None
  99. None
  100. None
  101. None

  102. npm install menubar

  103. None
  104. None

  105. Distribution

  106. npm install electron-packager

  107. None
  108. None

  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

  126. None
  127. None

  128. sindresorhus/awesome-electron

  129. None

  130. Fin.