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
- 如何引用 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
- 启动一个 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
- 括号的管理问题
- 代码热替换方案, 可调试性
Thanks.
- github.com/minimal-xyz
- 有 ClojureScript 问题, 微信联系 jiyinyiyong.
- 其他关于函数式编程 fp-china.org, 上海 Linux 用户组