Building GUI App with Electron and Lisp
-
Upload
fukamachi -
Category
Technology
-
view
2.699 -
download
3
Transcript of Building GUI App with Electron and Lisp
![Page 1: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/1.jpg)
How Building GUI App with Lisp The Case of Pocket Change, Inc.
LISP MEETUP #50 Mar 27, 2017
![Page 2: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/2.jpg)
I’m Eitaro Fukamachi @nitro_idiot fukamachi
![Page 3: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/3.jpg)
Joined Pocket Change in Feb 1
![Page 5: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/5.jpg)
Available at Haneda Airport
![Page 6: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/6.jpg)
Today’s topic
![Page 7: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/7.jpg)
What I want to tell today
What I don’t tell
How we use Common Lisp in our work
How you can use Common Lisp in your work
![Page 8: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/8.jpg)
![Page 9: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/9.jpg)
Touch Screen
Coins BillsIC Card Reader
Receipt Printer
API Server
![Page 10: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/10.jpg)
Touch Screen
Coins BillsIC Card Reader
Receipt Printer
API Server
![Page 11: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/11.jpg)
Building the next version of this software is my work.
![Page 12: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/12.jpg)
How to build Pocket Change
![Page 13: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/13.jpg)
• Windows OS (Rich!)
• Fullscreen GUI application
![Page 15: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/15.jpg)
Web Server (Express)
Main Process (Node.js)
![Page 16: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/16.jpg)
Open
Web Server (Express)
Main Process (Node.js)
![Page 17: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/17.jpg)
Open
Web Server (Express)
Main Process (Node.js)
Renderer Process (Chromium)
React.js
![Page 18: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/18.jpg)
Open
Web Server (Express)
Main Process (Node.js)
Bidirectional Communication
Renderer Process (Chromium)
React.js
![Page 19: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/19.jpg)
Why Electron?
• Easy to deploy
• Can package into a single EXE installer
• Can build GUI with Web technologies
• Embedded Chromium
![Page 20: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/20.jpg)
However
![Page 21: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/21.jpg)
The language is JavaScript. 👎
![Page 22: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/22.jpg)
Why can’t we use Common Lisp?
![Page 23: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/23.jpg)
None (just a launcher)
Main Process (Node.js)
+ Common Lisp
![Page 24: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/24.jpg)
Open
None (just a launcher)
Main Process (Node.js)
+ Common Lisp
![Page 25: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/25.jpg)
Open
None (just a launcher)
Main Process (Node.js)
Renderer Process (Chromium)
React.js
+ Common Lisp
![Page 26: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/26.jpg)
Open
None (just a launcher)
Main Process (Node.js)
Renderer Process (Chromium)
React.js
Spawn
+ Common Lisp
![Page 27: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/27.jpg)
Open
None (just a launcher)
Main Process (Node.js)
Renderer Process (Chromium)
React.js
Common Lisp Process (SBCL)
Spawn
+ Common Lisp
![Page 28: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/28.jpg)
Open
None (just a launcher)
Main Process (Node.js)
Renderer Process (Chromium)
React.js
Common Lisp Process (SBCL)
Spawn
Bidirectional Communication
+ Common Lisp
![Page 29: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/29.jpg)
Open
None (just a launcher)
Main Process (Node.js)
Renderer Process (Chromium)
React.js
Common Lisp Process (SBCL)
Spawn
Bidirectional Communication
+ Common Lisp
Make an SBCL executable and bundle it
![Page 30: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/30.jpg)
Looks a quite easy trick, huh? :)
![Page 31: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/31.jpg)
How communicating between CL and Browser
![Page 32: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/32.jpg)
Open
None (just a launcher)
Main Process (Node.js)
Renderer Process (Chromium)
React.js
Common Lisp Process (SBCL)
Spawn
Bidirectional Communication
+ Common Lisp
![Page 33: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/33.jpg)
Open
None (just a launcher)
Main Process (Node.js)
Renderer Process (Chromium)
React.js
Common Lisp Process (SBCL)
Spawn
Bidirectional Communication
+ Common Lisp
![Page 34: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/34.jpg)
Communication between CL and Browser
• MUST be bidirectional
• MUST be asynchronous
• MUST be easy to handle with JavaScript
• SHOULD be real-time
![Page 35: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/35.jpg)
We decided to use JSON-RPC
• Small specification
• Not depends on a specific transport layer
• We use WebSocket
• http://jsonrpc.org
• https://github.com/fukamachi/jsonrpc
![Page 36: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/36.jpg)
JSON-RPC--> {"jsonrpc": “2.0", "method": “subtract", "params": [42, 23], "id": 1}
Request
![Page 37: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/37.jpg)
JSON-RPC--> {"jsonrpc": “2.0", "method": “subtract", "params": [42, 23], "id": 1}
Request
<-- {"jsonrpc": “2.0", "result": 19, "id": 1}
Response
![Page 38: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/38.jpg)
JSON-RPC--> {"jsonrpc": “2.0", "method": “subtract", "params": [42, 23], "id": 1}
Request
<-- {"jsonrpc": “2.0", "result": 19, "id": 1}
Response
--> {"jsonrpc": “2.0", "method": “update", "params": [1,2,3,4,5]}
Notification (Request without “id”)
![Page 39: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/39.jpg)
How to structure GUI Application with Electron
![Page 40: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/40.jpg)
No best practices (yet) to build an Electron app.
![Page 41: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/41.jpg)
In our case
![Page 42: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/42.jpg)
Renderer Process
Store
View
Action Reducer
Flux Architecture
![Page 43: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/43.jpg)
functionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunctionfunction
Renderer Process
Store
View
ActionReducer
Flux Architecture
Common Lisp
JSON-RPC serverfunctionfunctionfunction
functionfunctionfunction
← JSON-RPC over WebSocket →
![Page 44: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/44.jpg)
Not only Browser ⇔ Common Lisp
![Page 45: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/45.jpg)
![Page 46: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/46.jpg)
Coin Counter IC Card Reader PrinterAPI Server
![Page 47: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/47.jpg)
Benefits of Flux + JRPC Architecture
• JavaScript part is just a UI renderer
• Business logics are all in Common Lisp
• Common Lisp functions are easy to test
• Other components are also easy to test
• Because they all talk in JSON-RPC
![Page 48: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/48.jpg)
How to develop the app
![Page 49: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/49.jpg)
Development
• You can use your machine (Mac, Linux, etc)
• Virtual devices are used while development
• Easy to make a mock of components
![Page 50: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/50.jpg)
Development
1. Run a Electron process (npm run dev)
2. Open REPL of the Common Lisp process from Emacs with Swank
3. Enjoy
![Page 51: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/51.jpg)
Packaging
1. Run Windows in Virtual Environment
2. npm run package
3. Wait
![Page 52: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/52.jpg)
Experiments
![Page 53: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/53.jpg)
Coin Counter IC Card Reader PrinterAPI Server
![Page 54: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/54.jpg)
Coin Counter IC Card Reader PrinterAPI Server
Hard to share data.
![Page 55: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/55.jpg)
“brain”, the central storage
• All data(state) are in Common Lisp part
• What service the user chose?
• How much money is in the user’s IC card?
• How many coins are in?
• etc.
• It’s just a hash-table (with thread-lock).
![Page 56: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/56.jpg)
“Propagation Class”Metaclass for synchronize data between components
![Page 57: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/57.jpg)
“Propagation Class”
(defclass user () ((balance :initarg :balance :accessor user-balance) (coins :initarg :coins :accessor user-coins)) (:metaclass propagation-class))
![Page 58: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/58.jpg)
“Propagation Class”
(defclass user () ((balance :initarg :balance :accessor user-balance) (coins :initarg :coins :accessor user-coins)) (:metaclass propagation-class))
(defmethod on-update ((user user) slot-name) (declare (ignore slot-name)) (notify “browser” “user/update-state” user))
![Page 59: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/59.jpg)
“Propagation Class”
(defvar *user* (make-instance ‘user …)))
;; Notify this modification ;; to the browser implicitly. (setf (user-balance *user*) 1730)
Bless the Meta Object Protocol.
![Page 60: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/60.jpg)
So, Why Common Lisp?
![Page 61: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/61.jpg)
Why Common Lisp?
• We ♥ Common Lisp :)
• Good for writing unknown/complicated applications.
• Interactive development with REPL.
![Page 62: Building GUI App with Electron and Lisp](https://reader031.fdocuments.net/reader031/viewer/2022021416/58e4c8301a28abc24e8b5d9d/html5/thumbnails/62.jpg)
Thanks.