jQuery to Vue.js

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 elements of a particular class, or just a single element with an ID. It can then using the .addClass or .removeClass extension to do either function
    • In Vue.js you have to bind classes to each element using the : notation. So on each element you need a conditional class, like a active class for a button, you assign the :class with a condition. Like active : isActive which binds the ‘active’ class to the isActive data property/variable. So anytime isActive is set to true, the element will gain the active class
• There are many other differences, like Ajax requests, which are handled by the axios library in vuejs and dynamic DOM element creation which is a major feature of Vuejs but is considerably more janky using jQuery.
• In the end making the transition from jQuery to Vue was quite hands on and involved a significant amount of adapting and learning new skills. Not to say it was overly difficult, as we’ve been saying many times in this podcast, having a good base knowledge of pure Javascript makes it easier to pick up new technologies and switch between libraries and frameworks.
• My advice for developers just starting out would be to still get a good grasp of native javascript and then jump into a framework like Vue.js or React. With native javascript getting most of the features of jQuery, it doesn’t make sense for a developer to invest their time into learning it.

 

Useful Resource - Meta Tags

• https://metatags.io/
• MetaTags.io can help you investigate existing, modify, or create meta tags for your website, across multiple platforms
• You’re able to type in a URL, which will pull in all the detected meta tags such as a photo, the title, and the description
• From there you’re able to see exactly what your metadata will look like in Google as well as other popular services such as: Facebook, Twitter, Linkedin, Pinterest, and Slack
• If there’s something you need to add or change, you can do that right on the web page. When you’re done, simply click on the “Generate Meta Tags” button and a new snippet of code containing your changes will be generated so you can paste them into your tags
• Our use cases:
  • We’ve been using this a lot with Webflow recently
  • In Webflow you’re able to set site-wide meta tags, set static ones per page, dynamic ones based on CMS data, and even allow users to edit meta tags specifically via the Webflow CMS with some configuring
  • Because there are so many options affecting meta tags, checking out the metadata in metatags.io really helps us inspect if the dynamic data is working out, or if the customers are filling things out correctly.
  • It also lets us specifically test how metadata looks on all the customer’s preferred platforms all in one place (ie facebook, twitter)

  Web News - Laser Focus in a Scatterbrained Industry

• If you work for a big company, or listen to business gurus, “laser focus” is a commonly used phrase that has essentially become a buzzword of sorts
• It’s generally used to describe the need for a team to focus on something important, such as a new project that’s coming up, or meeting a very important deadline
• Often times it is also used to describe the general direction of a business, especially if a business is new, or is evolving with the times. The administration will generally ask for the staff to remain “laser focused” on their new movement, or business strategy to ensure continued success
• This laser focus is also applied to beginner entrepreneurs when discussing the prospect of success. Gurus will often talk up working in their preferred industry, then bring it back down to earth saying things like “this is not a get rich quick thing, you need to stay laser focused on your goal to succeed, there’s no other way around it”
• At the end of the day being laser focused on a goal is sound advice, but when it comes to complex projects, that laser focused goal has to be more general and can easily still lead you down the path to distraction and eventual failure
• The website industry is all over the place when it comes to almost every single aspect.
• Prices are wildly different from agency to agency for the exact same product
• Building out projects take several different skill sets, or investments into services that essentially act as outsourced contractors (ie developing the site yourself and getting an SEO specialist involved to optimize for Google search)
• Sometimes businesses don’t have any branding ready at all, which results in the need for illustrators and other related artists to make up logos and colour schemes
• Don’t forget about the fact that websites are always online, so when they go down, someone needs to support them, pulling your attention away from new projects that you have on the go
• When you’re starting out by yourself, or in a small team, you’ll inevitably have to become a jack of all trades in order to keep everything running smoothly, especially when you don’t have the capital to hire individuals to run each aspect of the business individually
• Herein like the question, how do you remain laser focused when the industry you’re in is so scatterbrained?
• One possible solution might be to make the goal more general, but if the goal is just to make money, there’s way too many solutions to that problem that will hardly result in laser focus of any kind.
• We suffer from this issue constantly, we’ll say something like “let’s just focus on money the next few months” and before you know if we have 3 app concepts, some marketing plans for client-work, and nothing actually done. Even No BS News was completed for the purposes of the code challenge, but then not published further than that because another possible money making opportunity came knocking.
• How do you remain focused in the web development/design industry?

 

You can find us on...

Facebook | Twitter | Instagram

RSS | Patreon | Spotify

Medium | YouTube | GitHub 

Reddit