The talk gives a brief introduction to the Electron project maintained by GitHub for building cross platform desktop applications.

1. Building desktop applications
with web technologies
the easy way
@stefanjudis

2. @stefanjudis
FRONTEND DEVELOPER
MOSTLY E-COMMERCE
NOW INTO SINGLE PAGE APPLICATIONS

3. http://perf-tooling.today

4. https://github.com/stefanjudis

5. http://www.meetup.com/de/Berlin-Web-Performance-Group/

6. STARTED FULLSTACK
( 5 YEARS AGO )

7. “You have to specialize.
Do one thing and do it as well
as possible rather than doing
everything just good.”

8. for
Frontend
Technologies
( around 2012 )

9. But unfortunately I was a bit late.
( I had a ton to catch up with )

10. HTML invented early 90ies.
CSS invented 1994.
JavaScript invented 1995.

11. First WebApps appeared

12. MV-WHATEVER

13. HTML5 moving forward

14. LocationDevice movement
Making Music
Web Cam Access
Battery Status

15. What about offline?

16. Service Workers FTW
http://techcrunch.com/2015/09/14/facechrome/

17. How to use these fancy web apps?

20. https://github.com/adobe/brackets-shell
http://nwjs.io/

21. So far, one big player was missing...

22. Let’s build our dream editor!
With Web Technology!

23. http://blog.atom.io/2014/02/26/introducing-atom.html

24. Writing to Disk
Using native Functionality
Separate concerns clearly

25. - Atom Shell -
So - how does it work?

27. Atom Shell is a
Node.js programmable
Chromium browser.

28. Chromium Browser
Browser
https://speakerdeck.com/zcbenz/practice-on-embedding-node-dot-js-into-atom-editor
Controlled by C++
Window … Tray Menu Dialog
IPC
Renderer
HTML
JavaScript
CSS
Renderer
HTML
JavaScript
CSS
Renderer
HTML
JavaScript
CSS
Window Window

29. Atom Shell
Browser
https://speakerdeck.com/zcbenz/practice-on-embedding-node-dot-js-into-atom-editor
Controlled by Node.js
Window … Tray Menu Dialog
IPC
Renderer
HTML
JavaScript
CSS
Renderer
HTML
JavaScript
CSS
Renderer
HTML
JavaScript
CSS
Window Window

30. http://electron.atom.io/

31. https://atom.io/

32. https://code.visualstudio.com/

33. https://slack.com/

34. - our use case at LLS -
Let´s check some code?
( a fairly simple one )
- in case I make a stupid error please tell me -

35. Let´s write something real?

36. Let`s make it distribution ready!

37. Windows Result

38. https://github.com/stefanjudis/electron-webview-example
https://github.com/stefanjudis/electron-todo-example
https://github.com/stefanjudis/electron-block-screensaver-example
Example Projects
Packages used for distribution
https://github.com/maxogden/electron-packager
https://github.com/loopline-systems/electron-builder

39. Working cross-platform
Active Development
Strong Community
Last words

40. https://github.com/sindresorhus/awesome-electron

41. Thanks.
Questions?