Fork me on GitHub
#clojurescript
<
2016-12-04
>
lsenta13:12:52

Do you guys have some guidance to share on creating a javascript file that can be imported as a module from clojurescript?

keymone16:12:50

what spa frameworks are good choices in cljs these days?

keymone16:12:57

om/re-frame/anything else?

keymone16:12:07

that is part of re-frame isn’t it?

val_waeselynck16:12:35

@keymone if you really want a framework (as in 'battery included'), I'd look at Re-frame, Om Next and Hoplon. But be aware that since we have Google Closure Library in ClojureScript, a framework is somewhat less appealing than in JavaScript.

sammikko16:12:13

@keymone yeah you're right.. checking it out now 🙂

pesterhazy16:12:29

seconding val, I'd suggest going with plain reagent first and then moving on to a state mgmt framework like re-frame only if you actually need it

val_waeselynck16:12:51

Rum is cool too as a React wrapper.

keymone16:12:34

i do need routing and state management, i’m just a bit out of the loop so don’t know what’s the new “hotness” 🙂

pesterhazy16:12:06

that's the thing, you may get away with just a simple r/atom initially

pesterhazy16:12:23

only decide on something more involved once you feel the pain

pesterhazy16:12:32

(agree that rum is a good alternative)

sammikko16:12:35

is re-frame a bit like react+redux ?

mitchelkuijpers16:12:38

@keymone untangled is also a good option

keymone16:12:54

thanks, i’ll have a look at these

sammikko16:12:00

ok.. what kind of trouble you usually run into using just something simple like reagent but something like re-frame handles better?

val_waeselynck16:12:24

I woud not say re-frame is not "less simple" than reagent, it just deals with issues that Reagent doesn't

val_waeselynck16:12:41

Reagent is about views, re-frame is about state management

sammikko16:12:57

yeah i know in redux there's this action / reducer separation but in reagent you mostly directly change the state of the app atom.. im just not familiar what kind of benefits this separation gives you.. it is more complex for sure

sammikko16:12:36

i havent build anything big with those

val_waeselynck16:12:40

@sammikko best way to know is to start w/ Reagent only, problems will show up soon enough 🙂

val_waeselynck16:12:03

or they won't, in which case it was a good idea to use Reagent only

sammikko16:12:05

yeah i figured.. thats why i asked what are the first things that you usually stumble on 🙂

pesterhazy16:12:19

always a good idea to read the re-frame manifesto

sammikko16:12:25

like.. if you need to do xxx, you should probably pick re-frame instead of just reagent

pesterhazy16:12:47

you'll learn a lot even if you don't end up using the library per se

sammikko16:12:26

ok.. ill do that.. i like manifestos 🙂

shaun-mahood16:12:30

@sammikko: I gave a talk at the conj on re-frame, it might give you a better idea of what it's like. There's also the #re-frame channel if you have questions about specifics - there are a few teams who have built very large apps with re-frame and they might be able to give you some ideas on what benefits they see as apps grow.

martinklepsch16:12:11

@lsenta you could write a Closure Module, this you can then use like you use Closure libraries

martinklepsch16:12:52

@lsenta here's a simplistic example, there are more JS files in this repo as well with more complex modules: https://github.com/uxbox/uxbox/blob/master/frontend/src/uxbox/util/uuid_impl.js

sammikko16:12:05

@shaun-mahood cool thanks.. is the video available somewhere? couldnt find it with a quick google

lsenta17:12:32

The doc around the :libs tag and the uuid example unblocked me, thanks a lot @martinklepsch & @hlolli

martinklepsch17:12:27

@lsenta you don't need :libs if you adhere to maven naming/namespace conventions I believe

martinklepsch17:12:39

(just so you know 🙂)

puppybits17:12:10

I'm writing a Medium post about going from React to ClojureScript. Does anyone have some good tutorials for beginners getting into cljs, figwheel and reframe?

puppybits17:12:01

nice that's quite the list of tutorials. thanks.

martinklepsch17:12:07

@puppybits modern-cljs builds on Boot so there's no Figwheel there. IMO still a good setup 🙂

richiardiandrea17:12:08

aem...working on it :)

puppybits17:12:57

I've looked into boot but not used it yet. Does it give the same browser based live coding setup that figwheel has?

martinklepsch17:12:35

@richiardiandrea is your work only about porting the cljs bits or also the clojure stuff?

richiardiandrea17:12:43

Yesterday on the plane back from the conj I was able to send the correct kind of messages for reloading modified js files...still need some polishing though

richiardiandrea17:12:01

@martinklepsch only the figwheel client/UI at the moment

martinklepsch18:12:35

Cool, always seemed like it would be very hard to make the clj code work nicely with Boot

richiardiandrea18:12:37

Boot-reload provides the trigger and I send the messages, well I tried to hammer figwheel in boot-figwheel but my results where poor, I have heard it is kind of possible to see it working, but I wanted to have it "the boot way", with immutable file system and all

richiardiandrea18:12:02

So the only way was keeping everything as it is (and Juho agreed), plugging the client for better visuals and see if the boot-cljs can be improved independently from figwheel

martinklepsch18:12:14

@puppybits I made a template https://github.com/martinklepsch/tenzing that you can give a try to see what the boot setup is like

puppybits18:12:22

The thing I like about figwheel for first time users is it given them a browser with live coding and warning messages from a single command. It's a really easy entry point. It really sounds like boot is the future. I'm wondering if it's as easy for a frontend JS dev who is already biased against a lisp.

puppybits18:12:40

tenzing looks good. I'll need to dig into it.

martinklepsch18:12:58

@puppybits I'd suggest to give it a try and see for yourself. With tenzing you can have something running in <5min

lsenta18:12:14

As a clojure(script) diletante, I moved my lein+figwheel project to boot a few days ago, it makes much more sense to me

puppybits18:12:54

Oh yeah Boot really seem like it fixes the workflow issue I had.

puppybits18:12:59

I work with a lot of dev who are against React cause of JSX syntax and Angular devs who have a hard time looking outside of Angular.

puppybits18:12:42

I need something that's easy to see and quick hits on why cljs is so much better.

puppybits18:12:05

If they can understand why its better they tend to get past the fact that it's a lisp and can move onto better tools.

lsenta18:12:58

For this case I usually send people to the reframe template, you got testing live reload and reframe

puppybits18:12:41

yep i think that's a good starting point. It's less different than what they already know.

lsenta18:12:45

you don’t have to learn the whole reframe machinery since you have all the reagent features already

puppybits18:12:19

@lsenta do you have any super light reframe 101 tutorials you like?

lsenta18:12:12

@puppybits not really, the reframe homepage covered it all

lsenta18:12:40

super light would be the reagent homepage (http://reagent-project.github.io/)

lsenta18:12:02

that’s a good starting point

curlyfry18:12:03

@puppybits Not really a tutorial, but if someone prefers to jump straight into the code then https://github.com/Day8/re-frame/blob/master/examples/simple/src/simpleexample/core.cljs is a pretty nice and simple illustration of how re-frame works

curlyfry18:12:19

Definitely agree with @lsenta that the reagent homepage is a very good starting point, though

lsenta18:12:37

@martinklepsch can you tell me more about the maven naming convention?

lsenta18:12:07

I’m pretty sure I follow the usual naming, I got my frontend/components/doughnut_impl.js which goog.provide(”frontend.components.doughnut_impl”)

lsenta18:12:50

Am I missing something? from your advice and the project you've linked I’m under the impression it should work. boot cljs compiler gives me ERROR: Invalid :refer, var frontend.components.doughnut-impl/render does not exists in file <the_caller>.cljs

martinklepsch18:12:19

@lsenta more of a guess but try a namespace that doesn't have a _

micahasmith19:12:41

if you do the build.clj style like:

(require 'cljs.build.api)

(cljs.build.api/build "src"
  {:main '<%= nameHyphened %>.core
   :output-to “dist/cljs/main.js”})
that then requires java -cp lib/cljs.jar:src clojure.main scripts/build.clj, would that pull and use dependencies in the project root’s project.clj?

micahasmith19:12:22

trying to figure out how to fit cljsjs packages into this proj i’m on

pvinis19:12:10

whats the simplest way to compile one file of cljs to js?

lsenta19:12:29

@martinklepsch It’s working now, lots of reorganising and rewriting, not sure what was wrong. Thanks again for answering another maven-related question I had 🙂

richiardiandrea19:12:46

@pvinis the simplest way is just a little above, and also described in here: https://github.com/clojure/clojurescript/wiki/Quick-Start#clojurescript-compiler Then there are a lot of other ways that involve project/dependencies/hot reload, the wiki is pretty rich

pvinis19:12:10

i saw that, but yea, goog is missing, and i dont want to have html stuff. is there a super simple way so i have one cljs file, compile it to js, and run is with node file.js

pvinis19:12:26

is that possible?

richiardiandrea19:12:58

@pvinis mmm...the above setup is a one line command + a build.clj file...did you have any error in particular? The cljs compiler uses the Google Closure compiler for the conversion

pvinis19:12:45

but does this produce something without goog in the file or something?

pvinis19:12:52

hmm i have to try again

richiardiandrea19:12:53

@pvinis there is always going to be at least a call to goog as it has been chosen for handling modules, but it should be transparent to you

pvinis19:12:18

ok but goog will be in the js file right?

pvinis19:12:27

so i have to include it somehow

richiardiandrea19:12:41

everything should be already taken care of

pvinis19:12:43

so i need then my js file and a goog.js file or something?

pvinis19:12:07

ok let me try again and i will write back when it works or fails 🙂

richiardiandrea20:12:43

@pvinis so to better answer your question, if you have limitations in including goog/base.js in your final js then no, it is not going to work without it

pvinis20:12:48

if i can have it locally, at least thats fine

richiardiandrea20:12:38

yes you can, make sure you serve the out folder

pvinis20:12:39

ok so i have compiled it

pvinis20:12:12

in the out dir i have a cljs dir, a goog dir, a hello-world dir and a couple of js files

pvinis20:12:42

so i do node out/main.js and i get document is not defined

richiardiandrea20:12:04

ah ok, now i see, sorry you are compiling node

richiardiandrea20:12:11

you need a compiler option

pvinis20:12:25

yea, i would like to run the compiles js with node

richiardiandrea20:12:58

as I said, the wiki is good 🙂

richiardiandrea20:12:43

(node does not define js/document among other things so ClojureScript needs to adapt the code it generates)

pvinis20:12:33

tadaaaa 🎉

pvinis20:12:44

didnt see that section before

richiardiandrea20:12:58

no probz! glad it helped!

pvinis20:12:49

ah that makes things easier. thanks again

Aron20:12:51

so. there is this dependencies thing in the project.clj and i am trying to google for the spec where it is explained how it is resolved. and i wasted 10 minutes and i found a lot of docs about it, but this particular details i can't find