Downloaded 44 times
![JSON-RPC
--> {"jsonrpc": “2.0",
"method": “subtract",
"params": [42, 23],
"id": 1}
Request](https://image.slidesharecdn.com/building-gui-with-lisp-170327133733/75/Building-GUI-App-with-Electron-and-Lisp-36-2048.jpg)
![JSON-RPC
--> {"jsonrpc": “2.0",
"method": “subtract",
"params": [42, 23],
"id": 1}
Request
<-- {"jsonrpc": “2.0",
"result": 19,
"id": 1}
Response](https://image.slidesharecdn.com/building-gui-with-lisp-170327133733/75/Building-GUI-App-with-Electron-and-Lisp-37-2048.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”)](https://image.slidesharecdn.com/building-gui-with-lisp-170327133733/75/Building-GUI-App-with-Electron-and-Lisp-38-2048.jpg)
Uploaded byfukamachi
Building GUI App with Electron and Lisp
This document discusses how an electronics payment company called Pocket Change built their GUI application using Common Lisp instead of JavaScript. They used the Electron framework, which normally uses JavaScript, but modified it to use Common Lisp instead. They spawned a Common Lisp process that communicates bidirectionally with the Electron processes using JSON-RPC over WebSockets. This allows the GUI code to be written in JavaScript as normal for Electron, while moving all the business logic to Common Lisp for improved testability and organization.
More Related Content
Similar to Building GUI App with Electron and Lisp
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codedagentsdeck-251215155422-5497c599-thumbnail.jpg?width=640&height=640&fit=bounds)
Building GUI App with Electron and Lisp
- 1. How Building GUIApp with Lisp The Case of Pocket Change, Inc. LISP MEETUP #50 Mar 27, 2017
- 2. I’m Eitaro Fukamachi @nitro_idiotfukamachi
- 3. Joined Pocket Changein Feb 1
- 4.
- 5. Available at HanedaAirport
- 6.
- 7. What I wantto tell today What I don’t tell How we use Common Lisp in our work How you can use Common Lisp in your work
- 9. Touch Screen Coins Bills ICCard Reader Receipt Printer API Server
- 10. Touch Screen Coins Bills ICCard Reader Receipt Printer API Server
- 11. Building the nextversion of this software is my work.
- 12. How to build PocketChange
- 13. • Windows OS(Rich!) • Fullscreen GUI application
- 14. We decided touse Electron https://electron.atom.io by
- 15.
- 16.
- 17. Open Web Server (Express) Main Process (Node.js) RendererProcess (Chromium) React.js
- 18. Open Web Server (Express) Main Process (Node.js) BidirectionalCommunication Renderer Process (Chromium) React.js
- 19. Why Electron? • Easyto deploy • Can package into a single EXE installer • Can build GUI with Web technologies • Embedded Chromium
- 20.
- 21. The language isJavaScript. 👎
- 22. Why can’t weuse Common Lisp?
- 23. None (just a launcher) MainProcess (Node.js) + Common Lisp
- 24. Open None (just a launcher) MainProcess (Node.js) + Common Lisp
- 25. Open None (just a launcher) MainProcess (Node.js) Renderer Process (Chromium) React.js + Common Lisp
- 26. Open None (just a launcher) MainProcess (Node.js) Renderer Process (Chromium) React.js Spawn + Common Lisp
- 27. Open None (just a launcher) MainProcess (Node.js) Renderer Process (Chromium) React.js Common Lisp Process (SBCL) Spawn + Common Lisp
- 28. Open None (just a launcher) MainProcess (Node.js) Renderer Process (Chromium) React.js Common Lisp Process (SBCL) Spawn Bidirectional Communication + Common Lisp
- 29. Open None (just a launcher) MainProcess (Node.js) Renderer Process (Chromium) React.js Common Lisp Process (SBCL) Spawn Bidirectional Communication + Common Lisp Make an SBCL executable and bundle it
- 30. Looks a quiteeasy trick, huh? :)
- 31. How communicating between CLand Browser
- 32. Open None (just a launcher) MainProcess (Node.js) Renderer Process (Chromium) React.js Common Lisp Process (SBCL) Spawn Bidirectional Communication + Common Lisp
- 33. Open None (just a launcher) MainProcess (Node.js) Renderer Process (Chromium) React.js Common Lisp Process (SBCL) Spawn Bidirectional Communication + Common Lisp
- 34. Communication between CLand Browser • MUST be bidirectional • MUST be asynchronous • MUST be easy to handle with JavaScript • SHOULD be real-time
- 35. We decided touse JSON-RPC • Small specification • Not depends on a specific transport layer • We use WebSocket • http://jsonrpc.org • https://github.com/fukamachi/jsonrpc
- 36. JSON-RPC --> {"jsonrpc": “2.0", "method":“subtract", "params": [42, 23], "id": 1} Request
- 37. JSON-RPC --> {"jsonrpc": “2.0", "method":“subtract", "params": [42, 23], "id": 1} Request <-- {"jsonrpc": “2.0", "result": 19, "id": 1} Response
- 38. 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”)
- 39. How to structure GUIApplication with Electron
- 40. No best practices(yet) to build an Electron app.
- 41.
- 42.
- 43. functionfunctionfunctionfunction functionfunctionfunctionfunctionfunctionfunctionfunction Renderer Process Store View ActionReducer Flux Architecture CommonLisp JSON-RPC server functionfunctionfunction functionfunctionfunction ← JSON-RPC over WebSocket →
- 44.
- 46. Coin Counter ICCard Reader Printer API Server
- 47. 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
- 48. How to developthe app
- 49. Development • You canuse your machine (Mac, Linux, etc) • Virtual devices are used while development • Easy to make a mock of components
- 50. Development 1. Run aElectron process (npm run dev) 2. Open REPL of the Common Lisp process from Emacs with Swank 3. Enjoy
- 51. Packaging 1. Run Windowsin Virtual Environment 2. npm run package 3. Wait
- 52.
- 53. Coin Counter ICCard Reader Printer API Server
- 54. Coin Counter ICCard Reader Printer API Server Hard to share data.
- 55. “brain”, the centralstorage • 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).
- 56. “Propagation Class” Metaclass forsynchronize data between components
- 57. “Propagation Class” (defclass user() ((balance :initarg :balance :accessor user-balance) (coins :initarg :coins :accessor user-coins)) (:metaclass propagation-class))
- 58. “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))
- 59. “Propagation Class” (defvar *user* (make-instance‘user …))) ;; Notify this modification ;; to the browser implicitly. (setf (user-balance *user*) 1730) Bless the Meta Object Protocol.
- 60.
- 61. Why Common Lisp? •We ♥ Common Lisp :) • Good for writing unknown/complicated applications. • Interactive development with REPL.
- 62.