Fork me on GitHub
#clojurescript
<
2021-11-14
>
v3ga05:11:44

So what would be the best approach if I wanted two separate UI. Like I want a Dashboard/CMS view for content creators and I'd like much simpler layout for viewers than doesn't have to operate as an SPA but I would like some minor JS for writing comments, possibly dynamic searching, etc.

p-himik06:11:58

There are two kinds of meaningful separation that I can think of: by code (the degree of separation is the inverse of the amount of code shared between the UIs) and by usage (the amount of same users using both UIs in this case). So we have 4 options then, with for somewhat distinct approaches: • Sharing lots of code, not sharing lots of users - single project with some common sources but two separate UI builds • Sharing lots of code and users - single project with some common sources and a single UI build with module splitting • Not sharing code but sharing users - same as above, but with no common sources except for CLJS itself • Sharing neither code nor users - either a single project with completely separate sources and builds or separate projects But given that it's UI for the same service, the last two options are probably not applicable - there will always be some shared code.

👍 1
v3ga06:11:48

I'd say most likely the first option. I originally was going to just do a single UI and switch the appearance depending on whether or not you're logged in but for the creators side I feel there's going to be a lot going on and I don't want to push that much JS on regular viewers of the content. Basically I'm wondering how to go about handling separate front ends. You did bring up an interesting points. I suppose there will be some code related to forms, validation etc that I'd want to share.

p-himik06:11:35

Yeah, module splitting will allow you to not push unnecessary code for users that aren't logged in, and then logging in will retrieve only the modules that are needed - everything that has already been retrieved won't be requested again.

v3ga07:11:27

Hmm, ok i'll take a look into that. Ty

v3ga07:11:25

Yup! I think this is exactly what I was aiming for. I'm new to clojurescript and JS so just getting an idea on what I want to do here. This is it.

👍 1
macrobartfast18:11:49

I’m coming back into cljs after a spell away. When I develop JS I like to use copy-pasta react components from the many sites out there that let you do that for ready built components. In particular, I need now a paginated sortable data tables style component. I’ve never wanted to build complicated UI things myself in JS and usually just grabbed a library, then when React came along, a component. My difficulty in the past with cljs has been figuring out how to grab things and use them like that. It seemed like the bulk of the UIs build with cljs were internal facing simpler ones. When I started into cljs previously there was a lot of above-my-head integration necessary, but I figured that might change. Where should I start looking to see if it will be possible to do that in cljs more easily now?

macrobartfast18:11:57

One thing I had noticed in the past was a combination approach… data handling in cljs and straight up JS as well… maybe that’s what folks are doing now.

macrobartfast18:11:33

I was never a very advanced JS dev but one thing that they were doing was npm installing components and using them… that’s an area to learn about more in JS for me and maybe also what is going to be relevant in the cljs ecosystem, as well.

p-himik19:11:37

There will always be some interop necessary. The first step would be to get familiar on how to use JS from CLJS - fortunately, there are a lot of materials out there on this topic. And there's not much to learn, so it's a quick step. The second step would be to try and ascertain what kind of UI building workflow you're comfortable with. This is a vague topic and the state of affairs is still somewhat in flux, so it gets a bit hard here. For example, I prefer using re-frame, which is built on top of Reagent, which is built on top of React. Re-frame is just a state managing library, so we can omit it for now. Reagent provides a way to create and use React components in a more "CLJS-esque" way, and it also includes some primitives for state management. Some people like how it works, some don't - usually because Reagent is a relatively high-level abstraction on top of React. The best way to see if it's for you would be to check out Reagent examples and its documentation on how to use React features. If you decide that you prefer to stay closer to React, there are other libraries, like Helix. I'm not that familiar with it though, so can't really comment. It's possible that there are even more React wrappers for CLJS out there. In any case, just as with Reagent, you can use React components form such wrappers just fine, although at least some amount of interop will still be required (like an extra function call or macro usage, nothing too complicated). A couple of other libraries worth mentioning: Fulcro (uses React as well) and Hoplon (not sure here).

macrobartfast19:11:06

Thank your first so much for this reply… I have put getting back into code off as I have a great amount of trepidation/entropy… so this is really helpful! I am all about Reagent and Re-frame because the bulk of the learning materials out there focus on them. I am not opinionated about being ‘closer to React’ and am never probably going to be knowledgable enough to get that way… my UI needs are basic, as long as ‘basic’ means using prebuilt libraries and components for things like paginated data tables.

macrobartfast19:11:28

I guess I’ll just dive in and try to build a SPA with paginated data and figure out the interop as I go… interop in my case meaning using JS ecosystem React components… which I’m gathering you are saying is possible.

p-himik19:11:01

> I’ll just dive in and try to build a SPA with paginated data and figure out the interop as I go I think this is the best approach, yes. And if you want to figure out what really is the best for you given your needs, I would also try to build such an SPA using different CLJS UI libraries.

macrobartfast19:11:15

Unfortunately I haven’t found any relatively current cljs tutorials/courses that really show how to plug into the prebuilt React component world which is really what is going on. I have noticed that most/a-lot of the UIs in cljs tend to be a bit, um, ‘basic’ and I suspect that may be because interop isn’t actually easy for that.

p-himik19:11:16

Just in case and for future reference - there are #re-frame and #reagent channels, as well as #helix, #hoplon, and #fulcro.

macrobartfast19:11:48

Thank you, I always wonder which channel to post in.

p-himik19:11:10

That's the thing - if something is already built with React, there's not much needed to just use React components apart from a handful of library functions. Most of the time, you will use just one of them. Relevant documentation on using React components and features with Reagent: • https://github.com/reagent-project/reagent/blob/master/doc/InteropWithReact.mdhttps://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md

macrobartfast19:11:45

I’ll search on ‘CLJS UI libraries’ per your comment… I wasn’t really away they existed, as I assumed it was all about interop.

p-himik19:11:25

Ah, by "CLJS UI libraries" I meant Reagent, Helix, etc.

👍 1
p-himik19:11:03

I think Hoplon is its own thing that doesn't use React, so it will probably be much harder to find reusable components for it.

p-himik19:11:08

The most useful to you is probably this section: https://github.com/reagent-project/reagent/blob/master/doc/InteropWithReact.md#creating-reagent-components-from-react-components Specifically, the :> part. That's something you will be using 80% of the time you need to use a React component inside Reagent.

macrobartfast19:11:52

I just posted a more specific question in #reagent

macrobartfast19:11:26

Our messages crossed… I’ll focus on your direction here… it’s incredibly helpful.

macrobartfast19:11:40

Probably learning things a bit more as you are suggesting here will open up a lot of components to me from the React ecosystem.

👍 1