pwuser1

Which to learn and use JQuery or Vuejs?

Recommended Posts

@netcarver They say Vuejs is easier to use than Jquery but jquery seems more powerful.  But I want to hear what your experiences about these.  Lots of experienced developers here I know.

I want to make interactive websites with ajax as well.

Share this post


Link to post
Share on other sites

I don't really think it's one or the other. jquery is more a library and Vue a framework. I know it can be a fine line between the two, but something to be aware of.

jQuery is still everywhere and very useful for simple DOM manipulation tasks. Mind you I would also suggest that you should learn plain javascript first - having that foundation will serve you well and make it easier to pick up the next trendy JS framework. Also, why load up jQuery for one simple thing that could easily be achieved in plain JS?

Obviously Vue is becoming a popular framework, but a couple of years ago it was all Angular, and before that it was .... well you get my point. I do think that Vue is a good choice for a full blown framework right now though.

  • Like 8

Share this post


Link to post
Share on other sites

Although Vue is being marketed as "incrementally adoptable" it is still aimed to become something react-like as I see it. That is a framework, that is to be used on a frontend, completely decoupled from the backend. In such architecture backend only serves data to a frontend via something like REST or GraphQL. And all the routing and markup generation is done on the frontend, in the browser.

ProcessWire surely can be used in that scenario (just follow the provided links), but in 99% of cases I heard about it is used in an "old-fashioned" way, with routing and markup generation done on the server (backend) and served via page reload, not ajax+in-browser state change+framework like Vue. That means most examples here on the forums will be more relevant to such a usage. Ryan is building at least his demo sites this classic way. Vue is something from the new frontend oriented world.  JQuery is something from that "classic" web-development world, which is still dominant.

JQuery is used throughout the PW core and modules code. And that code is a very good manual in itself. So learning JQuery with PW will be easier.

And (should it be first) PW API is known to be inspired by JQuery. Isn't it the ONE reason to learn JQuery first if going with PW?

So, for now, I would say JQuery is a better start to be used with ProcessWire.

  • Like 8

Share this post


Link to post
Share on other sites

I think I will take your guys advice and learn Jquery before Vujes.  Any advice in learning Jquery is greatly appreciate.  

Share this post


Link to post
Share on other sites
  1. Hey, @pwuser1! You could already reach some intermediate JQuery skill by now, spending half the time passed from the creation of this topic :rolleyes:. The basics are easy. Most of the times for the simple sites js+JQuery is about installing and configuring some plugins, using their docs pages and the official JQuery API reference (start by adding something like Magnific Popup to your site). But if you need some link to start with, I would recommend FreeCodeCamp course. The whole FreeCodeCamp thing is a hype so you'll feel yourself trendy))
  2. Just recently listened to an issue of ShopTalkShow, one of my favorite podcasts, that fits here perfectly. Could not resist to put  it here (for some controversy at least).

 

  • Like 1

Share this post


Link to post
Share on other sites

I don't think specifically learning jquery is needed anymore. I'd rather try to improve your skills of using plain js, which should result in using jquery being more or less "reading the docs" if you need it. If the foundation in plain javascript is given or you start to have spaghetti code then look into the OOP features of js and frameworks like Vue/React/Angular. Additionally I'd like to add Svelte to the mix as well. It does look quite similar to Vue, but does include less of the features/magic one might not need in Vue. It's api look way more like plain javascript.

  • Like 4

Share this post


Link to post
Share on other sites
On 25/12/2017 at 8:26 AM, Zeka said:

If you are new to JS world, IMHO, I would suggest this learning curve:

JS -> ES6 -> jQuery -> Vue / Angular / React

This is what I'm doing, been on plain JS for months. Still trying to get my head round that damn prototypal inheritance. My JS progress is so slow it's unreal, I just don't seem to get it. If there was another option for web programming, I'd be skipping JS entirely.

  • Like 3
  • Haha 1

Share this post


Link to post
Share on other sites
On 12/24/2017 at 11:11 PM, pwuser1 said:

I want to make interactive websites with ajax as well.

There are nice and easy examples in GitHub for using Processwire Rest API with Vue / Angular / React

Whit them you can easily build nice websites with smooth page render, navigation and more.

Share this post


Link to post
Share on other sites
On 12/26/2017 at 10:58 AM, LostKobrakai said:

I don't think specifically learning jquery is needed anymore. I'd rather try to improve your skills of using plain js, which should result in using jquery being more or less "reading the docs" if you need it.

6 months later on my journey and I completely agree with this.

Had to modify some jQuery the other day and it was super easy with a relatively decent background in plain JS now.

Share this post


Link to post
Share on other sites

Btw. Instead of "plain JS" I recommend Typescript .

It makes JS less confusing and more securing, especially when you are coming from an OOP Language like Delphi, Java, C# .

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Matze
      Hi there,
      I'm trying to get to work some AJAX call with vanilla Javascript, not jQuery.
      Anything seems to work so far, but the !$config->ajax seems to be ignored.
      To find out whats the problem by comparing both, jquery and plain javascipt, i built this template. commenting out //loadJquery(''); or loadVanilla(''); switches the two variants. (empty url variable means that the same pages will be loaded.)
      The problem: the pure Javascript function ("loadVanilla") is loading the full page content into the dc-container, which is wrong. The jQuery function  ("loadJquery") only loads the part outside of the if(!$config->ajax): - which is as it should be. 
      So - any help with this, what am i doing wrong?

      Thanks a lot - Matze
      <?php namespace ProcessWire; if(!$config->ajax): ?> (some static content)<br> <a id="loadlink" href="#">load</a><br> <?php endif; // end if not ajax ?> <span id="dc-container">(dynamic content)</span> <?php if(!$config->ajax): ?> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> <script> var loadlink = document.getElementById('loadlink'); loadlink.addEventListener('click', function(event) {   //loadJquery('');   loadVanilla('');   event.preventDefault() }); function loadVanilla(url) {   var xhttp = new XMLHttpRequest();   xhttp.onreadystatechange = function() {     if (this.readyState == 4 && this.status == 200) {       document.getElementById("dc-container").innerHTML = 'loaded: ' + this.responseText + (' (by vanilla javascript)');     }   };   xhttp.open("POST", "", true);   xhttp.send(); }   function loadJquery(url){ // Load content   $.ajax({       type: "POST",       url: url,       data: { ajax: true },       success: function(data,status){         pageData = data;       }   }).done(function(){ // when finished and successful     document.getElementById("dc-container").innerHTML = 'loaded: ' + pageData + ' (by jquery ajax)';   }); } </script> <?php endif; // end if not ajax ?>  
    • By rareyush
      hi everyone
       
      I am trying get a full width sub-menu on 3rd item in menu or navbar which is coming from a loop.
      i was hoping this can be done by using jquery by targeting 3rd element in navbar but jquery is blocked in some browser by default so is there any other method I can do this
    • By pwuser1
      Hi people I think I have seen them all but maybe I missed some of the just wanted to know what do you recommend for an editor with JQuery autocompletion or support? 
    • By David Koplin
      Hello dear community
      I have a problem with a front edit possibility inside a OWL gallery.
      The thing is, normally you do a double click to edit something directly on a page.
      In my case a single click opens up a picture inside a gallery, so I can't "hit" the editing.

         
                           <div class="demo-gallery">                             <ul id="lightgallery2" class="list-unstyled row">                                 <li class="img-md-12 mb-12 mb-sm-12 mb-md-12 mb-lg-12 mb-xl-12 col-12 col-md-12 img-fluid full-height" data-responsive="" data-src="<? echo $page->page_home_owl_00_img->url; ?>" data-sub-html="<h4><? echo $page->page_home_owl_00_h4; ?></h4><p><? echo $page->page_home_owl_00_p; ?></p>">                                     <a href="">                                         <img class="img-responsive" src="<? echo $page->page_home_owl_00_img->url; ?>">                                     </a>                                 </li>                                                                  <? foreach($page->children('template=9dk-owl-home') as $item): ?>                                 <li class="img-md-6 mb-3 mb-sm-3 mb-md-3 mb-lg-3 mb-xl-3 col-12 col-md-6 img-fluid" data-responsive="" data-src="<? echo $config->urls->templates ;?><? echo $item->page_home_owl_01_img; ?>" data-sub-html="<h4><? echo $item->page_home_owl_01_h4; ?></h4><p><? echo $item->page_home_owl_01_p; ?></p>">                                     <a href="">                                         <img class="img-responsive" src="<? echo $config->urls->templates ;?><? echo $item->page_home_owl_01_img; ?>">                                     </a>                                 </li>                                 <? endforeach; ?>                                                         </ul>                         </div>  
      I tried any variants of options C and D from this page:
      https://processwire.com/api/modules/front-end-editing/
      Are there any hints for me, what I can do?
      Any help is highly appreciated!

      Best from Munich in Germany
    • By mike62
      I've implemented Slick sliders on WordPress sites many times, but I've never had this error before.
      The site is here.
      The template code I'm using is:
      <link rel="stylesheet" type="text/css" href="/site/templates/scripts/slick/slick.css"/> <script type="text/javascript" src="/site/templates/scripts/slick/slick.js"></script> <?php // if (count($page->home_header_image) > 0): ?> <div class="home-featured-image slick-carousel"> <?php foreach($page->home_header_image as $image): ?> <div class="slide"><img src="<?php echo $image->size(1280,420)->url; ?>"></div> <?php endforeach ?> </div> <?php // endif ?> <script> (function($) { $('.slick-carousel').slick(); })( jQuery ); </script> The JS error I'm getting is:
      TypeError: $.proxy is not a function. (In '$.proxy(_.autoPlay, _)', '$.proxy' is undefined)
      As you can see, I tried wrapping the JS call in noconflict, but that doesn't help. 
      What am I missing?