This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-10-09
Channels
- # announcements (5)
- # babashka (1)
- # beginners (116)
- # calva (139)
- # cider (11)
- # clara (2)
- # clj-kondo (13)
- # clojure (247)
- # clojure-dev (18)
- # clojure-europe (5)
- # clojure-france (2)
- # clojure-italy (2)
- # clojure-nl (7)
- # clojure-spec (24)
- # clojure-uk (34)
- # clojurescript (41)
- # cursive (11)
- # data-science (2)
- # datomic (33)
- # emacs (10)
- # events (3)
- # fulcro (134)
- # graphql (9)
- # jackdaw (3)
- # jobs (1)
- # joker (20)
- # kaocha (3)
- # leiningen (7)
- # luminus (2)
- # malli (3)
- # music (1)
- # pedestal (7)
- # re-frame (25)
- # remote-jobs (7)
- # ring (7)
- # shadow-cljs (85)
- # spacemacs (13)
- # testing (2)
- # tools-deps (60)
- # xtdb (11)
- # yada (7)
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.
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.
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.
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.
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
not worth the time fiddling with writing widgets when there are so many in the ecosystem already
It’s an exercise if you need exercise…I’d still just use a pre-baked react component. I have features to build 😜
dropdown with search? I use semantic-ui-react Dropdown through the fulcro semantic wrappers.
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.
not sure…perhaps the specific behavior you’re looking for is really tricky because of the way events work
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.
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?
:preloads [com.fulcrologic.fulcro.inspect.preload net.markusgraf.hhh.development-preload]
Also, Wilker updated the chrome extension…could be you got that update at the same time and that is broken.
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.
strange, I didn’t think I changed anything related to the normal preload…I’ll look into it
No problem 😉 Thank you for fulcro, the book and the videos!! I do not have a CS background but can use this amazing tool!
and great to hear! I sometimes wonder how approachable it is to ppl with less cs background/experience.
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 ............
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.
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.
@magra Can you try 3.0.3-SNAPSHOT on your project? Want to have a second pair of eyes for breakage.
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)
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.
@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.
@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.
@tony.kay I wasn't able to update the extension, Google is rejecting it =/
@wilkerlucio argh. Why?
they have vague complaints about the extension asking for too much permission, altough it didn't changed at all from the previous version
I ask for clarifition, they replied with the same exact initial response -.-
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!
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!
@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.
you could do possibly do the customizations with client-side remote middleware…don’t know firebase myself
though it is a document store if I remember correctly, so it is a poor match…you’ll lose a lot of power
Oh good to know! So I should clone this repo for the template: https://github.com/fulcrologic/fulcro-template
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
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.
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)
for incoming things they tell you, you’d use things like merge-component!
and merge
from the merge namespace.
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.
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
Oh absolutely. I definitely don't like this litimus test, and it rarely fits into a frameworks story perfectly
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
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
the nice thing is that all of the complexity for translation ends up neatly tucked away in the bowels, not complecting the UI
Yeah, if you want to publish a github OSS example, I’m sure others might be interested
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
the company behind this pivoted into Prisma — don’t expect this GraphQL BaaS to keep getting updates 🙂
With Prisma (fka graph.cool) now pivoting out of GraphQL, I’ve been loving https://github.com/hasura/graphql-engine
Oh I'm sure there's a lot of great stuff out there, I just happen to work with some Firebase fanatics.
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
@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.
Using pathom you could make a resolve for eaach that does the db.collection
or query stuff in firebase and returns async channels
suddenly you get nice graph queries without having to use fb APIs at the application layer
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
@wilkerlucio Do you have an example somewhere of using async parser to do that kind of thing?
@trevor670 yes, and pathom would make it look like you issued a single graph query that magically found it all
@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
is that what you looking for?
this page actually contains that, since its built an run in the docs themselves
I guess what may need better docs is how to make the parser a fulcro network
for f2 pathom has helpers, but not for f3, so the user has to write a new network wrapping the parser
@trevor670 actually here’s how I do that in the developer’s guide: https://github.com/fulcrologic/fulcro-developer-guide/blob/master/src/book/book/pathom.cljs
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.
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.
Pay attn to batch support @trevor670, which can prevent N+1 query performance problems. See pathom connect batch option.
With Prisma (fka graph.cool) now pivoting out of GraphQL, I’ve been loving https://github.com/hasura/graphql-engine
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.
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?
Just found clj-new. Could be a better option than lein templates, since it targets tool.deps directly.
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
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.
How about clj-new
?