I am working on a Symfony project, with PHP on backend, and Twig on Frontend, with Typescript. For bundling, Symfony uses Webpack Encore. We are working on a Saas app with several sections.
We want to refactor a section of the app with a Map using Leaflet library. This section has a lot of visual elements (components), each serving for different purposes, but almost all of them are used and affected by this map. I thought about how to structure this, and I have some doubts:
Because of not using a proper framework, we are very limited about only using ES6 with Typescript. For each component of this section of the page, should it be better to implement some kind of MVC pattern? This way we have the queryselectors on one file, the model state on other, and the listener on a controller file who accesses the other two.
What's the best approximation to load all code files with webpack encore? Assuming we have a Parent.ts file which contains all other elements, is it better to load Parent.ts on one entrypoint? or is it better to load each component on a different entrypoint? What's best for performance?
My purpose with these questions is to check if the ideas I have are already correct, and on the other hand if the ideas I'm not so sure about, could be solved by the community. Any suggestion apart is welcomed. Thanks
(Of course we know if we could use a proper framework we would ignore a lot of problems, but it's not something I can decide by myself, and for now those are my limitations)