SlideShare a Scribd company logo
descjop
A Leiningen template for Web based desktop application with Electron
2017/7/3
Clojure.Tokyo
A Leiningen template
for Web based desktop application
with Electron
● Open source project
● MIT License
● Stars : 304
http://descjop.org/
Electron is …
https://electron.atom.io/
Build cross platform desktop apps with JavaScript, HTML, and CSS
Philosophy
descjop’s Philosophy
● Fun
● Not difficult
● Support All Platforms (Electron supported)
● Quick Start
Features
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
Quick Start
Quick Start
1. Create project
2. Init project
3. Make enterns
4. Build project
5. Start figwheel
6. Run!
Create project
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
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
Init project
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
Make externs
Make externs
(if you need externs.)
$ lein descjop-externs
Build project
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
Start figwheel
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
Package Project
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
Roadmap
Roadmap
● add Re-frame template
● add Om-next template
● support main process figwheel
● support some UI frameworks
Try it!!
You can use help
Help alias
$ lein descjop-help
Practice
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))
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/"))}]}]))
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)))
...
))
- END -
Thank you!
2017/7/3
Clojure.Tokyo

More Related Content

PDF
AllTheTalks 2020: Buildpacks - container for everyone!
ODP
Gopenflow demo v1 (english)
PDF
VN Tech Seminor Vol.2 Docker Tutorial
PDF
Front matter: Next Level Front End Deployments on OpenShift
PPTX
Php development with Docker
PDF
OpenShift Primer - get your business into the Cloud today!
PDF
Docker 101 - From production to development
PDF
Seamless Continuous Deployment Using Docker Containers
AllTheTalks 2020: Buildpacks - container for everyone!
Gopenflow demo v1 (english)
VN Tech Seminor Vol.2 Docker Tutorial
Front matter: Next Level Front End Deployments on OpenShift
Php development with Docker
OpenShift Primer - get your business into the Cloud today!
Docker 101 - From production to development
Seamless Continuous Deployment Using Docker Containers

What's hot (18)

PDF
NLUUG Spring 2012 - OpenShift Primer
PDF
Docker workshop
PDF
Context API in React
PDF
React starter-kitでとっとと始めるisomorphic開発
PDF
Writing native Linux desktop apps with JavaScript
PDF
Build and run applications in a dockerless kubernetes world - DevConf India 18
PPTX
Universal app techniques on how to share files
PDF
Is the order code deploy?
PPTX
Meetup #24 Docker for Node Developer
PPTX
Hybrid app development frameworks
ODP
Jakarta js meetup kudo
PDF
Releaseflow: a healthy build and deploy process
PDF
Alex Corbi - Building 100 percent os open data platform
PPTX
Ruby on Rails vs ASP.NET MVC
PDF
Turnkey Continuous Delivery
PDF
Why You Should Start Using Docker
PDF
Zero to hero - Geoff Webb
PDF
Utilizing HTML5 APIs
NLUUG Spring 2012 - OpenShift Primer
Docker workshop
Context API in React
React starter-kitでとっとと始めるisomorphic開発
Writing native Linux desktop apps with JavaScript
Build and run applications in a dockerless kubernetes world - DevConf India 18
Universal app techniques on how to share files
Is the order code deploy?
Meetup #24 Docker for Node Developer
Hybrid app development frameworks
Jakarta js meetup kudo
Releaseflow: a healthy build and deploy process
Alex Corbi - Building 100 percent os open data platform
Ruby on Rails vs ASP.NET MVC
Turnkey Continuous Delivery
Why You Should Start Using Docker
Zero to hero - Geoff Webb
Utilizing HTML5 APIs
Ad

Similar to Clojure.tokyo.descjop (20)

PDF
Programming Android
PDF
PDF
Cape Cod Web Technology Meetup - 3
PPTX
Electron - cross platform desktop applications made easy
PDF
Voxxed days Vilnius 2015 - Android Reverse Engineering Lab
PDF
MobileConf 2021 Slides: Let's build macOS CLI Utilities using Swift
PDF
DEEP: a user success story
PDF
Designing flexible apps deployable to App Engine, Cloud Functions, or Cloud Run
PDF
Lesson 02 - React Native Development Environment Setup
PDF
Containerized IDEs.pdf
PDF
Electron JS | Build cross-platform desktop applications with web technologies
PDF
Android programming-basics
PDF
Electron
PPTX
NCDevCon 2017 - Cross Platform Mobile Apps
PPTX
PPTX
React native development with expo
PDF
Flutter vs Java Graphical User Interface Frameworks - text
PPTX
Ignite your app development with Angular, NativeScript and Firebase
PDF
CodeMotion tel aviv 2015 - android reverse engineering lab
PPT
State ofappdevelopment
Programming Android
Cape Cod Web Technology Meetup - 3
Electron - cross platform desktop applications made easy
Voxxed days Vilnius 2015 - Android Reverse Engineering Lab
MobileConf 2021 Slides: Let's build macOS CLI Utilities using Swift
DEEP: a user success story
Designing flexible apps deployable to App Engine, Cloud Functions, or Cloud Run
Lesson 02 - React Native Development Environment Setup
Containerized IDEs.pdf
Electron JS | Build cross-platform desktop applications with web technologies
Android programming-basics
Electron
NCDevCon 2017 - Cross Platform Mobile Apps
React native development with expo
Flutter vs Java Graphical User Interface Frameworks - text
Ignite your app development with Angular, NativeScript and Firebase
CodeMotion tel aviv 2015 - android reverse engineering lab
State ofappdevelopment
Ad

More from Kazuhiro Hara (20)

PDF
MDX with Next.js
PDF
MDX and Next.js
PDF
About Plone Conference Tokyo 2018 Frontend Day
PDF
Gatsby & React Static
PDF
buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話
PDF
SwaggerとAPIのデザイン
PDF
React VR ことはじめ
PDF
React系(別言語含む)の サーバーサイドレンダリング について考えよう
PDF
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
PDF
Re-frame and A-Frame
PDF
ひとりアドベントカレンダーのご紹介
PDF
(IDEユーザのための) ClojureのEmacs開発環境について
PDF
Cryogenでサイトつくろーじぇん
PDF
ClojureでElectronアプリを作ろう
PDF
WebSocket+Akka(Remote)+Play 2.1 Java
PDF
第2回 -Play部屋- Play 2.0はじめて&もくもく会
PDF
-Play部屋- Play 2.0はじめて&もくもく会
PDF
Play framework 2.0のおすすめと1.2からのアップグレード
PDF
sbtマルチプロジェクトビルドの使いどころ
PDF
Playbay Play 2.0 plugin イロハのイ
MDX with Next.js
MDX and Next.js
About Plone Conference Tokyo 2018 Frontend Day
Gatsby & React Static
buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話
SwaggerとAPIのデザイン
React VR ことはじめ
React系(別言語含む)の サーバーサイドレンダリング について考えよう
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Re-frame and A-Frame
ひとりアドベントカレンダーのご紹介
(IDEユーザのための) ClojureのEmacs開発環境について
Cryogenでサイトつくろーじぇん
ClojureでElectronアプリを作ろう
WebSocket+Akka(Remote)+Play 2.1 Java
第2回 -Play部屋- Play 2.0はじめて&もくもく会
-Play部屋- Play 2.0はじめて&もくもく会
Play framework 2.0のおすすめと1.2からのアップグレード
sbtマルチプロジェクトビルドの使いどころ
Playbay Play 2.0 plugin イロハのイ

Recently uploaded (20)

PDF
SASE Traffic Flow - ZTNA Connector-1.pdf
PPTX
Funds Management Learning Material for Beg
PPTX
Internet___Basics___Styled_ presentation
PPTX
presentation_pfe-universite-molay-seltan.pptx
PPTX
artificial intelligence overview of it and more
PPTX
Slides PPTX World Game (s) Eco Economic Epochs.pptx
PPTX
Introduction to Information and Communication Technology
PDF
Paper PDF World Game (s) Great Redesign.pdf
PDF
RPKI Status Update, presented by Makito Lay at IDNOG 10
PDF
Decoding a Decade: 10 Years of Applied CTI Discipline
PDF
Slides PDF The World Game (s) Eco Economic Epochs.pdf
PDF
The Internet -By the Numbers, Sri Lanka Edition
PDF
WebRTC in SignalWire - troubleshooting media negotiation
PPTX
CHE NAA, , b,mn,mblblblbljb jb jlb ,j , ,C PPT.pptx
PPTX
innovation process that make everything different.pptx
PDF
Testing WebRTC applications at scale.pdf
PDF
Vigrab.top – Online Tool for Downloading and Converting Social Media Videos a...
PDF
Tenda Login Guide: Access Your Router in 5 Easy Steps
PDF
The New Creative Director: How AI Tools for Social Media Content Creation Are...
PPTX
522797556-Unit-2-Temperature-measurement-1-1.pptx
SASE Traffic Flow - ZTNA Connector-1.pdf
Funds Management Learning Material for Beg
Internet___Basics___Styled_ presentation
presentation_pfe-universite-molay-seltan.pptx
artificial intelligence overview of it and more
Slides PPTX World Game (s) Eco Economic Epochs.pptx
Introduction to Information and Communication Technology
Paper PDF World Game (s) Great Redesign.pdf
RPKI Status Update, presented by Makito Lay at IDNOG 10
Decoding a Decade: 10 Years of Applied CTI Discipline
Slides PDF The World Game (s) Eco Economic Epochs.pdf
The Internet -By the Numbers, Sri Lanka Edition
WebRTC in SignalWire - troubleshooting media negotiation
CHE NAA, , b,mn,mblblblbljb jb jlb ,j , ,C PPT.pptx
innovation process that make everything different.pptx
Testing WebRTC applications at scale.pdf
Vigrab.top – Online Tool for Downloading and Converting Social Media Videos a...
Tenda Login Guide: Access Your Router in 5 Easy Steps
The New Creative Director: How AI Tools for Social Media Content Creation Are...
522797556-Unit-2-Temperature-measurement-1-1.pptx

Clojure.tokyo.descjop

  • 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
  • 5. descjop’s Philosophy ● Fun ● Not difficult ● Support All Platforms (Electron supported) ● Quick Start
  • 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
  • 9. Quick Start 1. Create project 2. Init project 3. Make enterns 4. Build project 5. Start figwheel 6. Run!
  • 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
  • 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
  • 16. Make externs (if you need externs.) $ lein descjop-externs
  • 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
  • 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
  • 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
  • 24. Roadmap ● add Re-frame template ● add Om-next template ● support main process figwheel ● support some UI frameworks
  • 26. You can use help Help alias $ lein descjop-help
  • 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