fulcro-community / fulcrodemos Goto Github PK

A demo of the simplest possible frontend-only, stateful app - a click counter.

Topics: performance, derived data, transact!!

We want to show a list of apartments, with their various properties, in an editable table. The catch is that we want to show each apartment as a column, not a row. Also, there could be potentially very many attributes, and we want to make sure that we re-render only what changed and not everything, when an apartment attribute is modified. (In this case it is a premature optimization - the table is too small to matter. We do it just for demonstration purposes. In practice, measure before you optimize. The performance of the common approach is surprising good and sufficient in all but the most extreme cases.)

The solution is to define a query-only Apartment component for fetching the data, and then "pivoting" the data into a column-based table in a post-mutation, and storing the result under the Table in the client DB. For the performance, we use the synchronous transact!! when we edit a cell in the table, so that only that one cell is re-rendered. Each cell has a :target property pointing to the apartment, so the raw data is only stored in the :apartment/id table. Look at the data using Fulcro Inspect, and explore the code.

Also noteworthy: While idents are normally [<kwd> <id: a primitive value>], they don’t need to - the id part may be more complex. We leverage it here to encode in each Cell’s ident both the apartment and the attribute it displays. Have a look at the namespace docstring for more details.