[Day29] 從ClojureScript 到 Reframe (2)form & Event Handler Tracing 簡介

大家早安～
昨天debug到有點晚，但總算把re-frame專案裝起來了！

就算目前網站裡空空的，還是很感動呀！O_Q

今天和明天要講的東西又更複雜抽象，因此想到了一個新策略

• 目標1. 藉由參考網路上大大的re-frame專案，fork一份到自己的GitHub並成功運行在本機上
• 目標2. 藉由模仿與學習改專案裡的code來講解，並且完成預計理解的主題 - form & Event Handler Tracing
• 以及明天最終回！目標：the data roop

1. 熟能生巧: 再來安裝另一個re-frame專案

首先閱讀GitHub專案下的README.md，發現透過另一個package 管理器yarn，似乎可以取代npm加速開發

就來在Mac上用homebrew套件安裝

• step 1. brew install yarn

~/Projects/learn-re-frame-course-files/cheffy master*
❯ brew install yarn

==> Pouring yarn--1.22.19.all.bottle.tar.gz
==> Caveats
yarn requires a Node installation to function. You can install one with:
  brew install node
==> Summary
?  /usr/local/Cellar/yarn/1.22.19: 15 files, 5MB
==> Running `brew cleanup yarn`...
Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.
Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).

• step 2. yarn install

~/Projects/learn-re-frame-course-files/cheffy master* 23s
❯ yarn install

yarn install v1.22.19

warning ../../../package.json: No license field
info No lockfile found.
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package
managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.j
son.

[1/4] ?  Resolving packages...
warning @smooth-ui/core-sc > polished@2.3.3: polished@2.X is no longer supported. Please upgrade to @latest for important bug and secur
ity fixes.
warning react-highlight.js > highlight.js@9.18.5: Support has ended for 9.x series. Upgrade to @latest
warning shadow-cljs > node-libs-browser > url > querystring@0.2.0: The querystring API is considered Legacy. new code should use the UR
LSearchParams API instead.
[2/4] ?  Fetching packages...
[3/4] ?  Linking dependencies...

[4/4] ?  Building fresh packages...
success Saved lockfile.
✨  Done in 28.56s.

• yarn dev

yarn dev跟昨天自己re-frame專案裡的npm run watch 的功能類似

我們可以透過觀察專案裡package.json這個檔案:

  2   "scripts": {
  1     "dev": "shadow-cljs watch app",
12      "release": "shadow-cljs release app",
  1     "server": "shadow-cljs server",
  2     "clean": "rm -rf target && rm -rf public/js",
  3     "clean-win": "rmdir /s /q public/js & rmdir /s /q target"
  4   },

得知 dev參數是啟動shadow-cljs watch app

~/Projects/learn-re-frame-course-files/cheffy master* 30s
❯ yarn dev

yarn run v1.22.19
warning ../../../package.json: No license field
$ shadow-cljs watch app
shadow-cljs - config: /Users/tingtinghsu/Projects/learn-re-frame-course-files/cheffy/shadow-cljs.edn
Execution error (UnsupportedClassVersionError) at java.lang.ClassLoader/defineClass1 (ClassLoader.java:-2).
com/google/javascript/jscomp/CompilerOptions has been compiled by a more recent version of the Java Runtime (class file version 55.0), this version of the Java Runtime only recognizes class file versions up to 52.0

Full report at:
/var/folders/tp/sp7zkj9n4_s3bq36vy4nqd1m0000gn/T/clojure-7131760119473215068.edn
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

我們又看到熟悉的error: UnsupportedClassVersionError

不用擔心，跟昨天的處理方式一樣～

因為昨天已經在電腦裡裝好了Java 11

加一個tool-version檔案讓java版本指定為version 55(Java 11)

java zulu-11.58.23

就可以再 yarn dev 一次

~/Projects/learn-re-frame-course-files/cheffy master*
❯ yarn dev
yarn run v1.22.19

$ shadow-cljs watch app
shadow-cljs - config: /Users/tingtinghsu/Projects/learn-re-frame-course-files/cheffy/shadow-cljs.edn

成功啟動專案囉！

form & Event Handler Tracing

大家會看到專案頁面的右邊?有個panel，是re-frame-10x debug tool

來理解一下用途吧！

首先，我們知道clojure語法是由form組合起來的

• (+ 1 2)就是一個+form
• (def ironman :tingting) 是個 def form

當我們去evaluate (def ironman :tingting) 這句時
可以看到current form是誰

re-frame-10x這個好用的套件所show出來的panel，就可以幫助我們理解怎樣去trace event handler.

當我們執行Clojure程式時會去執行不同的form，

因為Clojure的function就像是一堆form組成的tree

因此關於要如何去trace Clojure code，會包含以下概念:

• 理解現在是哪個form會被excuted
• 理解執行的順序(order)
• 帶進去的argument value
• return value是誰

The excution of Clojure function is the form which is the body of the function which returns a value

• 圓圈1. Event tab: 用來trace event handler

• 圓圈2. get-in db [:session :network-id] 利用get-in API 去拿到session的network-id

• 圓圈3. 一層一層的form如何被分解出來執行：

1.  ctx
2.  (get-timestamp ctx)
3.  network-id
4.  db
5.  [:ssesion :network/id]
6.  圓圈2.`get-in db [:session :network-id]`
7.  如果有network-id，從db拿出session的資料

這樣的一層一層的執行結構，就可以透過Event tab去trace囉！

下回預告

Event handling其實只是ClojureScript從拿到data到執行最終顯示在前端過程的一部分

明天會串起來介紹data loop，包含6個層面

• Event dispatch
• Event handling
• Effect handling
• Query
• View
• DOM

最後附上一句，當我們programming in Clojure(Script)，我們其實是在programming in data. :)

You are programming in data. The functions which later transform data, themselves start as data. Computation involves evaluating data. Macros, running at compile time, take code (which is just data) and rewrite it to other code (other data). The duality of code and data runs deep. ref