Podcast Episode Details

jQuery to Vue.js

---

Episode 32

---

With Vue.js' popularity steadily rising, many of you are probably thinking of migrating from jQuery.

Segment 1 - State of jQuery

• https://jquery.com/
• jQuery is a javascript library mainly targeted at HTML document traversal and manipulation, event handling, animation* and ajax requests.
• Meant to simplify your code and reduce the amount you would have to write doing simple things such as
  • Assigning event listeners to all elements of the same class
  • Creating DOM elements such as DIVs
  • Using the $.ajax shorthand to interact with API’s/server calls
• So main theoretical advantages are
  • Code becomes easier to read
  • You write less code
  • Familiarity, lots of developers have used jQuery for years and can write it without looking at documentation. Switching from something you are extremely familiar with can be a tough and costly venture
• jQuery has now been around for over a decade (since 2006) and as with everything in our field, it has started to be seen as ‘ancient’ technology. I wouldn’t agree with that kind of labeling but having used jQuery for the better part of my web development career it does have some pitfalls
  • Transitions and animation rendering isn’t well optimized and can lag
  • Large transversal are often bulky and execution time lags in comparison to native Javascript solutions
  • Javascript api’s have improved over the past decade to the point where it is easier to implement and has more features then a jquery solution
• With the emergence of large javascript frameworks like React and Vue.js jquery has lost some ground as integrating with these frameworks, although possible, is usually viewed as resource costly and redundant

 

Segment 2 - From jQuery to Vue

• As with anything new, it will take some time to adapt to a new way of developing when going from your typical jQuery workflow to a more framework based Vue.js workflow
• There are key differences with how jQuery handles things vs the way Vue does. Examples of those differences:
  • Assigning a function to DOM element such as a div or a button
    • In jQuery assigning a function is done in the script tag by using the $(‘.class or #id) selector and then extending it with a .click/.change(function(){dosomething;})
    • In Vue a dom/template element is tied to a method that is created in the vue instance. You can assign them to any event weather it be a click event or a change event using the @click, @change syntax on the dom element
  • Transitions/Animations
    • jQuery has plenty of . extenders that handle simple transitions like fading in and out (.fadeIn .fadeOut) and most other simple animations. They can be activated within your js scripts on any element using the typical $ selectors. These do not use css animations or transitions and have notably worse performance then them
    • Vue has a tag that can then be tied to a css animation or transition. The transition can be activated on any state change, such as a simple v-if show hide
  • Adding and removing classes conditionally/programmatically from DOM elements
    • jQuery can do this by using the $ selector to get all eleme

      ---

      Published on 6 years, 9 months ago