cljs intro in FCC

slide.md

ClojureScript 的开发体验(演示)

---

自我介绍

• 题叶, jiyinyiyong, tiye.me
• 上海积梦, 前端工程师, React/TypeScript/Immer.
• 工业大数据方向, 创业公司(招**)

---

Clojure

• 现代化的 Lisp 方言,
• 可以编译到 JVM/JavaScript 运行,
• 不可变数据, Atom(原子性操作的抽象),
• ClojureScript(cljs), 契合 React 的理念,界面开发.

---

一些 ClojureScript 个人项目

• ClojureScript 两年, 个人项目, 工具链.
• 代替 TypeScript 来写脚本,
• 适合做原型, 适合涂涂改改, Lisp 工具链, 灵活性
• Respo, TopixIM, Memkits, 比如...

---

ClojureScript 的实际操作

• 在 REPL 和命令行尝试 cljs
• 用编译器控制 cljs 的编译和开发
• 在浏览器环境运行 cljs
• ...
• 最后一步, 我是怎样用 cljs 开发页面的

---

ClojureScript 的编译运行工具

• Official ClojureScript Compiler
• Figwheel
• Plank, Lumo(基于 Node.js)
• shadow-cljs(对 npm 生态支持最好)

---

怎样画一匹马

---

Lumo: REPL 和命令行工具

(如果你想尝试 ClojureScript)

---

Lumo 安装

npm install -g lumo-cljs
lumo

• 启动 REPL
• 执行 cljs 脚本

---

数据结构

cljs.user=> (+ 1 2)
3
cljs.user=> (list 1 2 3 5)
(1 2 3 5)
cljs.user=> {:a 1 :b {:c 2}}
{:a 1, :b {:c 2}}
cljs.user=> [1 2 3 4 5]
[1 2 3 4 5]

---

变量和函数

cljs.user=> (def a 1)
#'cljs.user/a
cljs.user=> (+ a 2)
3
cljs.user=> (defn f1 [x y] (* x y 100))
#'cljs.user/f1
cljs.user=> (f1 2 3)
600

---

调用 JavaScript API

cljs.user=> (.log js/console js/process.argv)
[ '/usr/local/Cellar/lumo/1.8.0/bin/lumo', 'nexe.js' ]
nil
cljs.user=> (.now js/Date)
1536768050905
cljs.user=> (.forEach (clj->js [1 2 3 4]) (fn [x] (println x)))
1
2
3
4
nil

---

调用 Node.js 模块

cljs.user=> (def fs (js/require "fs"))
#'cljs.user/fs
cljs.user=> (fs.readdirSync ".")
#js [".git"
     ".gitattributes"
     "src"
     "target"
     "yarn.lock"]

---

shadow-cljs: 编译 cljs 代码

(如果你想开发 ClojureScript 项目)

---

shadow-cljs 写 Node.js 脚本

npm install -g shadow-cljs

• 编译, 优化, npm 模块支持
• 一些开发工具

---

shadow-cljs.edn

{:source-paths ["src"]
 :dependencies []
 :builds {:app {:target :node-script
                :output-to "target/main.js"
                :main server.main/main!
                :devtools {:after-load server.main/reload!}}}}

---

Demo

minimal-shadow-cljs-nodejs

• 如何引用 Clojure 模块
• 如何引用 npm 模块

---

shadow-cljs: 网页开发环境

---

shadow-cljs 写简单的网页

{:source-paths ["src"]
 :dependencies []
 :builds {:app {:output-dir "target/"
                :asset-path "."
                :target :browser
                :modules {:main {:entries [app.main]}}
                :devtools {:after-load app.main/reload!
                           :http-root "target"
                           :http-port 8080}}}}

---

Demo

minimal-shadow-cljs-browser

• 启动一个 REPL 连接到运行时

---

...add some details...

---

...some problems...

• 怎样管理括号?
• 不可变数据/尾递归
• Maven, JVM 报错, Leiningen/Boot?
• 怎么理解 Macro?
• 前端资源怎样打包上线?
• 怎么加 Clojure 的群?
• Reagent, Rum, Om, Respo 怎么选?
• ...

---

...some resources...

• http://cljs-book.clj.im/
• http://cljs.info/cheatsheet/
• http://clojure-script.org/
• https://www.braveclojure.com/clojure-for-the-brave-and-true/
• https://clojure.org/community/books

---

calcit-workflow: 某一个 cljs 开发工作流

• 灵活的开发环境
• Virtual DOM 和数据状态管理
• 组件化, 基础样式, UI 模块
• 建构和发布

---

Demo

calcit-workflow

• 括号的管理问题
• 代码热替换方案, 可调试性

---

Thanks.

• github.com/minimal-xyz
• 有 ClojureScript 问题, 微信联系 jiyinyiyong.
• 其他关于函数式编程 fp-china.org, 上海 Linux 用户组