Introduction to electron

1. Electron

2. (introduction to) Electron

3. What is Electron?

4. “Electron is a framework for creating native
applications with web technologies like
JavaScript, HTML, and CSS.”
http://electron.atom.io/

5. Key ideas
* If you can build a website, you can build a desktop app

6. Key ideas
* If you can build a website, you can build a desktop app
* Cross platform: write your application once and run it in Mac, Windows and Linux

7. Key ideas
* If you can build a website, you can build a desktop app
* Cross platform: write your application once and run it in Mac, Windows and Linux
* The hard parts made easy
- Simplify packaging, installation and updates
- Support for native menus, notifications and dialogs
- App crash reporting

8. Key ideas
* If you can build a website, you can build a desktop app
* Cross platform: write your application once and run it in Mac, Windows and Linux
* The hard parts made easy
- Simplify packaging, installation and updates
- Support for native menus, notifications and dialogs
- App crash reporting
* Open source project: maintained by github + active community

9. History
2013: Github starts Atom project
May 2014: Atom is open sourced (including Atom Shell)
Apr 2015: Atom Shell is named Electron
May 2016: Electron v1.0 is released

10. Which apps are built using electron?

12. http://electron.atom.io/apps/

13. How does Electron work?

15. main process
Image from: https://medium.com/developers-writing/building-a-desktop-application-with-electron-204203eeb658
node.js, BrowserWindow
dialog, menu, ipc

16. main process + renderer process
Image from: https://medium.com/developers-writing/building-a-desktop-application-with-electron-204203eeb658
node.js, ipc, DOM

17. Let’s build our first Electron app!

18. friday-talk-electron-app/
|-- package.json
|-- main.js
|-- index.html

19. package.json
{
"name": "friday-talk-electron-app",
"version": "1.0.0",
"main": "main.js"
}

20. main.js

21. index.html

22. electron-prebuilt is a npm module that contains pre-compiled versions of Electron
Install & Execute
> npm install --save electron-prebuilt

23. update package.json to add start script
"scripts": {
"start": "electron ."
}
electron-prebuilt is a npm module that contains pre-compiled versions of Electron
Install & Execute
> npm install --save electron-prebuilt

24. update package.json to add start script
"scripts": {
"start": "electron ."
}
electron-prebuilt is a npm module that contains pre-compiled versions of Electron
Install & Execute
> npm start
> npm install --save electron-prebuilt

25. and...

27. What else can we do with Electron?

28. Native menues

29. main.js

32. Native dialogs

33. index.html

34. index.js

35. main.js

39. Native notifications

40. index.html

43. Desktop Environment Integration
http://electron.atom.io/docs/tutorial/desktop-environment-integration/

44. More...

45. Other Electron modules
● Tray
● Clipboard
● Shell
● CrashReporter
API demos: https://github.com/electron/electron-api-demos

47. Some final ideas

48. * You can use any js library for the renderer process (angular, react, jquery, etc.)
* Node modules are available in both (main + renderer process)
* Renderer process does not always need to display a window, it can be used for
background processing
* Follow native look and feel across the app (ex. fonts, cursors, menu options)
* Best practices? Storage? Drawbacks?

49. Resources

50. Links
Code examples
https://github.com/virginia-rodriguez/friday-talk-electron-app
Building a desktop application with Electron: A detailed guide on building your very own sound machine
using JavaScript, Node.js and Electron
https://medium.com/developers-writing/building-a-desktop-application-with-electron-204203eeb658
Awesome Electron: Useful resources for creating apps with Electron
https://github.com/sindresorhus/awesome-electron
Photon: The fastest way to build beautiful Electron apps using simple HTML and CSS
http://photonkit.com/

51. Talks
The New Desktop: Electron, React, & Pixel-Perfect Native-Feeling Experiences by Evan Morikawa
https://www.youtube.com/watch?v=jRPUB-D1Wx0
Electron: Desktop Apps with Web Languages by Jessica Lord
https://www.youtube.com/watch?v=_dkeD3OZ218
Cross-platform desktop apps using Electron by David Neal
https://www.youtube.com/watch?v=zEAoCCBCuLk

52. Links about packaging and distribution
electron-packager
https://github.com/electron-userland/electron-packager
Distributing Electron apps
http://electron.rocks/distributing-electron-apps/
Mac App Store Submission Guide
http://electron.atom.io/docs/tutorial/mac-app-store-submission-guide/

53. Thanks :)