@micha "the cond-tpl macro that's going to be merged seems like it would be ideal for that use case” Whoa, someone’s working on cond-tpl? I was just about to work on it, but will give way if someone else is on it.

Sooo, something that I faced, was a third party script that was heavy

so I only wanted to load it into the page after an event had triggered

so I did event-triggered? in a cell

then (cell= (if event-triggered? (script …)))

which seemed to work, but my problem is the performance issues i see haven’t lined up with my understanding of “building a complex tree"

as in, I’d build the DOM, the DOM looked like it had finished building (which I would have expected to be all the computation required) but then all my events and functions from that point onwards run waaaay slower

so it would be a permanent slowdown of the whole site

it’s also sporadic and hard to reproduce

I think it may have gotten better when i moved from Hoplon alpha10 to alpha13, but I also might be imagining that >.<

I’ll just keep everyone posted as I have info/examples...

is there anything noticeable in the profiler?

I somehow doubt that the same functions will take slower after the DOM loaded than before

that’s what was happening

like, so obvious...

unless your database grows by a lot

like the app nearly crashed

i had one tab open running master

and one running my branch

master had more data in it and was silky fast

the other branch had very little data and was sluggish

and what's in your branch?

the only thing i changed was creating a (cell= (if foo bar baz))

at first i thought it was my routing implementation

but i set it back to default hoplon route-cell

i have an event triggering on :input on form inputs

if i mashed the keys, i’d see multiple second delays

buuuut i threw it all away and went with :toggle

so i’ll just keep an eye on things, and if i see it again, i’ll flag it

side question

for attributes on elements

are on! and do! the only options?

so it's not the (cell= (if event? (script...))) that slowed things down? I'm confused

what other options do you need?

i’m trying to improve the docs

so i want to know i’ve covered the right stuff

@dm3: when i started swapping elements in the DOM based on an if in a cell=, i got weird performance

that’s the best way i can describe it

sorry!

i did a tiny bit of profiling and jquery adding events was really high in time

@dm3: so yes, on! and do! are the only options for attributes?

regarding the performance - please read the conversation we had with Micha yesterday

also if you have the time to put some of the results to Wiki - would be awesome!

i worked on this yesterday https://github.com/hoplon/hoplon/wiki/API-Documentation

I think on and do are the only multimethods available

but i got some of the details about attributes wrong

so i want to update that

OK cool

and any function values will go to on! and all other values go to do! yeah?

so do! is when you want to perform some action on the element

like :toggle

and on! is when you want something to happen when a certain event is triggered

or just create an attribute

i think the bit that i was missing was that do! also handles adding HTML attributes

yes, by default

and on! attaches an event listener by default

i’m going to actually put the things implemented by do! that are not the default attribute creation in the wiki

because, as cool as hoplon is, it’s not fun poking around in core to find this stuff

not sure how useful on! being a multimethod is

custom events probably

something jquery supports

but it’s probably not useful for simple apps or hoplon core

it will do that by default

(.on elem event-key callback)

as in, you might want a custom event that does something to all elements

without you needing to stick your own handler on everything

i don’t see any harm in it, and there would be some edge cases where it could help

even if just for debugging

(defmethod on! :my-event [elem event callback]
     ;; register your callback in some specific way?)

yeah

(defmethod on! :my-event [elem event callback]
     (prn elem))

the event handler version of (cell= (prn my-cell))?

but this is not the handler

you call on! when you register a callback

hm

so like wrapping a callback into something else before attaching

if I do your code above, for a :click event

does it run when the thing is clicked, or when the click event is bound to the element?

when bound

oh

lame

but you can still do

(defmethod on! :my-event [e ev cb]
   (.on (js/jQuery e) ev (fn [e] (prn e) (cb e))))

are you sure?

that doesn’t seem that useful

lol

but then again - you can do that in a different place

so I don't see how on! being a multimethod is very useful

neither do i

but i didn’t write it

sooo

i won’t pretend to know anything about it 😛

well, Hoplon is designed from the point of providing small and general abstractions for creating a DSL for writing your application

on! is useful if you don’t want to use the default jquery stuff.

yeah, it allows to plug in into the (input :click #(...)) mechanism

if you want to bail on jQuery

it also helps you define some custom stuff. For example, for my own app, i define :drag

hm, haven't thought of that I also have draggable stuff

clojure
(defmethod on! :drag
  [elem event callback]
  (let [mousedown? (atom false)
        down-ev (atom nil)]

    (when-dom elem
      (fn []
        (.mousedown (js/jQuery elem)
                    (fn [ev]
                      (reset! mousedown? true)))
        (.mouseup (js/jQuery elem)
                  (fn [ev]
                    (reset! mousedown? false)))
        #_(.mouseout (js/jQuery elem)
                     (fn [ev]
                       (reset! mousedown? false)
                       (reset! down-ev nil)))
        (.mousemove (js/jQuery elem)
                    (fn [ev]
                      (if @mousedown?
                        (callback ev))))))))

oh yeah, i need to do drag and drop re-ordering of form inputs at some point

i’ll need a hand with that >.<

well there you have it 😄

i will definitely forget that

😛

I’ll make a post in the cookbook for you

https://github.com/hoplon/hoplon/wiki/Cookbook#dragging-and-other-custom-behaviorsevents

here you go, @thedavidmeister 😄

coool

hang on

just writing up ^^

Any **attributes** that have function values will be handled by the `on!` multimethod. Hoplon core only implements the default case for the multimethod, which will simply bind the passed function to the jQuery event with the same name as the attribute key.

When the event triggers the bound event, the first argument will be the jQuery event. Hoplon implements `IDeref` for the jQuery event to call jQuery's own `.val` on the event's original target element.

As an example, we can use `on!` to respond to the user clicking (triggering the `:click` event) on an `input` by alerting the current text value of the input:

`(input :type "text" :click #(js/alert @%))`

Even though `on!` is provided only with a default case, the multimethod exists so that custom function binding outside of what jQuery provides can be handled in a standard way.

does that look right?

Hmmm

As far as i know, input is a special case for the IDeref. Can anyone confirm this?

Or is it that it’s always IDeref, and only a few elements like input actually have anything useful to put in there?

In which case, your writeup looks good, @thedavidmeister!

(extend-type js/jQuery.Event
  cljs.core/IDeref
  (-deref [this] (-> this .-target js/jQuery .val)))

Oh! nice

could someone walk me through this one?

(defmethod do! :class
  [elem _ kvs]
  (let [elem  (js/jQuery elem)
        ->map #(zipmap % (repeat true))
        clmap (if (map? kvs)
                kvs
                (->map (if (string? kvs) (.split kvs #"\s+") (seq kvs))))]
    (doseq [[c p?] clmap] (.toggleClass elem (name c) (boolean p?)))))

does it just take a map of classes and converts to a string?

or is it more than that?

well, not converts to a string

ensures that those classes are on the element

and if a string is passed, also handles that?

so you need to do

:class {:my-class true :another-class true}?

yep

it doesn't convert to a string

but rather converts a string to a map

so I can do :class “my-class another-class”

and have both of those appear

yes

or i can do

:class {:my-class true :another-class true :not-this-class false}

to make sure that third class is removed if present?

but, if you have (input :class (cell= "a b") and then cell value changes to (input :class (cell= "a")), the "b" class won't disappear

as the code doesn't go through all classes present on the element

unless i specifically set it to false

yes, which is impossible in the string representation

so I guess the rule is - only use strings for static classes

does this work?

:class {:add-me :and-me}

no

I mean it does

have we considered a generic :trigger for do!?

but won't do what you would expect

what is a generic trigger?

(div :trigger :click)

what would that do?

trigger a click event on div

so

(div :trigger :select) = (div :select true)

I think this is useless 😄

which allows (div :trigger :select :select #(js/alert “selected!”))

otherwise how do you facilitate triggering and handling events on one element?

so this would happen when the element is created?

or when it's attached to the DOM?

no, with a (cell= ) controlling the timing/conditions, of course

I still don't understand - how would you do this without :trigger?

i worked around this like

:select (cell= (and (= list-id select-list-id) (= id select-id)))
          :focusin #(in/clear-select! in/conn)

you can probably guess what those functions do

but not everything has a counterpart with a different name

like :click

and how would that look with trigger?

sorry 😞 I still don't understand

1 sec

phone

back

umm

:trigger {:select (cell= (and (= list-id select-list-id) (= id select-id)))} :select #(in/clear-select! in/conn)

it’s ugly, but I don’t know a better way to trigger and also bind to an event?

should not :select be :selected in this case?

OK, but what about :click?

I guess you have different types of attributes: 1. properties, like selected or class where you might want a dynamic value 2. actions, like click, which you want to trigger at certain times using do! 3. event handlers, like click (really on-click), which you want to attach to an element during constructions

well yes

it’s just weird because you can have name conflicts

I understand you propose attaching triggers for 2. through :trigger

I think it's better served by doing something like (cell= (do! elem :click ...))

that's because it does something

not just changes value of a property

so you want to be explicit

where do I put that?

(with-let [elem (input ...)]
    (cell= (...)))

from my experience triggering usually happens in other places in code though

ok

i don’t think i’ve used with-let yet

it's a shortcut for

(let [a x] ... a)

oooh

@dm3: would you mind reading over the attributes section here? https://github.com/hoplon/hoplon/wiki/API-Documentation

ok, a bit later

np

is it possible to redefine the behavior of (a :href ....) with a do method to automatically perform some action like say, posting an event to GA before performing the default behavior?

@raywillig: I do believe that is the case.

my question was a cleverly disguised passive aggressive plea for help in doing it

(defmethod do! :href
  [elem event callback]
  (.preventDefault event)
  ;; post to GA
  ;; execute default behavior)

haha i was already typing the above after my first message 😛

very interesting. now suppose i wanted :target "_blank" even if the stupid coder (me) left that out of the function

(defmethod do! :href
  [elem key val]
  (.preventDefault event)
  ;; post to GA
  (.open js/window val))

hang on

my first code block is a confused one 😛 it’s conflating on! and do!

and it’s leaking into my second one

there should be no “event” necessary

so really, all you’d need to do is:

i was wondering about that

(defmethod do! :href
  [elem key val]
  ;; post to GA
  (.open js/window val))

should this be defined in index.cljs.hl or can be defined anywhere?

it just has to be called before you render it

so i guess you can just put it in a util

and then require it in your index

but i’d advise you to put it in your index first just to see

sweet. this is a game changer for me

i could be forgetting some stuff

is it possible for the do method to access other attributes defined on the same element?

afaik, no. what usage do you have in mind?

maybe there’s another way

actually

i think i may have thought of another way. since i'm overriding the behavior of href, I could pass a more complex structure with whatever addition data i need right?

maybe you’d be able to use the usual js attr accessing

because you have elem

and yes, you could expect that href takes a hashmap

so i could have something like (a :href (cell= {:url url :extra data}))

(defmethod do! :href
  [elem key val]
  ;; post to GA
  (do-something {:extra val})
  (.open js/window {:url val}))

you might have to deref val

i just realized tho that this may clobber other things that use href like css stuff

is there a way to determine if it's an a and otherwise just proceed as usual

i think you should be able to do:

(defmethod do! :href
  [elem key val]
  ;; post to GA
  (let [attrval (.attr (js/jQuery elem) “extra”)]
    (do-something-to attrval))
  (.open js/window val))

this tries to get the value of :extra if it’s defined

will this code open the window as soon as the thing is rendered or wait until the link is clicked?

as for determining the tag, you can do this: (.prop (js/jQuery elem) “tagName”)

and test that against “a"

rather, against “A"

it’ll wait until it is clicked

wait

actually

hmmm

i’m not sure 😛

actually

href seems weird cuz it's sort of an attribute and an event handler

something you can do is defined its :click

and inside the :click, (.preventDefault ev)

and then do your GA and new window stuff

and leave href alone

but then i have to make sure to include a click handler in every a in the app?

well

you can extend click 😛

(defmethod on! :click [elem event callback]
  …
  (let [tagname (.prop (js/jQuery elem) "tagName”)]
    (when (= tagname “A”)
      (.preventDefault event)
      (.open js/window (.attr (js/jQuery elem) “href”))))
  

^ edited

and then copy paste the rest of the original :click into a when-not

hmm this seems viable, so even if there's no :click attribute there's an implicit click handler. for most things i guess it does nothing but a's are different obv

You have such an interesting problem. Hahaha

I want to explore extending :href for some reason

I think extending :click is crazy

how so?

Or...

What if

You just went the old fashioned way?

what did u mean when you wrote copy/paste rest of original click?

Whatever it would have done if it wasn't an A

Anyway, a sure fire way would be if you did: (.click (js/jQuery "a") (fn [] ...))

In other words, you can skip the fancy extension stuff

And simply target all the a's, add a click handler, and add your preventDefault stuff

Another thing you can do is create a custom "a" element that already has the :click predefined

This is even cleaner

So it wraps around the default "a"

I do some stuff that adds stuff to the dom on the fly. those wouldn't get handled by the jquery thing if they're added to the dom after the call right?

Yeah, those wouldn't.

I think your best bet is to create a custom anchor element.

Like

(defelem a-ga [{:keys [href] :as attrs} kids]
...)

oh i think you hit it on the head

yeah, that actually solves a ton of problems

thanks @levitanong !

Hurrah! Happy to help, @raywillig :D

does javelin have a way to force propagation for when values dont change?

@flyboarder: you can try doing something like https://github.com/hoplon/javelin/blob/master/src/javelin/core.cljs#L43

modify propagate* to skip the diff step

and -notify-watches unconditionally

thanks! @dm3

Hi

I noticed hlisp re-renders the UI only when there is a cell bound to an html attributes or content

So I need to write (div :style (cell= (if menu-visible "" "display:none"))) instead of (div :style (if @menu-visible "" "display:none"))

but how can I manage cases where I want an entire dom subtree to depend on a value?

hoplon doesn't "rerender" ever

there is no concept of rendering, at all

ok

I meant updating the dom

I realize there's no top-down re-rendering of the entire page

it's very rare to want an entire subtree to be completely arbitrary

in general you'll linearize it somehow, and use loop-tpl

well, I have a (case my-cell ...) with each branch rendering a different div

which does not work, of course

(case @my-cell ...) works, but does not get updated when my-cell is changed

what is the use case?

i could tell you how i'd do it

page is composed of a header, menu and content. content depends on menu selection

and it's all in a page, so no navigating to another URL

I use a big case to render the content

ok yeah, this is the classic "tabs" pattern

i would create the DOM the content for all menu selections, and just don't show the ones that aren't active

using the :toggle attribute

there are lots of ways to make that nicer than a case statment

what's the toggle attibute?

part of hlisp?

(div :toggle cell-a "hello")

that div will be hidden if cell-a doesn't contain a true value

nice

you can implement your own attributes using the do! multimethod

but, isn't this a little bit heavy? I mean loading everything at the beginning and then just showing and hiding stuff. I already am loading at the beginning some dialogs which I show only later (or may not show at all). didn't you have issues with this?

not yet, really

if you don't mind me asking

i mean you can do some lazy type loading things too

it's just overkill usually

i mean creating a few dom elements up front usually isn't a problem

the reason why you want to statically allocate dom elements like this is because then you are freed from the manual memory management you'd need otherwise

like if you're creating and destroying whole subtrees you will need to have a lot of code to manage that

true

like what you see with react apps, with the lifecycle protocols

the hoplon idioms leverage static allocation

to eliminate all of that

but of course you can optimize where you need to

you could lazily populate the containers

like don't generate the dom until the predicate is true or whatever

you could use cljs.core/delay perhaps

like

there is also a if-tpl and cond-tpl macros in a PR that will be merged soon

which will do exactly what you want

i think

it will handle the laziness and static allocation for you

I was just about to say I would find something like that usefull

but exposing the familiar if or cond API

one sec i'll find it

https://github.com/hoplon/hoplon/pull/84

thanks

now that I got you online, I would also ask how you handle animations

e.g. menu becomes visible -> slide in effect

you can use the jquery animations if you need something simple

there are actually some of them built in for common cases like sliding or fading

(div :slide-toggle show? "hello")

where show? is a cell

you can make your own attributes for that pretty easily:

https://github.com/hoplon/hoplon/blob/master/src/hoplon/core.cljs#L521-L525

that's the built-in :slide-toggle attribute

you can totally make your own though that does more sophisticated animations

i was very interested in exploring the standalone animation libraries, like velocity.js for example

but i have not yet had a chance to really try it

thanks, I'll have a look

jquery should do fine

thanks to everyone for the awesome pull requests, documentation, and general cool things going on!

getting ready to do some hoploning this evening