Fork me on GitHub
#clojurescript
<
2016-11-05
>
sophiago16:11:56

is it okay to ask reagent questions in here? the specific channel looks quite dead and not just because it's saturday

sophiago17:11:17

i suppose in case anyone stumbles in, i'm coming from a background of using react just with the top-level API instead of JSX and looking for example projects along those lines to help me wrap my head around porting components, i.e. less nested markup and more mapping sequences to UI element properties. particularly any that make use of react.createFactory to create many instances of the same UI elements would be very useful

amirrajan17:11:05

@sophiago same boat here. I’ve been able to defer the need for Om/Reagent and am just doing vanilla react in clojure (global state stored in an atom). It’s working so far

amirrajan17:11:50

I’ve got a top level container component, and am using function arity as my Props: https://github.com/amirrajan/mokepon/blob/gh-pages/src/mokepon/container.cljs#L223

sophiago17:11:01

@amirrajan glad you popped in! someone came around in #reagent but seems to have no idea how react works...

sophiago17:11:44

i looked at the reagent api and obviously it can do what i need, but was concerned i'd have to slog through the source all alone to make sense of just porting a simple component

amirrajan17:11:45

yea, coming from the JS world into CLJS is a bit foreign, but so far I’ve been logging all my stuff in this repo

amirrajan17:11:18

same problem here

amirrajan17:11:38

I’ve kept a fairly thorough readme (I think)

amirrajan17:11:37

specifically this section that acts as almost a rosetta stone betwen es6/JSX -> clojure/sabono: https://github.com/amirrajan/mokepon#es2015-classes--jsx-vs-clojure-functions--sablono

sophiago17:11:28

ok, so to get an overhead view first...you're NOT using reagent's wrappers at all?

sophiago17:11:42

just js interop it seems

amirrajan17:11:05

yep, correct

amirrajan17:11:12

I’m trying to defer the need for as long as I can

amirrajan17:11:00

and just using idioms I learned from vanilla react (flux/one way events haven’t been explored yet because a top level atom has been sufficient, but time will tell if that is good enought)

amirrajan17:11:42

so essential, top level containers, passing everything down to sub components via “props”, and holding all the state in an atom/top level swap events

sophiago17:11:34

yes, seems like you're halfway in between in that you use js for all the react stuff yet atoms for your state

sophiago17:11:11

i was hoping to have nice cljs wrappers for my react classes...except at least with some example projects to go off of!

amirrajan17:11:11

yep, I used fluxible for a year (yahoo’s flux framework), but wasn’t a fan of their state persistence/propagation

amirrajan17:11:43

sablono is pretty great, and then you can do what i did in elements.cljs if you need to go against the metal and roll your own stuff

amirrajan17:11:59

the /views directory is my representation of a Component

amirrajan17:11:09

any feedback welcome of course, just exploring myself and seeing what I find by coming at it with JS/React glasses on

sophiago17:11:24

yeah see i'm not sure i'd even run into those problems going that route since, again, i never saw the point of using JSX

amirrajan17:11:48

it was just “familiar"

amirrajan17:11:21

(never saw the point myself, top level dsl-ish functions felt sufficient for me too, which is why I started gravitating to cljs and the hiccup formatting)

sophiago17:11:13

i mean i wouldn't use hiccup either

sophiago17:11:23

or anything that felt like markup

amirrajan17:11:46

ah, gotcha, the hiccup templates (soblono) is “just” a macro around .createClass

amirrajan17:11:33

so the elements.cljs file has a sample of how to create a class right against react, you may be able to just use that bit of code and interop directly with React’s api (and use a top level atom)

sophiago18:11:02

i'm confused about what soblono is (i have someone knew coming on in #reagent...still seems to have not used react much talking about how great hiccup is)

amirrajan18:11:37

maybe these links may help.

amirrajan18:11:52

Is that similar to how you build your React apps ^ (aside from using jsx)

sophiago18:11:42

sort of? you mean in terms of destructuring?

sophiago18:11:22

here's a one component example if you can put up with if being mixed in with the html... https://github.com/Sophia-Gold/dancing-sliders/blob/master/index.html

amirrajan18:11:47

with {:id loc :callback #(mark-location-as-seen-handler loc)} being props

amirrajan18:11:33

(again, this is all my own terrible concoction and can use any help/feedback I can get)

sophiago18:11:03

i'm confused as to how this relates?

sophiago18:11:31

you're throwing a lot of code at me and i don't see similarities

sophiago18:11:50

you say "that would be this in clojure" and then link some js interop that creates an animation element

sophiago18:11:19

am i confused and that's actual React.createFactory?

sophiago18:11:36

because that's very obviously what my code was

sophiago18:11:10

and yours was js interop right?

amirrajan18:11:23

I was looking at line 37 of your code

amirrajan18:11:33

and mapping it to the animation element stuff I’m doing

sophiago18:11:47

uh... React.createElement ?

sophiago18:11:06

yeah, that's the obvious part there's no doubt about how to do

sophiago18:11:30

that's like first line of code on the reagent github

sophiago18:11:18

i mean i asked a question when i came on here and it wasn't, "reagent has no tutorials on how to create markup elements?!"

sophiago18:11:03

so the key points are: 1. cljs wrappers, 2. top-level api

amirrajan18:11:23

yep ^, for me it’s “avoid reagent for now until I need it"

sophiago18:11:36

but you're doing that just by using javascript...

amirrajan18:11:43

(which I hope isn’t at a point where it’s too late to undo the mess I made)

sophiago18:11:24

so...why would i even be here? lol

sophiago18:11:36

i mean i get it

amirrajan18:11:37

for me it was the implicit immutability

sophiago18:11:48

atoms are way better than containers

amirrajan18:11:01

and warnings for missing props based on arity (as opposed to using Proptypes)

amirrajan18:11:07

and yea, atoms too

sophiago18:11:07

but they are mutable, btw

amirrajan18:11:51

yep, just lets you be a bit more explicit about when the mutation occurs

amirrajan18:11:17

as opposed to having mutations everywhere (I know react stops a bit of that with props/ImmutableJS)

sophiago18:11:33

i would like to actually like react wrappers for clojurescript, which exist there just aren't examples for them since they're not intended for use...just as a backend for hiccup

sophiago18:11:35

and also everyone is ignoring the complexity of the (extremely short) example here as if that isn't the point of not using hiccup

amirrajan18:11:48

the huge value add for me (with regards to reagent, et al) will probably be how they handle event propagation/state change

amirrajan18:11:05

just haven’t been met with a complex enough state change

amirrajan18:11:41

afk food, will read when I get back

sophiago18:11:51

yeah, not sure if you really looked at that like 50 lines of js code...you move a slider you get 100s of more sliders generated in the diff

sophiago18:11:09

that's just an example depending on which UI element on swap out

martinklepsch18:11:09

@sophiago if you're very familiar with React you may get something out of reading the Rum sources: https://github.com/tonsky/rum

martinklepsch18:11:41

didn't follow the full conversation but it sounds like you'd like to better understand how to interact with plain React from ClojureScript? If you feel like it feel free to restate your question and I'll try answering 🙂

tobiash18:11:19

hi! is there a library or established snippet how to adapt JS promises to core async?

sophiago18:11:19

@martinklepsch one sec, reading up 🙂

sophiago18:11:10

@martinklepsch the readme is a bit confusing, but also intriguing. i gather what you're getting at is as opposed to how reagent wraps most of the react api, rum just provides mixins for the various lifecycle functions as well as providing direct access to React.Component in cljs?

sophiago19:11:04

so if i'm understanding that correctly i guess i'd then have to debate both the feature set it covers and performance compared to reagent, although it seems it may be the same in both and just simpler in my use case. it would seem both cover about the full range of the api minus some syntactic sugar (like createFactory...which I do use, but whatever) and i believe reagant's claim of speedup based on automating lifecycle management, but also that i likely wouldn't benefit from it much. but it would seem the rum's syntax is much more straightforward for those working with the api, plus although it's a smaller community the size of the codebase could be a benefit (i'm exploring this potentially to build a suite of charting tools for a client that would need to be highly stable and easy to maintain...selling him on clojurescript in general would really be wrapped up in selling him on me and i'd likely benchmark the hell out of whatever i mock up compared to what he's doing with d3 + typescript right now)

amirrajan19:11:21

@martinklepsch: how does rum compare to sabolono? Same ideas?

sophiago19:11:37

rum can make use of sablono

sophiago19:11:58

in addition to react

amirrajan19:11:59

Son maybe a better question would be how it compares to Quiescent. And sorry for not reading your sample code throughly (getting car serviced)

sophiago19:11:42

i was in a bit of a distracting environment myself (hoping calmed down now...)

amirrajan19:11:47

I need to read up on Rum see if that gives me a good middle ground between roll my own and reagent. Hope convincing your boss goes well

sophiago19:11:14

well...he's not my boss yet...haha

sophiago19:11:40

and like i said, i don't think i need to convince him of tech as long as i convince him of me

sophiago19:11:26

one of the way of doing so possibly being showing him benchmarks that are through the roof. i respect that he codes (and far more than trivially as well for a finance guy), but i definitely have the upper hand discussing things in that he doesn't get some stuff. but discussion isn't worth much. and nor is code samples in a language he doesn't know well. i'd rather show him irrefutable numbers

sophiago19:11:21

i also have very little dataviz background...he approached me because of a lot of graphics stuff i've done in addition to frontend. so i'd ideally like to benchmark something that makes use of some type of charting library and i've seen several used with reagent at least

sophiago19:11:55

idk if there's also the possibility of just building something myself out of just react UI components and core.matrix?

sophiago19:11:33

the backend won't be in clojure btw

sophiago19:11:16

ok... so realistically i shouldn't have jumped into reagant and should try and use today to do a comparison between my options

sophiago19:11:42

seeming to have grossly misjudged reagant as the most true to react out of them all

sophiago19:11:08

quiescent seems quite appealing from a glance...they seem to have a factory example??

sophiago19:11:38

so now i'm mainly going back and comparing quiescent and om...the latter having the main advantage of wide support

sophiago19:11:59

and still not totally sure where rum fits into this 😛

gfredericks20:11:40

why do I get a warning when I extend js/Object?

gfredericks20:11:05

am I supposed to provide a default impl to a protocol some other way, like having wrapper functions that check satisfies??

anmonteiro20:11:26

@gfredericks doesn't extending object work for you?

gfredericks20:11:08

that's probably what I was missing

anmonteiro20:11:53

@gfredericks you'll get the warning with js/String, js/Function and all that stuff

anmonteiro20:11:07

but you have the lower-cased special versions that you can safely extend

anmonteiro20:11:11

e.g.

(extend-type string
  IFoo
  (foo [this] :foo))

gfredericks20:11:23

is object enough for strings and functions or do I need to do each one?

anmonteiro20:11:10

I would only know by trying, but my hunch is that you need to do each one

gfredericks20:11:29

object string function and nil is exhaustive, or are there more?

anmonteiro21:11:05

array too, probably

gfredericks21:11:27

this is starting to sound repetitive

anmonteiro21:11:31

@gfredericks extending js/Object is probably what you want but it might result in a small perf hit

gfredericks21:11:27

well thanks, this seems to be working

gfredericks21:11:42

except for number

gfredericks21:11:52

oh scratch that

gfredericks21:11:27

everything is fine.

markx21:11:14

Hey guys, just being curious here. Will clojurescript have a compiler written in js some day?

gfredericks21:11:17

it sort of does; but I think the biggest impediment to that being first class is the use of the google closure compiler, which runs on the jvm

gfredericks21:11:38

is cljs.spec keeping up with clojure.spec?

gfredericks21:11:52

or should I assume cross-platform specs won't be feasible for a while?

sophiago21:11:46

as a longtime js dev i'm much happier with the the current clojurescript compiler than any i could possibly imagine ever written in js

sophiago21:11:32

in other wards: this is a huge improvement, not a step backwards

sophiago21:11:35

(wow...my typing drops off after a long day)

markx21:11:41

What do you like about it? some examples?

markx21:11:21

Well I guess you must know Java well?

sophiago21:11:32

it's written in clojure so that means fast prototyping, easy interop with backend and contrib libraries

sophiago21:11:46

no, i'm saying all of this because i'm not a java dev

sophiago21:11:51

i hate java. lol

sophiago21:11:23

i actually have major issues when it comes to writing libraries for clj, but there are issues with doing the same for that due to speed on the jvm

sophiago21:11:33

with js it's only an improvement

markx21:11:59

well I’m also a js dev, and the only thing I don’t like about Clojure is that I have to use Java every now and then.

sophiago21:11:00

so if you know clojure you can write cljs libraries, patch the compiler, etc. without knowing js

markx21:11:07

@gfredericks Ha, that’s good to know. I heard closure compiler is great, however I really don’t like it as part of the dev build process. I hope somehow we can abstract it out.

anmonteiro21:11:46

@markx the JavaScript that the ClojureScript compiler is compatible with the Google Closure Library

anmonteiro21:11:03

you may choose to pass it through the Closure Compiler or not

anmonteiro21:11:24

but the Closure Library stuff is a hard requirement, and can't be turned off

sophiago21:11:47

ugh, internet is getting cut out that's cool