Refactor and convert project to a Maven multimodule project and sync with Spring Petclinic Rest project

[firasrg]

This PR introduces a major rework of the Spring PetClinic ReactJS version, converting the project into a multimodule Maven setup, with two distinct subprojects: spring-petclinic-reactjs-client and spring-petclinic-rest. The spring-petclinic-rest subproject is integrated as a Git submodule, allowing for smoother backend updates without duplicating code, and maintaining stability by locking specific versions when needed.

My main focus is on the ReactJS client, which has been significantly enhanced with modern technologies such as React v18, React Admin, Typescript, and Vite.js. While some CRUD functionalities are not yet fully implemented due to pending issues in the spring-petclinic-rest repository, this structure lays the groundwork for a scalable and maintainable application. Once the REST project issues are resolved, the corresponding client-side updates will be added.

This PR should be related to #26.

Also, I'd like to thank @michaelisvy for their early collaboration. Im open to discuss about any aspect of this new form. I hope you'll like it.

[arey]

While some CRUD functionalities are not yet fully implemented due to pending issues in the spring-petclinic-rest repository, this structure lays the groundwork for a scalable and maintainable application.

Hi @firasrg could you please reference or create in the spring-petclinic-rest project the issues you are talking about?

[firasrg]

Hi @arey ! Ive mentioned one of them in README file, the issue ive created by myself :

(like fetching Pets of a specific Owner. Currently, there is an opened issue about this), these will be addressed as soon as the backend fixes are made (by community), ensuring that the client-side work can proceed smoothly.

There is another issue i didn't mention, and it's about updating pet of a specific owner.

[arey]

Hi @firasrg the issue spring-petclinic/spring-petclinic-rest#145 has been fixed
In this PR, see some conflicts taht must be resolved.

[firasrg]

Hello @arey ! Good news, so I'm going to update the spring-petclinic-rest submodule and check related scenarios. As for the conflicts, as I'm changing the full repository into something else 100% uncompatible with the original, im going to accept my changes only

[firasrg]

Hello again @arey ! ive made some new updates, would you like to take a look please? It's worth noting that it's crucial for repository owners or maintainers understand the whole approach applied. I'd invite @nilshartmann to join.

[arey]

Hi @firasrg the github actions CI failed. Thus we focus on the spring-petclinic-reactjs-client module I propose to replace the maven build by a npm one.

I don't have any React skills so I can't really give you any feedback. Thus I let @michaelisvy and @nilshartmann have a look.

[nilshartmann]

Hi @firasrg ,

thanks for your effort and "sorry" for beeing so late with commenting.

I like the git submodule idea to include the "original" spring-petclinic-rest example.

Actually I'm not sure if using react-admin as base is a good approach. While I think react-admin has its benefits, I'm not sure, how many people would actually use it in a "real" application. I think using a stack with React Router and TanStack Query would be more mainstrean and more realistic for real applications nowadays.

To answer this question, we might discuss what the overall idea of this project is (a question that also belongs to "my" original version of the "React Petclinic"): from a Spring perspective the only thing relevant is the (REST) API. Consuming this api is not related to spring, but specific to React, Angular, whatever framework. My idea was to provide an example for people that are more or less new to frontend developement with React (and also to build a "competitor" to the angular example 😉) providing them with best practices, a base for getting started with own projects etc. That's the reason why I think, React Router/TS Query would be a better fit for this project. Using React Router/TS Query we could also show some newer React features like Suspense, advanced caching and pre-fetching with TS Query, and how to generate TS/zod types from an OpenAPI description and more... And someday maybe even some serverside features using React Router v7 (ex Remix). Beside of that I wonder if it would make sense to add spring security to the example, for example with Spring Auth Server or Keycloak. That would make the example even more realistic and could help people understand how to implement such a cruictial feature.

What do you think?

(btw. in a new code base I wouldn't use TypeScript enum anymore, but go with different approaches. See here for example: https://www.totaltypescript.com/why-i-dont-like-typescript-enums. But that's not a big deal, if you prefer enum, there's no need to remove it, I think)

[firasrg]

Thank you for your feedback! I appreciate the suggestion to use only and natively React Router and TanStack query. While I agree that both are sufficient tools for handling the app, I chose React Admin for this rework for several important reasons:

1. Full Feature Set: It provides builtin support for CRUD operations (it uses TS Query internally!), form handling (using React Hook Form internally), layout management, and internationalization—all of which are important for Spring Petclinic project (i guess). Using React Router and TanStack Query alone would require additional libraries and custom code, leading to complexity and redundancy.

2. Customization: Like Spring Boot, React Admin allows extensive customization. We aren’t limited to its out-of-the-box features. Custom routes, forms, or data providers can be integrated smoothly, ensuring we maintain flexibility where needed without sacrificing the benefits of a well-structured app!

👉 React Admin offers the same rapid development experience for the frontend as Spring Boot does for the backend—balancing speed and flexibility. I believe this approach will keep the project scalable and maintainable, while still allowing for custom configurations when necessary.

TBH I was expecting you to be happy for using this framework @nilshartmann. If you still feel not ok with this approach even after reading this message, then just tell me so I cancel this PR.

[firasrg]

Hi @firasrg the github actions CI failed. Thus we focus on the spring-petclinic-reactjs-client module I propose to replace the maven build by a npm one.

@arey I don't see a reason to replace maven build by npm. Knowing that the npm build is managed within maven. I wanted to keep the project with Maven as it's the original build tool used and as there is another Maven subproject (which is the git submodule). Ive checked the error, it seems that the problem is not related to the client module, but to the submodule:

Error: Child module /home/runner/work/spring-petclinic-reactjs/spring-petclinic-reactjs/spring-petclinic-rest/pom.xml of /home/runner/work/spring-petclinic-reactjs/spring-petclinic-reactjs/pom.xml does not exist

[arey]

@firasrg I'm not very familiar with git sub-modules. Like @nilshartmann I think it's a good idea. Could you split this Pull Request in order to merge the submodule part?

I'm ok to keep the maven build. I wasn't aware that the java backend would still need to be built.

[nilshartmann]

@firasrg maybe you need to explicitly need to tell the github checkout action to also checkout the submodule? https://stackoverflow.com/a/65091631/6134498

[firasrg]

maybe you need to explicitly need to tell the github checkout action to also checkout the submodule

@nilshartmann done ! It seems that such change requires an apporval from repository maintainers. As for the work done, I'd like t know your final decision about using React Admin please

[firasrg]

@arey I just noticed that build has failed, it seeems that the config i added isn't useful, so im going to do a second update now, it could work.

[arey]

@firasrg for my point of view, the aim of this demo application is to explain to junior React developers how to build a React application using best practices and without a structuring overlay like React Admin.
It's a bit like saying that the Angular fork is based on PrimeNG. This could be a dedicated repository (or branch).

[firasrg]

@arey thank you for your feedback. I think that Spring PetClinic is also meant to help various levels of developers, especially those coming from other tech stacks.

Additionally, when I read the introduction of this project, I find that it's designed to show good practices:

The Spring PetClinic is a sample application designed to show how the Spring stack can be used to build simple, but powerful database-oriented applications.

What's the definition of "simple but powerful" here please ?

As I mentioned before, React Admin doesn't add complexity, it streamlines the React dev by reducing redundancy, time-consumming configurations and boilerplate. It's a well-organized opiniated framework that applies the principal Convention over Configuration. It's doing same as what Spring Boot does for the backend, serving as an entry point for juniors (or newcomers) to Spring ecosystem. So, why we apply this practice only in backend ?

Spring Boot provides a quick (and opinionated) way to create a production-ready Spring-based application. It is based on the Spring Framework, favors convention over configuration, and is designed to get you up and running as quickly as possible.

It's important to consider that the React ecosystem has significantly evolved these recent years. It's no longer just about creating some components and see magic UI interactions. Today, React involves multiple tools, typed languages, high practices, and new syntax, which can make React dev more complex without some bootstrap. React Admin also offer a flexible and extensible solution, simplifying maintenance, and keeping the project easy to read, scalable, and open to all levels

[nilshartmann]

@firasrg for my point of view, the aim of this demo application is to explain to junior React developers how to build a React application using best practices and without a structuring overlay like React Admin. It's a bit like saying that the Angular fork is based on PrimeNG. This could be a dedicated repository (or branch).

I tend to agree here. While React Admin for sure is a valid option when building React applications it's far from being mainstream (have a look at the npm download stats). Again: that does not say anything about the quality or the pros and cons of RA.

On the other hand, libs like React Router or TanStack Query are quite popular an can be considered something like a "de-facto" standard for new React applications (they are even mentioned in the official React docs). To some extend I think this is also true for react-hook-form and zod. And I think as an example application here, we should follow a mainstream path being as unopionated as possible.

Having said that, I really appreciate your efforts here and wonder if @arey idea ("This could be a dedicated repository (or branch)." would be an option.

What do you think?

[firasrg]

@nilshartmann What if I tell you that React docs itself recommends to use a React framework for a new project ?

You can definitely use React without a framework—that’s how you’d use React for a part of your page. However, if you’re building a new app or a site fully with React, we recommend using a framework.

FWIW, I've worked with ReactJS for years and have been in touch with developers from many levels, just to say that I know what I'm doing. However, if you still don't agree on using a framework like this one after all the details and questions I've given you, I'll have no choice but to refactor the client app, removing the framework and re-founding it to a traditional React app

[nilshartmann]

@firasrg The term "framework" there refers to a framework like Next.js, Remix or Gatsby. In other contexts those frameworks are also called "meta frameworks" because they're providing build tools, bundling, serverside routing and rendering and more. (I think somehow very carefully comparable in the way we call Spring Boot a "framework").

And again: this not about React Admin itself. I just want to raise the general question if we want to go with a more "mainstream" or "opinionated" way here.

[firasrg]

The term "framework" there refers to a framework like Next.js, Remix or Gatsby

RA is very similar to Gatsby and Remix.

I think somehow very carefully comparable in the way we call Spring Boot a "framework"

It's the defacto today.

I just want to raise the general question if we want to go with a more "mainstream" or "opinionated" way here.

And no problem, as I said previously, im going to have to refactor stuff, uninstall RA and try to release a basic React app with some known tools including TQuery and ReactRouter, is that ok ? @nilshartmann

[nilshartmann]

@firasrg

I just want to raise the general question if we want to go with a more "mainstream" or "opinionated" way here.

And no problem, as I said previously, im going to have to refactor stuff, uninstall RA and try to release a basic React app with some known tools including TQuery and ReactRouter, is that ok ? @nilshartmann

Sure! Please let me know if I can help.