Fork me on GitHub
#clojurescript
<
2016-05-04
>
pataprogramming00:05:05

@fasiha: Brilliant, thanks. These are exactly the type of thing I'm looking for. We're working on an after-hours project at work that's been amazing management with the speed of our progress, and we want to get up some nifty visualizations as fast as we can without breaking our flow. Creature comforts with just enough docs/tutorials to get some traction will help us establish that tight feedback loop.

pataprogramming00:05:57

We're trying to get our flag into the ground before the Scala contingent has staked out all the good territory.

fasiha00:05:05

@pataprogramming: cljs should be able to beat Scala then! I'm writing a real-time data visualization tool that just draws SVGs (with re-frame). It's been working very well so far. I've been rolling my own components and haven't needed to go down the rabbithole of using d3.js from cljs/re-frame/react. Good luck 😄

pataprogramming01:05:43

Cheers. Yesterday I was poking dispiritedly through Google searches for tutorials and feeling like I was going to be stuck in the weeds, but the path forward is opening up. Thanks for the links, everyone.

urbanslug08:05:52

hey, should I clear cache after a user logs out? Is that a good idea?

octahedrion09:05:04

with cljs.js/eval, how do you eval forms that use functions in other namespaces ?

jarradhope09:05:55

anyone know a popular Clojure(script) job board online? Seeking Clojurescript devs with React Native experience

danielcompton09:05:40

@jarradhope: also the ClojureScript list is ok for job postings AFAIK

juhoteperi14:05:09

@bhauman: Have you tested Devcards with React 15 yet? I'm seeing some problems with Reagent + Devcards

bhauman14:05:43

@derean: Haven't tested it yet. Can you make an issue with your discoveries?

juhoteperi14:05:47

I'll see if I can discover something, could be caused by something else also. Looks like the devcard function is at least called after updating the state.

anmonteiro14:05:07

@juhoteperi: @bhauman: FWIW Devcards + Om is working fine with React 15

xcthulhu14:05:49

@juhoteperi: I'm using React 15. Which version of reagent are you on?

xcthulhu14:05:17

I'm using "0.6.0-alpha1"

sbmitchell14:05:27

Has anyone had issues with react dependencies (react/react-dom-server/react-dom) going out of order in advanced compilation mode using cljsjs? Should the lein deps :tree look a certain way to show that the ordering would be correct?

sbmitchell14:05:20

I believe Im getting errors due to react-dom-server being added before react in my compiled file

xcthulhu14:05:40

Are you doing server side rendering?

sbmitchell14:05:51

I am not but some of the libs depend on it

sbmitchell14:05:04

like reagent

sbmitchell14:05:34

its odd...when I run the reagent template form scratch it geneates in advanced mode perfectly fine

sbmitchell14:05:46

so it must be when there are other react deps..

xcthulhu14:05:53

I've never had this issue... what version of reagent are you on?

sbmitchell14:05:00

just switched to alpha2

xcthulhu14:05:13

Oh, well no idea then. I'm still on alpha1

xcthulhu14:05:42

You might consider rolling back to alpha1 and see if the problem persists

xcthulhu14:05:53

alpha2 is like 14 hours old

xcthulhu14:05:49

Here tell you what, I'll go bump my project and run my tests and confirm if that borks it.

sbmitchell14:05:00

that would be awesome

edannenberg14:05:28

@sbmitchell: wrestling with a similiar issue at the moment, you can check cljs_deps.js to see the load order

sbmitchell14:05:29

I doubt that would bork it though bc the template uses alpha2 I believe

edannenberg14:05:41

which brings me to my question, is there any way to influence the order of depencencies in cljs_deps.js?

xcthulhu14:05:03

Okay, I just bumped my projects and I can't reproduce this 😞

xcthulhu14:05:18

I can't help but notice that reagent shows up at the bottom of my :dependencies...

xcthulhu14:05:24

'cause alphabetical order

xcthulhu14:05:42

@sbmitchell & @edannenberg : Can you post your :dependencies? Maybe move reagent to the bottom.

xcthulhu14:05:26

Maybe I should switch to elm or whatever

puhrez15:05:35

(but srsly tho, anyone ever used elm?)

juhoteperi15:05:17

@xcthulhu: alpha2. Do you have direct dep on React 15? Devcards will overwrite React version from Reagent.

xcthulhu15:05:31

Nope... should I go exclude react from devcards?

juhoteperi15:05:24

@sbmitchell: Foreign-libs are ordered based on :requires entry on deps.cljs. React-dom-server doesn't currently require react-dom so the order is probably random.

juhoteperi15:05:45

@xcthulhu: Check your deps tree to see what React version you are really using. Or browser to check what React version is loaded.

edannenberg15:05:11

xcthulhu: in my case reagent is actually loaded to early, trying to integrate https://github.com/madvas/cljs-react-material-ui, my best guess is that is caused by using danielsz/system which somehow pulls in reagent too early

edannenberg15:05:45

looking at my system.clj and what it requires there should be no reason to pull in reagent at that point

juhoteperi15:05:59

@edannenberg: Cljsjs/material-ui contains completely custom React version and you need to exclude the normal version from your classpath completely.

sbmitchell15:05:39

Interesting very useful thanks @juhoteperi

sbmitchell15:05:57

I am using material-ui but I only have it temporarily bc I want to remove that dep for my own custom version 😛

sbmitchell15:05:09

that my be the problem...looks like Im replacing those components early

edannenberg15:05:13

@juhoteperi: yea, the problem is that reagent loads react-dom and react-dom wants react, which exists after material-ui is loaded

juhoteperi15:05:44

@edannenberg: You should probably exclude react-dom from reagent

madvas15:05:05

@edannenberg: no u don’t need to exclude react-dom

edannenberg15:05:27

yea and i can't because reagent will then complain about missing react-dom

edannenberg15:05:45

reagent is pulled in to early

madvas15:05:53

@edannenberg: be sure this [cljsjs.material-ui] is your first item in require in your core cljs file

madvas15:05:11

then react will be loaded first

sbmitchell15:05:10

some of those need to be removed

sbmitchell15:05:16

but thats what I currently have...

sbmitchell15:05:27

some are specific to my company as well 😛

sbmitchell15:05:56

so what ordering are you guys suggesting...this generates a bad file in advanced mode

madvas15:05:14

don’t use [cljsjs/material-ui "0.14.4-11" :exclusions [cljsjs/react]]

madvas15:05:30

use [cljs-react-material-ui "0.2.11"]

sbmitchell15:05:49

thanks for the work on getting that to place nicely 😉

sbmitchell15:05:55

I see you made that

sbmitchell15:05:14

yea looks like Id want to use an older clojar I cant support react 15 atm

sbmitchell15:05:25

is 1.8 13 or 14?

xcthulhu15:05:59

@juhoteperi: You were right, I wasn't using the right version of react

edannenberg15:05:05

@madvas: it is top of my entry file, and looking at cljs_deps.js it is almost top but still not above reagent.

xcthulhu15:05:31

But I fixed it and my tests (including advanced compilation) are still passing

xcthulhu15:05:53

:dependencies [[cljsjs/react "15.0.2-0"]
                 [cljsjs/react-dom "15.0.2-0"]
                 [cljsjs/react-dom-server "15.0.2-0"]
                 [garden "1.3.2"]
                 [hiccup "1.0.5"]
                 [markdown-clj "0.9.88"]
                 [org.clojure/clojure "1.8.0"]
                 [org.clojure/clojurescript "1.8.51"]
                 [prismatic/schema "1.1.0"]
                 [reagent "0.6.0-alpha2"
                  :exclusions [cljsjs/react
                               cljsjs/react-dom
                               cljsjs/react-dom-server]]]

xcthulhu15:05:04

Maybe a dumb quick fix is to: explicitly include react, make sure everything is in alphabetical order

sbmitchell15:05:11

so reagent works with react 15 has that been vetted?

edannenberg15:05:10

@sbmitchell: alpha2 pulls in react 15.0.2 😉

madvas15:05:23

@sbmitchell: sorry, but cljs-react-material-ui is including only react 15. and cljsjs/material-ui "0.14.4-11” is kinda broken anyway, I don’t recommend using it

sbmitchell15:05:43

well Im trying to get rid of material-ui completely...maybe this just gives me reason to port over the components to my own

sbmitchell15:05:14

it was nice to start out but it was pretty easy to reverse engineer the components minus all the cooler animations to cljs

xcthulhu15:05:35

@madvas: I want to use google's material design, is material-design-lite good enough in your experience?

xcthulhu15:05:20

I sort of don't want to use any react components I can't just write in hiccup, since I want to just use hiccup server side for rendering.

xcthulhu15:05:18

It's an idea @yogthos espoused in a blog post last year born of his frustrations with server side rendering in javascript

madvas15:05:36

@xcthulhu: imho material-ui is so far most complete implementation of material design out there. material-design-lite is pretty fair, but there yet

xcthulhu15:05:10

Hmm... well I don't mind swapping material-design-lite out someday

sbmitchell15:05:21

I found material-ui to be pretty good overall...not sure about the current versions but in previous versions stuff like dropdown menus did not work

sbmitchell15:05:57

dialogs...text fields...select fields are all solid

madvas15:05:03

yea, I guess that’s fixed in newest release

sbmitchell15:05:43

but if all you want is that floating label...you can just steal the css transform yourself and make a reagent component 😛

madvas15:05:26

@sbmitchell: yea, but maintenance? 😄

madvas15:05:37

@xcthulhu: with cljs-react-material-ui you have choice writing hiccup or not. But I haven’t done any work on server-side rendering yet

sbmitchell15:05:37

reagent only material-ui TextField 😛

madvas15:05:34

@sbmitchell: that’s a hell lot of code 😄

sbmitchell15:05:25

probably can be condensed...but eh iterations it does work 😛

madvas15:05:03

@xcthulhu: yea, but for getting material-ui work on server-side or whichever .js implementation of material, Nashorn or Node.js will be needed

xcthulhu15:05:24

Like to avoid server side JS as much as possible

xcthulhu15:05:52

Doing everything in cljc is admittedly sort of painful sometimes...

edannenberg16:05:25

@madvas: ok found the problem, routing got executed before reagent init in core.cljs, the routes are in a seperate file and used a ratom, so reagent was loaded before mui. >< adding mui above the ratom require in the routes files did the trick

madvas17:05:29

@edannenberg: yea, good job. Again, [cljsjs.material-ui] contains React, and must be required before Reagent or Om or other react framework, since react is in exclusions

madvas17:05:47

This won’t be needed in future, it’s all just because of onTouchTap event, when React fixes that, [cljsjs.material-ui] won’t need to include React

sbmitchell17:05:22

@edannenberg Im looking at that right now myself 😛

sbmitchell17:05:27

we must have very similar structured apps

edannenberg17:05:17

@madvas yea i got that, just couldn't figure out why reagent was loaded first despite mui being top in core.cljs. but good to know that this will improve

edannenberg17:05:42

@sbmitchell: hehe, i guess most reagent apps have a pretty similar structure. would also like so see some reagent native stuff with material-ui like feel. did you have a look at https://github.com/reagent-project/reagent-forms? could be a nice base for your own matrial efforts

sbmitchell17:05:03

Perhaps we should take on that effort 😛

sbmitchell17:05:46

I havent really tried adding animations in the react world yet

sbmitchell17:05:57

Im interested in looking into it however

chrisetheridge18:05:57

what library would be a good idea to use for client side routing?

chrisetheridge18:05:15

i know of secretary but the last commit was Oct 2015

roberto18:05:27

accountant and bidi are good options

chrisetheridge19:05:47

thanks for the suggestions guys! going to take a look at those

chrisetheridge19:05:51

i’ve heard a lot about bidi

sbmitchell19:05:28

I use secretary with accountant

gamecubate21:05:47

Working on a cljs+boot+reagent project. Need to read a project-local csv file as JSON. Is there some best CLJS way to do that (I usually use the d3.csv utility AJAX function in JS; not sure if there is some simpler way with cljs)

darwin21:05:24

@gamecubate: what do you mean by “project-local csv”, are you going to read it from file/jar?

gamecubate21:05:54

Nope. Web hosted, inside a data.csv file at the root level.

gamecubate21:05:41

Should have mentionned this is for a web-hosted (index.html, main.js, style.css, data.csv, etc.) project.

gamecubate21:05:17

If using jquery, I usually use the ajax function. If not, usually using d3.csv util function (I do a lot of dataviz for a living)

borkdude21:05:35

if it's not too much data you could process the csv to edn and embed it in the index html

gamecubate21:05:37

d3.csv, for example, takes file path as argument and returns json object in the callback

gamecubate21:05:55

Sometimes huge files, I would prefer to do it asynchronously

darwin21:05:07

use some xhr library to fetch the data as string and goog.labs.format.csv to parse it

gamecubate21:05:17

@darwin, this seems to be more for the parsing of a csv file.

borkdude21:05:19

@gamecubate: then you could also make an endpoint which does the conversion to edn on the server, if there is no https://github.com/clojure/data.csv in clojurescript

gamecubate21:05:39

I should be clearer: I need to fetch a csv file, expecting a JSON object to be given to me (after some time)

borkdude21:05:14

@gamecubate: why do you want json instead of edn?

gamecubate21:05:46

Professional deformation: I have been programming in JS (client side and, with node, server side) for 3 years. Just now trying to wrap my head around CLJS and not sure how to best proceed for the [asynchronous] fetching of file-based data. In JS, usually perform an asynchronous fetch, supplying a callback of form callback(err, json),

gamecubate21:05:07

Are you saying that edn is the standard way to fetch remote assets with CLJS?

gamecubate21:05:16

to store, I should say

borkdude21:05:31

@gamecubate: well, it makes life a lot easier if you stick to edn

borkdude21:05:46

@gamecubate: but you can transform json to edn fairly easy

borkdude21:05:19

@gamecubate: what I would do is use a good csv -> edn library on the server and send that to the client

gamecubate21:05:00

I see I have more reading up to do. simple_smile . Thanks for your advice. Will act upon it.

gamecubate21:05:17

<googling edn cljs json csv>

borkdude21:05:38

googling on that combination doesn't make sense, since it doesn't matter how the edn was produced right

borkdude21:05:34

you could use your favorite js library from clojurescript, if that's what you want

gamecubate21:05:21

I guess that would be easiest, assuming that CJLS supports callbacks... which it does?

gamecubate21:05:32

Ah man my head hurts. I need to more reading.

borkdude21:05:39

@gamecubate: of course, callbacks are just functions

gamecubate21:05:44

... do more reading.

gamecubate21:05:47

Will see if I can use d3 with CLJS, though it's binding of data to DOM (reagent managed) elements seems perhaps too stateful. Will need to experiment.

sbmitchell21:05:06

@gamecubate Speaking from my own integrations w/ d3, leaflet, etc. There is a common pattern in react with using a dom manipulating libs. You can do the same in cljs of course with reagent. Basically let the lib, i.e 'd3' do its thing and create a "container" component to wrap the data access to pass into d3 and update via the 'component-did-update' lifecycle. A good article I have seen is https://github.com/Day8/re-frame/wiki/Using-Stateful-JS-Components which is specific to reagent but there is another link at the bottom for the "general" principle

gamecubate21:05:32

@sbmitchell: Same here. My work involves constant use of leaflet and d3 (I work for a Montreal newspaper). Thanks for the article link. Churning through it.

borkdude21:05:22

We use Leaflet a lot too, but I haven't touched much front end code yet, so never really used it yet

gamecubate21:05:24

@sbmitchell, interesting article and pattern, that.

gamecubate21:05:39

First goal: to translate above snippet to make it work in a boot-managed cljs project.

gamecubate22:05:10

with help from reagent and using pattern mentioned in @sbmitchell link.

gamecubate22:05:40

No marker data yet as I will need to fetch that, somehow. For now, just a map.

danielcompton22:05:06

This took a bit of thinking to work out the kinks, hope it’s helpful for others

lucaska22:05:37

@borkdude: The assumption there is that the client is going to be Clojure(script) and accepting EDN? I have a similar problem. I have a React Native app, written in JS as the client, and currently consumes a flat JSON file. I was going to port my Data Parser from JS to Clojure to practice. So same sort of issue as @gamecubate has, but the input is a CSV and the output is JSON. EDN can be the intermediary for sure, but it still needs to output JSON at the end.

lucaska22:05:34

So what are the recommended tools to bring in data, parse/organize it, and output JSON? I’ve been using Cheshire a bit and that’s good for JSON output, but what about CSV input?

borkdude22:05:43

@lucaska: cljs was my assumption because @gamecubate mentioned that

borkdude22:05:17

@lucaska: is your processing happening inside clojurescript or on a server?

lucaska22:05:56

Right now it’s a node.js script locally.

borkdude22:05:44

ah, so it runs in a different process than the react native app?

lucaska22:05:05

The data is in a spreadsheet that gets updated once a week, I parse that CSV to JSON, build an array of JSON objects, and output to a file in the RN folder.

lucaska22:05:13

I’m a fancy programmer. 😄

borkdude22:05:12

in JVM Clojure you could read the spreadsheet directly (using an Apache POI wrapper, several available) and then spit that data out with cheshire.

lucaska22:05:48

haha, it’s on Google Docs, which may be even easier

borkdude22:05:20

well, you could read the entire google doc as json, no script needed

lucaska22:05:38

Can you pull JSON from it’s api?

lucaska22:05:51

Cause that reduces a step for sure 😄

borkdude22:05:00

I have done that with a public document once

borkdude22:05:16

no SDK needed, just the public link

lucaska22:05:34

I’ll check that out

magomimmo23:05:30

I just published the in the modern-cljs series the 21th and 22th tutorials: Part I and Part II of a reasoned step by step guide to port the official react tutorial to reagent: https://github.com/magomimmo/modern-cljs/blob/master/doc/second-edition/tutorial-21.md and https://github.com/magomimmo/modern-cljs/blob/master/doc/second-edition/tutorial-22.md