Fork me on GitHub
#clojurescript
<
2018-05-21
>
kwladyka06:05:01

I have some ClojureScript crisis. Do you have this feeling like ClojureScript is great language as Clojure is, but when it comes to use UI modules to make beautiful design it start to be hard and complex? A lot of overhead. Especially about new solutions, the newest versions etc.

soulflyer07:05:37

@kwladyka There is a lot of choice, and it can be confusing, but I think it's reasonably easy to get something that looks good up and running. For me the hardest part of ui is always the html/css not the clojurescript that generates it.

kwladyka07:05:14

exactly and while we have tools like https://mdbootstrap.com with Vue / React which is hard and complex to use in ClojureScript… I started ask myself: so why CS on FE then?

kwladyka07:05:20

@soulflyer so while html/css is the key why CS? It doesn’t help and even make this part harder probably.

thheller07:05:19

@kwladyka it would help if you made an example of what you tried that didn't work. mdbootstrap looks like a commercial project so it might not adhere to "standard practices" and just be complicated to use because of that.

kwladyka07:05:16

@thheller I just want to use beautiful UI components without my effort to make them

thheller07:05:05

yeah I understand and that is fine. What in particular are your issues though? What doesn't work?

thheller07:05:21

what did you try?

kwladyka07:05:34

Ok so first i tired include https://mdbootstrap.com and use it in cljs. I did:

;:closure-defines {process.env/NODE_ENV "development"}
                ;:npm-deps {:mdbootstrap "4.5.2"
                ;           :mdbreact "4.3.0"}
                ;:install-deps true
But it failed. Probably i should use mdreact while i Was trying with mdbootstrap. To be honest I don’t know. It looks like it would be hard to use it in cljs. At least it is hard for me. Even if I will success probably I wouldn’t get editor support about syntax etc. Next I tried to use material-ui. What I see there are 2 cljs modules, both looks like not active maintenance. Modules were updated 9 months ago. Then I was trying with https://github.com/cljsjs/packages/tree/master/material-ui but I failed again. Also with this solution what I understand I wouldn’t have editor syntax support again.

kwladyka08:05:22

@thheller this made me to consider about cljs on FE

kwladyka08:05:17

Before I was doing not beautiful things… so I even didn’t notice that issue. I was more focus about logic in cljs behind.

kwladyka08:05:04

For that purpose clsj is perfect

thheller08:05:56

@kwladyka I would suggest trying shadow-cljs and just following the usual npm instructions. I'm a bit busy currently so I can't make an example for you but everything should be covered here https://shadow-cljs.github.io/docs/UsersGuide.html

kwladyka08:05:43

What will it change vs figwheel?

thheller08:05:49

yarn add mdbreact (:require ["mdbreact" :as mdb]) reagent [:> mdb/Button ...]

thheller08:05:47

it has its own direct support for npm and works a bit better than :npm-deps

thheller08:05:36

I have never used mdbreact and it might not work at all. it seems to have the assumption of using webpack baked in which might be a problem

thheller08:05:57

but if you just want material ui there are other options

kwladyka08:05:52

yes, but as I noticed not in active maintenance

kwladyka08:05:27

I have to sleep with it… stand against the mirror and choose cljs on FE or break my faith to accept fact: popularity can matter more. 😱

joelsanchez08:05:21

material design lite works well with cljs

thheller09:05:43

@kwladyka cljsjs might not be updated regularly yes but if you can use npm directly that doesn't matter 😉

kwladyka09:05:32

hmm not sure how can I make it work in that way without write my own interop for everything

thheller09:05:37

well yeah native interop is kinda required. unless you expect someone to write that for you. I think there are some MUI wrappers for CLJS but not sure about their state.

kwladyka09:05:44

just it looks like a lot of overhead. But it could be I am not enough experience in cljs to see it easy. With Java interop I feel comfortable with it, but in cljs it makes for me more issues.

guillermo dejavu09:05:11

hi, i'm trying to remote edit a running boot compilation with ftp but the watch task seems to copy an empty file (ftp copies and renames the new file), has someone any clue?

guillermo dejavu09:05:29

if i run it the first time works

guillermo dejavu09:05:46

if i stop it and the run it agin it works also, i've been googling for it but can't find anything

abdullahibra09:05:32

i'm trying to use stanford parser inside my clojure code, but when i try to do lein cljsbuild once i got the errors in the link https://gist.github.com/aibrahim/5623c2722cc807cab33c3143026d8fb2

abdullahibra09:05:27

how the class Not found and i have the jars in project.clj and import them ?

valtteri10:05:24

@kwladyka I’m using [cljsjs/material-ui "1.0.0-beta.40-0"] and it works fine.

kwladyka11:05:27

@valtteri Would you mind to show me your project? It can be screen share, github, whaterver and maybe say a few word about it? 🙂

valtteri11:05:41

Disclaimer: I’m pretty noob what comes to CLJS/React so it might not be a state-of-art example. 🙂 Also the codebase is under heavy development all the time. Comments are welcome!

valtteri11:05:57

I’m also happy to discuss/show you more if you have questions

kwladyka11:05:25

so… to show a button after require cljsjs.material-ui cljsjs.material-ui-svg-icons what needs to be done?

valtteri11:05:26

I used that also as an example. Just updated all the deps

kwladyka11:05:44

I don’t have any experience about interop with React

kwladyka11:05:12

so I see from everything you do (r/adapt-react-class (gobj/get js/MaterialUI mui-name))

valtteri11:05:03

Requring cljsjs.material-ui sets a global JavaScript objects MaterialUI and MaterialUISvgIcons which you can access with interop js/MaterialUI. From these global objects you can access the React-components. Reagent requires a little wrapper around native React component which can be done with adapt-react-class function from reagent. There’s also a :>shorthand for doing that directly from hiccup-like syntax.

valtteri11:05:06

What I’m doing there is picking the components I’m going to use and prepare them for reagent. So in other files I can require and use them directly. All the defs could be also generated with macros as in https://github.com/madvas/cljs-react-material-ui/blob/master/src/cljs_react_material_ui/icons.clj#L969 but I haven’t bothered yet to study all the macro-related trickery in CLJS. 🙂

valtteri11:05:07

I use google Closure library to interop with JavaScript. It’s handy since it’s bundled into ClojureScript. When I need to deal with JS-objects, I use utils from Closure.

kwladyka11:05:43

So there is no way to write something like (.Button js/MaterialUI). I don’t am not familiar with goog interop.

theeternalpulse11:05:34

is button a property or function

valtteri11:05:28

I think it’s a function

kwladyka11:05:30

I don’t know. I didn’t use material before…. so topic is totally new for me

kwladyka12:05:55

So goog/get return content of the function?

valtteri12:05:48

goog/get is just a getter. Functions are first class in JavaScript so if the target is a function, it returns a function. I’m not 100% clear about the internals.. But in my case the stuff i get is something I can pass to adapt-react-class and then I can use the component in reagent. I’m assuming it’s a function that returns a React component.

valtteri12:05:56

I’m starting to feel like I should read what adapt-react-class actually does under the hood 😉

kwladyka12:05:42

(def button (r/adapt-react-class (gobj/get js/MaterialUI "Button")))
[:> button
      {:variant "raised"}
      "Foo"]
Should it be something like that?

valtteri12:05:31

You don’t need :> there since you already created the wrapper with r/adapt-react-class. You can use button directly

[button {:variant "raised"} "Foo"]

valtteri12:05:02

If your def was (def button (gobj/get js/MaterialUI "Button")) You would need :>

kwladyka12:05:01

(def button (r/adapt-react-class (gobj/get js/MaterialUI "Button"))) throw

core.cljs?rel=1526750298191:54 Uncaught Error: Assert failed: Component must not be nil
c
    at reagent$core$adapt_react_class (core.cljs?rel=1526750298191:54)
    at views.cljs?rel=1526904909967:9

valtteri12:05:42

Is your button nil if you eval it?

valtteri12:05:39

Did you remember to require [cljsjs.material-ui] somewhere in the project?

kwladyka12:05:56

(ns cm.views
  (:require [re-frame.core :as re-frame]
            [cm.subs :as subs]
            [reagent.core :as r]
            [goog.object :as gobj]
            [cljsjs.material-ui]
            [cljsjs.material-ui-svg-icons]))

valtteri12:05:23

Now if you eval js/MaterialUI do you see any output?

kwladyka12:05:39

Use of undeclared Var gobj/get
  1  (gobj/get js/MaterialUI "Button")
hmm

valtteri12:05:38

Hmm requiring goog.object should just work AFAIK

kwladyka12:05:04

it looks like in your code it works 😉

kwladyka12:05:43

ha it looks like there is no “Button”, there is “FlatButton”. Interesting you use “Button”

kwladyka12:05:53

maybe you use different version of material

valtteri12:05:27

I’m using the one I mentioned earlier [cljsjs/material-ui "1.0.0-beta.40-0"]

kwladyka12:05:45

[cljsjs/material-ui "0.19.4-0"]

valtteri12:05:36

Oh, that’s the old one. They just released the new one a few days ago. I’ts not yet in cljsjs and therefore I’m using beta

valtteri12:05:20

I suggest that you switch into the new one if you’re starting a new project

valtteri12:05:39

Or switch to shadow-cljs and consume the latest stuff directly from npm.

kwladyka12:05:07

How did you get this beta version? I mean how do you know this exist

kwladyka12:05:50

yeah…. shadow-cljs… maybe I have to think about it. I was using fighweel, but maybe it is bad choice.

valtteri12:05:46

Ha, it doesn’t show up in cljsjs website. Wonder why’s that

kwladyka12:05:33

BTW Why do you use figwheel vs shadow-cljs then?

valtteri12:05:35

😄 Glad you got your button visible!

kwladyka12:05:57

Somebody can recommend good cljs interop tutorial? The best video to watch 🙂

valtteri12:05:58

I’m using figwheel. I’ve been thinking about switching to shadow-cljs because the interop seems to work better there. On the other hand I haven’t needed any npm stuff (yet). So it’s ‘pending’.

kwladyka13:05:46

@valtteri I got feedback if I want use npm I should use shadow-cljs instead of figwheel. A few people today said me the same. I don’t know why, but it needs to be some kind of true 🙂

kwladyka13:05:28

So… it will be probably my first step. Move from figwheel to shadow-cljs, but we will see 🙂

kwladyka13:05:23

maybe somebody here can point exactly the advantage of shadow-cljs over figwheel.

kwladyka13:05:38

exactly over:

;:closure-defines {process.env/NODE_ENV "development"}
                ;:npm-deps {:mdbootstrap "4.5.2"
                ;           :mdbreact "4.3.0"}
                ;:install-deps true

gklijs14:05:26

It's not really correct, moving from figwheel to shadow-cljs. It's more like mining from lein-cljsbuild to shadow-cljs. Using npm should be a lot easier, although the newest cljsbuild should be improved a lot.

👍 4
kwladyka14:05:39

@gklijs > the newest already published or in the future?

kwladyka14:05:40

great, any doc to read about that improvements?

gklijs15:05:01

https://twitter.com/mfikes/status/998249143507210240?s=19 was the source of my remark. Haven't done anything with Npm myself.

kwladyka17:05:12

so… why as community we have shadow-cljs vs lein-figwheel? It looks like both are active maintenance. Figwheel looks more popular.

robert-stuttaford17:05:17

because developers, basically 🙂

robert-stuttaford17:05:23

coders gonna code!

kwladyka17:05:51

heh 🙂 Ok, good to know. Sometimes there is a reason.

thheller17:05:25

figwheel is basically a small layer on top of the standard ClojureScript compilation pipeline. shadow-cljs is a complete rewrite of anything but the main analyzer/compiler. I had a few different ideas I wanted to try and implemented them. I think it is worth exploring different stuff and that is should be done outside Core

theeternalpulse18:05:18

I'm liking shadow-cljs so far

bj18:05:58

figwheel has great templates like lein new figwheel hello-world -- --reagent. I actually tried shadow-cljs first, thinking figwheel would be more difficult to set up, but ended up with figwheel because of this. Is there something like that to help get a starter-project going for shadow-cljs? Also, as a cursive user, its seamless integration with figwheel is also keeping me there

kwladyka20:05:53

(def button (r/adapt-react-class (goog.object/get js/MaterialUI "Button"))) How to know goog.object/get is needed here? Can you recommend tutoarial about cljs interop which will explain it and show best practice?

kwladyka20:05:26

:npm-deps {:material-ui/core "1.0.0"}
How to use @material-ui/core? I see not like this.

thheller20:05:43

{"@material-ui/core" "1.0.0"}

🍻 4
kwladyka20:05:28

@thheller How do you require it then in cljs?

thheller20:05:12

the same (:require ["@material-ui/core" :as x])

kwladyka20:05:02

hmm ok I have probably another error, thx

kwladyka21:05:33

oh ok so i see if i start to use even 1 package from npm I can’t use cljs packages then. Like packages from npm don’t see cljs packages. But cljs packages see npm packages.

kwladyka21:05:46

base.js:1357 Uncaught Error: Undefined nameToPath for react
    at visitNode (base.js:1357)
    at visitNode (base.js:1355)
    at visitNode (base.js:1355)
    at visitNode (base.js:1355)
    at visitNode (base.js:1355)
    at visitNode (base.js:1355)
    at Object.goog.writeScripts_ (base.js:1369)
    at Object.goog.require (base.js:706)
    at (index):10
It looks like cljs packages can’t see npm packages too hmm

kwladyka21:05:47

I added to :npm-deps

"react" "16.3.2"
                           "react-dom" "16.3.2"
and require them in views.cljs

kwladyka21:05:07

As I understand reagent doesn’t see them

kwladyka21:05:56

@thheller Did you have this issue too?

kwladyka21:05:49

But it is reagent package. I am afraid I can’t do too much about it. Unless I miss something.

thheller21:05:58

all these problems are solved in shadow-cljs. if you want to solve them for standard CLJS you are on your own pretty much.

kwladyka21:05:01

heh yes but first I wanted to suffer a little to understand what problems shadow-cljs solve 🙂

kwladyka21:05:09

@thheller thanks you for help

athomasoriginal21:05:05

@kwladyka RE: goog.object/get There is a good blog on the clojurescript website that touches on this: https://clojurescript.org/news/2017-07-14-checked-array-access There is also a good video from lambdaisland on clojurescript interop https://lambdaisland.com/episodes/clojurescript-interop But the basic idea is that when you are work with a native JS object you will want to opt for goog.object/get as you can't access them them like you would a clojure map.

🍻 8
kwladyka21:05:44

I am going sleep, it is midnight. Goodnight 🙂