Clojure Web框架Hoplon

Hoplon是一组Clojure和ClojureScript的功能库,Hoplon通过无处不在Clojure和ClojureScript,提供了一种设计和构建单页Web应用程序的简单方法。

hoplon web框架

名词解释

ClojureScript是一种编译为JavaScript的Lisp。

LispyScript是带有Lispy语法和宏的JavaScript。

Hoplon框架的构成

HTML结构

使用HLisp构建HTML的语义结构。

数据流

使用Javelin构建类似电子表格的数据流。

服务器

使用Castra Clojure和ClojureScript功能库与服务器进行交互,在服务器上定义函数,从客户端调用它们。

Hoplon的用法示例

一个简单的自定义元素

元素和自定义元素是常规函数,loud函数可以接收任意数量的children,构造并返回一个div,div里包含大写后的子元素。

(defn loud [& children]
  (div :css {:text-transform "uppercase"} children))

(loud "Lisp Can Do It")

有状态的自定义元素

在此示例中,timer函数初始化Javelin单元格,并使用window.setInterval对其进行定时更新,通过使用cell =创建的公式单元,使用反应式响应把数据附加到div中。

(defelem timer [attrs children]
  (let [start   (or (:start attrs) 0)
        seconds (cell start)]
    (.setInterval js/window #(swap! seconds inc) 1000)
    (div attrs (cell= (str "Seconds Elapsed: " seconds)))))

;; our first timer will start at 0 and count up
(p (timer :style "color: green;" :start 0))

;; start 3 more timers, each with different starting values
(apply ol (map li (for [r (range 1 4)] (timer :start r))))

用Hoplon写一个应用程序

在这个示例中,todo-list是一个简单待办事项列表的应用程序,应用程序在DOM事件发生时把用户的输入更新到待办事项列表中。

文本输入框上的:change事件,被附加到一个函数上,该函数在按键发生时更新列表的项。

按钮上的:click事件被附加到一个函数上,该函数将new-item的值,附加到dosync的todo-items的末尾。dosync是一种事务性构造函数,在更新多个单元格时会暂停通过单元格图获得新值。

(defelem todo-list [{:keys [title]} _]
  (let [todo-items (cell [])
        new-item   (cell "")]
    (div
      (h3 (or title "TODO"))
      (ul
        (loop-tpl :bindings [todo todo-items]
          (li todo)))
      (input :type "text"
             :value new-item
             :change #(reset! new-item @%))
      (button :click #(dosync
                       (swap! todo-items conj @new-item)
                       (reset! new-item ""))
        (text "Add #~{(inc (count todo-items))}")))))

(todo-list :title "TODO List")

有兴趣可以去Hoplon一探究竟。