This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-02-23
Channels
- # aws-lambda (1)
- # beginners (11)
- # boot (456)
- # cider (3)
- # cljsrn (7)
- # clojure (340)
- # clojure-berlin (6)
- # clojure-dev (207)
- # clojure-germany (12)
- # clojure-greece (3)
- # clojure-italy (3)
- # clojure-russia (12)
- # clojure-spec (42)
- # clojure-uk (29)
- # clojured (7)
- # clojurescript (125)
- # datascript (1)
- # datomic (47)
- # defnpodcast (4)
- # emacs (30)
- # events (7)
- # hoplon (13)
- # instaparse (64)
- # jobs (13)
- # jobs-discuss (1)
- # lein-figwheel (1)
- # leiningen (10)
- # luminus (1)
- # lumo (14)
- # off-topic (10)
- # om (16)
- # om-next (3)
- # onyx (1)
- # pedestal (3)
- # protorepl (5)
- # re-frame (17)
- # reagent (66)
- # ring (1)
- # ring-swagger (13)
- # spacemacs (12)
- # specter (4)
- # untangled (272)
- # vim (4)
- # yada (24)
Just out of curiosity, what kind of sizes are people seeing for their minified app bundles? Maybe reply in a thread to this comment with what libraries you're using etc. 🙏
Seeing about the same - 142 gzipped with accountant, re-frame/reagent, some google closure bits for enabling jsonp
If i spec the functions that my event handlers call, will spec/instrument
catch when they are called incorrectly or is there some kind of magic in the background in re-frame that prevents this? Did a quick experiment but couldn't get it to work properly.
Hello all. I´m testing re-frame and I did this
(defn tela-1 []
[:div
[:button.mdl-button.mdl-js-button.mdl-button--raised.mdl-js-ripple-effect.mdl-button--accent {:on-click #(rf/dispatch [:atualiza-titulo "CHAMADOS GOAHEAD - TELA 1"])} "MUDA TITULO - TELA 1"]
[:button.mdl-button.mdl-js-button.mdl-button--raised.mdl-js-ripple-effect.mdl-button--accent {:on-click #(rf/dispatch [:atualiza-tela :tela-2])} "MUDA TELA 2"]])
(defn tela-2 []
[:div
[:button.mdl-button.mdl-js-button.mdl-button--raised.mdl-js-ripple-effect.mdl-button--accent {:on-click #(rf/dispatch [:atualiza-titulo "CHAMADOS GOAHEAD - TELA 2"])} "MUDA TITULO - TELA 2"]
[:button.mdl-button.mdl-js-button.mdl-button--raised.mdl-js-ripple-effect.mdl-button--accent {:on-click #(rf/dispatch [:atualiza-tela :tela-1])} "MUDA TELA 1"]])
(defmulti panels identity)
(defmethod panels :tela-1 [] [tela-1])
(defmethod panels :tela-2 [] [tela-2])
(defmethod panels :default [] [:div])
(defn estrutura-principal []
(let [tela-ativa (rf/subscribe [:tela-ativa])]
[:div
[:p @(rf/subscribe [:titulo])]
[panels @tela-ativa]]))
(defn principal []
(ra/render [estrutura-principal] (.getElementById js/document "conteudo")))
So, the idea is change from tela-1 to tela-2 when the button "MUDAR TELA x" is clicked. It works well.
I´m using it with Material Design Light and the buttons has ripple effect, so when I click the button to change to the tela-2 screen, the ripple effect gone. Why this is happening? Reframe or reagent is affecting this?Hello @fabrao, could you please turn your code into English + show your subs and event handlers? would be rather helpful
@fabrao maybe it’s because the re-render from estrutura-principal
is re-creating the DOM before the effect happens
@rafaelzlisboa , so I need to change the place to render panels?
when you click the button that doesn’t actually change the current screen, the animation goes well, correct?
i think that the way this is right now, estrutura-principal
is removing then readding the :button
DOM elements, so the element that got clicked (and had the css animation started) isn’t the same element you see a few frames later because it’s removed from the DOM and replaced with another one
I understand, but I did like re-frame said about navigation https://github.com/Day8/re-frame/blob/master/docs/Navigation.md
you change the current state for active screen and reagent/re-frame re-render all for us
does it change if you rewrite panels
to use a cond
instead of defmulti
?
probably, yeah. another thing you could try to is to keep the same buttons on the DOM and only change their title/on-click handlers. not sure if reagent is clever enough to change only the attributes
it’s particularly tricky to design good animations with react-based tech because you need to pay attention to when the DOM is entering/leaving the page