Desktop Apps with ClojureScript

746d139f9b7c20f00641fd91bd26b451?s=47 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

746d139f9b7c20f00641fd91bd26b451?s=128

mklappstuhl

September 11, 2015
Tweet

Transcript

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

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

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

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

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

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

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

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

  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
  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
  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
  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
  13. Martin Klepsch (@martinklepsch), ClojuTRE 2015, #coolhashtag

  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
  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
  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
  17. Demos Notifications Interacting with the File System Dock Icon things

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

    #coolhashtag
  19. Some Closing Thoughts don't underestimate the additional work. packaging and

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

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