Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building desktop applications with web technologies - ELECTRON the easy way

2,066 views

Published on

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

Published in: Technology
  • Login to see the comments

Building desktop applications with web technologies - ELECTRON the easy way

  1. 1. Building desktop applications with web technologies the easy way @stefanjudis
  2. 2. @stefanjudis FRONTEND DEVELOPER MOSTLY E-COMMERCE NOW INTO SINGLE PAGE APPLICATIONS
  3. 3. http://perf-tooling.today
  4. 4. https://github.com/stefanjudis
  5. 5. http://www.meetup.com/de/Berlin-Web-Performance-Group/
  6. 6. STARTED FULLSTACK ( 5 YEARS AGO )
  7. 7. “You have to specialize. Do one thing and do it as well as possible rather than doing everything just good.”
  8. 8. for Frontend Technologies ( around 2012 )
  9. 9. But unfortunately I was a bit late. ( I had a ton to catch up with )
  10. 10. HTML invented early 90ies. CSS invented 1994. JavaScript invented 1995.
  11. 11. First WebApps appeared
  12. 12. MV-WHATEVER
  13. 13. HTML5 moving forward
  14. 14. LocationDevice movement Making Music Web Cam Access Battery Status
  15. 15. What about offline?
  16. 16. Service Workers FTW http://techcrunch.com/2015/09/14/facechrome/
  17. 17. How to use these fancy web apps?
  18. 18. https://github.com/adobe/brackets-shell http://nwjs.io/
  19. 19. So far, one big player was missing...
  20. 20. Let’s build our dream editor! With Web Technology!
  21. 21. http://blog.atom.io/2014/02/26/introducing-atom.html
  22. 22. Writing to Disk Using native Functionality Separate concerns clearly
  23. 23. - Atom Shell - So - how does it work?
  24. 24. Atom Shell is a Node.js programmable Chromium browser.
  25. 25. 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
  26. 26. 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
  27. 27. http://electron.atom.io/
  28. 28. https://atom.io/
  29. 29. https://code.visualstudio.com/
  30. 30. https://slack.com/
  31. 31. - our use case at LLS - Let´s check some code? ( a fairly simple one ) - in case I make a stupid error please tell me -
  32. 32. Let´s write something real?
  33. 33. Let`s make it distribution ready!
  34. 34. Windows Result
  35. 35. 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
  36. 36. Working cross-platform Active Development Strong Community Last words
  37. 37. https://github.com/sindresorhus/awesome-electron
  38. 38. Thanks. Questions?

×