dummy node benchmark for creating react elements in cljs

benchmark.cljs

(ns shadow.grove.react.benchmark
  (:require
    ["benchmark" :as b]
    ["react" :as react :rename {createElement rce}]
    ["react-dom/server" :as rdom]
    [hx.react :as hx]
    [shadow.grove.react :as shadow]
    [reagent.core :as reagent]
    [rum.core :as rum]
    [fulcro.client.dom :as fulcro-dom]))

(defn reagent-render [{:keys [title body items]}]
  (rdom/renderToString
    (reagent/as-element
      [:div.card
       [:div.card-title title]
       [:div.card-body body]
       [:ul.card-list
        (for [item items]
          ^{:key item} [:li item])]
       [:div.card-footer
        [:div.card-actions
         [:button "ok"]
         [:button "cancel"]]]])))

(defn shadow-render [{:keys [title body items]}]
  (rdom/renderToString
    (shadow/<<
      [:div.card
       [:div.card-title title]
       [:div.card-body body]
       [:ul.card-list
        (shadow/render-seq
          items
          identity
          (fn [item]
            (shadow/<< [:li item])))]
       [:div.card-footer
        [:div.card-actions
         [:button "ok"]
         [:button "cancel"]]]])))

(defn react-render [{:keys [title body items]}]
  (rdom/renderToString
    (rce "div" #js {:className "card"}
      (rce "div" #js {:className "card-title"} title)
      (rce "div" #js {:className "card-body"} body)
      (rce "ul" #js {:className "card-list"}
        (shadow/render-seq
          items
          identity
          (fn [item]
            (rce "li" #js {} item))))
      (rce "div" #js {:className "card-footer"}
        (rce "div" #js {:className "card-actions"}
          (rce "button" nil "ok")
          (rce "button" nil "cancel"))))))

(defn hx-render [{:keys [title body items]}]
  (rdom/renderToString
    (hx/f
      [:div {:class "card"}
       [:div {:class "card-title"} title]
       [:div {:class "card-body"} body]
       [:ul {:class "card-list"}
        (for [item items]
          [:li {:key item} item])]
       [:div {:class "card-footer"}
        [:div {:class "card-actions"}
         [:button "ok"]
         [:button "cancel"]]]])))

(rum/defc rumc [{:keys [title body items]}]
  [:div.card
   [:div.card-title title]
   [:div.card-body body]
   [:ul.card-list
    (for [item items]
      [:li {:key item} item])]
   [:div.card-footer
    [:div.card-actions
     [:button "ok"]
     [:button "cancel"]]]])

(defn rum-render [props]
  (rdom/renderToString
    (rumc props)))

(defn fulcro-dom-render [{:keys [title body items]}]
  (rdom/renderToString
    (fulcro-dom/div {:className "card"}
      (fulcro-dom/div {:className "card-title"} title)
      (fulcro-dom/div {:className "card-body"} body)
      (fulcro-dom/ul {:className "card-list"}
        (shadow/render-seq
          items
          identity
          (fn [item]
            (fulcro-dom/li {} item)
            )))
      (fulcro-dom/div {:className "card-footer"}
        (fulcro-dom/div {:className "card-actions"}
          (fulcro-dom/button "ok")
          (fulcro-dom/button "cancel"))))))

(defn log-cycle [event]
  (println (.toString (.-target event))))

(defn log-complete [event]
  (this-as this
    (js/console.log this)))

(defn main [& args]
  (let [test-data {:title "hello world"
                   :body "body"
                   :items (shuffle (range 10))}]
    (println "react")
    (println (react-render test-data))
    (println "reagent")
    (println (reagent-render test-data))
    (println "shadow")
    (println (shadow-render test-data))
    (println "hx")
    (println (hx-render test-data))
    (println "rum")
    (println (rum-render test-data))
    (println "fulcro-dom")
    (println (fulcro-dom-render test-data))

    (when-not (= (react-render test-data)
                 (reagent-render test-data)
                 (shadow-render test-data)
                 (hx-render test-data)
                 (rum-render test-data)
                 (fulcro-dom-render test-data))
      (throw (ex-info "not equal!" {})))

    (-> (b/Suite.)
        (.add "react" #(react-render test-data))
        (.add "reagent" #(reagent-render test-data))
        (.add "shadow" #(shadow-render test-data))
        (.add "hx" #(hx-render test-data))
        (.add "rum" #(rum-render test-data))
        (.add "fulcro-dom" #(fulcro-dom-render test-data))
        (.on "cycle" log-cycle)
        ;; (.on "complete" log-complete)
        (.run))))

react x 109,719 ops/sec ±0.73% (93 runs sampled)
reagent x 51,251 ops/sec ±2.37% (91 runs sampled)
shadow x 97,151 ops/sec ±0.12% (97 runs sampled)
hx x 6,039 ops/sec ±11.34% (94 runs sampled)
rum x 80,007 ops/sec ±0.91% (94 runs sampled)
fulcro-dom x 83,931 ops/sec ±1.78% (92 runs sampled)