Fork me on GitHub
#clojurescript
<
2022-04-05
>
jrychter09:04:01

Just to pitch in about bundle size — I think it doesn't matter at all. It's one of those "common knowledge" things that get repeated over the years long after they stopped being relevant, just like "use a CDN because the user will have a cached copy of <whateverlib.js>". These days the costs of a larger bundle are insignificant. As a practical example, my app is just around 3MB JavaScript right now, which usually gets shipped as a 570kB brotli-precompressed file, standard gzip gets this down to about 740kB. That's less than a single photo on most sites. None of my paying users care about bundle size, and no one would notice if it increased even by 50%. A far more important reason for limiting the use of libraries is long-term maintenance: I am actively trying to remove dependencies, rather than add them, because unfortunately many Clojure/ClojureScript libraries are getting abandoned after a year or two. I am sponsoring devs in various ways, but I wish we had a better approach to long-term maintenance.

lilactown16:04:20

this is totally dependent on what business you're in. if your $ depend on how fast your page loads on a spotty cell connection, then bundle size can be very important. if you're working on a desktop enterprise SPA (like me), much less so

3
lilactown16:04:41

working in marketing & consumer spaces, I've seen what happens in aggregate when a person tries to load your page and it takes an extra second or two

1
jrychter07:04:07

Agreed — I just implicitly assumed that if someone is using ClojureScript, it is for a complex app.

Mícheál Ó Catháin13:04:00

Hi apologies in advance for the basic question! I'm trying to use npm module nodemailer. I expect I'm making some basic errors, and would appreciate a steer! My dev.edn looks like this:

^{:watch-dirs ["test" "src"] 
  :css-dirs ["resources/public/css"]                                 
  :auto-testing true                                                 
  }                                                                 
{:main simplyonmyway.node-test-2                                     
 :install-deps true                                                  
 :npm-deps {:nodemailer "6.7.3"}} 

Mícheál Ó Catháin13:04:40

I require nodemailer in main namespace as follows

(ns ^:figwheel-hooks simplyonmyway.node-test-2 
 (:require                                                         
  [goog.dom :as gdom]                                              
  [nodemailer])) 
However this throws error in REPL: #object[Error Error: goog.require could not find: nodemailer]

Benjamin16:04:33

hello! Is there something similar to clojure.reflect in clojurescript? Let's say you want to figure out the properties and methods of js/process how do you do it?

lilactown16:04:14

I'm not sure what the need is? you can console.log or iterate over the properties of js/process using interop

erre lin16:04:55

Hello, I'm learning ClojureScript. Got a bit surprised and confused about hiccup syntax. For example, I have a simple form element and it contains an input field which allows users to type in plain text.

[:input 
 {:type "text",
 :id "my-text"}]
I'm surprised to find that :type "text" can also be written as :type :text , the same works for :id :my-text too. But I failed to find any explanation about this. Or maybe I missed some important information? I just want to know why in the (optional) map structure, I can also use keywords for the value of an attribute? Thank you

p-himik16:04:41

If you have a specific question, assuming you're learning about Reagent specifically, there's #reagent

wevrem16:04:05

What are you confused about?

erre lin16:04:25

Sorry. I tend to use "Enter" for "newline", but forgot that in Slack that should be "Ctrl+Enter". 😅 I have edited my question. I'm confused about the map in hiccup. More specifically, should I use :keyword or "keyword" in the map for the value of an attribute? Both work, but I'm wondering if there is a preference or difference? Thank you

😆 1
p-himik16:04:43

:a-b gets turned into aB, unless it's a data attribute. If it's within :style, it's not changed. "a-b" gets passed as-is, without any modifications. In general, keywords are much more common.

thheller16:04:56

use strings as the value, that is what they get converted to anyways as the DOM only accepts strings for most attributes

👍 1
thheller16:04:19

@U2FRKM4TW the question was about the value, not the key.

p-himik16:04:53

Ah, I misinterpreted it, thanks. I tend to use keywords when it's something very specific that I would identify semantically as a keyword. And I use strings otherwise.

👍 1
erre lin16:04:22

Thanks for your explanation. I prefer keywords too. I'm confused because I read the https://cljdoc.org/d/reagent/reagent/1.1.1/doc/tutorials/using-hiccup-to-describe-html (reagent doc) and it all seems to be using strings for attributes' values. But when I read https://ericnormand.me/guide/reagent#nil-attr, the code becomes:

(defn checkbox [name checked?]
  [:input {:type :checkbox
           :checked (boolean checked?)
           :name name}]) 
It is :type :checkbox not :type "checkbox" . And in Chapter 4 of Web Development with Clojure, the author also used :attr :value rather than :attr "value" . So I'm a bit confused which way should I stick to, although both seem to have the same result.

thheller16:04:58

I'd personally always use :type "checkbox" and haven't used a keyword as the value for a hiccup attribute ever

👏 1
1
thheller16:04:28

the boolean is sort of a special case since that is the way to represent <div some-attribute>. ie. an attribute without a value in the dom

thheller16:04:50

eg. <input type="checkbox" checked>

p-himik16:04:29

In :type :checkbox I use keywords, in :value "value" I use strings. :)

👍 1
erre lin17:04:10

Thank you both!🤓 Very helpful! I now know both are correct. Since @U05224H0W suggests that the value will be converted to strings anyway, I think I will keep using strings, as shown in reagent's doc.