Fork me on GitHub
#hoplon
<
2016-12-03
>
flyboarder00:12:23

@laforge49: why not toggle the style based on a cell?

laforge4900:12:50

Except that style is open ended.

laforge4900:12:50

And, @flyboarder, I reuse the same elements, each time with a different style.

laforge4900:12:26

So I think dynamic style is the way to go, hmm? Only I need to refresh the element after modifying the dom.

flyboarder00:12:24

Which happens each time a cell changes on the element

flyboarder00:12:32

There is only a certain number of styles that could possibly be used, you should be toggling based on that list

laforge4900:12:34

Yeah. So my next attempt will set the value to be displayed in the innerHTML, which will likely cause the refresh.

laforge4900:12:49

Its a framework.:-)

laforge4900:12:35

I feel like I am close. 🙂

flyboarder00:12:55

I believe in you!

fiddlerwoaroof07:12:13

Is there a good way to make window.setInterval play nicely with live code reloading?

fiddlerwoaroof07:12:53

I have a cell that I want to increase by one every second but, beside using defonce store the result of calling setInterval, I'm not sure if there's a good way to prevent the interval function from being called more frequently.

thedavidmeister10:12:14

@alandipert i like the idea of order being predictable at least

thedavidmeister10:12:20

order of adding seems as good as any

thedavidmeister10:12:55

i have definitely come up against subtle bugs in my code from the specific order of cells doing their thing

thedavidmeister10:12:45

@fiddlerwoaroof would a recursive set timeout work better?

mynomoto12:12:51

@fiddlerwoaroof Doesn't defonce work for you?

laforge4912:12:49

@flyboarder it works! I set the content after the element is created and after setting the style dynamically by assigning it to innerHTML--which forces the refresh. Also complicating things was that, when displaying multiple lines, I was grabbing the wrong element. But anyway, I am happy that I can reuse elements in a scrollable display with dynamic styling. Thanks!

mynomoto14:12:58

@laforge49 is that public? The way you are describing seems like as you are fighting Hoplon. If it's public I would like to take a look.

laforge4914:12:46

@mynomoto You are right. I don't need some of this and could go back now and drop it. I can just add the style in the div itself. Anyway, here's the code: https://github.com/rolonicArk/simpleArk/blob/master/src/console/client.cljs

laforge4914:12:11

Start with the do-console called at the end of the module. The console is displayed at the end of that. Then look at add-output which adds content to the console display.

laforge4914:12:21

And then I don't need the refresh, so I can put the content in the div directly. 🙂

mynomoto14:12:06

I'm in the middle of something atm but will take a look soon.

laforge4914:12:19

@mynomoto No rush. I've now cleaned up the code. No more "dynamic styling". I'm groovin with Hoplon! 🙂

mynomoto16:12:22

@laforge49 Is something like this that I should be looking at?

fiddlerwoaroof16:12:00

@thedavidmeister it took me a while to figure out what you meant, but I think a recursive setTimeout might be the way to go @mynomoto defonce works, but it makes it annoying to experiment with the defonced value.

mynomoto16:12:53

@fiddlerwoaroof you can cancel the setInterval and create another one. You get an id when you define it.

mynomoto16:12:48

(.clearInterval js/window id)

mynomoto17:12:34

@micha cool! Is it ok to merge the docs generated with codox? We will gain some visibility over the public API, I can add docs later.

micha17:12:20

oh sweet!

mynomoto17:12:06

There is lots of missing docs but there is a list of public things. You may want to take a look to see if there is something that shouldn't be public 😉

micha17:12:28

codox does just static analysis right?

micha17:12:28

like if you create vars dynamically you can't generate docs for them?

flyboarder17:12:35

@mynomoto: that doesn't seem to cover the cljs stuff, just clj?

flyboarder17:12:56

I think we should use Codina for docs if we want the cljs stuff

micha17:12:20

i see cljs stuff in there, no?

micha17:12:26

i mean i see both

flyboarder17:12:38

Oh sorry I just looked at the namespaces, I guess there aren't docs for multimethods the hoplon.jquery stuff

micha17:12:59

yeah you can't really docstring a multimethod dispatch

micha17:12:09

cause there is no var associated with it

flyboarder17:12:17

Which is a shame, I should be able to document an implementation

flyboarder17:12:07

@mynomoto: well carry on then 😛

mynomoto17:12:33

@flyboarder I picked codox as it has a klipse plugin if we ever get that to work it would be amazing for docs.

flyboarder17:12:57

Awesome!! Agreed that would be pretty slick!

laforge4918:12:58

@mynomoto Yeah, but it looks broken. I've been making too many changes too quickl. 🙂

laforge4918:12:23

And it is really just a start.

mynomoto18:12:58

@laforge49 no problem, looks interesting 😃

laforge4918:12:19

Not knowing js, it is the wildest web page I've ever worked on.

flyboarder18:12:25

@micha when you are making a client web app what is the model you use?

micha18:12:59

@flyboarder what do you mean by "model" there?

flyboarder18:12:15

Like mental model for the application

flyboarder18:12:04

I was watching @shaun-mahood presentation from the conj and it made me start thinking about the structure of applications

micha18:12:05

@flyboarder i think about it as a collection of state machines

micha18:12:13

not really state machines in the formal sense

micha18:12:32

but informally i mean like separate thingys that keep their own state

micha18:12:48

that have methods on them that can be used to command a transitition

micha18:12:25

then the other side is the "presentation", which is hoplon defelems that can be hooked up to the state machines

micha18:12:35

the ui elements are the interface for the state machines

micha18:12:54

from there everything pretty much just falls into place

flyboarder18:12:58

That's a really good way of describing it

flyboarder18:12:17

I'm taking notes for my presentation btw

micha18:12:53

in general i guess the way i think of it is that at the end of the day you want to present a browser dom interface to the user

micha18:12:22

and in the dom there are two "connection" type abstractions

micha18:12:37

1. you can modify an elements attributes/properties

micha18:12:47

2. you can add an event callback

micha18:12:27

with hoplon #1 is related to javelin cells, and #2 is related to handler functions

micha18:12:15

(let [v (cell nil)]
  (input :value v :keyup #(reset! v @%)))

micha18:12:31

this also fits perfectly with the state machine thing

micha18:12:52

because the "state machine" is a record type whose fields are javelin cells

micha18:12:11

and the methods on it are implemented by some protocol

micha18:12:11

so to hook the state machine up to some ui compoenent(s) you would wire up the fields of the state machine (which are cells) to the attributes of the component

micha18:12:25

and the methods to events that the component would fire

flyboarder18:12:01

so in larger applications we should be using records of cells instead of just cells?

micha18:12:14

that's what i end up doing

micha18:12:24

i mean it depends

micha18:12:46

if i can factor out the workflow, or some aspect of it, then i make a state machine thingy

micha18:12:24

that really simplifies the appliaction because then i can make more powerful components

micha18:12:27

and macros and stuff

flyboarder18:12:54

very interesting, i have a theme developing for this tutorial on mental models for web apps, the nice thing about hoplon is that the ast is the dom structure so you can see the dom by looking at the code

flyboarder18:12:28

and then attributes connect off to all the state and logic

flyboarder19:12:14

your breakdown of it is much more concise 😁

micha19:12:26

yeah i think the dom is where you reach the true constraints

micha19:12:50

like for sure at the end of all the computing you will need to have stuff in the dom

micha19:12:00

because that's what the user sees and interacts with