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.
   

   View Slide

2. Building Desktop
   Applications with Electron
   Steve Kinney — @stevekinney
   JSConf Colombia 2016
   

   View Slide

3. Hi. I'm Steve

   @stevekinney
   

   View Slide

4. http://turing.io
   

   View Slide

5. http://dinosaurjs.org
   

   View Slide

6. http://bit.ly/electronjs
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. Electron (née Atom Shell)
    

    View Slide

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

    View Slide

12. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. sindresorhus/caprine
    

    View Slide

24. Why is Electron so
    super cool?
    

    View Slide

25. View Slide

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

    View Slide

27. Node 6.5.0
    Filesystem access
    Native modules
    

    View Slide

28. View Slide

29. View Slide

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
    

    View Slide

31. View Slide

32. View Slide

33. View Slide

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

    View Slide

35. View Slide

36. View Slide

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

    View Slide

38. View Slide

39. require(…);
    

    View Slide

40. View Slide

41. View Slide

42. View Slide

43. hij1nx/levelui
    

    View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. muan/mojibar
    

    View Slide

55. How does Electron
    work?
    

    View Slide

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

    View Slide

57. npm install -g
    electron-prebuilt
    

    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. View Slide

75. View Slide

76. View Slide

77. Inherently,
    offline first.
    

    View Slide

78. View Slide

79. View Slide

80. View Slide

81. View Slide

82. View Slide

83. View Slide

84. View Slide

85. versus
    

    View Slide

86. View Slide

87. View Slide

88. View Slide

89. View Slide

90. View Slide

91. View Slide

92. View Slide

93. No good.
    

    View Slide

94. View Slide

95. electron.remote
    

    View Slide

96. View Slide

97. View Slide

98. View Slide

99. View Slide

100. View Slide

101. View Slide

102. View Slide

103. View Slide

104. View Slide

105. Building a menu
     

     View Slide

106. electron.Menu
     

     View Slide

107. View Slide

108. View Slide

109. View Slide

110. View Slide

111. View Slide

112. View Slide

113. View Slide

114. View Slide

115. electron.globalShortcut
     

     View Slide

116. electron.globalShortcut
     

     View Slide

117. electron.globalShortcut
     

     View Slide

118. And more…
     

     View Slide

119. View Slide

120. View Slide

121. View Slide

122. View Slide

123. View Slide

124. View Slide

125. Let's get started.
     

     View Slide

126. View Slide

127. npm install
     electron-prebuilt
     

     View Slide

128. npm install menubar
     

     View Slide

129. View Slide

130. View Slide

131. What about JSX
     or SASS or LESS?
     

     View Slide

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

     View Slide

133. What about
     Ember CLI?
     

     View Slide

134. ember install
     ember-electron
     

     View Slide

135. npm install
     electron-packager
     

     View Slide

136. View Slide

137. View Slide

138. sindresorhus/awesome-electron
     

     View Slide

139. View Slide

140. Turing School: http://turing.io
     Electron in Action: http://bit.ly/electronjs
     ¡Gracias!
     Twitter: @stevekinney
     

     View Slide