This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-11-06
Channels
- # bangalore-clj (16)
- # beginners (120)
- # boot (21)
- # cider (24)
- # clara (9)
- # cljs-experience (1)
- # cljsrn (1)
- # clojure (218)
- # clojure-dev (3)
- # clojure-italy (12)
- # clojure-losangeles (4)
- # clojure-norway (2)
- # clojure-russia (2)
- # clojure-spec (19)
- # clojure-uk (178)
- # clojurescript (52)
- # cursive (7)
- # data-science (55)
- # datomic (25)
- # defnpodcast (11)
- # emacs (5)
- # fulcro (27)
- # hoplon (2)
- # leiningen (14)
- # midje (9)
- # off-topic (132)
- # onyx (19)
- # other-languages (23)
- # portkey (2)
- # re-frame (31)
- # reagent (1)
- # ring-swagger (15)
- # shadow-cljs (58)
- # slack-help (13)
- # spacemacs (22)
- # sql (7)
- # test-check (13)
For anyone looking for a change, Morgan McKinley are looking for 1 x backend Clojure dev and one front end in the 50k-70k region. https://www.morganmckinley.co.uk/job-details/887808 it’s for a financial startup called All Street Research, looks interesting if you like machine learning and text mining. I was asked but declined so thought I’d mention it here.
@jasonbell - Thanks for the heads-up - I’m not currently looking, but it’s always encouraging to see that there are Clojure jobs “flying around” 😉
It was quite nice. I did some baking, and also made a useful thing: https://github.com/SevereOverfl0w/vim-replant How was yours @maleghast?
Lovely thanks @dominicm - had my parents here, so adventures with Granny and Grandpa… 😉 My kids have chickenpox, however, so now I am working from home, from the HOUSE OF POX and they are not very unwell with it so there have been several conversations about the noise level! 😉
Quite excited about the refresh. It makes switching projects pretty seamless, your binding of ,rf
works no matter what. No worrying about what order to run things (and which namespaces they're all in)
OK, so UK Clojure Peoples… I am using Reagent and I like it, so for now I don’t want to have to make big changes… If you had to start adding maps to your cljs/reagent interface(s), what library / libraries would y’all use? I am looking at react-leaflet as an obvious candidate, but would like to think I’d at least asked around to try to discover something better…
@maleghast I was reading up on Reagent yesterday and this morning and was about to ask how many people here were using it, but you beat me to the discussion with probably a better line of questioning 🙂 How are you finding Reagent so far?
@yogidevbear - I really like it. I was just on a conference call and my colleague asked “how easy would it be to move those radial bar graphs to down the left side?” and I had it done in less than a minute.
I am SURE there will be a downside at some point, but for what I am doing right now it really seems excellent.
Good to know
reagent is great. re-frame is also great too. if your project is bigger than small then you probably will want something to help you out with managing your state. whether that is a library or a set of conventions is up to you, but if you are newish to reagent and contemplating a significant project then i would suggest going with re-frame - it's sensible and they have taken care to help you avoid some of the possible pitfalls of reagent projects
@mccraigmccraig - I am interested by what you are saying here… What would you say qualifies as a “significant” project..?
I also think that reagent is great. I have no opinion on re-frame.
(I don’t really have a lot of time on my hands and I’ve invested a lot of it already in reagent)
re-frame is reagent + state management stuff, so time you have invested in reagent is not wasted if you go re-frame
I will go look at the re-frame project page and see what’s what, in that case - thanks!
the re-frame docs are pretty good
P.S. Anyone got any particular mapping recommendations in the React / Reagent space that are “you need this it’s better than leaflet”?
the state management stuff consists of a few bits - here's a simplified description [1] single source of truth - the app-db
, basically a fat map where all your app state lives [2] events and event-handlers - the only way of updating app-db
is in an event handler, and you get to those by emitting events, which are just vectors with a keyword-id first element [3] subscriptions - re-frame views are just reagent views which source data from app-db
using subscriptions. subscriptions are just reagent reactions with some registration, parameterisation and de-duplication stuff thrown in
@mccraigmccraig - 2 minutes into reading the re-frame README and I am saying out loud, to myself “Oooh, I LIKE this!”
Having Event Emitters and an Event BUS with subscriptions for “stuff” (State Change, Side Effects and UI Updates etc.) is a lovely pattern…
(At the moment I have onclick(s) that bind directly to cljs functions - this aspect of re-frame alone will really help)
it's not quite an event-bus/subscriber pattern - only a single event-handler will process each event
but yes, the separation is very nice, and it makes things quite testable - your subscriptions and event-handlers can even be tested in clj on the jvm (assuming you can stub js only deps) since they are mostly just munging pure ds
there's also https://github.com/denistakeda/re-posh - it swaps out the re-frame app-db
map for a DataScript db. i've not used it so can't say how it lives up to its promises, but it sure looks intriguing
DataScript… @dominicm Haven’t you talked to me about this before..? Is it not a client-side DB that speaks DataLog..?
it is @maleghast - the point being that your app-db
can grew large and complicated, and having an actual db to manage it might be appealing
I think I am going to want to add spec into this in order to have a definition for app-db…
right now__ I need to solve the map question, so that I am making progress in the eyes of my colleagues.
Someone in the office mentioned the idea of using datascript as a state management. It's an idea that's growing on me 🙂
https://github.com/omcljs/om/wiki/DataScript-Integration-Tutorial om has you covered 😉
Does anyone have a good recommendation for a clojure.spec primer - I ❤️ Rich and Cognitect for what they have given us, but their website and pages on their additions to Clojure are less-than-readable 😞
@maleghast do you need spec (I doubt it 😄)
@sundarj - Thanks for that; I have to be honest, right now I don’t want to have to cross over to Om. I know a lot of people that love it, but I’ve got a time constraint here… When I’ve got more time on my hands I will look at it, I promise.
@dominicm - Perhaps not, but the re-frame docs make a big deal out of having a spec for app-db and I can see why…
@maleghast If you want to see a real world use: https://github.com/MastodonC/kixi.spec
Thanks @jasonbell
@maleghast we're all engineers here - stick with what works for you! that said, if/when you get the chance, i've been loving https://fulcrologic.github.io/fulcro/ (originally a sort of higher-level wrapper for om next, but in the upcoming 2.0 it's forking from it)
Spec has some quite nice stuff, but I suspect it gets more useful for larger data structures - i.e. if you’re in a hurry you can probably do without it for now - it will be possible to add it in later
@peterwestmacott I find it has it’s uses for smaller data structures too, especially when you are checking against streams of data in Kafka/Kinesis to see if the incoming message conforms etc.
similarly i find spec or schema validation of app-state great for even smaller apps @peterwestmacott - it saves you loads of time tracking down silly E_DYNLANG errors, and it's not much trouble to get going with
and i never take anything off a queue or accept an api request without schema checking it first
I definitely need a better primer on clojure.spec than the http://clojure.org page on it in that case…
@jasonbell - The Kixi example just has me more confused I’m afraid - I did try__ to look at it… 😞
@maleghast https://www.youtube.com/watch?v=Rlu-X5AqWXw i found this talk pretty good
Anyone know what’s going on here:
var CLOSURE_UNCOMPILED_DEFINES = {};
var CLOSURE_NO_DEPS = true;
if(typeof goog == "undefined") document.write('<script src="public/edge.out/goog/base.js"></script>');
document.write('<script src="public/edge.out/goog/deps.js"></script>');
document.write('<script src="public/edge.out/cljs_deps.js"></script>');
document.write('<script>if (typeof goog == "undefined") console.warn("ClojureScript could not load :main, did you forget to specify :asset-path?");</script>');
document.write('<script>goog.require("process.env");</script>');
document.write('<script>goog.require("boot.cljs.main43971");</script>');
base.js:1357 Uncaught Error: Undefined nameToPath for react_dom
at visitNode (base.js:1357)
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 dashboard:39
Ah ok - well I’ve just tried to make some changes in my Reagent / React code, so maybe I’ve fixed it…?
I’ve removed it and everything works again, but even having it in the require at the top of my code breaks my code
I’m just concerned about how I am going to inject maps in the middle of my React components…
I was trying to use: https://github.com/cljsjs/packages/tree/master/react-leaflet
And you do appear to be right… react-leaflet uses a later version of react than Reagent does.
Well, I’m on the latest version for stable… There is an alpha of 0.8, but I’m not thrilled about using non-stable code…
What I probably need to get my head around is how to use non-Reagent JS to insert something into a Reagent component
So that I can use the CLJSJS package for leaflet - which makes life very easy - and just push the map code into the component I am building, somehow…
Heh. We had to use the latest Clojure alpha in one of our components to get the latest versions of the XML parsing stuff that had some functionality we needed
So, if my current code works with the latest Reagent (0.8.0-alpha2) then I might be able to use react-leaflet…
Are you remembering to do a hard refresh in the browser periodiacllly
that kind of thing (`Undefined nameToPath for react_dom`) can happen as a result of caching in the browser
I've updated the free workshop details on the day before ClojureX -> TicTacToe in ClojureScript, Reagent & SVG, followed by Understanding Transducers https://www.meetup.com/London-Clojurians/events/244060377/
OK, so I am clearly doing something Reagent-wrong now…
react-dom.inc.js:17859 Uncaught Error: Attempted to update component NewClass
that has already been unmounted (or failed to mount).
at invariant (react-dom.inc.js:17859)
at ReactCompositeComponentWrapper.updateComponent (react-dom.inc.js:4987)
at ReactCompositeComponentWrapper.receiveComponent (react-dom.inc.js:4950)
at Object.receiveComponent (react-dom.inc.js:11488)
at Object.updateChildren (react-dom.inc.js:4293)
at ReactDOMComponent._reconcilerUpdateChildren (react-dom.inc.js:10284)
at ReactDOMComponent._updateChildren (react-dom.inc.js:10388)
at ReactDOMComponent.updateChildren (react-dom.inc.js:10375)
at ReactDOMComponent._updateDOMChildren (react-dom.inc.js:6357)
at ReactDOMComponent.updateComponent (react-dom.inc.js:6171)
The Leaflet library I am using is no longer killing my app… but I am clearly not able to just [:> CODE HERE ] to insert a Leaflet map into my Reagent Component in the way that I did with my charts and recharts…
This will have to be my quest once I return from the pharmacy… Chicken Pox remedies are required for the Geeklings… 🙂
iirc you will have to create a type-3 component @maleghast and initialise the leaflet component in the :component-did-mount
@mccraigmccraig - I see…
oops, they are properly called form-3 components @maleghast - have a look here - https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components
(it's on the re-frame wiki, but it's about vanilla reagent)
@mccraigmccraig so if I want to insert a form-3 component into my “main” component I have to list it as :componentWillMount ?
no, the component is created by (reagent-create-class ... )
the :component-will-mount
, :component-did-mount', :reagent-render
etc are fns in the map given to reagent-create-class
and become the react lifecycle methods
you can create a form-3 with only a :reagent-render
method and that will be roughly equivalent to a form-2 component
copy how it's done here https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components#form-3-a-class-with-life-cycle-methods
wrap the reagent-create-class
inside a fn, and reference that in a hiccup vector
Don’t know if you are still around @mccraigmccraig, but does this ring any bells as to what I (may) have done wrong..?
Uncaught TypeError: Cannot read property 'getHostNode' of null
at Object.getHostNode (react-dom.inc.js:11426)
at ReactCompositeComponentWrapper.getHostNode (react-dom.inc.js:4787)
at Object.getHostNode (react-dom.inc.js:11426)
at ReactCompositeComponentWrapper.getHostNode (react-dom.inc.js:4787)
at Object.getHostNode (react-dom.inc.js:11426)
at ReactDOMComponent._updateChildren (react-dom.inc.js:10422)
at ReactDOMComponent.updateChildren (react-dom.inc.js:10375)
at ReactDOMComponent._updateDOMChildren (react-dom.inc.js:6357)
at ReactDOMComponent.updateComponent (react-dom.inc.js:6171)
at ReactDOMComponent.receiveComponent (react-dom.inc.js:6133)
no @maleghast i'm not sure what's going on there - i don't think i've seen that before
OK, I have proven to my own satisfaction that I am simply buggering up the Leaflet bit…
I’ve taken out the code I was trying to use to render a map and just put some text on the page and that works fine, so my form-3 component is all “correct” I guess.
there was a nice readme around somewhere about using non-react js components inside react, with some examples... can't seem to find it atm though
Should I downshift to the plain version of LeafletJS, packaged for clojurescript (i.e. CLJSJS) so that my 3-form component is “rendering” non-react code..?
@glenjamin - yep…
(defn re-leaflet
[mapname lat long zoom]
(let [mapdata {:foo "bar" :bam "baz"}]
(r/create-class
{:component-will-mount #(println "component-will-mount")
:component-did-mount #(println "component-did-mount")
:display-name (str "Leaflet Map - " mapname)
:reagent-render (fn [mapname lat long zoom]
[:div
(str "This should be a map - " mapname)
(let [map (js/L.setView (js/L.map "fakemap") {:position [lat long] :zoom zoom})]
(.addTo (js/L.tileLayer "https://{s}."
(clj->js {:attribution "Map data © [...]"
:maxZoom 18}))
map))])})))
If I cut out the (let [map …) after (str “This should be a map - ” mapname) then I don’t get any errors. I am starting to wonder if I need to get the react-dom element to plug into the call to js/L.Map instead of using the id name as a string..?
@maleghast you are creating the map in your :reagent-render
you need to create the map in :component-did-mount
and stash it until :component-will-unmount
as it is, you are creating a new map on every render
I see, so (def …) inside the function so that I can refer to the symbol inside :reagent-render ?
not quite.. here's an example of a form-3 component which interacts with the DOM https://gist.github.com/7b5bf934444fa8386c42856ebfc29173
it gets and stashes a reference to its DOM node in :component-did-mount
... in your case you would also create your leaflet map then
think of if this way: :reagent-render
creates the container node, and then the lifecycle methods perform imperative operations
so render will be something like simply [:div]
, and then in did-mount you’ll grab a reference to the actual DOM <DIV> and mess with it
@mccraigmccraig - Thanks for the gist - I think__ I understand it… 🙂
@glenjamin - Yeah, ok, that helps too…
@mccraigmccraig Definitely getting there now…
make sure that the leaflet map creation is working ok by doing it by hand on your div first in the console
Erm, how would I do that @mccraigmccraig?
just follow through the leaflet map creation instructions in the javascript console, on a dom-node you have rendered in reagent (give it an id so you can locate it easily from the js console)
Getting down to it now… The params that are passed in at the top of the 3-form component definition are apparently not getting to the function.
I get “Uncaught TypeError: Cannot read property ‘lat’ of null” in the console, which is weird because that means that the first param is not causing an error…
Nailed it - Thanks EVERYONE, especially @mccraigmccraig