Clojurians Log v2

Calling change-route! from a state machine is okay (it even appears in the example app I believe), but the problem is that the state machine now needs to know about that router, which is not even the main router, but only for that specific page.

I am sure I will need this again in the future, so the session state machine will become more and more intertwined with other components sounds like.

Ah, no, looks like I shouldn't do anything non-pure from a UISM =/ I think I should be able to trigger the route! event of the main page router's state machine from the session state machine but I have killed the past two hours trying to figure out how to make that work already.

The main Fulcro site still recommends starting with plain Fulcro. But you can give RAD try too.

https://github.com/fulcro-community/awesome-fulcro has also a number of useful learning resources

What could be a reason for

dr/target-ready! was called but there was no router waiting for the target listed:  [:component/id :main] This could mean you sent one ident, and indicated ready on another.

:will-enter
   (fn [app _path-params]
     (dr/route-deferred [:component/id :main]
       (fn []
         (comp/transact! app
           [(dr/target-ready {:target [:component/id :main]})
            (uism/trigger-state-machine-event
              {::uism/event-id :event/opened-home-page
               ::uism/asm-id   ::main-page-machine})]))))

I shouldn't have called transact! inside route-deferred: the app it is using is not updated with taking the route-deferred into account: it is captured from before the route-deferred is called. So I had to make a new mutation and transact! it first: the mutation will get the updated app when it executes. Why doesn't route-deferred accept an app argument?

If anyone is interested, we just released a small wrapper library for heroicons (from Tailwind CSS): https://github.com/backminds/heroicons-clojure

Pretty nice to quickly get going with using the awesome heroicons set. Btw, TailwindCSS (and UI) is a dream to use, if anyone is new to it: https://tailwindcss.com

Second this. Tailwind has been awesome

The code snippet looks ok to me. What is the state of the router / what do the transactions show that happened? Both the book and my routers do transact! on the app passed to will enter and we don't have any problems with that. Why do you?

Somewhat related, has anyone had any luck using https://github.com/tailwindlabs/headlessui/ with Fulcro?

@tvaughan Yeah, we use it in a project, and it works really well. A set of “blank slate” components is very refreshing compared to learning all wonky, bespoke styling APIs du jour used by most libraries.

Thanks @henrik. Good to know

Yes, indeed. This has been my experience with Tailwind CSS/UI too

Thanks for packaging heroicons

I haven’t used the dropdown though, for that we use react-select (and it’s a headache to style of course). But the rest works well, including transition.

How to get started with Fulcro/RAD? I've just finished some tutorials of ClojureScript with Re-Frame, of Web page and server development with Clojure libraries (ring, hiccup, etc.) I'd like to use Fulcro to do a MVP of time management app (similar to ToDoMVC). I wonder what's your recommendations of my route of getting to the stage to understand https://github.com/fulcro-legacy/fulcro-todomvc and be able to port it to Fulcro 3, and can adapt to my own MVP? There are so much information available about Fulcro, which is great, I hope to get some advice to get up to speed as soon as possible. Here are a few option of paths: 1. Study https://book.fulcrologic.com/ up to Chapter 4 (Getting Started); 2. Watch https://www.youtube.com/playlist?list=PLVi9lDx-4C_T7jkihlQflyqGqU4xVtsfi (at least 18 segments, could be very time consuming); 3. Directly follow https://github.com/fulcrologic/fulcro-rad-demo and https://book.fulcrologic.com/RAD.html#_ui_validation I hope getting-started roadmap will help more future beginners. Really appreciate your help!

It's transition I'm most interested in. I have this (def ui-transition (react-interop/react-factory Transition)) and my own components that use Tailwind transitions, but I'm not sure how to combine the two. Do you have an example you could share?

You might check the recent responses I got, though my question was more general. Personally I think I’ll start with the traditional fulcro 3 online book and probably read the whole thing to develop a foundational understanding of what fulcro offers. It sounds like it’s harder to jump right into solving a specific problem with fulcro because of all of the new concepts it introduces. Though I’ll say that jumping right in to my thing is definitely how I’ve preferred to approach other learning in the past.

@tvaughan

You can try to read some of the Book, then try to "do your thing" and when you get stuck come humbly back to the book and go on ping-pong like that.

Hi @yubrshen and @slack1304 - welcome! I would recommend starting with Tony’s videos Parts 1 to 7 on YouTube as he covers many of the pitfalls of getting started. The book is excellent but it is very long and covers many areas that you don’t need to get a general understanding of Fulcro. I would also recommend starting with a template either fulcro-template (https://github.com/fulcrologic/fulcro-template) or the Fulcro-RAD-Demo (https://github.com/fulcrologic/fulcro-rad-demo). Fulcro RAD is set of helper libraries on top of the base Fulcro 3 - they are not “separate projects” so you can learn Fulcro and Fulcro RAD in parallel. I would also recommend working with a project that you know is working (i.e. fulcro-template or fulcro-RAD-demo because setup is non-trivial). Making small adjustments and seeing the working results was useful to bootstrap my understanding. Good luck!

Thank you @henrik!

I have created https://github.com/fulcro-community/guides as a home to community created guides and created a draft of https://github.com/fulcro-community/guides/blob/main/learning-fulcro.adoc - I really need help with this one!

🙏 If you have any input on how to best learn Fulcro, please https://docs.google.com/document/d/1XMWwwnxtukZ0o3ev4GH2Kpa8MvX4z-r4kYKJMaMBw2A/edit?usp=sharing that I will feed back to ☝️

Right, so my recommendation is “if you’re doing a production app and you know Fulcro, you are better to use the RAD template”. But, if you’re a beginner trying to learn Fulcro use the videos first with the getting started chapter. Really understand the core bits of the library. Everything else in the ecosystem assumes you have that knowledge. You should not use RAD until you understand enough Fulcro to read the source of RAD and go “Oh, I see, that’s just using this and this from Fulcro to save me some typing”.

Write the most trivial things to start. If you are not feeling like you really understand query/ident/initial-state/transact/render, then don’t make more complex things until you do. There are not a lot of core concepts, and while those concepts are new they are also simple, but everything will be confusing and seem complex and hard if you don’t actually understand those 5 things.

80% of the book is me riffing with those 5 things to show you how everything falls out from there. Many nses (dynamic routing, UISM, etc.) just add implementations based on those core concepts that show you “and this is how you might do UI routing with those concepts” or “and this is how you might do a state machine system with these core concepts”.

RAD itself is “here’s how you can eliminate a ton of boilerplate using these same concepts”

I’m building a simple Todo app in Fulcro RAD that has Todos organized into Projects. I have a simple RAD report that lists all Projects. Projects can have many Todos (via a ref attribute). My report’s source-attribute is :projects/all-projects, a global resolver that returns all :project/ids. My report columns are “:project/label”, “:project/project-todos” and “:todo/label” (:todo/label is a “to-many” :ref from :project/project-todos to :todo/id). When I render the report, it displays the :project/label and :project/project-todos a vector of id’s (which makes sense). However, I would like to display the :todo/labels in the report. What’s the proper way to have the report render the individual :todo/labels themselves instead of the “idents in a list” that it displays by default? Link to the c.e.model.project.cljc: https://github.com/aeberts/fulcro-rad-demo/blob/develop/src/shared/com/example/model/project.cljc And a link to the c.e.ui.project.cljc: https://github.com/aeberts/fulcro-rad-demo/blob/develop/src/shared/com/example/ui/project.cljc

Because this is transact! with target/ready I think.

I have found this message: https://clojurians-log.clojureverse.org/fulcro/2020-11-11/1605099087.138200

Which I think is the same issue.

I didn't explain myself correctly: transact! is ok, I am using it now, (transact! [(dr/target-ready [...])]) seems to be the problem if it is inside the route-deferred. I suppose this happens because both the route! mutation on the router and the target-ready mutations are processed in the same step of the transactions processing, and if target-ready happens to come before, the router hasn't changed into the "loading" state yet.