History, examples, and demos oh my!

1. Introducing

2. ● APM UI Team
○ Since February 2016!
● Aka @blainesch
○ GitHub
○ Twitter
● Electron Experience
○ ~8 months
○ Contributions to various
boilerplates
Blaine

3. ● History of Electron
● What is Electron?
● Examples Electron Apps
● Getting Started
● Basic Code
● React Demo
Agenda

4. Introducing

5. Atom History
● Only web based Technology
● Released May 2014
● Isn’t Nagware
○ You know who you are

6. ● Split from Atom January 2013
● Open Sourced May 2014
● Name Change
○ Atom-Shell -> Electron
○ April 2015
Electron History

7. ● Make desktop apps with web
technology!
● Chromium v8 Engine
● Node
○ … also v8 engine!
● Single Browser!
○ window.fetch!
● Node everywhere!
○ Filesystem
○ Databases
○ … all of npm!
● Native system UI
○ Dialogs
○ System Menus
○ Menubar Icon
● Create native packages!
Wat?

8. ● 2 Processes
○ Main (node)
○ Renderer (browser)
● Communicate
○ Event Emitter (IPC)
○ They can have the same
objects!
How does it even...

9. ● Slack
● ScreenCat
● Google Play Music Desktop
Player
● Hearthdash
● Mojibar
○ Search Emojis!
● WebTorrent
● Mongotron
● Kakapo
○ An open source ambient
sound mixer
Examples?

10. ● Electron Quick Start
○ Electron Sponsored
○ Great for seeing mvp
○ Missing things:
■ Testing App
■ Building Packages
■ No environments
● Electron Boilerplate
○ More framework-y!
Boilerplates
https://github.com/electron/electron-quick-start
https://github.com/szwacz/electron-boilerplate

11. Main Process

12. Browser Process

13. Browser Process

14. Browser Process

15. Preview

16. Demo!
https://github.com/blainesch/electron-boilerplate-react