This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-12-02
Channels
- # adventofcode (20)
- # bangalore-clj (14)
- # beginners (72)
- # cider (2)
- # clara (2)
- # cljs-dev (8)
- # clojure (36)
- # clojure-brasil (201)
- # clojure-greece (29)
- # clojure-nl (1)
- # clojure-poland (1)
- # clojure-russia (2)
- # clojure-spec (5)
- # clojure-uk (4)
- # clojurescript (41)
- # cursive (1)
- # datomic (1)
- # emacs (6)
- # fulcro (80)
- # graphql (1)
- # klipse (2)
- # leiningen (5)
- # lumo (15)
- # off-topic (1)
- # om (3)
- # om-next (3)
- # re-frame (19)
- # reagent (7)
- # test-check (1)
- # uncomplicate (2)
- # yada (8)
Fulcro 2.0.0-alpha4-SNAPSHOT is on clojars. This has all of the changes proposed and tested on defsc
https://github.com/fulcrologic/fulcro/blob/2.0/src/devguide/fulcro_devguide/M05_More_Concise_UI.cljs
@mitchelkuijpers css support will be there in a few mins on clojars
I still have a lot of documentation I’d like to update, and a few more renames to do…but we’re getting close to an RC1
PREVIEW release of 2.x Developer’s Guide: https://fulcrologic.github.io/fulcro/guide-2.html NOTE: This was built after I did the rename of client (which is on 2.0.0-alpha7-SNAPSHOT on clojars and 2.0.0-alpha6-SNAPSHOT of spec)
hey all, newish to om and fulcro. watched the videos and worked through the devguide. still trying to wrap my head around the data model. I’m struggling with the following: a few components in different branches of the ui graph might want to read the same data, but that piece of data isn’t necessarily easy to represent as a full-on component with an ident/query/render method. to get concrete, here’s some code:
(defui FirstComponent
static fc/InitialAppState
(initial-state [this params]
{:shared-prop 1})
static om/Ident
(ident [this props]
[:first-component :singleton])
static om/IQuery
(query [this]
[:shared-prop]))
(defui SecondComponent
static fc/InitialAppState
(initial-state [this params]
{:shared-prop 1})
static om/Ident
(ident [this props]
[:second-component :singleton])
static om/IQuery
(query [this]
[:shared-prop]))
(defui Root
static fc/InitialAppState
(initial-state [this params]
{:root-prop 42
:first-component-data (fc/get-initial-state FirstComponent {})
:second-component-data (fc/get-initial-state SecondComponent {})})
static om/IQuery
(query [this]
[{:first-component-data (om/get-query FirstComponent)}
{:second-component-data (om/get-query SecondComponent)}]))
the app db spit out by that is the following:
{:root-prop 42,
:first-component-data [:first-component :singleton],
:second-component-data [:second-component :singleton],
:ui/locale :en,
:first-component {:singleton {:shared-prop 1}},
:second-component {:singleton {:shared-prop 1}}}
unfortunately, that shared-prop
is duplicated across the first-component
and second-component
.
to get around that, do I have to make a standalone component for shared-prop
with its own ident and query?
if so, that feels a little weird. it’s almost as if the parent is “stealing” data from the child component, and the child component only really exists to satisfy a data dependency of the parent component.
that feels particularly icky wrt something like a user-authenticated?
piece of data. quite a few components need to know that to make a rendering decision, but making a user authentication data-only component with its own ident and query just so parent components aren’t duplicating data within the state tree don’t quite feel right.
at the same time, keeping that piece of state separate means setting/updating it in far too many places anytime you want to do a mutation. also seemingly a nightmare.
obviously, out of the two of those, making a standalone, data-only component makes the most sense. just wondering if there’s something I’m missing wrt specifying certain data that should exist in a normalized format without all the machinery of a component.
I’d appreciate any opinions that people care to offer. please let me know if I’m thinking about this wrong. thanks in advance for the help!Hey @mss. welcome. So, share data has a special query notation so you can save it at the root node. [ [:root-key '_] ]
is a query for something in the root node
so [ [:first-component '_] ]
on your database would return {:singleton {shared-prop 1}
Idents are really meant for things that have a clear identity…like a persistent entity. The “singleton” approach is if you have a specific UI component that you’d like to link up in the graph more naturally…so inventing an id that ends up making a single entry in a table is useful when you want to link something into the graph.
The entire graph database is designed for solving the data-sharing need. I noticed you didn’t actually use any links from within components in your sample graph…so you really are just linking back to root.
perhaps an example will help:
{:shared-prop 1 ; in the database, at root
}
(defui
static om/IQuery
(query [this] [ [:shared-prop '_] ]) ; query of root node
...
Object
(render [this]
(let [{:keys [shared-prop]} (om/props this)] ...)))
I believe I use this in the websockets demo app, and the template for the current logged-in user.
I’m looking at fulcro as my next potential UI library. should I skip the v1 version and directly start with v2 or how far along is that?
don’t like that it adds 100kb gzip by just requiring and not even using anything though
you may want to try excluding cljs.pprint
and cljs.analyzer
from the build in some way
Hi @thheller and welcome! I’m working on an RC of v2. Should be the next few days. It won’t hurt to start with v1. v2 porting is relatively painless.
and yes, I’d love to optimize the build a bit. There are little things like that that are needed for sure 🙂
I think in advanced opt doesn’t that get cleaned up? Not sure what you mean in that particular case. The dev user file includes some things that are useful, but that ins’t even in the prod build of the cljs.
Om Next pulls in compiler internals and hacks them unfortunately. 2.0 inherits that code for now, but I think I know how to fix it and get rid of that requirement. I’ll double-check on pprint.
confirmed…I’ll get rid of those. The source had an original team of 10…some of them were a little free with the requires
hm…not sure it is that easy 😕 Logging uses it. Is pr-str as bad? I don’t remember if that is just the impl of pprint
cljs.analyzer
is probably something that gets included for self-host support but wouldn’t be required otherwise
I have not looked…people also use it for macro env detection, no? Oh, but that would be in a clj file…
I expect that its only used by a macro yes. it is easy to include more than you should when trying to make self-host work.
so, I’m not familair enough with the compiler…these are the only lines:
rname (if env
(:name (ana/resolve-var (dissoc env :locals) name))
name)
I’m in the midst of testing some refactoring…I’ll do that and then see if it flies ok. Thanks for the tip
looks like that file is basically 95% macro code, might be less painful to just use a .clj file
I’m moving some things around, and I don’t want the old names to break…but forgot to namespace things (on at least one).
Fulcro 2.0.0-alpha7-SNAPSHOT is on clojars. Renamed a few things (but put defs in old places to point at new). One caveat, fulcro.client.core
-> fulcro.client
. README-2.0 updated to reflect that.
@thheller I think I got the pprint out of that one, but not the analyzer…that’ll take a little bit more work.
what happens if two components have the same ident?
-> the only thing to watch out for is that when multiple components with same ident declare different forms (e.g. one component is used in person name editing popup and the other is used to edit person's description). Then you can run into an issue where one of these components initializing forms prevents the other component from initializing a different form on the same ident (since forms init checks if form is initialized).
@tony.kay Fulcro CSS still pulls from om.next
https://github.com/fulcrologic/fulcro-css/blob/develop/src/fulcro_css/core.cljc#L7
it pulls but never uses
sending a PR to remove
@tony.kay also fulcro-spec
is still using fulcro.client.core