This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-05-21
Channels
- # aws (2)
- # bangalore-clj (1)
- # beginners (25)
- # boot (2)
- # cider (176)
- # clara (73)
- # cljs-dev (6)
- # cljsrn (31)
- # clojure (40)
- # clojure-greece (9)
- # clojure-india (1)
- # clojure-italy (14)
- # clojure-nl (9)
- # clojure-russia (4)
- # clojure-uk (156)
- # clojurescript (124)
- # core-async (37)
- # cursive (2)
- # data-science (2)
- # datomic (22)
- # emacs (3)
- # fulcro (32)
- # graphql (6)
- # java (3)
- # lein-figwheel (19)
- # lumo (29)
- # nyc (1)
- # off-topic (9)
- # onyx (15)
- # portkey (12)
- # precept (2)
- # re-frame (15)
- # reagent (10)
- # rum (7)
- # schema (2)
- # shadow-cljs (48)
- # tools-deps (35)
- # yada (1)
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.
@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.
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?
@soulflyer so while html/css is the key why CS? It doesn’t help and even make this part harder probably.
@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.
yeah I understand and that is fine. What in particular are your issues though? What doesn't work?
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.Before I was doing not beautiful things… so I even didn’t notice that issue. I was more focus about logic in cljs behind.
@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
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
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. 😱
material design lite works well with cljs
@kwladyka cljsjs might not be updated regularly yes but if you can use npm directly that doesn't matter 😉
hmm not sure how can I make it work in that way without write my own interop for everything
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.
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.
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?
if i run it the first time works
if i stop it and the run it agin it works also, i've been googling for it but can't find anything
hello guys
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
how the class Not found and i have the jars in project.clj and import them ?
@valtteri Would you mind to show me your project? It can be screen share, github, whaterver and maybe say a few word about it? 🙂
@kwladyka it’s open-source https://github.com/lipas-liikuntapaikat/lipas/tree/dev the most interesting file for you might be https://github.com/lipas-liikuntapaikat/lipas/blob/dev/ui/src/cljs/lipas_ui/mui.cljs
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!
thx, I was looking on https://github.com/madvas/cljs-react-material-ui/tree/master/src/cljs_react_material_ui before as an example
so… to show a button after require cljsjs.material-ui cljsjs.material-ui-svg-icons what needs to be done?
so I see from everything you do (r/adapt-react-class (gobj/get js/MaterialUI mui-name))
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.
@kwladyka https://github.com/reagent-project/reagent/blob/master/docs/InteropWithReact.md is a pretty nice doc for that
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 def
s 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. 🙂
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.
So there is no way to write something like (.Button js/MaterialUI)
. I don’t am not familiar with goog interop.
is button a property or function
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Button/Button.js#L157
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.
I’m starting to feel like I should read what adapt-react-class
actually does under the hood 😉
(def button (r/adapt-react-class (gobj/get js/MaterialUI "Button")))
[:> button
{:variant "raised"}
"Foo"]
Should it be something like that?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"]
(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
Like this https://github.com/lipas-liikuntapaikat/lipas/blob/dev/ui/src/cljs/lipas_ui/mui.cljs#L3
(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]))
ha it looks like there is no “Button”, there is “FlatButton”. Interesting you use “Button”
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
yeah…. shadow-cljs… maybe I have to think about it. I was using fighweel, but maybe it is bad choice.
Found it in clojars https://clojars.org/cljsjs/material-ui/versions/1.0.0-beta.40-0
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’.
@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 🙂
So… it will be probably my first step. Move from figwheel to shadow-cljs, but we will see 🙂
exactly over:
;:closure-defines {process.env/NODE_ENV "development"}
;:npm-deps {:mdbootstrap "4.5.2"
; :mdbreact "4.3.0"}
;:install-deps true
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.
I'm guessing this is what @gklijs is talking about https://clojurescript.org/news/2018-03-26-release#_module_processing_improvements_and_closure_update
https://twitter.com/mfikes/status/998249143507210240?s=19 was the source of my remark. Haven't done anything with Npm myself.
so… why as community we have shadow-cljs
vs lein-figwheel
? It looks like both are active maintenance. Figwheel looks more popular.
because developers, basically 🙂
coders gonna code!
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
I'm liking shadow-cljs so far
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
(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?
:npm-deps {:material-ui/core "1.0.0"}
How to use @material-ui/core
? I see not like this.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.
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 hmmI added to :npm-deps
"react" "16.3.2"
"react-dom" "16.3.2"
and require
them in views.cljs
this might help you https://gist.github.com/jmlsf/f41b46c43a31224f46a41b361356f04d
But it is reagent
package. I am afraid I can’t do too much about it. Unless I miss something.
all these problems are solved in shadow-cljs. if you want to solve them for standard CLJS you are on your own pretty much.
heh yes but first I wanted to suffer a little to understand what problems shadow-cljs solve 🙂
@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.