Fork me on GitHub
#untangled
<
2016-03-31
>
vmarcinko06:03:38

hey people, sorry for total newb question, and although I'm experienced with Clojure, I'm just starting for first time with CLJS/Figwheel/Om/Untangled...And probably this isn't Untangled-related, but since I dunno, I ask here...Anyway, I started untangled todomvc app, and yesterday the app loaded fine in Chrome, but today, it doesn't for some reason, BUT in my Firefox it works!?!?!... And the only thing that Chrome shows in console is sometimes this "not found" favicon error:

[  0.326s] [goog.module.ModuleManager] Module loaded: en-US
console.js:203  [  0.338s] [goog.module.ModuleManager] Module loaded: es-MX
utils.cljs:38 Figwheel: trying to open cljs reload socket
utils.cljs:38 Figwheel: socket connection established
 Failed to load resource: the server responded with a status of 404 (Not Found)
But even this error dissapears if I refresh the empty page. So anyway, problem manifests itself that nothing shows up, and no in console. It just says that modules are loaded, and it connects to figwheel and that is, as shown above. But nothing shows on page!

vmarcinko06:03:22

I'm losing my head with this, so can someone share some light what is wrong with Chrome suddenly, and I really don't remember I changed anything with my setup, I just try going as usual to :


vmarcinko06:03:45

I'm 100% sure I didn't change anysthing in project, because my git shows no files changed. Really puzzling...

vmarcinko06:03:33

when I type:

(js/alert "Mama")
The alert pops up OK

vmarcinko06:03:50

in figwheel REPL I mean

vmarcinko06:03:42

And just to clarify, <div id="app"> is empty in Chrome, whereas it is populated in Firefox, thus page naturally empty in Chrome 😞

currentoor06:03:56

@vmarcinko: have you tried chrome incognito mode?

currentoor06:03:33

Just in case it’s pluggin related.

cjmurphy07:03:17

@vmarcinko: lein clean lein deps, then go again.

vmarcinko07:03:36

@currentoor: @cjmurphy Thanx guy, will try out your suggestions.... But overall, does CLJS development has more nuisances like this compared to CLJ ?

cjmurphy07:03:11

Yes but that's the cost of having 'live coding'.

cjmurphy07:03:17

Sometimes I just build from the cmd line the usual way lein cljsbuild once just to be grounded again.

vmarcinko07:03:01

@currentoor: OMG! It really works in incognito mode!!! But anyway, I even suspected that some plugin may be messing things up, so I removed react dev tools, and clojruescript dev tools, but still problem persisted in normal mode

cjmurphy07:03:45

If I really think there's a problem I manually delete the javascript - perhaps my poor setup as clean ought to be doing that.

vmarcinko07:03:04

yeah, i tried couple of times deleting output (compiled JS) dir

cjmurphy07:03:14

That's interesting that incognito way - good debugging aid. What does it mean if it works in incognito mode?

vmarcinko07:03:33

@currentoor: Do you suspect that this line is crucial :

Installing cljs-devtools: custom-formatters dirac sanity-hints

cjmurphy07:03:19

Means no web cache - so solution is to clean out your cache.

cjmurphy07:03:39

Then s/work in normal mode too??

vmarcinko07:03:00

it doesn't show up in normal mode, just in incognito where it works (and also in firefox where it works also)

cjmurphy07:03:06

But nothing shows up in normal mode, b/c of the cache problem right? Not seeing dirac stuff just a symptom.

vmarcinko07:03:10

yeah, nothing shows up in normal mode... To be honest, such a big noob with web so I dunno what you mean with web cache here? I should clear the local cache in my browser?

cjmurphy07:03:37

'Clear browsing data' under tools from hamburger

cjmurphy07:03:18

'more tools'.

cjmurphy07:03:01

Hamburger consists of top bun, meat, bottom bun, so is three horiz lines at top RH corner.

vmarcinko07:03:05

@cjmurphy: Thanx , now it works

vmarcinko07:03:29

yeah, i wondered what hamburger means, but I recall where cache clearing is, so I saw the icon, and guessed what you mean simple_smile

vmarcinko07:03:04

BTW, what you suspect has been the problem after all then?

cjmurphy07:03:11

Cool - I had to look it up once not so long ago too - lots of things about the web world...

vmarcinko07:03:20

I kinda don't like these situations where web cache can mess things up

cjmurphy07:03:37

All I can say is it is rare.

vmarcinko07:03:05

OK, I hope...I just started with CLJS/Untangled yesterday for 1-2 hgours, and it already struck me

cjmurphy07:03:13

But you know there's no transactions - so it is quite possible to stuff things up!

cjmurphy07:03:03

Yes - it strikes at the beginning, then not so much after that. Just how it seems to me! simple_smile

vmarcinko07:03:09

I'm just old school server-side web developer from some years gao, so total newb with JS world

vmarcinko07:03:15

ok, thanx anyway

vmarcinko07:03:50

BTW, wondering, why Untangled doesn't use latest clojrue/clojruescript (1.8.x)?

vmarcinko07:03:25

or it's just like that in project.clj files now?

vmarcinko07:03:29

todomvc, tutorial...

cjmurphy07:03:59

B/c only a few days ago cljs became newest version I guess.

vmarcinko07:03:35

ok, i changed these to newest because I wanted to try out if that was the problem, so at least todomvc works i can see

vmarcinko07:03:43

also with figwheel 0.5.2

cjmurphy09:03:31

When I run the untangled-todomvc app and say mark one of the todo items as complete, then they all get rendered again. That doesn't need to be the case, and in a similar small app I built myself I see only the item that gets checked being re-rendered.

cjmurphy09:03:38

Trouble is I don't know what you need to do to get only one to re-render.

cjmurphy09:03:21

Is the re-rendering logic described anywhere?

mahinshaw15:03:54

@cjmurphy: Look at the check and uncheck function implementation

mahinshaw15:03:09

They are implemented in the parent, which is why you see what you see

mahinshaw15:03:28

The parent being the TodoList component

ethangracer15:03:03

@vmarcinko: in the chrome developer tool window, choose the networking tab and check “Disable Cache”. If you ever get an error like that again, just open up the dev window and refresh the page. that usually takes care of errors like that. Chrome's and figwheel’s caching systems seem to get out of sync every so often

ethangracer15:03:42

In general, these are the untangled team’s troubleshooting steps when the build tools aren’t cooperating: 1. Open up the dev tools in your browser and ensure that network caching is disabled. 2. Call (reset-autobuild) from the client repl and (reset) from the server. 3. Stop both the client and server repls, and run lein clean. If using IntelliJ, refresh Leiningen dependencies, otherwise run lein -U deps. Restart both repls.

ethangracer15:03:30

@cjmurphy @mahinshaw: not actually sure why that mutation is defined in the parent component, based on the implementation of the mutation it could be (probably should be, from a design / re-render perspective) moved to the child. The delete mutation, by contrast, has to be defined in the parent so that the whole list is re-rendered when the delete action is called by the child

mahinshaw15:03:30

@ethangracer: I blame you for that terrible implementation ...

cjmurphy15:03:20

@ethangracer: Yes for sure delete has to go in parent and just changing the item ought to be able to go in the child and affect only that row. Trouble is you will have to put in a follow-on read after mutate key to get it to work. And that's where you can run into difficulties...

vmarcinko15:03:56

one mroe question, not untangled related, but more cljs/figwheel - I can see that web server started via server-side (port 3000) is used to load web artefacts in browser, but figwheel itself starts a web server at port 3449...Is this figwheel port even utilized for something then?

vmarcinko15:03:33

as i said, i'm still total cljs noob...

ethangracer15:03:37

@cjmurphy: ah ok, I remember now. Honestly I haven’t been able to figure out why a follow-on read is necessary for that function… based on my understanding of Om it shouldn’t be because the child component renders the entire item div. So a transact!on the component should trigger the rerender without a follow-on read.

ethangracer15:03:59

so, if you have any insight into that I’m all ears

ethangracer15:03:54

@vmarcinko: port 3449 is the figwheel server that compiles the code and serves it to the browser. port 3000 is the communication port between the served browser code and the server. I don’t know the particulars of how that’s all connected but that’s the difference between them — 3449 is figwheel’s implementation, 3000 is untangled's

cjmurphy15:03:10

The follow on reads seems like a flawed concept to me. Because no matter which key you choose it will be a root key (because all your keys are as joins in the root). And that will cause the whole thing to re-render from the top. So there's no specificity possible. Or I'd like to see a working example...

ethangracer15:03:18

if you do a follow-on read for :item/complete it shouldn’t rerender from root

cjmurphy15:03:27

The thing is I bet if you put the mutate in the child nothing would happen - so you would then need to put in a follow on read.

ethangracer15:03:46

but it will re-render every component instance that implements :item/complete, which means all of the todo items

ethangracer15:03:55

so i guess you’re right, effectively little difference

tomjack19:03:00

how does untangled get away with always returning just {:value ...} in read-local, no remotes?

tomjack19:03:10

oh, I found it: untangled.client.data-fetch

currentoor19:03:25

Is there anyway to use a different webserver and some additional routes to the untangled system?

darrellesh20:03:29

@currentoor: I am not sure what you mean by a different web server. But, you can add additional routes when you are leveraging the make-untangled-server. You use the keyword :extra-routes followed by a map.

currentoor20:03:02

@darrellesh: Like if I wanted to use http instead of jetty for instance.

currentoor20:03:40

Sorry I mean http-kit.

darrellesh20:03:00

@currentoor: example extra-routes is

{:routes ["" {["/todos/" :id "/info/" [#".*" :email]] :todo-handler
                                  ["/todos"] :todo-list-handler}]
                     :handlers {:todo-handler (fn [req env match] (mut/generate-todo req env match))
                                :todo-list-handler (fn [req env match] (mut/generate-todo-list req env match))}})

ethangracer20:03:41

@tomjack: you got it, that’s my favorite part of untangled. no need to write any read code on the client!

darrellesh20:03:30

@currentoor: Not sure about how to switch servers. Haven't looked into that. We have not had the need thus far to do so.

currentoor20:03:45

Oh cool you're using bidi.

currentoor20:03:09

It's a pretty robust way to reload components on save.

currentoor20:03:53

I remember hearing tony.kay saying an aspiring contributor could add reload-on-save for the backend.

tomjack20:03:50

I am experimenting with localforage as a remote. I wonder how untangled would want to handle stuff like localforage?

tomjack20:03:20

(localforage is a localStorage etc wrapper)

ethangracer20:03:44

@currentoor: haven’t looked at it to my knowledge. my initial impression is that it has a lot of dependencies, which we’re trying to isolate on our end. we’ve talked about how we don’t want untangled-server to depend on datomic, for example

darrellesh20:03:27

@currentoor: I have not looked into the danielsz/system. But, it looks interesting.

ethangracer20:03:58

the reload-on-save is desirable though...

currentoor20:03:20

@ethangracer: I can totally see why you'd want that but doesn't this seem like pretty lean dependencies? https://github.com/danielsz/system/blob/master/project.clj#L6

ethangracer20:03:17

oh interesting, all the dependencies I was looking at seem to be dev dependencies. how does the component work in production then?

currentoor20:03:53

You have to include that dependency in your app, I believe.

ethangracer20:03:08

ah ok, that makes sense. it looks like a super helpful library, @tony.kay have you looked at this at all? https://clojurians.slack.com/archives/untangled/p1459455345000477

currentoor20:03:30

I'm an aspiring contributor and I've used this library a few times. So if you guys are interested I could try adding it in this weekend.

currentoor20:03:43

Also, we are considering using Untangled at my work, AdStage, since we are building our new app in Om.next and Datomic.

currentoor20:03:58

But we realize that Untangled is still pretty new so we'd like to contribute, if we use it.

currentoor20:03:25

I could start with this to get a feel for your framework.

ethangracer20:03:56

awesome! we’ll definitely appreciate all the help we can get. I would run the idea past Tony, he has a better idea of where the framework is going design-wise, and he also accepts all the pull requests 😄. we are working toward using untangled in production and so far, so good

currentoor20:03:26

So you're not currently using untangled in production?

currentoor20:03:32

When do you expect to do so?

ethangracer20:03:50

hard to pin an exact date on it, in the next several months

ethangracer20:03:38

the rest of our company is on a different stack so there’s some integration work to do. we started to build untangled since we are using om.next and datomic for new apps as well

ethangracer22:03:44

@currentoor: talked to tony about the library, we already have the ability to inject components in untangled server and we’re not looking for the kind of code-reload that that danielsz/system implements. what would be ideal is, any time that a server file in the source directory is changed, the (reset) function in dev/user.clj is called. Sounds like having live code reload on the server has caused problems for us in the past

currentoor22:03:19

I see, thanks.

currentoor22:03:26

I think system also does something similar to the reset function, starts and stops the component tree whenever there is a save. It's not just swapping out clojure vars or anything like that.

currentoor22:03:56

That said if you already have the reset function I suppose it makes sense not to bring in a new way of doing things.

ethangracer22:03:14

By all means, feel free to tinker. If you want to try integrating it and it turns out not to cause any instabilities, I can’t imagine that’d be a problem. Maybe there’s code that could be repurposed to our own (reset).

currentoor22:03:34

sounds good!

ethangracer22:03:07

@tomjack: never used localforage, though I played around a bit with the idea of using localStorage as a remote and decided it would just be easier to use directly in untangled-client

tony.kay23:03:04

So, for reload on save ( @currentoor ), I really mean calling reset on file change. So a file watcher that calls reset for you. I'm not worried about hot code reload because if you're playing with the thing live Untangled encourages you to have a stateless server (state is stored in Datomic or something)...so reset is fine.

tony.kay23:03:36

Something that can be turned on/off as well....e.g. (start-watching)

tony.kay23:03:22

Ah, I see Ethan answered that...yeah, +1 simple_smile

tony.kay23:03:30

Also, on production use: We are going to be using it that way. We have 10 developers actively working on software that will be released this year. We're not a date-driven shop, so I cannot tell you when we'll release something, but it will be this year. Since Om is alpha, we cannot really call our code anything but that.

tony.kay23:03:34

Contribution-wise: Definitely open to contributions. I'm more than happy to Skype with people on code design so we don't waste time (I find that more effective than texting for hours). If it is something simple, then written is fine. If it has any complexity, then white board, camera, and voice are preferred. I have limited time to do that, but definitely some. Others on the team can also participate in that.

tony.kay23:03:36

At the moment, documentation is at the top of the list. It has enough features that we are not finding it lacking when trying to build things...but it would help to have a cookbook.

tony.kay23:03:44

I think @ethangracer has started such a thing.