Fork me on GitHub
#hoplon
<
2016-04-22
>
leontalbot01:04:50

Hi all! I have a question regarding Leaflet integration. (or maybe any js integration really) I use cljsjs

leontalbot01:04:06

is that right?

(with-init!
  (let [map (.setView (.map js/L "map-bazar") #js [51.505 -0.09] 13)]

    (.addTo (.tileLayer js/L "http://{s}."
                        (clj->js {:attribution "leaflet"
                                  :maxZoom 18}))
              map)))

leontalbot01:04:53

Because the browser displays this :

leontalbot01:04:09

When I inspect the html from the browser I don't see any css lib

leontalbot01:04:30

Is it outside cljsjs? Do we need to add it manually?

leontalbot01:04:04

I don't see any js either

leontalbot01:04:19

(in the <head> tag)

leontalbot01:04:33

which I think is normal...

leontalbot01:04:14

It seems like there is a css problem...

leontalbot01:04:51

And when I add (link :rel "stylesheet" :href "") to the page, the map just disappear completely...

micha01:04:15

maybe the css isn't loaded when you build the map?

micha01:04:32

what if you add a 1000ms timeout before you initialize the map?

micha01:04:46

like inside the with-init! body

micha01:04:58

(with-init!
  (with-timeout 1000
    ...

micha01:04:06

just to test the theory

leontalbot01:04:34

@micha Thanks for helping. Nope, no change...

leontalbot01:04:59

the cljsjs package doesn't have any css in it, normal?

micha01:04:14

you looked in the jar?

leontalbot01:04:30

no just the source of cljsjs

micha01:04:41

usually css is packaged in the jar somehow

micha01:04:50

and you can get it out with the sift task in boot

micha01:04:14

the css files will be on the classpath

micha01:04:24

if they're in there

leontalbot01:04:30

(sift :move {#"^Leaflet-(.*)/dist/leaflet-src.js"    "cljsjs/development/leaflet.inc.js"
                 #"^Leaflet-(.*)/dist/leaflet.js"        "cljsjs/production/leaflet.min.inc.js"
                 #"^Leaflet-(.*)/dist/leaflet.css"       "cljsjs/common/leaflet.inc.css"
                 #"^Leaflet-(.*)/dist/images/(.*\.png)$" "cljsjs/common/images/$2"})

micha01:04:52

looks like it ships with css

micha01:04:16

jar tf /path/to/leaflet.jar |grep css

leontalbot01:04:23

where can I find leaflet.jar? (sorry)

micha01:04:49

what is the dependency vector you're using?

micha01:04:54

like in :dependencies

leontalbot01:04:17

[cljsjs/leaflet "0.7.7-2"]

micha01:04:54

so it will be something like ~/.m2/repository/cljsjs/leaflet/0.7.7-2/leaflet-0.7.7-2.jar

micha01:04:08

you can see it if you do boot show -c, also

micha01:04:27

you need to split that on : to make sense of it though

leontalbot01:04:20

yes, it returns cljsjs/common/leaflet.inc.css

leontalbot01:04:32

so it's there... hmm..

micha01:04:45

that will be accessible on the classpath in boot during the build

micha01:04:53

(sift :to-resource #{#"^cljsjs.*\.css$"})

micha01:04:16

that will make the css files available in your uberjar or in the target dir etc

leontalbot01:04:48

this must be added to my own boot.build right?

leontalbot01:04:32

arggr.... still the problem

leontalbot01:04:02

I put the (sift) just before (hoplon) in the dev task...

leontalbot02:04:07

@micha when I look into leaflet repo dist folder I only find css but according to the cljsjs sift, there should also be leaflet.js and leaflet-src.js

leontalbot02:04:56

ah no... https://github.com/Leaflet/Leaflet/archive/v0.7.7.zip leaves no dougt... there is leaflet.js files

leontalbot02:04:47

I'm stuck folks, I'll take any suggestions...

leontalbot02:04:22

Thanks in advance!

leontalbot03:04:17

If I add this (link :rel "stylesheet" :href "cljsjs/common/leaflet.inc.css") the map disappears...

leontalbot03:04:26

I've tried with prior versions of the lib, without success

leontalbot03:04:02

Ok, I might just do this :

leontalbot03:04:03

Hammock Driven Development - Rich Hickey - YouTube

micha12:04:33

@leontalbot: i should have some time today to look into your issue, can you make a minimal project in git that i can clone to reproduce the problem?

leontalbot13:04:34

Is it proper english? "Minimal leaflet integration to hoplon"

leontalbot13:04:59

not sure about the "to"

dm313:04:58

integration calls for "with"

dm313:04:27

but then the sentence becomes awkward

dm313:04:40

"Minimal integration for Leaflet and Hoplon"

alandipert13:04:25

@dm3: how'd your talk go? any conversions?

dm313:04:49

@alandipert: think it went pretty great simple_smile I'm spreading the "lisp can do it!" mantra

alandipert13:04:17

"what should i do to get out of the way of lisp"

dm313:04:36

Hoplon was a big part of the presentation, but very little people are doing web dev, even less with clojurescript

alandipert13:04:34

that's interesting, in my experience people at meetups tend mostly to do web

dm313:04:22

I guess Zurich is more banking/financial backends

l1sp3r13:04:37

I've done all my clojure professionally all server side

l1sp3r13:04:56

But think client is harder problem in many ways

dm313:04:19

in the way that you need to learn to design for user experience simple_smile

dm313:04:26

completely orthogonal to backend development

l1sp3r13:04:17

I think lots of the concepts in the front end are applicable to the back end, FRP for instance

dm313:04:21

that's what I find traditional developers struggling the most with

alandipert13:04:20

definitely what i struggle the most with

alandipert13:04:33

but at least with hoplon, i can deliver my terrible UIs quickly

dm313:04:32

an interesting question about Hoplon was - why it's so unpopular given its history

dm313:04:07

my answer is that it doesn't ride the React.js hype train

dm313:04:42

and doesn't have as many docs as re-frame/reagent/om

dm313:04:04

then it's self-reinforcing cycle of no community -> no new users

dm313:04:33

which has improved in the last 6 months I think

dm313:04:22

also @alandipert you and Micha did a very impressive job with Boot, in terms of growing community

alandipert13:04:38

thanks! yeah unlike hoplon boot doesn't really have competition

l1sp3r13:04:44

I’d actually looked at reagent before Hoplon, reagent is nice but what i really liked about Hoplon was the conceptual simplicity and less moving parts

alandipert13:04:45

i haven't used any of them for work but if i had to, i would pick reagent for sure

alandipert13:04:12

i'm not on top of all developments but the various react things seem to be converging on something strongly resembling the hoplon way

alandipert13:04:26

so it's gratifying to know people will eventually be using hoplon whether or not they know it

dm313:04:42

hehe, I've made a point that if I had more junior devs in a team, I'd go with re-frame

dm313:04:03

just because it gives more rules to follow

micha13:04:31

we might want to make a manifesto?

alandipert13:04:42

we should try to be 2x as long as re-frame's

dm313:04:12

like having the freedom to have input cells in namespaces as vars scares people

dm314:04:02

even though you can achieve the same effect within the global state map

jswart14:04:40

I think one issue is we let outlier companies like Facebook and Google set the pop culture for our industry. Thus Go and React, when in reality most companies / people will not really have those same problems and therefore don’t need a solution in the form of the current tool.

jswart14:04:01

There is a rad section in Coders at Work where Joe Armstrong says people need to look inside the black boxes more often.

dm314:04:39

it's interesting how popularity rides on people explaining the stuff

dm314:04:44

all the heaps of documentation

dm314:04:53

and Hoplon doesn't have that

dm314:04:00

because there's not much to explain

alandipert14:04:58

i don't really know, but i think it boils down to good old fashion marketing

alandipert14:04:09

like in the case of facebook, 4 years ago their OSS was in total shambles

alandipert14:04:19

their github was dozens of abandoned and undocumented PHP garbage projects

alandipert14:04:54

then they hired an OSS czar, james pearce, and started putting serious people and money behind a few of their top projects, and whipped their github into shape

alandipert14:04:04

it seems like it ties into the direction they want to go as a company, to be a platform... to be a platform, you need developer mindshare

alandipert14:04:26

the web framework space is so dense, it's hard to imagine being popular without full time marketing people & budget

jswart14:04:05

Maybe their goal was to hire away windows devs?

alandipert14:04:09

hehe recruiting is definitely a key OSS effort kickback

raywillig15:04:18

has anyone else noticed that using and & or in hoplon generates cljs compiler warnings?

dm315:04:42

also map destructurings

dm315:04:49

inside cell=

dm315:04:15

@raywillig: are you sure about and and or?

raywillig15:04:52

i’ve seen it in a bunch of different places and it always throws a warning

raywillig15:04:00

something like this Use of undeclared Var ui.component.donate/p1__59179#at line 35ui/component/donate.cljs

micha15:04:27

the macro is somehow confusing the cljs compiler

micha15:04:34

but there is no actual problem

micha15:04:42

i suspect it's triggering a cljs bug

raywillig15:04:44

i thought it might be something like that

raywillig15:04:10

well related to the macro. I hadn’t thought it through as far as you did

raywillig15:04:54

i was just hoping that wasn’t some signal that I shouldn’t use them. that would make life really hard

micha15:04:55

i put a test in the javelin tests that shows the warning

micha15:04:12

in case anyone ever has time to investigate it

micha15:04:16

i just ignore the warning

raywillig15:04:30

it’s a cljs thing right? not just a hoplon phenomenon?

micha15:04:48

it's related to the javelin cell= macro i think

micha15:04:59

i mean it is related to the cell= macro

micha15:04:18

the macro i think is exposing a bug in cljs compiler

raywillig15:04:43

oh yeah, it only happens in a formula

leontalbot15:04:44

@micha, I'll go eat but stay available through my stack mobile app if you need anything. Thanks again!

micha15:04:51

@leontalbot: awesome i'm going to lunch too

leontalbot15:04:44

@micha cool! maybe we are on the same time zone.. Where are you located?

leontalbot15:04:28

I'm in Quebec City

micha16:04:45

EST time zone

micha17:04:53

today it is raiing

micha17:04:56

that's all i know

jamieorc17:04:32

In hoplon client apps, how are y’all handling routes, page locations in URL, etc? Are there any articles/blogs/whatever out there?

micha18:04:10

@leontalbot: can i push to your repo?

leontalbot18:04:17

Yes! You are now a collaborator!

leontalbot18:04:29

Can I ask one question?

leontalbot18:04:46

What is with-let?

micha18:04:53

it's a macro in javelin

micha18:04:57

like this

micha18:04:14

(with-let [x 100]
  (println x))

micha18:04:17

is equivalent to

micha18:04:31

(let [x 100]
  (println x)
  100)

micha18:04:07

it helps the code be a nice rhombus shape

micha18:04:27

instead of the degenerate way

leontalbot18:04:44

it is for handling side effects

alandipert18:04:09

give a thing a name, do stuff to/with it, then return the thing

leontalbot18:04:12

And why a timeout set to 0?

leontalbot18:04:47

It is the first time I see do-watchtoo

leontalbot18:04:02

This is great btw! Beautiful. And hopefully it can help someone else!

leontalbot18:04:20

Thanks for your help @micha

leontalbot18:04:03

You guys are really awesome!

micha18:04:16

the do-watch is a function in hoplon

micha18:04:05

do-watch is just covering a common case where you have some function f and you want to both add a watch to some atom/cell that will call f when the atom/cell changes

micha18:04:45

(do-watch x (fn [before after] (doit after)))

micha18:04:48

is the same as

micha18:04:17

(do (add-watch x (fn [_ _ before after] (doit after)))
    (doit @x))

micha18:04:06

the set-timeout 0 is pretty much the same as with-init! in that it will run after hoplon has built the page, but it also works around an issue where with-init! doesn't run asynchronously when boot-reload reloads code

leontalbot18:04:16

@micha Excellent, thanks!

leontalbot19:04:50

@micha I am getting a strange behavior when I drag the map

leontalbot19:04:45

tiles seem not to want to load. Do you have this?

leontalbot19:04:07

leaflet.inc.js:9061 Uncaught TypeError: Cannot read property 'removeChild' of null

leontalbot19:04:45

when I zoom with the mouse wheel...

leontalbot20:04:01

It's like tile positionning does not update

leontalbot20:04:22

Should I wrap tiles into a cell?

micha21:04:41

there is a .redraw method i think

micha21:04:46

not sure when you're supposed to call that

micha21:04:59

but you would expect the the map object would be able to manage its own tiles

leontalbot23:04:27

@micha you are right!

(let [m (.map js/L $e)
      t (.tileLayer js/L "http://{s}."
                    (clj->js {:attribution "with Hoplon"
                              :maxZoom 18}))]

  (-> t (.addTo m))
  (.on m "dragend" (fn [e] (.redraw t)))

leontalbot23:04:42

It is not perfectly fluid though, it "fashes" a bit, but hey, it works!

micha23:04:51

it's pretty weird that it doesn't know how to do that by itself

micha23:04:09

like of course you want the map tiles to be redrawn when you drag the map around