Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Desktop Applications with Electron, Fluent 2016

Steve Kinney
March 08, 2016
250

Building Desktop Applications with Electron, Fluent 2016

Steve Kinney

March 08, 2016
Tweet

Transcript

  1. Building Desktop Applications
    with Node and Electron
    Steve Kinney — @stevekinney
    Fluent 2016

    View full-size slide

  2. http://bit.ly/fluent-electron

    View full-size slide

  3. Hi. I'm Steve

    View full-size slide

  4. http://turing.io

    View full-size slide

  5. http://dinosaurjs.org

    View full-size slide

  6. http://bit.ly/fluent-electron
    Introduction to Electron
    Building Two Applications
    • Fire Sale
    • Clipmaster 9000

    View full-size slide

  7. Electron (née Atom Shell)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. sindresorhus/caprine

    View full-size slide

  16. Why is Electron so
    super cool?

    View full-size slide

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

    View full-size slide

  18. Node 5.1.1
    Filesystem access
    Native modules

    View full-size slide

  19. Electron uses a pretty
    modern build of Chromium.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. require(…);

    View full-size slide

  23. hij1nx/levelui

    View full-size slide

  24. muan/mojibar

    View full-size slide

  25. How does Electron
    work?

    View full-size slide

  26. npm install -g
    electron-prebuilt

    View full-size slide

  27. Inherently, offline
    first.

    View full-size slide

  28. electron.remote

    View full-size slide

  29. Building a menu

    View full-size slide

  30. electron.Menu

    View full-size slide

  31. electron.globalShortcut

    View full-size slide

  32. electron.globalShortcut

    View full-size slide

  33. electron.globalShortcut

    View full-size slide

  34. npm install -g
    electron-prebuilt

    View full-size slide

  35. npm install menubar

    View full-size slide

  36. Let's get started.

    View full-size slide

  37. npm install -g
    electron-packager

    View full-size slide

  38. npm install -g
    electron-accelerator

    View full-size slide

  39. npm install -g
    electron-compile

    View full-size slide

  40. The Future for
    Electron

    View full-size slide

  41. sindresorhus/awesome-electron

    View full-size slide

  42. http://turing.io http://dinosaurjs.org

    View full-size slide