The :hoplon: ClojureScript Web Framework - http://hoplon.io/

This question may be overly broad...but can we compare/contrast Hoplon and the ClojureScript bindings for React (Om, Rum, Reagent)? I didn't know anything about those when I started making a small app in Hoplon but having read about them since, there seem to be a lot of similar abilities (e.g. define HTML components in ClojureScript)

flyboarder 2017-12-24T01:41:21.000001Z

@jamesvickers19515 there are similarities, however while those use react.js under the hood, hoplon uses native javascript internally and cljs features for the “reactive” parts of hoplon


Makes sense. I saw Hoplon mentioned in a thread comparing these CLJS React libraries, basically saying you could use it if your app wasn't huge/complex and didn't have significant performance considerations. Is that a fair characterization? The app I'm making is not particularly large or complex and doesn't interact with a server (client side only).

flyboarder 2017-12-24T01:44:25.000064Z

I disagree, I would say so long as you dont intend to use react native, there is no reason to use those over hoplon

flyboarder 2017-12-24T01:47:13.000061Z

I personally feel those libraries add bloat and additional layers of complexity which are not needed in most applications

flyboarder 2017-12-24T01:47:32.000050Z

at Degree9 we exclusively use Hoplon for the client portion of our applications.

flyboarder 2017-12-24T01:48:39.000034Z

but I dont have any direct comparison for benchmarks between the two

flyboarder 2017-12-24T01:50:19.000015Z

I think the buzz around those libraries makes people overlook solutions which are simpler and designed in cljs

flyboarder 2017-12-24T01:55:00.000013Z

I always ask people what does the structure of your application look like in memory? In the browser it’s the same as the structure of your HTML, so your code should look like your HTML, Hoplon is the only thing that does this IMO

flyboarder 2017-12-24T01:55:44.000054Z

@jamesvickers19515 this is just my personal view tho


Thanks for the thoughtful response! I was getting sucked into considering bringing in one of those React libraries but it doesn't seem like a great fit for this application. Hoplon it is! I have liked it so far.


Is there an example somewhere of doing charts (data visualization) in Hoplon, that update when a Javelin cell changes or something?


What kind of CLJS charting libraries do people use with Hoplon? Maybe that's a weird question since Hoplon wouldn't be opinionated about that.

flyboarder 2017-12-24T01:58:42.000034Z

you can use any js charting library, checkout whats available on CLJSJS


@jamesvickers19515 this "hoplon is bad for performance" thing has been floating around but i haven't seen it in anything i've done


there are some hand wavey references to ancient forum posts, but i looked at them and to me it just looked like badly designed code, not something hoplon was doing


hoplon is simple and powerful, but doesn't have a marketing juggernaut behind it 🙂


if anything, you might get tripped up by the eagerness of javelin cell evaluation but:


1. javelin is technically not hoplon 😛


2. it's pretty easy to work around eager evaluation thrashing the CPU using standard techniques like throttle/debounce, etc.


3. if you ever come across some serious performance issue, we'll look into it, i'm sure we can improve things if we have actual examples of problems 😉


@flyboarder yaaaaaay on 7.1


@jamesvickers19515 for charting i use some utility funtions and raw hoplon.svg


javelin + hoplon is already basically a much better version of what d3 tries to do


so i use the part of d3 that calculates SVG path strings and ignore the rest


e.g. here is a slice of a pie chart that i made


(defn pie-slice
 (let [centroid (j/cell= (apply d3-cljs.arc/polar-centroid (flatten (vec slice))))
       angle (j/cell= (mod (second centroid) wheel.math.number/tau))
       ; annoyingly d3 quadrants are *clockwise*
       quadrant (j/cell= (quot (second centroid) wheel.math.number/lambda))

       ; arc measures angles from q3 so we have to rotate by -lambda to get
       ; x/y as expected by svg.
       centroid' (j/cell= [(+ (:outer-radius slice) spacing.data/mini-pad)
                           (- (second centroid) wheel.math.number/lambda)])
       x-y (j/cell= (apply wheel.math.geometry/polar->cartesian centroid'))]
   (h/when-tpl (j/cell= slice)
      :svg/d (j/cell= (some->> slice vec flatten (apply d3-cljs.arc/arc)))
      :svg/stroke colours.data/strongdarkpurple
      :svg/fill colours.data/strongdarkpurple
      :svg/fill-opacity (j/cell= (if (:pie.slice/fill? slice) 1 0)))
      :svg/x (j/cell= (first x-y))
      :svg/y (j/cell= (second x-y))
      :svg/dy "0.3em"
      :svg/font-weight "bold"
      (let [end-tolerance (/ wheel.math.number/tau 15)]
         ; near the bottom
          (Math/abs (- (* 2 wheel.math.number/lambda) angle)))

         ; near the top
          (>= end-tolerance angle)
          (>= angle (- wheel.math.number/tau end-tolerance)))

         ; rhs
         (#{0 4 1} quadrant) "start"

         ; lhs
         :else "end")))

      (j/cell= (:pie.slice/label slice)))]))))


yields something like this (i could probs put a little more whitespace on the text at the top):


@jamesvickers19515 all this should be on the hoplon home page, we get asked this stuff a lot >.<


@thedavidmeister thanks for that

dm3 2017-12-24T17:22:34.000045Z

the only problem with Hoplon - there are like 20 people total actively using it

dm3 2017-12-24T17:22:49.000025Z

but it’s small enough to actually read and understand the source code

dm3 2017-12-24T17:23:00.000015Z

try that with React…