Clojurians Log v2

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)

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

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

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

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

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

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

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

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

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
 [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'))]
  (svg/g
   (h/when-tpl (j/cell= slice)
    [
     (svg/path
      :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/text
      :svg/x (j/cell= (first x-y))
      :svg/y (j/cell= (second x-y))
      :svg/dy "0.3em"
      :svg/font-weight "bold"
      :svg/text-anchor
      (let [end-tolerance (/ wheel.math.number/tau 15)]
       (j/cell=
        (cond
         ; near the bottom
         (>=
          end-tolerance
          (Math/abs (- (* 2 wheel.math.number/lambda) angle)))
         "middle"

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

         ; 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):

@thedavidmeister uploaded a file: https://clojurians.slack.com/files/U0D4G0Q4U/F8K278R29/screen_shot_2017-12-24_at_2.03.00_pm.png

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

@thedavidmeister thanks for that

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

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

try that with React…