search

hydrostack / hydro

Hydro brings stateful and reactive components to ASP.NET Core without writing JavaScript
https://usehydro.dev
MIT License
693 stars 16 forks source link

Few questions - Authentication and using hydro with HTMX #30

Closed moxplod closed 2 months ago

moxplod commented 3 months ago

Hi, I just came across Hydro. Looks awesome. I have been using HTMX + .net MVC for all my front end for over a year now.

A few questions -

  1. Is there a community or discord so I can add discussion items? Or are GitHub issues the right way?
  2. In my SaaS I want all the components and methods to be authenticated. How do you access the current user ID on the action methods in the components? I saw an authentication section on the docs, but did not see any samples around this.
  3. I plan to use this with HTMX - Use HTMX for all the navigation with boosting, cross-component swaps, OOB swaps which I do not see hydro having currently. Are there any issues with using the 2 together?

Thanks in advance.

kjeske commented 3 months ago

Hi! Thank you for checking out Hydro and for kind words :)

Ad 1. You can use GitHub discussions for now. No discord yet.

Ad 2. You have access to your Principal through regular HttpContext.User in any place in the component. You can also inject any service to your component, including your authentication services.

Ad 3. There are no issues, but only if the HTMX manipulations are not changing the Hydro views. In other way, the views might get inconsistent. I believe that the features of Htmx you mentioned can be potentially replaced with Hydro navigation and events. If you are in doubt, let me know about your use-case.

moxplod commented 3 months ago

Thanks for 1 and 2 - I will try it out.

For 3 - I totally see the use of Hydro and the DX improvement for me when I have a fully self-contained component. And I plan to use it for that purpose with HTMX. The way I have the application structured is that the view components (VC) are not always self-contained, and I use a lot of partial views as well. Would be curious to hear your thoughts on how to implement these use cases with Hydro.

Examples -

  1. Edit/Create VC after submit returns Details VC. Somewhat similar to https://htmx.org/examples/click-to-edit/
  2. I can piggyback responses from the server to update other parts of the view. For example - I can increment the counter of the Notification bell with OOB responses.
  3. All my navigation links in the application load partial views and only replace the #main container so that I never load the side nav, top nav and footer. That is super easy to setup using hx-boost and hx-target in htmx on the body tag. Not sure how you would do that in Hydro. 
<body hx-boost="true" hx-target="#main" hx-swap="innerHTML show:window:top">
<div id="layout-wrapper">
    <partial name="_Topbar"/>
    <partial name="_Sidebar"/>
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">
                <div id="main" hx-history-elt>
                    @RenderBody()
                </div>
            </div>
        </div>
        <partial name="_footer"/>
    </div>
</div>
</body>
sgf commented 3 months ago

Ad 3. There are no issues, but only if the HTMX manipulations are not changing the Hydro views. In other way, the views might get inconsistent. I believe that the features of Htmx you mentioned can be potentially replaced with Hydro navigation and events. If you are in doubt, let me know about your use-case.

Hydro navigation and events If want to replace htmx, I hope Hydro's API or its usage can be simple enough. The simpler the better.

The selling point of htmx is returning to html and returning to simplicity.Hydro seems a bit cumbersome to use.

kjeske commented 3 months ago

@moxplod for all your use cases you could use features that Hydro provides.

  1. For updating another panels you could use events. One component publishes an event that is handled by Notification bell component.
  2. If you want to have "click-to-edit" functionality, you can implement it as one view that has a flag IsEditMode. If it's true you return edition form, if it's false then you show the read-only data.
  3. You can use hydro-link which is similar to hx-boost. It will morph the document into the new version, which should do the work. I could see something like hydro-link-target in Hydro as an improvement, which would do similar thing as hx-target. What's the reason of updating only #main element in your case? You do it to send less content from the server? Or server sends the whole page with layout anyway, but then htmx is exchanging only #main?
kjeske commented 3 months ago

@sgf could you say something more about Hydro being cumbersome to use?

kjeske commented 2 months ago

I'm closing since I didn't get any response from you. Will reopen if needed.