Hi DEV community! I'm working on a project that requires a highly customizable frontend, and I'm looking for advice on the best approach. I'd really appreciate any insights or experiences you can share!
Project Requirements:
- I'm building an application that needs a mechanism to create and render a dynamic frontend.
- The backend is built with ABP.io (supports Multi-Tenancy).
- The plan is to have pre-defined templates for frontend components.
- Tenants will be able to select components and insert data (static or from a data source).
- The user's customization will be stored as a JSON object in the database, containing template type and styles.
- When a page is requested, the JSON object needs to be translated into HTML alongside the pre-defined templates.
I'm considering using Vue.js for the frontend, possibly with a component library like PrimeVue, Vuetify, or Element UI. However, I'm open to other suggestions that might fit this use case better.
My questions are:
- Has anyone implemented a similar dynamic rendering system? If so, what approach did you take?
- Which Vue.js component library would you recommend for this kind of customizable, JSON-driven UI?
- Are there any specific design patterns or architectural approaches you'd suggest for managing this level of frontend flexibility?
- How would you handle the translation of JSON configurations to actual rendered components efficiently?
- Are there any potential pitfalls or performance considerations I should be aware of with this approach?
Additional Context:
- The application needs to support multi-tenancy (ABP.io backend)
- Performance and scalability are important considerations
- We're looking for a balance between flexibility for tenants and maintainability of the codebase
Any insights, experiences, or recommendations would be greatly appreciated. Thanks in advance for your help!
Top comments (0)