Theme App Extension Structure: JS in Liquid Block VS Asset file?

bishpls
Shopify Partner
26 6 17

Conceptually, what are the differences between including custom JavaScript for a theme app extension (app block or app block embed) in the app block's liquid file, versus a static asset file bundled with the extension? 

Similarly, is there any difference between loading a JS asset via the "javascript" field in the app block settings, VS just including the <script> tag inline in the Liquid file? 

It seems like the existence of external asset files is extraneous, if you can just add <script> tags to the liquid file itself. Is the only difference in performance optimization / load time? 

Replies 2 (2)
samporiikkila
Shopify Partner
7 0 1

I encountered strange behaviour with including JS/CSS assets through the schema and wrote about it in this post https://community.shopify.com/c/online-store-2-0/theme-app-extension-css-javascript-not-working-corr...

 

I'm not sure if this is still happening, but including the assets with tags is working with custom templates as well.

sillycube
Shopify Partner
777 17 124

I think the differences lie below:


inline js in liquid:

  • you can print liquid data into the js
  • you can inject your schema settings into the js
  • the js run order is controlled by you

JS asset:

  • loaded in the head tag before your liquid files
  • I don't see it's minimized. But it can be cached by the browser

 

BYOB - Build Your Own Bundles, SPO - SEO App to research keywords & edit social link preview