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

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