Feedback on some extra ideas

Conye_A · February 15, 2022, 4:04pm

I am thinking of challenging myself to produce a new Modx extra; not sure how successful I’ll be…but down to three ideas and would love feedback on which to explore further ::

Vue integration for better client side interactivity, would add a tab to the resource editor allowing you to put in setup, data, computed, watch, methods & event hooks visually that would generate/render the vue element to the published page. Plus a extra’s page for importing from NPM (~prebuilt, delivered from a public api) as well as building global mixins and components.
Headless. Some fun features to allow low-code/visual set up of a headless CMS / API.
Client mode, my spin on “FRED” concept (since it never works for my projects) which allows for a drag and drop HTML/markdown editor that visualizes template variables, chunks & snippets as well as certain SEO meta elements.

Anyway, let me know any thoughts or interest.
Thanks.

markh · February 15, 2022, 4:12pm

I’ve always been curious about how people might envision a headless MODX - personally I feel like it is always going to “have a head” because it does the whole server-side template rendering stuff, but it would certainly be interesting to see concepts of something different.

That kinda ties in with your vue integration idea, though I do wonder how much value “write vue components from a resource” is going to have; the vue app development experience is pretty darn good. Perhaps an alternative approach is coming up with some standardised set of components (both vue and MODX) to make feeding data into vue more “low-code”/intuitive?

As for client mode, be sure to check out ContentBlocks if you haven’t before. I’m very biased, but that should be much easier to incorporate on any given project than Fred.

Conye_A · February 15, 2022, 7:39pm

Nice work, that does look to have a ton of what I had in mind. I’ll have to grab a license next time I’m facing that challenge.

I’ve always been curious about how people might envision a headless MODX
This is actually one of the main ways I’m using modx now. I develop and deploy NUXT with Netlify utilizing their serverless-calls for API calls that don’t need a database or customization; but then make calls to a Modx path running on my LAMP(@ api.site.org) for any requiring a database/auth etc or that might need to be tweaked; the main purpose being a CMS for clients to edit content which it then updates the git with the render resource hence triggering a new build of the site.

I find many advantages to this over a more conventional jamstack approach. Like how many low-code people can easily modify things like email templates, mange static resources and most importantly easily and visually change properties on snippet calls to modify the behavior rather than having to request a recode every-time or to extend the api in ways that are not being used.

Of course for many clients, I tend to just deploy a more typical modx deploy which then I often add an Ace vue template variable with reused components translated into chunks(added in automatically on use of the template variable) since that how I’m used to doing most client-side things. But then the lack of syntax highlighting and development tools makes this workaround un-ideal with me writing extra snippets and vanilla hence idea 1. It’s a hard life with one foot in jam stack and one in LAMP, but I can’t seem to let give up on either.

In any case still pretty new to this whole coding thing. Thanks for the feedback. Lot’s to think about, and at least sounds like I’m down from 3 to 2

Conye_A · February 16, 2022, 3:44pm

Feel free to just address the main question.
I am heavily leaning to the Vue project now. My question to this more PHP experienced crowd is what is the best way a represent snippets well running on a local test server ideally without forcing a local copy of the whole mysql/modx… install? Or is that easy?

My thinking ::
In terms of publishing I can envision it, but not testing. Pardon my ignorance if this is obvious, I’ve always developed modx solely online even if I do some code offline all testing is always server-side. So it’s never come up before.

What I have in mind ::
The modx part is looking relatively strait-forward, but as Vue developers we are gong to want to develop that local in the traditional ways with Yarn/NPM not predominately inside modx without the tools and ecosystem. That aspect is to allow easy maintenance, editing and tweaking down the line.

So on that side of things. I’m envisioning a paired node package / CLI that allows syncing with the extra/modx install. That way too I can leverage the local node/Vite install to build js executable versions of the NPM downloaded dependencies which can then be accessed in modx from the components assets folder.

Anyway, when envisioning running in dev mode, chunks/template/pages/template are syncable. So I can build in interpretation into the node package one way or another, but dealing with snippets and multi-developers remain open questions. I could make an api that could use git monitoring for the later and a workaround for the former, but that seems very risky for devs who’d relay such a service or forced to clone and make their own…

Any thoughts welcome…

camicase82 · February 21, 2022, 4:37pm

Hi there, I’m currently finishing a Vue integration for front end on modx to be published open source, still on dev version, but so far it’s doing the trick, currently is rendering the objects using httpLoader, but next step will be to add webpack to the process and have pages fully transpiled and optimized, let me know if you are interested and I can share the repo, this are some of the screens that I’ve got so far.

Its based on the blocks concept

On each block, yo get the editor and rendered preview

and for the resources itself, you can add, change content (it can be either injected using TVs or a custom variables we use) and change sorting

The renderer also is using modx parser so you can totally mix snippets or any other modX element along Vue.

The cool thing, is that as you said, we have been able to build pretty sick UX that I’m not even sure if only using PHP+ExtJS would be possible, as an example, this is a UX we worked for a client that involved a really complex data structure along some crazy business rules, for this we used Vue+VueX+BoostrapVue and its playing nicely with modx

Edit: I forgot something, about the NPM part, we are currently testing around this One Build System - Multiple Vue Apps - Shared Components - DEV Community the idea is the following, have a base project to hold all Vue resources → modx rendered each component and resource to an independant folder inside ModX → when you are editing a resource, a npm run serve will be launch, and you’ll get a similar preview → when you are redy, you select publish, then the page is build using npm run build with custom assets path, and this content is moved to the public assets folder → the template checks if a compiled version of the resource exists, and serve’s it to the end user.

To finish, I see a real potential around this, not only to bring thousands of Vue devs to modx, but also to step up the ModX game, and even being able to work PWA’s or JAM deployment o really complex requirements, with the power and simplicity of ModX, I believe this would take us years light in front of WP