This document provides instructions for creating a desktop application using the descjop template for Clojure projects. It describes downloading Electron, initializing a new project, building the project for development and production, and packaging the application. The template supports Om and Reagent frameworks and runs on macOS, Windows, and Linux. It allows adding basic menus and shortcuts and outlines future goals like supporting main process figwheel and UI frameworks.

1. descjop
A Leiningen template for Web based desktop application with Electron
2017/7/3
Clojure.Tokyo

2. A Leiningen template
for Web based desktop application
with Electron
● Open source project
● MIT License
● Stars : 304
http://descjop.org/

3. Electron is …
https://electron.atom.io/
Build cross platform desktop apps with JavaScript, HTML, and CSS

4. Philosophy

5. descjop’s Philosophy
● Fun
● Not difficult
● Support All Platforms (Electron supported)
● Quick Start

6. Features

7. Features
● leiningen project template
○ Minimum project(no use library)
○ Om based project
○ Reagent based project
● Include helper alias
○ init
○ externs
○ build
● Support macOS, Windows, Linux
● Support develop mode (with figwheel)
● Support packaging app

8. Quick Start

9. Quick Start
1. Create project
2. Init project
3. Make enterns
4. Build project
5. Start figwheel
6. Run!

10. Create project

11. Create a new descjop project
(If not already installed grunt.)
Minimum (“”) / om (“+om”) / reagent (“+reagent”)
$ lein new descjop PROJECT_NAME +reagent
$ npm install -g grunt-cli

12. Project directory
● app/
○ dev/ … development root
○ prod/ … production root
● electron/ … downloaded electron
● src/ … electron main process
● src_front_profile/
○ PROJECT_NAME
■ dev/ … development env
■ prod/ … production env
● src_front/ … render process
● project.clj

13. Init project

14. Init project
npm install and download electron.
init project (for macOS / Linux user)
init project (for Windows user)
wait a few minutes!
$ lein descjop-init
$ lein descjop-init-win

15. Make externs

16. Make externs
(if you need externs.)
$ lein descjop-externs

17. Build project

18. Build project
production and development mode.
// build JavaScript both develop and production mode
$ lein descjop-once
// build for develop
$ lein descjop-once-dev
// build for production
$ lein descjop-once-prod

19. Start figwheel

20. Run with figwheel
Open other terminal window, before run application.
and, Run Application
$ lein descjop-figwheel
// for Windows
$ .electronelectron.exe app/dev
// for macOS
$ ./electron/Electron.app/Contents/MacOS/Electron app/dev

21. Package Project

22. Package Project
(If not already installed Electron-packager.)
Supported Platforms are macOS, Windows 32/64 bit and Linux
$ npm install -g electron-packager
// for OSX
$ lein descjop-uberapp-osx
// for windows 64bit app
$ descjop-uberapp-win64

23. Roadmap

24. Roadmap
● add Re-frame template
● add Om-next template
● support main process figwheel
● support some UI frameworks

25. Try it!!

26. You can use help
Help alias
$ lein descjop-help

27. Practice

28. Add application menu (1)
add code to src/PROJECT_NAME/core.cljs after `(def app …)`
(def is-mac (= (.-platform nodejs/process) "darwin"))
(def Menu (.-Menu Electron))
(def Shell (.-shell Electron))
(def app-name (.getName app))

29. Add application menu (2)
add code to src/PROJECT_NAME/core.cljs after (part 1)
(def menu-template
(if is-mac
[{:label app-name
:submenu [{:label "Quit."
:accelerator "Command+Q"
:click (fn [] (.quit app))}]}
{:label "Help"
:role "help"
:submenu [{:label "About this mac app"
:accelerator "Command+H"
:click (fn [] (.openExternal Shell "http://descjop.org/"))}]}]
[{:label "Help"
:submenu [{:label "About this windows/linux app"
:accelerator "Control+H"
:click (fn [] (.openExternal Shell "http://descjop.org/"))}]}]))

30. Add application menu (3)
add code to src/PROJECT_NAME/core.cljs -main function’s “ready”
(.on app "ready"
(fn []
...
;; menu build
(.setApplicationMenu Menu
(.buildFromTemplate Menu (clj->js menu-template)))
...
))

31. - END -
Thank you!
2017/7/3
Clojure.Tokyo