Join us for an upcoming Shopify Partner webinar on February 27, 2024. Discover the latest Checkout Extensibility features, and deep dive on improvements to Shopify Functions and Web Pixels. Register now for either the 10am EST or 2pm EST sessions.
Solved

Best practice javascript/jquery

meules
Shopify Partner
3 0 1

Hi,

 

I'm new to Shopify and in the near future I would like to create a theme for the theme  store.

Currently I'm building a theme for a single webshop. For that I use theme Dawn as a starting point since it inlcudes best practices and all other important stuff. 

 

Dawn is using vanilla Javascript. I'm more familiar with jQuery and work a lot faster with this library compared to plain Javascript. Shopify does not forbid the use of jQuery but also does not recommend it. I also read that the Shopify checkout is using jQuery and even saw that product data is available in JSON style like products/the-3p-fulfilled-snowboard?format=json. For me the use of jQuery would be a good idea then.

However I was wondering what you guys think is the best approach?!

 

All (or most I checked) themes in the theme store seem to use plain JS. So it looks to me it's more or less mandatory to use plain JS for a theme to be released in the theme store?

 

 

 

 

Accepted Solution (1)

Liam
Shopify Staff
2669 288 729

This is an accepted solution.

Hi Meules,

 

You are not prohibited from using a JS library - but there are some benefits from relying on vanilla JS:

  • It's easier to meet the performance requirements if the theme is not relying on a library which might have unnecessary JS
  • If merchants encounter bugs in your theme, it will be easier to troubleshoot problems if you've written the JS yourself
  • JS libraries will likely have unoptimised code, which again could negatively impact performance. 

There's a really great article here that a theme partner wrote on their experiences optimising and rewriting their theme / removing jQuery, which will likely answer a lot of your questions.

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

View solution in original post

Replies 4 (4)

Liam
Shopify Staff
2669 288 729

This is an accepted solution.

Hi Meules,

 

You are not prohibited from using a JS library - but there are some benefits from relying on vanilla JS:

  • It's easier to meet the performance requirements if the theme is not relying on a library which might have unnecessary JS
  • If merchants encounter bugs in your theme, it will be easier to troubleshoot problems if you've written the JS yourself
  • JS libraries will likely have unoptimised code, which again could negatively impact performance. 

There's a really great article here that a theme partner wrote on their experiences optimising and rewriting their theme / removing jQuery, which will likely answer a lot of your questions.

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

meules
Shopify Partner
3 0 1

Hi Liam,

 

Well that guy sounds a lot like me "Stuck in the past", probably we're same age too 🙂

Still I really don't understand how people end up with 6000 lines of jQuery code. Anyway the rest of the article makes sense.

Probably creating my own "framework" is the way to go then.

 

Thanks for the heads up.

Liam
Shopify Staff
2669 288 729

You could explore more lightweight libraries like Cash - which would give to access to most of the benefits of jQuery but with a much smaller size. 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

meules
Shopify Partner
3 0 1

Seems that is doesn't support AJAX requests(??)

Anyway like the article said we don't need libraries anymore so I should not want to use it.