Fork me on GitHub
#hoplon
<
2016-12-07
>
mynomoto01:12:13

The way I'm going I may build a Hoplon Framework ™️ which will make it a framework framework lol. Adding routes, a datascript db, a http lib. Lots of convenience things.

flyboarder02:12:57

@mynomoto: I'm working on something similar, integrating feathers.js and hoplon as a full stack cross platform framework

alandipert04:12:33

omg did we make a framework framework

alandipert04:12:42

pretty awesome, i say :thumbsup:

alandipert04:12:01

does anyone do cl/js audio stuff by any chance?

alandipert04:12:19

would love to pick your brain about webaudio/scriptnodes/audioworkers

alandipert05:12:48

little demo of a side project i've been workin on, hoplon-based of course

mhr05:12:53

are you using Javelin cells in the interpeter somehow, or are you just using Hoplon for the user interface for the interpreter?

alandipert05:12:34

not in the interpreter per-se... but they help withe what i'm calling the "vm"

alandipert05:12:46

the stateful object that you get that you call load! and run! etc. on

alandipert05:12:07

fields of this object are cells, like the state of the interpreter, interrupts, etc

alandipert05:12:41

the interface to the stateful vm object thing is very similar to what i'd make for dealing with a server, really

alandipert05:12:48

cells for reading, functions for mutating

alandipert05:12:15

underneath the stateful 'vm' is the stateless 'machine'

alandipert05:12:28

the defrecord that gets iteratively run through a step function via setTimeout

mhr06:12:07

https://youtu.be/S-CWGbe3Tak?t=1h17m35s is this still happening? cells and elements being interchangeable?

mhr06:12:08

I'm not entirely understanding what that means for them to be interchangeable, actually

alandipert06:12:29

micha made a defelem+ that somewhat delivers

alandipert06:12:51

i think ui delivers also, not sure in same way

alandipert06:12:16

one of the underlying problems is that there's no way in html to represent a collection of nodes without a parent element

alandipert06:12:26

this shows up all the time in hoplon by needing to put loop-tpls etc inside wrapper divs

alandipert06:12:15

the cell=node ideal is that loop-tpl returns something that doesn't contribute to the dom heirarchy, but can contain cells or nodes

alandipert06:12:53

so yeah... a defelem wouldn't need to return a container element, it could return a "transparent" collection object that could be spliced into containing markup

alandipert06:12:09

in retrospect i think that line of thinking may have been backwards tho

alandipert06:12:26

for a long time our mindest was interop, so we were thinking about lower level abstractions

alandipert06:12:33

but i think ui shows that we can also go up

alandipert06:12:46

and maybe that's the way to do it, just pave

micha07:12:39

yeah currently collections are supported via clojure seqs/vectors

micha07:12:49

like a vector can be a child of an element

micha07:12:58

and that vector can be empty

micha07:12:03

which means you can do this:

micha07:12:44

(ul
  (li "start")
  (for-tpl [item items]
    (li item))
  (li "end"))

micha07:12:08

and you can do (reset! items []) for example

micha07:12:25

and then (reset! items ["one" "two" "three"])

micha07:12:57

and the one two three list items will correctly be inserted in between the "start" and "end" ones

micha07:12:40

because when you empty the items vector there is basically an empty vector in the dom

micha07:12:14

for-tpl itself returns a cell containing a vector of elements

thedavidmeister10:12:14

@mynomoto maybe could just start with a good list of symbiotic tech and example integrations

candera18:12:33

Hello hoplonians. I am trying to integrate this http://labs.abeautifulsite.net/jquery-minicolors/ into a Hoplon project, and am having little luck. I know very little about jQuery, which is probably the source of my problems. The immediate problem I’m having is that my call to $(”input.minicolors”).minicolors() doesn’t seem to do anything, even though it starts things up when I run it from the developer console. I figure it’s related to things loading asynchronously, so I’ve hacked my way towards the below solution, but it’s still not working.

candera18:12:38

Would love some advice here. I’m sure this is broken in 12 ways, so anything from specific advice on how to fix it to general advice to how one integrates jQuery plugins would be helpful.

alandipert18:12:16

looks like you're on the right track, i'll try it here and see

candera18:12:58

I’m including a script element in the head, like this: (script :src "js/jquery.minicolors.min.js")

alandipert18:12:59

how are you bringing in the lib?

candera18:12:13

And like I said, it works from the developer console.

alandipert18:12:15

have yuo tried putting the script in the body?

candera18:12:32

I’ll try that. So this would be about changing load order?

alandipert18:12:10

soft-yes that load order is the problem

candera18:12:10

Not working.

candera18:12:57

Yep, totally works when I run it from dev console.

candera18:12:51

OK, it works if I change to not invoking via mc:

candera18:12:20

I guess that property isn’t a function I can invoke.

alandipert18:12:30

yeah "one does not simply" pull functinos off object like that and call them

alandipert18:12:06

for function calls that can't be inlined

alandipert18:12:18

cljs emits code like mc.call(null)

alandipert18:12:30

where call is Function.prototype.call(this, args...)

alandipert18:12:50

jquery works by chained plugins setting and using this properly

alandipert18:12:07

this is all just a theory

candera18:12:30

Seems reasonable. And a half-decent reason to write this all myself in a sane way. 😛

alandipert18:12:06

but i'm up to speed on it because i had to do this recently to pass around the console.log function (let [printfn (.. js/window -console -log (bind (js* "this")))] ... )

candera18:12:04

Been a long time since I’ve seen .. 🙂

candera18:12:26

Anyway, clearly I’m suffering from not knowing jack about the browser world. Hoplon has made it possible for me to get this far.

micha18:12:05

usually you don't need selectors, like for example you have the i binding

micha18:12:34

so you should be able to do (-> (js/jQuery i) .minicolors)

candera18:12:38

Yeah, I’m refactoring to an ID right now.

candera18:12:53

But I like that even better.

micha18:12:01

you don't usually need any selectors at all

candera18:12:08

(let [id (gensym)] so it’s least bad, but I prefer what you posted.

alandipert18:12:28

oh, yeah. i've run across js things that demand a selector, and gensym is def. the way to provide

micha18:12:47

also you don't need when-dom either, a (with-timeout 0 ... is usually sufficient to ensure that i is in the dom when the body is evaluated

micha18:12:04

because i will be returned into the dom

micha18:12:25

the setTimeout will only be called after the current function returns

candera18:12:53

I might write (later …) as sugar over (with-timeout 0 …) in that case. 🙂

candera18:12:19

I’ve been using core async go blocks for similar stuff, especially since I’m doing web workers in this app and I use it there.

micha18:12:11

looks like you arrived at the standard pattern for incorporating jquery modules

micha18:12:24

that's basically how i always do it too

candera18:12:42

OK, thanks. That’s helpful to know, as I expect I’ll be doing more of it.

micha18:12:48

i recommend taking the time to make a cljsjs package though if you can

micha18:12:55

for the js dependency

micha18:12:14

then you don't need to deal with script tags

candera18:12:29

That is a bit beyond me at this point.

micha18:12:30

script tags are problematic in hoplon because they are evaluated asynchronously

micha18:12:46

like if you use document.createElement("script")

micha18:12:53

that script is loaded async

micha18:12:06

vs. <script>... in html, which is synchronous

micha18:12:43

if you don't want to make cljsjs package you can still avoid the script tag by making a deps.cljs file

micha18:12:49

that is in your source paths

micha18:12:21

the deps.cljs file needs to be at the root of the classpath

micha18:12:46

with that file in place the cljs compiler will figure out how to load the jquery module

candera18:12:58

OK, so that would get rid of my async stuff.

micha18:12:07

notice the :requires and :provides keys in there

micha18:12:27

that's how you can declare dependencies between the scripts, like minicolors.js depends on jquery.js etc

micha18:12:37

and the compiler will slurp them in in the correct order

micha18:12:12

the cljsjs stuff is basically that, but deployed as a jar in maven

micha18:12:21

it uses the same deps.cljs format

candera18:12:16

Thanks, guys. Going to have to digest that a bit. Probably come back to you with questions about deps.cljs etc.

micha18:12:25

the map is pretty cool there

micha18:12:50

it's showing pressure gradients and stuff?

candera18:12:26

Basically. It’s a weather “simulator”. Not a particularly realistic one, but it’s for use in a flight simulator, so it doesn’t have to be. The default view that you’re seeing is cloud cover and wind.

candera18:12:36

Wind is effectively pressure gradient.

micha18:12:29

interesting, i think @jumblerg has also worked on weather simulation

jumblerg18:12:51

@candera: interesting! i wrote a bit of wx software when i was in the af.

micha18:12:32

whoa, there is a play button

jumblerg18:12:37

note to self, don't click inspect source on the wind barbs.

candera18:12:38

Ha! Yes there are something like 100K SVG objects involved in rendering that. Getting that to perform okay was a trick.