Fork me on GitHub
#reagent
<
2017-12-21
>
souenzzo11:12:25

If it use shallow-cljs/lumo JVM-less solution to build will be cool

alex-dixon06:12:34

And messaged yogthos briefly. He suggested I come here to gather thoughts

alex-dixon06:12:07

Looking for any input and specifically if reagent-project/create-reagent-app could be set up and used as the repo for it

alex-dixon06:12:29

TLDR idea is create-react-app just for reagent. Zero config, “sane defaults”, and specifically for JavaScript developers with no Clojurescript experience

justinlee06:12:51

The tenzing tool is the closest I’ve found, though of course it requires some choices

justinlee06:12:02

I do wish a Dan Abramov like character backed by Facebook cash would descend upon clojurescript to make my life easier 🙂

alex-dixon07:12:03

@lee.justin.m what would make it easier?

alex-dixon07:12:32

No promises but there’s a make things easier movement afoot

venantius14:12:14

@eveko okay, I’m back for more punishment. Picking up where I left off, I’ve come up with the following:

venantius14:12:01

However, when I try to add this to a normal reagent component with [my-component {}], I get nastiness in the browser

venantius14:12:13

Error rendering component (in frontend.core.current_page > > home-page > > > > > > > > frontend.ui.component.main.my_component > reagent221)

venantius14:12:23

and Uncaught Error: Invalid arity: 8

mikerod14:12:45

(def bar-chart (reagent/adapt-react-class js/Recharts.BarChart))
(def x-axis (reagent/adapt-react-class js/Recharts.XAxis))
(def y-axis (reagent/adapt-react-class js/Recharts.YAxis))
(def cartesian-grid (reagent/adapt-react-class js/Recharts.CartesianGrid))
(def tooltip (reagent/adapt-react-class js/Recharts.Tooltip))
(def legend (reagent/adapt-react-class js/Recharts.Legend))
(def bar (reagent/adapt-react-class js/Recharts.Bar))

mikerod14:12:40

I don’t think you are using @venantius correctly. You typically use that inline

mikerod14:12:51

You ended up making bar-chart just a cljs vector

mikerod14:12:03

I’m not sure what else happens beyond that

mikerod14:12:25

Using the :> though would look like:

[:> js/Recharts.CartesianGrid {:strokeDasharray "3 3"}]

mikerod14:12:47

you didn’t give more of a stacktrace so I don’t know exactly what happened

venantius14:12:06

let me give that a shot

venantius14:12:15

sorry I can paste fuller stacktraces, give me a mo

venantius14:12:22

@mikerod that seems to have worked!

venantius14:12:39

no more stacktraces, though what I’m actually rending looks like crap. but at least that’s something I can fix! 🙂

mikerod14:12:00

hah, well good

justinlee17:12:25

@alex-dixon I think its great that someone is taking this on. In my view, create-react-app does a lot of things to reduce pain, but the main thing it did was to get babel and webpack working together with no configuration and sensible defaults. The reality is that there is nothing even remotely as painful as that in the cljs ecosystem (that I have found). Dan has suggested twitter that he’s not necessarily even that wedded to zero-config as an absolute. I think it was just a way to pull all community members together to force a decision on things. I also think they worked to fix the underlying tools in some cases. Somethings I really like about c-r-a: (1) somehow it coaxes beautifully formatted messages out of the compiler and clears the screen between every file change. My cljs tool chain will spit a stacktrace at me for something as simple as a missing dependency. Assistance with dependencies would be so nice (e.g. collect all the available packages and then do an edit distance calculation with the missing dependency to suggest the nearest once so that people can see if they uses a / where a . should have gone or just typoed). (2) Getting a repl to the browser was really hard. I just don’t use it because I don’t get whats going on. (3) The c-r-a development server comes configured to deliver the frontend bundle on any GET to any URL. With a single line of config, you can make it proxy non text/html requests to your api server. (4) c-r-a installs best-practice linting and debugging tools. I’ve seen people here in slack recommend tools that will help with stacktraces by only showing the lines in your code. (5) the c-r-a readme is an incredible resource and gives one confidence that it is possible to develop and app using c-r-a and then deploy it in the real world. A similar one would be a great opportunity to explain the practicalities of the clojure universe that I’ve only absorbed by spending time here on slack (e.g. the fact that a well-maintained 7 year old library might still have a version like 0.24.1).

alex-dixon17:12:35

Thanks. This is invaluable. On 3: Trying to see if figwheel wants to support the same thing https://github.com/bhauman/lein-figwheel/issues/634

alex-dixon17:12:37

4) Haven’t heard of these. If you’re able to share that’d be great. I think it relates to 1) a bit and you’re right, cra’s version is incredible. In the short term I was thinking the current figwheel heads up display is the best we have. Sourcemapping/stacktrace debugging might be a point we lose people, so I think it’s essential but I’m not sure we could develop something that rivals what CRA has going in the short term 😕

justinlee17:12:49

For linting, a big point of pain with eslint is that you’d have these 500 line config files that specified every possible rule. Twitter and companies had published their rules, but CRA just settled on some rules that made sense given their compiler settings and then nobody had to worry about that. Linting maybe isn’t done in clojure (?)

justinlee17:12:02

I should try out figwheel. I went with boot and its set of tools because it seemed like the shiniest thing out there and since I didn’t have any legacy I thought that was best. But maybe figwheel is what I should be using. Anyway, that’s a good example of where having a create-reagent-app would be nice because you could set people down the right path.

justinlee17:12:57

This is the tool I had seen mentioned elsewhere: https://github.com/AvisoNovate/pretty

justinlee17:12:01

I don’t know if it is any good.

juhoteperi18:12:03

How would this differ from Reagent Lein template?

justinlee18:12:45

I haven’t used the lein template, only the tenzing boot one

justinlee18:12:55

Oh I forgot! The one other thing that CRA does that is totally amazing is that it enables you to update the whole toolchain without doing anything to your files. There were many templates out there before CRA, but they all have the problem that your are fixed in time to whenever you initiated the template. Unless you eject from CRA, you can just update the react-scripts version globally and go on your merry way.

alex-dixon04:12:40

@juhoteperi The current proposal would use npm/yarn instead of lein to install a cli. The cli would create a minimal project with reagent that can be run with a single command.

alex-dixon04:12:40
replied to a thread:@alex-dixon I think its great that someone is taking this on. In my view, create-react-app does a lot of things to reduce pain, but the main thing it did was to get babel and webpack working together with no configuration and sensible defaults. The reality is that there is nothing even remotely as painful as that in the cljs ecosystem (that I have found). Dan has suggested twitter that he’s not necessarily even that wedded to zero-config as an absolute. I think it was just a way to pull all community members together to force a decision on things. I also think they worked to fix the underlying tools in some cases. Somethings I really like about c-r-a: (1) somehow it coaxes beautifully formatted messages out of the compiler and clears the screen between every file change. My cljs tool chain will spit a stacktrace at me for something as simple as a missing dependency. Assistance with dependencies would be so nice (e.g. collect all the available packages and then do an edit distance calculation with the missing dependency to suggest the nearest once so that people can see if they uses a / where a . should have gone or just typoed). (2) Getting a repl to the browser was really hard. I just don’t use it because I don’t get whats going on. (3) The c-r-a development server comes configured to deliver the frontend bundle on any GET to any URL. With a single line of config, you can make it proxy non `text/html` requests to your api server. (4) c-r-a installs best-practice linting and debugging tools. I’ve seen people here in slack recommend tools that will help with stacktraces by only showing the lines in your code. (5) the c-r-a readme is an incredible resource and gives one confidence that it is possible to develop and app using c-r-a and then deploy it in the real world. A similar one would be a great opportunity to explain the practicalities of the clojure universe that I’ve only absorbed by spending time here on slack (e.g. the fact that a well-maintained 7 year old library might still have a version like 0.24.1).

@juhoteperi The current proposal would use npm/yarn instead of lein to install a cli. The cli would create a minimal project with reagent that can be run with a single command.