Fork me on GitHub

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. 🙏


I've got 164kB gzipped but theres already some additional stuff.


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 []
   [: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 []
   [: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])]
     [: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?


it´s only css effect, isn´t?


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


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?


I didn´t tested yet, I´ll try it. But, isn´t that the same?


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