Introduction to Electron: Turing School Edition

Transcript

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

   View Slide

2. View Slide

3. Electron (née Atom Shell)
   

   View Slide

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

   View Slide

5. View Slide

6. So, why would you want to
   use this Electron thing?
   

   View Slide

7. You want to build an application
   that has advanced permissions
   like accessing the file system.
   

   View Slide

8. You want to build a small
   application that lives in the
   user’s menubar or system tray.
   

   View Slide

9. You want to build an app
   that works well offline.
   

   View Slide

10. You want to be able to
    Command/Alt-Tab to your
    application.
    

    View Slide

11. You want to build a GUI
    for your Node
    application.
    

    View Slide

12. @noopkat
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. sindresorhus/caprine
    

    View Slide

18. Why is Electron so
    super cool?
    

    View Slide

19. View Slide

20. View Slide

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

    View Slide

22. Node 6.5.0
    Filesystem access
    Native modules
    

    View Slide

23. View Slide

24. View Slide

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
    

    View Slide

26. View Slide

27. View Slide

28. HTML Imports
    Shadow DOM
    Custom Elements
    Web MIDI API
    (…and other hard to draw APIs…)
    

    View Slide

29. View Slide

30. The web browser lives in a kind of
    sandbox with a bunch of restrictions
    in place in the name of security.
    

    View Slide

31. View Slide

32. View Slide

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

    View Slide

34. View Slide

35. require(…);
    

    View Slide

36. View Slide

37. View Slide

38. View Slide

39. You get to choose.
    

    View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. muan/mojibar
    

    View Slide

52. How does Electron
    work?
    

    View Slide

53. Let's take a look at a
    everything from a high
    level before we dig in.
    

    View Slide

54. npm install -g
    electron
    

    View Slide

55. View Slide

56. View Slide

57. View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. View Slide

70. View Slide

71. View Slide

72. View Slide

73. View Slide

74. Inherently,
    offline first.
    

    View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. View Slide

80. View Slide

81. Building a menu
    

    View Slide

82. And more…
    

    View Slide

83. View Slide

84. versus
    

    View Slide

85. View Slide

86. View Slide

87. View Slide

88. View Slide

89. View Slide

90. View Slide

91. View Slide

92. No good.
    

    View Slide

93. View Slide

94. electron.remote
    

    View Slide

95. View Slide

96. View Slide

97. View Slide

98. View Slide

99. View Slide

100. View Slide

101. View Slide

102. npm install menubar
     

     View Slide

103. View Slide

104. View Slide

105. Distribution
     

     View Slide

106. npm install
     electron-packager
     

     View Slide

107. View Slide

108. View Slide

109. npm install
     electron
     

     View Slide

110. What about JSX
     or SASS or LESS?
     

     View Slide

111. npm install
     electron-prebuilt-compile
     npm install
     electron-packager-compile
     

     View Slide

112. Want better insight into
     the user's macOS settings?
     

     View Slide

113. npm install
     electron-osx-appearance
     

     View Slide

114. What about an application
     that launches when the OS
     boots?
     

     View Slide

115. npm install
     auto-launch
     

     View Slide

116. Need a graphical user
     interface for sudo?
     

     View Slide

117. npm install
     electron-sudo
     

     View Slide

118. Want to have local
     shortcuts that aren't menu
     items?
     

     View Slide

119. npm install
     electron-localshortcut
     

     View Slide

120. Want to use the latest and
     greatest features coming
     to JavaScript?
     

     View Slide

121. npm install
     babel-preset-electron
     

     View Slide

122. Did watching me try to
     manage state make you
     want to cry?
     

     View Slide

123. npm install
     electron-redux
     

     View Slide

124. What about
     Ember CLI?
     

     View Slide

125. ember install
     ember-electron
     

     View Slide

126. View Slide

127. View Slide

128. sindresorhus/awesome-electron
     

     View Slide

129. View Slide

130. Fin.
     

     View Slide