I am creating a classic database that supports a dynamic website that allows users to share sheets.
I'm a little old school and want to implement my system using pure MVC architecture. I am considering using React in pure "V" mode, with Vapor playing the roles of "M" and "C". I need help to understand how to integrate Vapor and React, or rather, to decide where it is best to live.
The application on the server side of My Vapor, handles all security, routing, models (which are stored in PostgreSQL DB through Fluent) and model controllers. Model controllers only issue pure JSON responses to requests that will pass through the layers of the middle layer, which: check the user’s access to the “command” (based on the role profile stored in the database to ensure dynamic changes in privileges); check permission to access the related record (based on the hierarchy of groups in which they can be members); as well as register actions performed by the user.
Until now, I used the Leaf template engine to create .html files for the website that the user will use. The Leaf template is usually passed with only one or two attributes - say, the identifier of the record that will be displayed, and then I use some javascript to pull the data through AJAX calls back to the model controller. The model controller and middleware have access to a cookie for all user needs related to authorization / session. This provides a very clean separation between the model and the view and will allow me to more easily build an application that will use the RESTful model interfaces in the future.
Now I'm thinking of using React for the web interface using the React-Bootstrap library. But to be honest, I have a little lost the ability to integrate this correctly. For example, to display a page to display a record - how do I pass the record identifier (pseudo-code warning!):
a) Should I create a sheet template to which I pass the identifier as a parameter. Would a template just have a short javascript part to pass a parameter to a response.js script? The vapor side will look something like this:
drop.get("viewRecord", myObject) { request in let parameters = try Node(node:["objectId": myObject?.id.makeNode()]) return try webApp.view.make("viewObject", parameters) }
And the .leaf template will be a bit like:
<script ...> var objectID = #(viewObject.id) </script>
b) Or I need to make a call, for example, when I pass the identifier as a URL parameter, which I then retrieve with a little javascript and go into the reaction component:
drop.get("viewRecord", myObject) { request in return Response(redirect: "/viewObject.html", myObject?.Id) }
c) Any other way inside Vapor? Am I missing a point with React? I thought that this should not focus on the front side and the agnostic on the backend, but does the React Router assume that it wants to work with the backend too?
d) Abandon React, and tell me a stick with a sheet?
At this last point - if I go along the React path, will I have a .jsx file (rewritten to .js) for each “screen” for which I would build a sheet template? If so, how can I reduce the file size by referencing common elements (such as reaction components and bootstrap reactions). I am currently using Webpack to create a single .js file. I assume that I will not use React router, as I use Vapor for this.
Sorry if some of them are pretty simple, but I’m more comfortable interacting with the backend, but I want the front end to be well designed and the optimal distribution of responsibilities to be optimal.
Thank you for your ideas!