Matrix JS depending on jQuery library discussion


(Joe Jia) #1

Hi folks,

There would be trend to use other JS libraries to build frontend website/application rather than jQuery.

Is there big impact if we don’t use jQuery library on Squiz website but we can still use like asset builder, or Squiz Matrix components?

Thanks.

Joe


(John gill) #2

I’ve given this a bit of thought recently, and I concluded that it’s not worth trying to use things like Asset Builder if you’re using any “component” style JS framework.

It’s not so much a dependency on jQuery, but the fact that things like Asset Builder do their own event listeners etc (page load and onsubmit, in the case of Asset Builder). You could probably make it work with Angular/React/etc/etc but I’d never be comfortable trying to combine parts of Matrix with their own frontend JS with a framework that controls the whole lifecycle. I hate having different flavours of JS fighting each other.

If I was writing something in Vue/Svelte/etc/etc I would use the JS_API to handle creation and editing of assets. It means you have to write your own UI, but it means you get to write your own UI and be sure you know what it’s doing.

(Asset Builder of course has functionality that JS_API doesn’t, like ignoring permissions for asset creation and all the dynamic create location logic. If I needed those things, I’d probably use an Asset Builder but not use the default UI at all - essentially reverse engineer the POST request that Asset Builder requires and generate the payload myself with whatever JS framework is hot that week).


(Joe Jia) #3

Thanks for your comments @JohnGill :grinning:


(Iain Simmons) #4

The JS API is definitely an option, but a better one might be to simply treat the asset builder as a form that you POST a request to from your JS application.

A common pattern we use at Squiz is to first create the asset builder as you would with its default formatting, and then create some assets with it and capture the POST request body in your dev tools (e.g. copy as fetch). Then it’s just a matter of duplicating that from your application.


(Joe Jia) #5

Thanks @isimmons :+1: