Fork me on GitHub
#fulcro
<
2019-10-09
>
henrik12:10:42

Has anyone worked with focus according to this method? https://reactjs.org/docs/accessibility.html#mouse-and-pointer-events I got it to work, but had to wrap the timeout in an atom in order to straighten out the race conditions. Seems a bit odd since they don’t have atoms in JS.

exit213:10:09

An atom seems like a reasonable solution to maintain a “global” state of things

exit213:10:29

I often think of atoms like objects (I come from JS land too)

henrik13:10:21

The surprising thing was that without the atom, it was fighting with itself (for example, when I had focus or unfocus events on both a parent and child component, so it might be triggered more than once due to bubbling). The atom straightened that out. I suppose the alternative is to just be more careful with how parent and child components behave together when they mutate the same state.

tony.kay14:10:19

Usually you use component local state for that…as they do in the example.

tony.kay14:10:17

The old bootstrap support I toyed with had some stuff like this using pure Fulcro tx, and I didn’t notice a problem, so I’d suspect event bubbling is your issue.

henrik14:10:31

I’m using local state for this indeed. Yup, probably. I have a thing that when focused, moves focus to an editable div which is exposed on focus of the first thing. Also a dropdown is exposed, which on click modifies some parameters. Logically (app-wise), the entire component has a single focus state, but browser-wise, focus may move around. Hence the impedance mismatch between app and browser understanding of focus.

tony.kay14:10:54

I no longer recommend doing them quite this way…but here’s that old code: https://github.com/fulcrologic/fulcro/blob/2.8.13/src/main/fulcro/ui/bootstrap3.cljc#L526

tony.kay15:10:38

These days I almost exclusively use semantic-ui-react through the fulcro wrappers.

tony.kay15:10:05

not worth the time fiddling with writing widgets when there are so many in the ecosystem already

tony.kay15:10:50

It’s an exercise if you need exercise…I’d still just use a pre-baked react component. I have features to build 😜

henrik15:10:47

Fair enough! Can you point me to a component that does this?

tony.kay15:10:28

dropdown with search? I use semantic-ui-react Dropdown through the fulcro semantic wrappers.

henrik15:10:59

Well, it’s not really a search. It modifies the type of token in the search bar.

henrik15:10:07

It doesn’t modify the text.

tony.kay15:10:22

look through that last page…lots of variants

👍 4
tony.kay15:10:34

It’s quite feature rich

henrik15:10:00

Yeah, I can tell! Funnily enough, I seem to have focus problems with some of them (disappearing when putting cursor in the search box). Maybe it’s because of the demo status of the examples.

tony.kay15:10:59

not sure…perhaps the specific behavior you’re looking for is really tricky because of the way events work

henrik15:10:44

The text entry portion needs to scale (width-wise) independently of the dropdown portion, up-and-down arrows on keyboard navigates the dropdown without moving focus from the input. I’m guessing the tricky focus parts will stay tricky, but there’s no reason I couldn’t build the easy parts from reusable components.

henrik15:10:11

So, good tip 👍

magra15:10:36

updating deps.edn from fulcro 3.0.1 to 3.0.2 seems to break fulcro inspect on my system. Do I have to change the preload?

tony.kay15:10:30

@magra no. I have another report as well…which preload are you using?

magra15:10:43

:preloads [com.fulcrologic.fulcro.inspect.preload net.markusgraf.hhh.development-preload]

magra15:10:00

The lower is just the renamed namespace from fulcro-template

magra15:10:12

in shadow-cljs.edn

tony.kay15:10:15

any console error?

tony.kay15:10:46

Also, Wilker updated the chrome extension…could be you got that update at the same time and that is broken.

tony.kay15:10:00

I’m just getting started here. I’ll try it out

magra15:10:24

I tried updating the the chrome extension as the first try to fix it. It is on Version 1.0.16 now. I fixed it by reverting to fulcro 3.0.1. I will try to reproduce to check the console again.

tony.kay15:10:42

Confirmed…it is broken for me as well.

tony.kay15:10:48

strange, I didn’t think I changed anything related to the normal preload…I’ll look into it

tony.kay15:10:51

My bad…I did break it

magra15:10:05

No problem 😉 Thank you for fulcro, the book and the videos!! I do not have a CS background but can use this amazing tool!

tony.kay15:10:50

try 3.0.2-1. I accidentally deleted a line in the preload code.

tony.kay15:10:34

and great to hear! I sometimes wonder how approachable it is to ppl with less cs background/experience.

magra15:10:37

It is daunting, to learn clojure, then realize I sit on top of react then trying to grok react where the docs say you need js first but written in a dialect ............

tony.kay15:10:00

oh…there is a socket.io-client requirement as well that I didn’t expect to “export”

magra15:10:23

see what I mean :--DDDDD

tony.kay15:10:41

To 3.0.2-1 users…It’ll ask for socket.io-client in your package.json…that is the workaround for now. I’ll fix that so it isn’t the case in a few minutes if you just want to wait to upgrade.

magra15:10:47

Thank you it works like a charm again!

tony.kay15:10:09

Thanks to @cfleming the Cursive IDE has been updated to automatically include the correct macro resolutions for F3's defsc/defmutation/etc. Most of us have probably already set those to point to the F2 variants, but new users will have a nicer first experience. Not sure which release of Cursive will include those by default (might be current EAP?), but I appreciate the support.

🎉 4
tony.kay16:10:56

@magra Can you try 3.0.3-SNAPSHOT on your project? Want to have a second pair of eyes for breakage.

tony.kay16:10:14

you should not need socket.io-client in package.json, if you had added it

tony.kay16:10:23

unless you use it for something else

magra16:10:49

hmm even with 3.0.2-1 it worked without the socket.io-client.

magra16:10:01

So far the snapshot looks fine.

magra16:10:22

I had an nrepl-sync message but I think this is cider.

magra16:10:58

inspect works and conntects for query.

magra16:10:57

error in process filter: nrepl-send-sync-request: Sync nREPL request timed out (op classpath) error in process filter: Sync nREPL request timed out (op classpath)

bbss16:10:16

I have also had a couple issues with inspect lately, one of them made my browser extremely slow and eventually crash. Will upgrade and report if it happens again.

magra16:10:21

Thats the messages that did not stop it from working. I do not think they are related.

tony.kay16:10:50

@bbss The latest chrome extension improves performance with db search. Also be careful about putting non-serializable stuff in state. Inspect is an external tool and db changes have to be serialized into a js message buffer via transit.

magra16:10:09

I started another test with deleted .cpcache and recources.

tony.kay16:10:32

@bbss it’s a small bit of code, so it might be worth tinkering with if you continue to have problems. The diff calculator and transit encoding are in com.fulcrologic.fulcro.inspect.diff and transit (same package). If you use deps with a clone of Fulcro via :local/root you could add in performance checks/debug messages and narrow it down.

wilkerlucio16:10:43

@tony.kay I wasn't able to update the extension, Google is rejecting it =/

wilkerlucio16:10:22

they have vague complaints about the extension asking for too much permission, altough it didn't changed at all from the previous version

magra16:10:26

all pass here.

wilkerlucio16:10:56

I ask for clarifition, they replied with the same exact initial response -.-

bbss16:10:03

Got it, a while back (> month) I sometimes had issues with I think tempids, saw some errors in the devtools of the devtools related to the network of fulcro inspect iirc. Mostly inspect has been working great and being very valuable though, just one part of the application sometimes would quickly bring the tab(or browser?) to a halt. Will look into it next time I hit it!

tony.kay16:10:50

@magra thanks…releasing 3.0.3

magra16:10:04

Thank you for the fast fix!!

Trevor18:10:43

Hi, total newbie here. I've been looking through the project generated by lein new fulcro my-project and I was wondering about exclusively using firebase as a backend. Would that mean I would remove the server .clj files, in the model/user.cljs I would instead of mutations that worked directly against firebase, remove the CSRF stuff, and I'm guessing make some tweaks to the networking part of the init in client.cljs? Again, I'm still grasping the key concepts here so I may be totally off base here!

tony.kay18:10:14

@trevor670 That is a Version 2 template (just FYI, it is out of date, and may not get updated). In terms of your question: Since firebase provides a network API, you’d add a custom remote (type) for the client that translates between EQL and whatever firebase requires.

tony.kay18:10:03

and yes, you’d remove all server code

tony.kay18:10:33

you could do possibly do the customizations with client-side remote middleware…don’t know firebase myself

tony.kay18:10:55

though it is a document store if I remember correctly, so it is a poor match…you’ll lose a lot of power

Trevor18:10:03

Oh good to know! So I should clone this repo for the template: https://github.com/fulcrologic/fulcro-template

👍 4
tony.kay18:10:07

(unless it has graph abilities)

tony.kay18:10:41

actually, isn’t firebase websockets?

tony.kay18:10:13

they probably have a js client you’d adapt in that case, and make a “Fulcro Remote” that really just talks to their adapter in js land

Trevor18:10:54

yeah, it comes with an SDK that sets up subscriptions/publishers and such. I'm guessing somewhere in Fulcro I would just call into that SDK.

Trevor18:10:17

You definitely don't connect to their web sockets directly. You just observe things.

tony.kay18:10:16

Make something like ^^^^ to support “outgoing”. The mock server remote uses a parser, so it isn’t what you want, it’s an example of what you’d write. You’d translate the ast given to you in send to a firebase request (query or mutation)

tony.kay18:10:38

for incoming things they tell you, you’d use things like merge-component! and merge from the merge namespace.

Trevor18:10:45

Where I work there's a weird kind of litmus test where the ability to hook into something serverless quickly is super valuable, so I always try and figure out a frameworks story around firebase and component libraries.

Trevor18:10:08

Great! That's super helpful to know!

tony.kay18:10:32

But Fulcro is graph-based…so you may find a mismatch in terms of documents vs. customizable graph queries/responses…again, I don’t know firebase

Trevor18:10:08

Oh absolutely. I definitely don't like this litimus test, and it rarely fits into a frameworks story perfectly

tony.kay18:10:14

but if you know the shape of the thing coming from Firebase, convert it to clj using js->clj with keywordize-keys, and shape your component graph to match that shape (or reshape the data to match your components)…then merge-component! will work

Trevor18:10:41

Great! I'll see if I can give this a shot with a hello world app. I'll try and post back with what I find if you're interested. I really like how amazing the tooling around Fulcro is, it's been the easiest to just 'get going' with Cursive and stuff thus far

tony.kay18:10:07

the nice thing is that all of the complexity for translation ends up neatly tucked away in the bowels, not complecting the UI

tony.kay18:10:47

Yeah, if you want to publish a github OSS example, I’m sure others might be interested

tony.kay18:10:18

I don’t remember the name of it, but there is a GraphAPI BaaS

tony.kay18:10:48

that would be easier to integrate with, since pathom has a fulcro remote that can talk GraphQL…I think it is currently only for Fulcro 2, but porting it would be pretty easy

adamfeldman20:10:16

the company behind this pivoted into Prisma — don’t expect this GraphQL BaaS to keep getting updates 🙂

adamfeldman21:10:20

With Prisma (fka graph.cool) now pivoting out of GraphQL, I’ve been loving https://github.com/hasura/graphql-engine

👍 8
Trevor18:10:28

Oh I'm sure there's a lot of great stuff out there, I just happen to work with some Firebase fanatics.

Trevor18:10:18

But thanks for your time! I'm happy that my understanding wasn't totally off base!

tony.kay18:10:16

Also, you might find that a client-side pathom async parser might make a nice fronting library for the firebase operations. It allows you to combine together multiple (related) requests into a single graph query/result

tony.kay18:10:18

@trevor670 so, say you have an EQL query [{:all-users [:user/name {:user/address [:address/id :address/street]}]}], where users are one doc, and addresses are another. I don’t kjnow if firebase supports joins, or you have to query for these yourself.

Trevor18:10:51

You definitely have to manage the joins yourself I believe

tony.kay18:10:52

Using pathom you could make a resolve for eaach that does the db.collection or query stuff in firebase and returns async channels

tony.kay18:10:04

that will actually make a pretty compelling example

tony.kay18:10:16

suddenly you get nice graph queries without having to use fb APIs at the application layer

tony.kay18:10:17

tempted to write something myself..it sounds pretty cool 😜 Just don’t have time

Trevor18:10:38

I'm also very new to graph based dbs in general. So when you write a resolver, that's essentially the part where the programmer figures out (given the input) how to create the output. So like you mentioned above, FB may have 2 different collections for users and addresses but no joins, but when you write the resolver that's where you figure that out

tony.kay18:10:39

@wilkerlucio Do you have an example somewhere of using async parser to do that kind of thing?

tony.kay18:10:56

@trevor670 yes, and pathom would make it look like you issued a single graph query that magically found it all

Trevor18:10:39

That is terribly exciting. I may actually be starting to grasp this stuff then

Trevor18:10:51

K, I got my homework then.

wilkerlucio18:10:22

@tony.kay @trevor670 sorry, didn't read the full story, but there are examples on async parsers at https://wilkerlucio.github.io/pathom/v2/pathom/2.2.0/core/async.html

wilkerlucio18:10:29

is that what you looking for?

tony.kay18:10:31

using pathom on client

tony.kay18:10:41

to do things like REST queries to turn into graph

tony.kay18:10:11

I have stuff in projects, but it’s closed source

wilkerlucio18:10:16

this page actually contains that, since its built an run in the docs themselves

wilkerlucio18:10:04

I guess what may need better docs is how to make the parser a fulcro network

wilkerlucio18:10:18

for f2 pathom has helpers, but not for f3, so the user has to write a new network wrapping the parser

tony.kay18:10:25

I gave him a pointer to that

tony.kay18:10:36

the mock server for client basically does that

Trevor18:10:18

Fantastic!

tony.kay18:10:23

I use it by calling mock-remote with a vector of resolvers, and it returns something that can be used as a Fulcro client remote.

tony.kay18:10:25

So put your FB init in there and store the initialized firebase things in that env, which will then show up as env in your resolvers/mutations.

tony.kay18:10:07

then you don’t even need any global firebase vars.

tony.kay19:10:26

Pay attn to batch support @trevor670, which can prevent N+1 query performance problems. See pathom connect batch option.

👍 4
adamfeldman21:10:20
replied to a thread:https://www.graph.cool

With Prisma (fka graph.cool) now pivoting out of GraphQL, I’ve been loving https://github.com/hasura/graphql-engine

👍 8
mdhaney21:10:23

So I've written a lein template before (for Lighttable plugins, way back when), and I've been kicking around doing one for F3, since I know Tony doesn't have time for it. Ideally, I would like to provide numerous options for the generated app, kind of like the Luminus template does. Just brainstorming here, but would like to get some feedback.

mdhaney21:10:40

What options do we need?

mdhaney21:10:41

I'm thinking, the basic generator with no options gives you what's in the fulcro-template repo now. Probably a switch to use websockets instead of http, and a switch to target Expo instead of HTML. Also switches to exclude tests, workspaces, and maybe the backend completely (create a mock server remote for the client instead). Any others I'm missing?

mdhaney21:10:56

Just found clj-new. Could be a better option than lein templates, since it targets tool.deps directly.

Abhinav Sharma05:10:03

Yup 🙂 And +1 for the mock server. I think, it might help to conceptually split the options into a more frontend specific (deployable to github pages etc) and full-stack specific options. This could give more clarity regarding the kinds of options which could be there

mdhaney21:10:59

Oh yeah, also - since we're not using Lein anymore, does it really need to be a lein template? Maybe so, since that's such a familiar way to generate new apps. But I could either separate the core generation logic so it could be wrapped by a lein template, or be used from boot, etc. - or just something that runs standalone.

Abhinav Sharma05:10:55

How about clj-new?