$30 off During Our Annual Pro Sale. View Details »

Desktop Apps with ClojureScript

mklappstuhl
September 11, 2015

Desktop Apps with ClojureScript

Slides for my talk about building Electron apps with ClojureScript at ClojuTRE 2015.

Code here: https://github.com/martinklepsch/electron-and-clojurescript

Video: https://www.youtube.com/watch?v=tBnu2JmK4p0

mklappstuhl

September 11, 2015
Tweet

More Decks by mklappstuhl

Other Decks in Programming

Transcript

  1. Desktop Apps with
    ClojureScript
    Martin Klepsch (@martinklepsch), ClojuTRE 2015, #coolhashtag

    View Slide

  2. Martin Klepsch (@martinklepsch), ClojuTRE 2015, #coolhashtag

    View Slide

  3. Why Electron?
    Dock Icon!!!
    Martin Klepsch (@martinklepsch), ClojuTRE 2015, #coolhashtag

    View Slide

  4. Why Electron?
    File System Access
    Martin Klepsch (@martinklepsch), ClojuTRE 2015, #coolhashtag

    View Slide

  5. The Basics of How Electron
    Works
    Martin Klepsch (@martinklepsch), ClojuTRE 2015, #coolhashtag

    View Slide

  6. Main Process vs. Renderer
    Martin Klepsch (@martinklepsch), ClojuTRE 2015, #coolhashtag

    View Slide

  7. Martin Klepsch (@martinklepsch), ClojuTRE 2015, #coolhashtag

    View Slide

  8. ClojureScript...
    Martin Klepsch (@martinklepsch), ClojuTRE 2015, #coolhashtag

    View Slide

  9. Structure
    ├── build.boot
    ├── resources
    │ ├── index.html
    │ ├── package.json
    │ ├── main.cljs.edn <====
    │ └── renderer.cljs.edn
    └── src
    └── app
    ├── main.cljs
    └── renderer.cljs
    Martin Klepsch (@martinklepsch), ClojuTRE 2015, #coolhashtag

    View Slide

  10. Structure
    ├── build.boot
    ├── resources
    │ ├── index.html
    │ ├── package.json
    │ ├── main.cljs.edn
    │ └── renderer.cljs.edn <====
    └── src
    └── app
    ├── main.cljs
    └── renderer.cljs
    Martin Klepsch (@martinklepsch), ClojuTRE 2015, #coolhashtag

    View Slide

  11. resources/main.cljs.edn >> target/main.js
    {:require [app.main]
    :init-fns [app.main/init]
    :compiler-options {:target :nodejs}}
    resources/renderer.cljs.edn >> target/renderer.js
    {:require [app.renderer]
    :init-fns [app.renderer/init]}
    Martin Klepsch (@martinklepsch), ClojuTRE 2015, #coolhashtag

    View Slide

  12. app/main.cljs
    (ns app.main)
    (def app (js/require "app"))
    (def BrowserWindow (js/require "browser-window"))
    (def main-window (atom nil))
    (defn init-browser []
    (reset! main-window
    (BrowserWindow. #js {:width 600 :height 400}))
    (.loadUrl @main-window
    (str "file://" js/__dirname "/index.html")))
    (defn init []
    (.on app "ready" init-browser)
    (set! *main-cli-fn* (fn [] nil)))
    Martin Klepsch (@martinklepsch), ClojuTRE 2015, #coolhashtag

    View Slide

  13. Martin Klepsch (@martinklepsch), ClojuTRE 2015, #coolhashtag

    View Slide

  14. js/__dirname
    refers to the directory of the file using it.
    This file differs between :none and :advanced.
    (.loadUrl window (str "file://" js/__dirname "/index.html"))
    ;; is called from
    ;; target/main.js (advanced) or
    ;; target/main.out/app/main.js (none)
    Martin Klepsch (@martinklepsch), ClojuTRE 2015, #coolhashtag

    View Slide

  15. js/__dirname
    refers to the directory of the file using it.
    This file differs between :none and :advanced.
    (.loadUrl window (str "file://" js/__dirname "/index.html"))
    ;; src/app/main.cljs
    (goog-define dev? false)
    (defn load-page [window]
    (if dev?
    (.loadUrl window (str "file://" js/__dirname "/../../index.html"))
    (.loadUrl window (str "file://" js/__dirname "/index.html"))))
    Martin Klepsch (@martinklepsch), ClojuTRE 2015, #coolhashtag

    View Slide

  16. build.boot
    (deftask dev-build []
    (comp (speak)
    (cljs-repl :ids #{"renderer"})
    (reload :ids #{"renderer"}
    :on-jsload 'app.renderer/init)
    (cljs :ids #{"renderer"})
    (cljs :ids #{"main"}
    :compiler-options {:closure-defines {'app.main/dev? true}})))
    Martin Klepsch (@martinklepsch), ClojuTRE 2015, #coolhashtag

    View Slide

  17. Demos
    Notifications
    Interacting with the File System
    Dock Icon things
    Martin Klepsch (@martinklepsch), ClojuTRE 2015, #coolhashtag

    View Slide

  18. Demos
    Global Shortcuts
    Shelling out
    Martin Klepsch (@martinklepsch), ClojuTRE 2015, #coolhashtag

    View Slide

  19. Some Closing Thoughts
    don't underestimate the additional work.
    packaging and updating requires infrastructure.
    Martin Klepsch (@martinklepsch), ClojuTRE 2015, #coolhashtag

    View Slide

  20. Thanks!
    github.com/martinklepsch/electron-and-clojurescript
    Martin Klepsch (@martinklepsch), ClojuTRE 2015, #coolhashtag

    View Slide

  21. Martin Klepsch (@martinklepsch), ClojuTRE 2015, #coolhashtag

    View Slide