Clojurians Log v2
fulcro
Related to statecharts: I’m working on a new way to compose Fulcro applications using statecharts. I’m working out various experiments at the moment, but the results so far are pretty nice. The current iteration has you create your application https://github.com/fulcrologic/fulcro-with-statecharts/blob/9186c24868faa36010451699d55d36eaf77dcc00/src/main/com/example/client.cljs#L92 and has a number of helpers to generate states that have on-entry handlers for doing things like state initialization and dynamic query updates. This is all based on namespace I’m working on in a https://github.com/fulcrologic/statecharts/blob/integration-improvements/src/main/com/fulcrologic/statecharts/integration/fulcro/ui_routes.cljc (use latest SHA to try it out, if you want)
Some interesting things have fallen out so far in this draft:
• No need to compose queries for routes: The statechart uses dynamic queries to add the route to the query on the fly! All you have to do is ask it to https://github.com/fulcrologic/fulcro-with-statecharts/blob/9186c24868faa36010451699d55d36eaf77dcc00/src/main/com/example/client.cljs#L66)
• Routes composed as children automatically resolve to a final target (unlike with dynamic routing, where you have to carefully and explicitly target a leaf)
• Initialization of a given route’s state happens when you route to it. Customizable for once/always/never, with a function you can supply to build that data.
• An rstate is just a normal statechart state with a custom on-entry handler for doing the routing bits, meaning it can have any additional children (on-entry handlers, etc).
I haven’t written this additional stuff out yet, but here are some other things that I see coming:
• Co-located statechart on a route target which can be started as a new session or invoked as a sub-chart on route entry.
• Parallel region routes (where all immediate children are active at once)…e.g. for things like dashboards and master/detail views where there are N subroutes active at once.
• Stateful control of the URL based on the current state in the chart, and URL integration for startup to put you into the correct “route state”
• Integration with UISM startup so that a routing state can start a legacy UISM
• Integration of some kind of route control for permissions…e.g. CAN you currently go to a specific route? The sequence of establishing session/restoring a prior route.
@yaw556 has been working with me on some visualization stuff, so I also hope to soon have a statechart visualizer in Fulcro Inspect so you can see a static view of any registered chart, but hopefully also have a mode where you can inspect a statechart session to see the active configuration and history of events/configurations. I’m envisioning some features that will make dealing with larger charts easy, like filtering out certain kinds of transitions (e.g. direct route transitions from the root, which will be very noisy), focusing the view on a particular active (composite) state, etc.
Interested in comments and ideas. Feel free to post on this message’s thread.
OMG that is so amazing I was just going to post on the channel about the dev/chart-io namespace in statecharts to know if anyone already went further than that, as visualizing statecharts in plantuml was already quite helpful to debug, albeit a bit tedious so I was looking into patching something together
Happy to test/help in anyway I can, I really like the statecharts! Visualizing (and testing the ones that use fulcro integration) are my only two painpoints atm
@yaw556 is helping with the edge rendering this morning…you could check with him. My goal is to get this integrated into Inspect, as I said, so we can debug live charts by type/session id. The more the merrier.
Here’s where I got with the edges 😄
...all the lines
I think it might just be alignment/scale, but it’s going to take some tinkering.
and some edges seem to be missing? Not sure…the routing-info state should have transitions between open and idle…but what’s there doesn’t look like it would include those even if it were aligned/scaled, so I may have missed something else.
its using a different renderer than plantUML? because plantUML seemed to render edges pretty well with the code in chart-io, I even found a bug that was standing out in my statechart once rendered
so, right now I’m using ELK to do the layout because I want more control over the rendering.
we talked about using some higher level library like that, but then doing certain things perhaps gets harder (like live highlighting of edges, capturing mouse events on elements, displaying hovers over items)
and ELK has tons of layout options…and I’m getting the layout info for the edges…it’s my “underlay” SVG generation code that is wrong
I've used UISM in Fulcro plenty, but haven't touched the statecharts stuff at all yet. I did read Harel's paper a while back though. How would you guys recommend getting into fulcrologic/statecharts? Is it better to get familiar (or deep study) with https://www.w3.org/TR/scxml/ first or is a top-down approach of starting with fulcro/statecharts reasonable, given familiarity with UISM?
If you’ve used UISM, then it’s easy. Just read the Fulcro Intrgration docs on my site
https://fulcrologic.github.io/statecharts/#_integration_with_fulcro
If you read Harel’s paper, you’re more than set…
The SCXML standard is a bit different than his original work, but if you look at what’s available it’s easy to translate
@tony.kay how do you use the ui-vizualizer?
is chart-id the machine-key?
Right now it’s only on WIP branches.
@yaw556 could tell you the setup we’re using…I’m kinda busy
but yeah the chart ID is the ID in the registry, and the session id is the active session (if you want node highlighting)…cljs only for now
@yenda1, use the integration-improvements branch on the statecharts repo and main on the fulcro-with-statecharts repo.
Follow the instructions in the https://github.com/fulcrologic/fulcro-with-statecharts#contributing section of the readme to make statecharts is pointed to a local deps alias.
Add the following to your top-level deps.edn file.
:statecharts-dev {:override-deps {com.fulcrologic/statecharts {:local/root "/Users/username/fulcrologic/statecharts"}}}shadow-cljs -A:statecharts-dev server in the project directory.Well, I got a few things working with the visualizer…no drawing of edges yet, but this demo is showing the viz working, including showing which states are active. I seem to have some small bug with one of my routes…but you can see I’ve even got the route denied/continue working. Also note that one of the routes is a parallel state where two subroutes are active at once.