This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-01-13
Channels
- # beginners (99)
- # boot (2)
- # boot-dev (4)
- # chestnut (2)
- # cider (75)
- # clara (43)
- # cljs-dev (1)
- # cljsjs (6)
- # cljsrn (4)
- # clojars (2)
- # clojure (76)
- # clojure-brasil (1)
- # clojure-france (1)
- # clojure-italy (2)
- # clojure-spec (30)
- # clojure-uk (4)
- # clojurescript (39)
- # core-async (1)
- # core-logic (2)
- # cursive (1)
- # data-science (7)
- # datomic (14)
- # docker (12)
- # emacs (6)
- # fulcro (69)
- # garden (4)
- # hoplon (7)
- # jobs-discuss (46)
- # leiningen (3)
- # lumo (3)
- # off-topic (12)
- # om (2)
- # parinfer (12)
- # perun (9)
- # re-frame (44)
- # reagent (6)
- # rum (1)
- # shadow-cljs (73)
- # specter (5)
- # unrepl (10)
- # vim (2)
;; A
(defn button [{:keys [on-click]}] [:button {:on-click on-click}])
(defn Card [] (let [id @(subscribe [:foo])] [button {:on-click #(dispatch [:click id])}]))
;; B
(defn button [{:keys [on-click]}] [:button {:on-click #(dispatch on-click)}])
(defn Card [] (let [id @(subscribe [:foo])] [button {:on-click [:click id]}]))
There is performance differences between A and B? Has any difference between @(subscribe ..)
or @id
?I can't imagine any material difference between A and B
@souenzzo @mikethompson the one thing I thought, but not too sure, is that A may try to render button
more often
in the case of B
the vector would be =
even when a new vector is made, so the props would still be =
for Reagent rendering cycle
Neither would their be any difference between @(subscribe ...)
and @id
.
Maybe if you were completely paranoid about performance, you might try:
(defn button
[*id]
[:button {:on-click #(dispatch [:on-click @*id])}])
(defn Card
[]
(let [*id (subscribe :foo)] ;; subscription outside - we name cursors with a leading *
(fn [] ;; note the render function
[button *id]
)))
Back in the day when we passed subscriptions around we would always name them with a leading *
, so make it clear they were not values
But we stopped doing this approach because we found it confusing when we later came back to the code.
@mikethompson Wouldn't dereferencing a subscription inside an :on-click
handler leak the subscription in case a user never clicks the button?
I think it will be okay. The subscription is "captured" by the act of rendering button
. When button
goes away, the subscription will be released
Oh, right. Now I get what you are saying
Very true. Sorry, i missed that @p-himik
I wonder if @souenzzo saw a performance difference in some case or if it was just speculative
@mikerod I agree with your analysis about the function parameter never testing equal.
Was it re-frame
docs that actually mentioned that as a potential perf issue? I can’t remember. However, I understand conceptually why it’s the case
Yeah, I wrote about it in "Eeek performance problems" https://github.com/Day8/re-frame/blob/master/docs/Performance-Problems.md
In normal everyday use it doesn't really matter at all. But if you have a LOT of one kind of component, then its the equivalent of a tight loop, and you might need to optimise. Maybe.
Perhaps this is the moment when I plug re-frame-trace
. X-Ray vision for your re-frame app. Well, it will be that eventually. Still a bit simple ... but surprisingly useful. A new version is about to drop.
Hmm- I'm reminded of some performance problems in a React table thingy I wrote a while ago.
I almost sent him the perlisism 'When someone says "I want a programming language in which I need only say what I wish done," give him a lollipop.'
A bit OFF
from re-frame: but I'm a CSS noob, at the moment, I'm <link src="bootstrap.css">
on my index.html
and writing some :button.btn
.
What are the possible paths to a "real" CSS architecture? #garden is the way? Need something else then garden to make everything works on a re-frame
project? Examples?
That's not really related to re-frame, you can use whatever css technology you prefer! 🙂 I tend to use a preprocessor (less/sass/stylus) that builds a single style.css
file that I just include in my index.html
.
<link href="css/style.css" rel="stylesheet" type="text/css">
So you make classes in less
(for example) and use with div.button
?
how you organize that classes? one classe for each use? :div.ok-button.home-style
or :div.ok-button-home
.?
I can write tests for find typo errors, like :div.ok-buttno
?
I'm totally lost on CSS (and I cant find good docs)
There are a lot of resources for learning CSS online. If you're totally lost on CSS it might be best to just use "bare" CSS without a preprocessor while you're learning. Check out https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS for example!
This tutorials feels like this 😕 http://i0.kym-cdn.com/photos/images/facebook/000/572/078/d6d.jpg
@souenzzo As a programmer who taught himself the horrors of CSS, here is my advice: (1) Don’t layer too many complexities like BEM naming and stuff like that. I’d reccomened you get a sass preprocessor going just so that you can use variables and includes, but don’t use any other features of the preprocessor. (2) Write one class per component and don’t worry about too much copy-and-paste. Writing “clean” CSS code isn’t worth it unless you are on a team. (3) Learn flexbox. Find some tutorials and learn it well, because you can do almost anything with it.
I've come to think that stylesheets are a bad fit for web applications- they are a fine fit for websites.
I'm inclined to think that approaches like 'styled-components' (a JS library) are much nicer for web applications.
You might want to take a look at libs like https://github.com/roman01la/cljss
I think that @U4EFBS3PH complement @U8ES68TGX. yesterday I started to write some #garden but cljss
looks simpler. I will try it today.