Make the boilerplate more framework agnostic

[vplasencia]

It would be nice to create the boilerplate in a way that it's as framework-agnostic as possible. Right now it's hard to reproduce the boilerplate if you don't know much about React. There are some developers using other frameworks like Vue or Angular. It may be good for hackers at hackathons to easily reproduce the boilerplate in case they want to use another framework. We could replace React hooks with functions. What do you think?

[cedoor]

I agree with the need to make the boilerplate more framework-agnostic 👍🏽 How can we do it though?

The approach we have taken so far has been to use some of the most popular technologies in blockchain/zk projects: Nextjs and React. Looks like a good compromise between the use of modern technology and usability considering the average dev background, but it still doesn't support all devs. In particular, it doesn't support devs without any knowledge of React and NextJS, as you pointed out.

We could replace the hooks with functions that can be used with the other frameworks as well, but how can we build components that can be easily re-used in both Vue, Angular, and React?

We might consider using Web Components directly, which are framework-agnostic and supported by modern browsers.

Another alternative that comes to my mind could be to create a CLI template for each of the main front-end frameworks/libraries.

[vplasencia]

To create reusable code, we could use TypeScript code instead of hooks and context (which are React concepts). We could use just components and TypeScript code. Most JS frameworks support TS and the concept of components.

For example, this project is using Semaphore with Next.js without hooks and context: https://github.com/bandada-infra/bandada-semaphore-demo

Another interesting point is the CSS library (Chakra UI) which is attached to React. We could consider using a framework like tailwindcss since it's easier to migrate an app because it uses HTML and is compatible with many JS frameworks. We could also keep Chakra here since the CLI templates use CSS and devs can use the CSS framework/library they prefer.

[cedoor]

Still not sure if I agree. When I see a React/NextJS app I expect it to be a React app, with React features (contexts and hooks). Mixing React with syntax devs usually use on non-react apps would make it more confusing IMO.

Also, ofc we cannot have a template for each framework but they can certainly cover the main ones or the ones that are more requested by the community anyway.

[vplasencia]

I get your point. I see trade-offs.

Yes, it can be confusing for some React devs if we don't use the React features they know, even if the project works fine. Maybe they would also like to improve the boilerplate using React best practices, then following this thinking it would be better to keep React features in the boilerplate.

As an additional idea, we could have a template with HTML, TS (convert it to JS) and CSS where the Semaphore logic can be easily adapted to any framework.

[cedoor]

That sounds good. Doesn't Semaphore already have a template like that? Or there's an issue on the backlog maybe

[vplasencia]

The template that Semaphore has, is a Nextjs app using CSS instead of ChakraUI.

There is an issue to build an app with that: #334

That app can be modified later to create a template. I think it would be better to use TS instead and convert it to JS because most frameworks and devs use TS now.

[cedoor]

That makes sense. #334 could be a CLI template directly! Why not?