search

capri-js / capri

Build static sites with interactive islands
https://capri.build
MIT License
200 stars 5 forks source link

Capri as "view engine"? #42

Closed IngwiePhoenix closed 1 year ago

IngwiePhoenix commented 1 year ago

Hello!

I am working on writing an application with NestJS as the underlying framework. Being used to MVC-style web app development from years and years of PHP, I just can't get this out of my system... ^^;

Now, I would like to use sporadic JS here and there - like when a user clicks a profile image, it shows a lightbox with a higher resolution image. Something you see a lot like on eBay and Amazon. But I would love to use the islands approach as to only load the JS when it is actually needed.

This has led me to checking out a few frameworks that had "islands" somewhere within their project's description, and thus I found Capri. :)

Is it possible to use Capri to substitude the view engine and introduce the islands pattern to it? I am using Mustache templates because they are fast and very simple - at the moment, at least. When a controller encounters an API request (HTTP GET (...) Accept: text/json), it'll only return the JSON data - but in any other case, it would normally return a view. The default behaviour in most MVCs is to just render a template and return the full page.

My thought-process is, that instead of rendering a template, I would render a component with Capri in SSR and return the stringified output, hydrating at the client side when required (i.e.: the user clicks the image). I am convinced that this should be possible...but I wanted to hear your thoughts on this approach :)

Thanks for this fun framework and have a great day!

Kind regards, Ingwie

fgnass commented 1 year ago

While this is technically possible, let me suggest some alternatives first, which I feel could be a better match:

https://github.com/11ty/is-land – This would allow you to use islands while keeping your existing template based rendering. https://htmx.org – This would allow you to have HTML views for parts of your page that can be updated independently without having to write a single line of JS code

The thing is, that island-architecture solves a problem that only arises when you use a component based framework in the first place. Switching to such a framework, in order to sprinkle some interactivity here and there, adds a lot of (unnecessary) complexity.