The case of Pocket Change, Inc. Talk at Lisp Meetup #50

1. How Building GUI App with Lisp
The Case of Pocket Change, Inc.
LISP MEETUP #50 Mar 27, 2017

2. I’m Eitaro Fukamachi
@nitro_idiot fukamachi

3. Joined Pocket Change in Feb 1

4. Pocket Change
http://www.pocket-change.jp

5. Available at Haneda Airport

6. Today’s topic

7. 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

9. Touch Screen
Coins Bills
IC Card Reader
Receipt Printer
API Server

10. Touch Screen
Coins Bills
IC Card Reader
Receipt Printer
API Server

11. Building the next version of this software
is my work.

12. How to build
Pocket Change

13. • Windows OS (Rich!)
• Fullscreen GUI application

14. We decided to use Electron
https://electron.atom.io
by

15. Web Server
(Express)
Main Process
(Node.js)

16. Open
Web Server
(Express)
Main Process
(Node.js)

17. Open
Web Server
(Express)
Main Process
(Node.js)
Renderer Process
(Chromium)
React.js

18. Open
Web Server
(Express)
Main Process
(Node.js)
Bidirectional Communication
Renderer Process
(Chromium)
React.js

19. Why Electron?
• Easy to deploy
• Can package into a single EXE installer
• Can build GUI with Web technologies
• Embedded Chromium

20. However

21. The language is JavaScript. 👎

22. Why can’t we use Common Lisp?

23. None
(just a launcher)
Main Process
(Node.js)
+ Common Lisp

24. Open
None
(just a launcher)
Main Process
(Node.js)
+ Common Lisp

25. Open
None
(just a launcher)
Main Process
(Node.js)
Renderer Process
(Chromium)
React.js
+ Common Lisp

26. Open
None
(just a launcher)
Main Process
(Node.js)
Renderer Process
(Chromium)
React.js
Spawn
+ Common Lisp

27. Open
None
(just a launcher)
Main Process
(Node.js)
Renderer Process
(Chromium)
React.js
Common Lisp Process
(SBCL)
Spawn
+ Common Lisp

28. Open
None
(just a launcher)
Main Process
(Node.js)
Renderer Process
(Chromium)
React.js
Common Lisp Process
(SBCL)
Spawn
Bidirectional Communication
+ Common Lisp

29. 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

30. Looks a quite easy trick, huh? :)

31. How communicating
between CL and Browser

32. Open
None
(just a launcher)
Main Process
(Node.js)
Renderer Process
(Chromium)
React.js
Common Lisp Process
(SBCL)
Spawn
Bidirectional Communication
+ Common Lisp

33. Open
None
(just a launcher)
Main Process
(Node.js)
Renderer Process
(Chromium)
React.js
Common Lisp Process
(SBCL)
Spawn
Bidirectional Communication
+ Common Lisp

34. Communication between CL and Browser
• MUST be bidirectional
• MUST be asynchronous
• MUST be easy to handle with JavaScript
• SHOULD be real-time

35. 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

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
GUI Application with Electron

40. No best practices (yet)
to build an Electron app.

41. In our case

42. Renderer Process
Store
View
ActionReducer
Flux Architecture

43. functionfunctionfunctionfunction
functionfunctionfunctionfunctionfunctionfunctionfunction
Renderer Process
Store
View
ActionReducer
Flux Architecture
Common Lisp
JSON-RPC server
functionfunctionfunction
functionfunctionfunction
← JSON-RPC over WebSocket →

44. Not only
Browser Common Lisp

46. Coin Counter IC Card 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 develop the app

49. Development
• You can use your machine (Mac, Linux, etc)
• Virtual devices are used while development
• Easy to make a mock of components

50. Development
1. Run a Electron process (npm run dev)
2. Open REPL of the Common Lisp process
from Emacs with Swank
3. Enjoy

51. Packaging
1. Run Windows in Virtual Environment
2. npm run package
3. Wait

52. Experiments

53. Coin Counter IC Card Reader Printer
API Server

54. Coin Counter IC Card Reader Printer
API Server
Hard to share data.

55. “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).

56. “Propagation Class”
Metaclass for synchronize 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. So,
Why Common Lisp?

61. Why Common Lisp?
• We ♥ Common Lisp :)
• Good for writing unknown/complicated
applications.
• Interactive development with REPL.

62. Thanks.