Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
My slide for Elixir meetup Shanghai. Generate it with `landslide`.

ClojureScript 和 Clojure 初识


Me

  • 题叶 @jiyinyiyong
  • 前端, 饿了么

ClojureScript

(defn add-them [x y]
  (+ x y))

(println (add-them 1 2))

Clojure

  • 2007 年发明
  • 作者 Rich Hickey
  • Lisp-style syntax
  • JVM
  • Cognitect

ClojureScript

  • 2011 年
  • David Nolen
  • 更多的 stars

Platforms

  • JVM, 编译到 Java Bytecode
  • JavaScript, 通过 Closure Compiler 编译
  • Bootstraped ClojureScript
  • Mono(.Net), 不详(有 Unity 开发的例子)

安装和运行


安装编译工具 Boot

brew install boot-clj
  • 插件 boot-cljs, boot-reload

https://github.com/mvc-works/stack-workflow/blob/master/build.boot

Leiningen(older)


Clojure REPL

java -cp clojure.jar clojure.main

Run Clojure

With Boot

https://github.com/boot-clj/boot/wiki/Scripts

https://github.com/clojure-china/minimal-clj

#!/usr/bin/env boot

(defn f! []
  (println :f))

(defn -main [& args]
  (f!))

安装 ClojureScript 命令

brew install planck

brew install lumo # powered by V8, new
npm install lumo

npm install -g clojurescript # library only

https://github.com/clojure-china/minimal-cljs

https://github.com/clojure-china/minimal-cljs-build/blob/master/build.boot


namespace, jar

...Java, resource-paths, source-paths, asset-paths:

(ns demo.core)
(ns demo.something.core)

Java 影响

后端受到 Java 影响很重.

前端不能契合已有的生态链, 甚至 Node.js .

clj, cljs, cljc.


语法


数据类型

  • 1, "string", true, false, nil
  • :keyword (类似 Elixir Atom)
  • 'quote
  • symbol

常用 Collection

  • HashMap: {:a 1 :b {:c 2}}
  • Vector: [1 2 3 [4 5 6]], tree
  • Sequence: '(1 2 3 4), 链表
  • HashSet: #{1 2 3}

更多继承关系


控制流

(if (zero? n)
  (println "zero")
  (do (println "non zero")
      (println "still fine")))

(case x
  1 "one"
  2 "two"
  "others")

函数

(defn f [x y] (+ x y))

(fn [x y] (+ x y))

定义和绑定

(def a 1)

(let [a 1
      b 2]
  (+ a b))

recur

(defn show-all! [xs]
  (if (empty? xs)
    (println "End!")
    (do
      (println "Item:" (first x))
      (recur (rest xs)))))

Syntax

https://learnxinyminutes.com/docs/clojure/


不可变数据

  • Persistent Data Structure
  • mori(JavaScript 实现), object.freeze
  • =identical?

操作:

(assoc map-x :a 1)
(dissoc map-x :a)

(conj vector-x 1)
(into [] (butlast vector-x))

(cons 1 sequence-x)
(butlast sequence-x)

Macros

(eval '(+ 1 2)) ; cljs 支持有限
(println (first '(+ 1 2)))

Macros

(-> map-piece
  (assoc :a 1)
  (assoc :b 2))

(assoc (assoc data-piece :a 1) :b 2)

(->> list-piece
  (filter (fn [x] true))
  (into []))

(into [] (filter (fn [x] true) list-piece))

Reference(Atom)

管理可变状态:

(def state-a (atom 1))
(println @state-a)
(add-watch state-a :log (fn []))

(reset! state-a 2)
(swap! state-a inc)

Async

core.async (Go Channels):

(def chan-x (chan))

(go
  (let [x (<! chan-a)]
    (>! chan-b x)))
  • promise
  • future

前端 MVC


React

  • 性能优化问题
  • React 绑定, Om, Reagent, Rum...
  • 热替换
  • DSL for HTML

http://reagent-project.github.io/


Respo

自己写的:

http://respo.site/

https://github.com/Respo/minimal-respo


Thanks

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