Skip to content

Coding question: fetch vs $.ajax call from Shopify

Solved Performance
  • I prefer to use vanilla js where possible, rather than library functions, (such a JQuery.)

    I was looking at some Shopify code, and $.ajax was used for API call rather than the newer built in fetch() command.

    I was curious why.
    Also wonder why some people still use $.ajax in some nodebb plugin code?

    Is there is any reason, rather than habit, to stay using the JQuery ajax method? (Apart from that working on old Internet Explorer browser version)

    I was also curious if fetch() works from sites like Shopify - in theory theres no reason why not…
    But I saw someone else ask this question on Shopify forum, where they could not get fetch working-

    https://community.shopify.com/c/shopify-scripts/fetch-json/m-p/1606498

    So my question is there any technical reason why people haven’t all moved to using fetch now, which is more modern, has advantages and doesn’t require JQuery?

  • @Panda said in Coding question: fetch vs $.ajax call from Shopify:

    I prefer to use vanilla js where possible, rather than library functions, (such a JQuery.)

    I was looking at some Shopify code, and $.ajax was used for API call rather than the newer built in fetch() command.

    I was curious why.

    If you consider the origins of ajax and the reason why it exists in the first place, it’s fairly easy to see why it is still commonplace despite more modern approaches such as fetch exist. jQuery was created to address the (at the time) void of missing functionality that vanilla JS had. The deficit was enough for jQuery to fill this void for many years, and it’s always much harder to take something away from someone rather than not giving it to them in the first place.

    jQuery provided a “shortcut” / convenient way to write code that filled this void, and did it efficiently. Admittedly, it did come with an entire army of other functionality that you may not have needed, but developers were willing to overlook that because of the essential function it brought to the table and they needed. Given the statement above, jQuery quickly became an accepted standard and embedded itself into a variety of platforms - WordPress being the most prominent. With the popularity of jQuery, like any programming language, comes technical debt. Anything that is intrinsically sewn into a product to make it work rapidly becomes a dependency, and hard to remove without seriously impacting the functionality of a product - in some cases, removing it entirely would make that same product completely inoperable.

    So my question is there any technical reason why people haven’t all moved to using fetch now, which is more modern, has advantages and doesn’t require JQuery?

    Purists will argue that Vanilla JS has advanced over the years, and contains far greater power than jQuery could every have, and they’d be right. However, what Vanilla JS doesn’t have is impact. In a utopian world, jQuery would never have existed, and Vanilla JS would reign supreme. As is always the case, gaps in the market are always created by the desire to fulfil a particular function, and this specific gap was filled by jQuery - the real genesis being the inherent differences between Internet Exploder (intended pun) and other browsers who adopted standards rather than (unlike Microsoft) try to re-invent the wheel and force developers to adopt their way of thinking as oppose to using industry standard.

    jQuery gave developers a level playing field in the sense that it became possible to use the same code across multiple browsers and maintain interoperability - more importantly, less is more in the sense that shims and polyfills were no longer required to accommodate a browser that effectively spoke a different language to everyone else, yet wanted to be in the same boat. With IE’s dominance over the years as the #1 browser, developers needed to make sure that their code worked on all browsers, and this how jQuery came to divide and conquer.

    Eventually, Microsoft saw the writing on the wall, and IE died at the ripe old age of “11”, which was the last release before Microsoft finally agreed that the webkit standard was way superior than anything they could create from scratch and claim as their own, and out of the IE ashes rising like a Phoenix, Edge was born, leaving complex IE only compatibility behind and embracing a new future where all browsers finally speak the same language, and adopt HTML5 standards along with CSS3 (for example).

    Also, consider Bootstrap. jQuery is bundled with this specific product, and being arguably the best framework for creating mobile first websites (and the de facto standard), and still an industry favourite after all these years, jQuery is not going anywhere anytime soon. The release of jQuery 4 has been delayed multiple times, but if you consider the sheer number of websites that still use it, any sunset decisions will have a major impact on how the web currently works without a viable replacement that does not mean completely recoding every single affected site - of which there would easily be millions.

    @Panda said in Coding question: fetch vs $.ajax call from Shopify:

    Also wonder why some people still use $.ajax in some nodebb plugin code?

    Is there is any reason, rather than habit, to stay using the JQuery ajax method? (Apart from that working on old Internet Explorer browser version)

    Interoperability. NodeBB has used jQuery in it’s core for some time, and surgically removing it without a major release would be difficult (as the devs themselves have alluded to on several occasions). in addition, the removal of jQuery from such an application would break hundreds of plugins that were written to use the plethora of hooks that are exposed by core thereby rendering sites inoperable. Obviously, not a wise choice.

    @Panda said in Coding question: fetch vs $.ajax call from Shopify:

    I was also curious if fetch() works from sites like Shopify - in theory theres no reason why not…
    But I saw someone else ask this question on Shopify forum, where they could not get fetch working-

    From recollection, fetch is “supported” but not in a completely native form - see below.

    https://shopify.dev/docs/api/ajax

    @Panda said in Coding question: fetch vs $.ajax call from Shopify:

    But I saw someone else ask this question on Shopify forum, where they could not get fetch working

    Reading the link you provided, it’s easy to see why this didn’t work because the methodology is all wrong. You’d need to break out of Liquid as you do with PHP for example and then return to it once you’d executed the code you need. You’d also need to use parenthesis which again, is an accepted industry standard.

  • @phenomlab Thanks for a very comprehensive answer.

    Quick question, what syntax is used to break out of liquid, then go back into it?
    And where do the parenthesis need to be added?

  • Pandaundefined Panda has marked this topic as solved on
  • @Panda You should be able to use {% javscript %} as shown in this video - it’s quite the watch, but very educational, and provides insight as to how this works - see below screenshot for an example

    cdb160e9-d955-498c-b921-982db2986e2b-image.png


Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

  • 1 Votes
    26 Posts
    1k Views

    Yes ogproxy too is functionnal on dev

  • 15 Votes
    51 Posts
    3k Views

    Oh yes, that’s what’s super cool, I learn something every day. Afterwards I start from so low in JS

  • 9 Votes
    32 Posts
    3k Views

    @DownPW said in Bottom footer navbar button extend:

    Oh my god, it’s beautiful mark

    I liked this design so much, I’ve implemented it here. I intend to do a lot more with the footer in due course, so hiding it makes a lot of sense. Thanks @DownPW for the idea and initial concept ♥

  • 0 Votes
    2 Posts
    298 Views

    @pwsincd I think you can use userData.isAdmin = isAdmin; if I’m not mistaken - see
    https://community.nodebb.org/topic/15128/how-to-hide-whitelist-user-field-only-to-owner-or-admin?_=1648802303112 for an example

  • 3 Votes
    2 Posts
    557 Views

    @pwsincd welcome to sudonix, and thanks for the comments. What your looking for is here

    https://sudonix.com/topic/195/nodebb-welcome-message/3?_=1648295651358

  • 5 Votes
    9 Posts
    2k Views

    @phenomlab

    Very very great Mark 😉
    Thanks again, It’s perfect now !

    –> I share my code that I modified.

    I’ve added French and English comments.
    If you see things to change Mark, don’t hesitate.

    As usual, all the access paths (FA icons, logo) will have to be modified according to your architecture.

    You can also very well add/remove time slots and change welcome messages to suit your needs.

    Widgets ACP/HTML Widget Footer Logo <center> <br><br> <img id="thislogo" src="path/to/my/image"> </center> Widget Welcome Message <!-- IF loggedIn --> <div class="getUsername">, <a href="/me"><span class="username"></span></a></div> <!-- ENDIF loggedIn --> CSS

    – I added the size font-weight: 900; in the CSS because otherwise some FA icon wasn’t displayed correctly and reduce margin :

    i#thisicon { font-family: "Font Awesome 5 Free"; font-style: normal; margin-right: 8px; font-weight: 900; } .getUsername { padding-top: 20px; text-align: right; } /*Smartphone*/ /*On désactive le message de bienvenue"*/ /*We disable the welcome message"*/ @media all and (max-width: 1024px) { .getUsername { display: none; } } JAVASCRIPT // ------------------------------------------ // Welcome Message avec icône et Footer logo // Welcome Message with icon and Footer logo // ------------------------------------------ $(window).on('action:ajaxify.end', function (data) { //On récupère le username dans le DOM et on l'affiche //We retrieve the username from the DOM and display it function updateUsername() { $('.getUsername .username').text(app.user.username); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', updateUsername); } else { updateUsername(); } //On déclare les variables principales (themessage & thehours) ainsi que les variables secondaires correspondants aux plages horaires //We declare the main variables (themessage & thehours) as well as the secondary variables corresponding to the time slots var thehours = new Date().getHours(); var themessage; var wakeup = ('Good day'); var morning = ('Good morning'); var lunch = ('Bon appétit'); var afternoon = ('Good afternoon'); var drink = ('Cheers'); var evening = ('Good evening'); var night = ('Good night'); var welcome = ('Welcome'); var matched = false; //On peux ici tester le résultat du code en spécifiant une heure (!!!IMPORTANT: Commenter une fois le script testé!!!) //Here we can test the result of the code by specifying a time (!!!IMPORTANT: Comment once the script has been tested!!!) //thehours = 20 //On déclare les plages horaires avec les icones FA et les logos //We declare the time slots with FA icons and logos path if (thehours >= 0 && thehours < 6) { themessage = night; theicon = "fa-solid fa-moon"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 6 && thehours < 8) { themessage = wakeup; theicon = "fa-solid fa-mug-hot"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 8 && thehours < 12) { themessage = morning; theicon = "fa-solid fa-sun"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 12 && thehours < 13) { themessage = lunch; theicon = "fas fa-hamburger"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 13 && thehours < 16) { themessage = afternoon; theicon = "fa-solid fa-sun"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 16 && thehours < 18) { themessage = welcome; theicon = "fa-solid fa-rocket"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 18 && thehours < 19) { themessage = drink; theicon = "fa-solid fa-wine-glass"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 19 && thehours < 20) { themessage = lunch; theicon = "fas fa-pizza-slice"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 20 && thehours < 24) { themessage = evening; theicon = "fa-solid fa-tv"; thelogo = "/assets/customlogo/XXX.png"; } // Si la page active est un topic, on désactive/cache le message de bienvenue // If the active page is a topic, we deactivate/hide the welcome message if (window.location.href.indexOf("topic") > -1) { console.log("This is a topic, so hide the user welcome message"); $('#thisuser').hide(); } // Sinon, on affiche le message en fonction, l'icone FA et son emplacement (prepend) // Otherwise, we display the message in function, the FA icon and its location (prepend) else { $('.getUsername').prepend("<i id='thisicon' class='" + theicon + "'></i>" + themessage); $("#thislogo").attr("src", thelogo); //$('.getUsername').prepend("<img id='thisicon' src='" + thelogo + "'></>" + themessage); } });
  • 4 Votes
    8 Posts
    2k Views

    @DownPW done

  • 0 Votes
    7 Posts
    730 Views

    @downpw ooops. Forgot that. Thanks for adding.