Fork me on GitHub
#hoplon
<
2016-04-04
>
levitanong03:04:58

I’d like to get some thoughts: How possible do you think it is to extend formula cells such that all sources of type Node are placed in delay? My thinking is, this will allow people to do (cell= (if a (div “true-tpl”) (div “false-tpl”))) and possibly (cell= (map #(div %) [“a” “b” “c”]))

onetom16:04:13

I'm wondering what's the recommended use of boot-reload with Hoplon. Having a full page reload is quite costly and the application also loses its state. Does it make sense to have (reload :on-jsload 'hoplon.app_pages._index_DOT_html/init) where the init fn generates the page, like

(page "index.html")

(defn init []
  (html
    (head)
    (body ...)))

(init)

micha16:04:54

you would need to manage memory there

micha16:04:22

you'd need to disconnect the old cells from the cell graph probably

micha16:04:37

stop any settimeout/setinterval things you have going

flyboarder16:04:00

@alandipert: are you guys using flux at adzerk?

alandipert16:04:14

@flyboarder: no

flyboarder16:04:23

ok, just catching up on comments 😛

jumblerg17:04:41

@micha: that last commit seems improve startup time slightly since the scripts were previously being removed from the body one at a time with calls to insertBefore. hopefully i haven’t introduced any other regressions with that pr, there might be additional cases i’m not considering.

micha17:04:55

@jumblerg: i think one thing to consider is the FOUC situation

jumblerg17:04:45

i saw a ticket about that, will read now

micha17:04:03

i think that's part of the reason why the head and body were done that way

micha17:04:35

but i think we probably do want to merge that PR

micha17:04:23

not doing that only works in chrome

micha17:04:46

like only in chrome can you create a new head or body element

micha17:04:48

and use it

jumblerg17:04:15

just watched @onetom’s video with the FOUC ticket, i recall it being pretty egregious around the time that ticket was filed, but i don’t have any issues now.

jumblerg17:04:20

i’m not sure what the contributing factors are (or whether the FOUC ticket should still be open), but suspect that emptying the body’s innerHTML in a single operation may help.

micha17:04:48

you tested with your large application, right?

micha17:04:00

cause that would probably show problems

micha17:04:08

if there are any

jumblerg17:04:44

yep, working much better now

onetom17:04:13

@jumblerg: we are still experiencing the FOUC, though it seems to happen a bit less often

onetom17:04:23

I was just bitten by #98 the other day too...

jumblerg17:04:33

@onetom: howdy! good to know. i suspect the way the application is written also makes a difference. let me know if that last patch helps.

onetom17:04:13

definitely, the structure matters a lot

onetom17:04:58

one big issue we are facing is sometimes semantic ui kicks in noticeably later than the 1st render happens and our menu, top-nav bar and all that looks like shit without styling

onetom17:04:38

but i can't just include a few lines of initial css to make it look reasonably okay, because most of the grid classes would be necessary from semantic-ui for that

onetom17:04:21

so i've recently changed the logic to just show a spinner which has the necessary styles embedded in the pre-rendered html, BUT the spinner (pulsing ring really) stalls while the page is getting initialized... see it in action on: https://appboard.exiconglobal.com/

micha18:04:05

is the spinner css-based? or does it use js to make the pulsing

flyboarder18:04:36

@micha @onetom i believe it’s javascript, im working on a hoplon semantic-ui library right now, and FOUC is still an issue

flyboarder18:04:15

it also seems not all of the jquery from semui works as multimethods

micha18:04:19

you can see our spinner at https://app.adzerk.com

micha18:04:29

source for that page is here

flyboarder18:04:46

I havent yet tried pre-rendering (since it didnt work at all with polymer), I hope it works better with semui

onetom18:04:49

@flyboarder: i don't think we are actually using any of the semantic-ui js. we have re-implemented those few things we needed directly in hoplon

micha18:04:29

@flyboarder: the method i pasted in the gist might work with polymer

micha18:04:38

since the prerendering is just to put up the spinner

micha18:04:22

the loading page is here:

micha18:04:57

the idea is that the spinner is rendered by phantomjs

micha18:04:08

but not in the app itself

micha18:04:13

like in the client i mean

flyboarder18:04:16

Lol i didnt notice :css before, that’s a bit nicer than using :style

flyboarder18:04:40

I usually use :class

micha18:04:46

also you can do like (div :css {:foo false})

micha18:04:56

which removes the foo property from the css

flyboarder18:04:04

oooo that is nifty!!!

micha18:04:10

obviously more useful in a cell

flyboarder18:04:29

right, but between class and css I shouldnt need style anymore 😄

flyboarder18:04:35

no more strings!!!

micha18:04:46

:class also accpets a map

flyboarder18:04:01

@onetom: if you find a solution to your FOUC issue, please advise simple_smile

onetom18:04:51

good point regarding :css we are still using :style most of the time....

onetom18:04:32

@flyboarder: ok, i will share for sure if i manage to solve it

leontalbot19:04:31

Hi folks! I want to watch a cell-data-structure nested value (the path is [:foo :answer]) so that if the value is "hide bar", I change the value at [:bar :hide] to true. How can I do this within hoplon page? Thanks!

leontalbot19:04:38

Hope it is enough clear... 😕

micha19:04:24

i think you want to separate input cells and formula cells

micha19:04:47

you want to separate those concerns

micha19:04:07

so you want to have a separate formula cell for the :bar thing

micha19:04:38

if its state is just some formula on a cell with the actual data

micha19:04:27

if you paste a simple example i can expand on it

micha19:04:01

another thing is you could use a lens there

micha19:04:17

but that seems overly complicated maybe

leontalbot19:04:27

say I have (defc {:foo {:answer nil} :bar {:hide nil}})

leontalbot19:04:33

if an event make the value at [:foo :answer]change to "hide bar", what would be like the fn that listens to this path and change [:bar :hide] to true

micha19:04:24

(defc state {:foo {:answer nil}})
(defc= derived state #(update-in % [:bar :hide] (= (get-in % [:foo :answer]) "hide bar")))

micha19:04:01

that will work

micha19:04:18

but usually that's an indication of something that could be refactored to be simpler

micha19:04:48

self referential things and lenses etc are mostly used in rare cases

micha19:04:17

oops sorry

micha19:04:33

(let [c (cell {:foo {:answer nil}})]
  (defc= state c
    #(let [hide? (= (get-in % [:foo :answer] "hide bar"))]
       (reset! state (update-in % [:bar :hide] hide?))))

micha19:04:36

there we go

micha19:04:42

that should work (tm)

leontalbot19:04:46

Thanks @micha!

leontalbot20:04:22

ah still stuck

leontalbot20:04:34

he is a more complete exemple

leontalbot20:04:52

{"question-1" {:hide nil :q "Do you want to subscribe?" :choices ["yes" "no"] :answer nil :hide-ids ["question-2" "question-3"] :hide-if-values ["no"]}
 "question-2" {:hide nil :q "Are you living in NYC?" :choices ["yes" "no"] :answer nil hide-ids ["question-3"] :hide-if-values ["no"]}
 "question-3" {:hide nil :q "What is your email?" :answer nil}}

leontalbot20:04:00

If the user click the radio button "no" at question-1, ["question-1" :answer] becomes "no".

leontalbot20:04:52

for this question there is a special rule expressed by :hide-ids ["question-2" "question-3"] :hide-if-values ["no"]

leontalbot20:04:14

my watch fn I would like to have, would grab all rules in all questions, and then wait for [* :answer] values, if the match, the question with ids gets hidden.

leontalbot20:04:45

In that case, if you answer is no for the first question, you don't get to see two others. If it is no for the second one, you don't get to see the third one...

leontalbot20:04:35

I know it might be complicated...

micha20:04:17

why does it all need to be in the same cell though?

micha20:04:45

why not separate out the raw state from the derived state?

micha20:04:41

what you see in the ui could be done with formulas

leontalbot20:04:13

yeah I could be I guess

leontalbot20:04:34

still would not know how to achieve this.. 😕

micha20:04:41

(defc subscribe? false)
(defc in-nyc?    false)

(form
  (label "subscribe?")
  (checkbox :state subscribe?)
  (div :toggle subscribe?
    (label "living in NYC?")
    (checkbox :state in-nyc?)
    ...

micha20:04:19

the checkbox with :state is something you'd need to make

micha20:04:31

i have some examples

micha20:04:29

(defelem checkbox
  [{:keys [state] :as attr} _]
  (hoplon.core/input 
    (-> (dissoc attr :state)
        (assoc :type  "checkbox"
               :value state
               :click #(with-let [_ 1]
                         (let [e (js/jQuery (.-target %))]
                           (reset! state (.is e ":checked"))))))))

micha20:04:16

the nested maps of maps you have in that example

micha20:04:44

with like :hide-if-values keys and so on

micha20:04:53

this looks like a programming language

micha20:04:59

which is usually not what you want

micha20:04:03

because we already have lisp

leontalbot20:04:04

Thanks though the admin must control the config of the form throught an external datastructure that I import

leontalbot20:04:03

I can store the answers in a different map but my rules come form the datastructure

leontalbot20:04:16

This is a chalendge. I guess your first suggestion was good though i want to be able to parse any rule from any question...

leontalbot20:04:51

I am trying to get a general solution. :-/

micha20:04:58

you still have a finite number of options you support

micha20:04:16

like you need to implement a widget for each type of question etc

leontalbot20:04:46

I got :type "checkbox" etc also

micha20:04:54

i see, so you don't have the questions in advance, necessarily

leontalbot20:04:04

I connect to google spreadsheet and then normalize the config flat data i get http://stackoverflow.com/questions/36365642/how-do-simple-data-normalization-in-clojure

leontalbot20:04:40

Each line in the spreadsheetis a question

leontalbot21:04:16

So i guess i should start with https://clojurians.slack.com/archives/hoplon/p1459799433003325 and see how i could generalize the update fn...

micha21:04:15

yeah i think i would try to see what the state machine is

micha21:04:24

and make a cell that represents that

micha21:04:56

i'll make a little thing after work

leontalbot21:04:34

Much thanks for your help @micha 😄

flyboarder23:04:30

any hoplon peeps using firebase?