Instantly share code, notes, and snippets.

Embed
What would you like to do?
cljs intro in FCC

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


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

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

Demo

calcit-workflow

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

Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment