Use PrimeVue as our default GUI framework

[MekDrop]

Few days ago I finally finished converting my own website mekdrop.name into Vue. I did it with Symfony Encore and PrimeVue. When and why I have from many Vue based frameworks selected this one I can't remember, but this mini project gave me idea that maybe we could to use similar thing for ImpressCMS.

From documentation it seems that PrimeVue can be used without webpack or similar assets building tool. Vue can be also used in this way. So, theoretically required js scripts can be installed with Assets packagist and copied to public folder. This could work in similar way as now editor modules works.

Another related thing that I found is that if decide that we can support only browsers not older than 4 years old, we could use for our assets node modules. According Can I Use all desktop browsers supports that (and most supported from 2016+) from middle 2018 and most mobile broswers from 2019. So, I think probably that would be save enough to use.

Very good tutorial about that was written in 2017 - Deploying ES2015+ Code in Production Today.

Do we need ES modules to work with PrimeVue, I don't know. I'm not yet good with that. But from what I see it seems that this framework can work with any CSS framework like Bootstrap or Material Design. At least that looks so taking look into suplied templates.

I'm not sure if this could be the best way to achieve that but as said before I thinking about rewriting imbuilding and one of features that I would like to include is to generate specific page view for selected data model (f.e. table view, form, news list, news item view...). So, we could faster update/remake our modules. And I think something like PrimeVue could help me faster to achieve that.

What do you think?

[fiammybe]

We use PrimeNG at work, which is the Angular sibling of PrimeVue. It is a great set of components, but it will need to be integrated in the backend as well if we want to use the library to its fullest (backend data binding for example). It is much more than just a new layer of paint :-)
How do you think this could be achieved? By adapting the standard templates in the core to the ones using PrimeVue in the first place?
Would this mean that we should evolve for this towards a split frontend/backend? Like one of the initiatives in Drupal currently, where they go for a 'headless' system to manage the data and expose it using webservices to the frontend. That frontend can be developed in whatever system you want (angular, vue, html, react, mobile app, ...).
I think it's logical from an architectural point of view (the world is going to microservices everywhere, so that fits), but it's a huge undertaking. With the development resources in the Drupal community, it is taking them already multiple years to achieve that. And also, adding a new layer could be negative for the speed of the system.

Browsers that are 4 years old are really ancient, and are a big security risk. Nobody should be using them anymore in my opinion. I was looking at the browser version statistics (https://gs.statcounter.com/browser-version-market-share#monthly-202107-202109-bar) but the info that interests us is in the 20% 'other', so not really useful :-(

[MekDrop]

Angular and Vue are similar how they tries to achieve things but the way how they does are different. Angular many years uses TypeScript for writing code for components. And sadly there is no way to execute this language in browser without transcribing code with Babel and Webpack. Vue doesn't have such or similar requirement. Of course if desired it is possible to write modules for this web framework and with TypeScript but it's not a force thing. So, it's possible to write components code for Vue without transcriber (babel/webpack). Still, such a path is less portable (there are no automatic polyfills applied when releasing a code but it most popular browsers it will work as expected).

I think it's possible to include PrimeVue needed code with our addScript/addStyle theme functions without any transcribing/compilation. And it should work on most themes out of box. But I can't say what problem for that could arise. Probably some themes will need small modifications/updates to make buttons displayed in correct color.

About the speed. Yes it will a bit decrease for end user. But I don't think so that this will happen in any noticable way. So, I don't think that is a thing to think about it... at least for right now.,.

I'm not sure what is difference between your link and my link https://gs.statcounter.com/browser-market-share#monthly-202107-202109-bar but in my Chrome based browsers clearly wins.

[fiammybe]

What I'm afraid of here is that we will force module developers to have PHP coding skills AND Javascript/Typescript coding skills, by adding another language in the mix.
As an example: as far as I know, we have no module at the moment that uses jQuery UI, more or less the predecessor of Vue in terms of functionality, simply because the core doesn't give easy access to them. Our module developers have been pure PHP guys up to now, and if we want some more modules, the barrier to entry should be as low as possible.
The only way this can be a success is if the core integrates it and takes care of generating the necessary code at runtime as well.

[MekDrop]

Yeah I'm thinking integrating it in the core and make some functions to render objects as PrimeVue objects (f.e. our forms). Aka doing minimal work to make it work. Any other functionalities that PrimeVue supplied could be achieved with modules but that will depend on developer.

Also as I said before some most common views with imbuilding would be possible to generate.

[fiammybe]

This could also be a solution for your question around #1025 . Rewrite XoopsForms into icmsForms, in such a way that you can have HTML-based rendering, or PrimeVue rendering.

[fiammybe]

In the meantime, symfony has evolved and is offering symfony UX, basically a knock-off of Laravel livewire 😊. We're testing it currently at our company in a proof of concept to see if it can offer vue/react like interfaces for the end user, while keeping us from having to develop authenticated webservice backends by hand for each and every functionality that we want to offer.
Symfony UX promises to integrate vue and react components as well, but we're not sure if that works very well

[VladBrok]

Hi! I wanted to use the PrimeVue in my project, but I can't find information about browser support. Also this issue primefaces/primevue#4688 concerns me.
Could you please tell if you had any issues regarding which browsers PrimeVue supports?

[MekDrop]

Honestly I'm more right now a Quasar user right now. I from what I heard it should work with Safari fine. Still didn't yet implemented anything in ImpressCMS about that. Is more complex than PrimeVue.

And according this PrimeVue only supported last two browser versions few years ago ->https://www.reddit.com/r/vuejs/comments/rg4jvn/primevue_browser_support/ I don't have a anything from Apple right now so it's hard for me to tell how it's really is.

[VladBrok]

ok got it, thanks)