Modern web development offers an incredible variety of tools, libraries, and frameworks to build web sites/applications. As of 2016, jQuery, React, Angular, and Vue are the most popular front-end libraries/frameworks in use. They can all be used to build and accomplish similar things, but in different ways. What are the advantages/disadvantages of each? How does each approach vary? What do the new tools of React, Vue, and Angular 2 offer that Angular 1, JavaScript, and vanilla JS didn’t?

In this 3 part tutorial series, we’re going to build a simple pomodoro timer as a means to compare vanilla JavaScript, jQuery, React, Angular 1, Angular 2 and Vue.

What is a pomodoro timer?

The pomodoro timer is an easy-to-use productivity method. Using this method, you work in 25 minute spurts with 5 minute breaks in between. Many people find it helpful for helping them focus and work on tasks during the day.

Project Overview

In this tutorial, first we will create a pomodoro timer using vanilla javascript. Then, we will re-create the same pomodoro timer using jQuery.

Here is how the final version of pomodoro timer built using vanilla javascript looks like :

Our pomodoro timer shows minutes, seconds, and gives simple control buttons. It’s a simple timer but can give enormous productivity gains if used right.

Building the Pomodoro Timer : Javascript

Let’s first write the html code to create various elements of the pomodoro timer.

As you can see, nothing fancy here. Just a container with the timer and control buttons. We will be using a background filler that will keep increasing as time progresses.

Let’s apply some css to the above markup to make it look nice.

Now the timer looks nice, but there is no functionality associated with it yet. Let’s add javascript to make it functional.

We will be using object oriented javascript in which all of the variables and functions of the pomodoro timer will be encapsulated inside an object. Below is the basic structure of the code :

Building the  Pomodoro Timer : jQuery

Now we’re going to build this exact same app in jQuery. The HTML and CSS are exactly same as that of above.

First of all, I would like to mention that jQuery is a huge library. In our pomodoro app, we have used a very small subset of the features that it offers. This is the biggest disadvantage of using jQuery for our case because we will be loading entire library and because of that, the page load time will be much higher as compared to javascript’s pomodoro app. In huge pages, using jQuery makes a lot of sense.

In the above code we are using $(‘#minutes’) for caching the minutes DOM element.  As a matter of fact, javascript’s document.querySelector(‘#minutes’) is way faster than jQuery’s $(‘#minutes’). This speed difference could not be realised in a small app (such as a pomodoro timer) but it is relevant for large pages where there is intensive DOM query. Javascript’s document.getElementById(‘minutes’) is even faster than document.querySelector(‘#minutes’). So, the speed of executions has the following order :

document.getElementById(‘minutes’)  > document.querySelector(‘#minutes’) > $(‘#minutes’)

The reason for the above speed difference being, under the hood $(‘#minutes’) boils down to document.getElementById(‘minutes’) wrapped by jQuery wrapper. But when we say $(‘#minutes’), jQuery has to a lot of work in identifying if the argument is a string, does it contain spaces, it starts with a ‘.’ or a ‘#’ or is it a tagname and so on. This extra work takes time and hence reduces the speed.

Although, jQuery is at disadvantage because its DOM query speed is less as compared to javascript but when it comes to code convenience, jQuery is far ahead of javascript.

In the pomodoro app created using javascript, we can easily spot long lines of code whereas in the app created using jquery, the code seems relatively short. That means, if we are using jQuery, we have to type less as compared to javascript to achieve the same functionality. Whereas in javascript there are different methods to query DOM (by id, class and tagname), in jQuery, one single selector takes care of all of them.

Moreover,  javascript’s document.querySelector(‘#work’) will not work in all the browsers. It may break in IE8. On the other hand, jQuery’s $(‘#work’) is guaranteed to work in all the browsers. The reason is, all jQuery’s methods are standardised to work across all browsers.

Additionally, jQuery provides support for chaining which means that we can chain a method call at the end of another method call and save few bytes by saving the amount of code required to be written if chaining was not supported. For example, we can do the following in jQuery :

Here we have chained show() method at the end of css() method. On the other hand, javascript doesn’t support method chaining.

In jQuery, we are using $(document).ready(), to make sure that DOM is ready before we query it. In javascript, we used window.onload event to achieve the same. jQuery’s $(document).ready() event occurs earlier as compared to window.onload of javascript because the latter occurs after the DOM is loaded and all the resources (scripts, images etc) are also loaded.

Last but not the least, while writing javascript code, there is big scope for writing inefficient code. jQuery library on the other hand, is tested over time and highly optimised. Thus, if used carefully, the scope for writing inefficient code using jQery is very less as compared to javascript.

Conclusion

We created two pomodoro apps, one using vanilla javascript and other using jQuery. The two approaches are fairly similar, but jQuery offers an easier syntax in querying for elements and offers shorter (albeit slower) ways of doing things compared to JavaScript.

The differences between libraries/frameworks will get much more interesting in future posts, where we use Angular, React, and Vue to build this same app.

 

40 COMMENTS

  1. you’re actually a just right webmaster. The website loading pace is incredible.

    It sort of feels that you are doing any unique trick.

    In addition, The contents are masterwork. you have done a magnificent process
    on this topic!

  2. Definitely consider that that you said. Your favourite reason seemed to
    be on the internet the easiest thing to take into account of.
    I say to you, I definitely get annoyed whilst other people consider issues that they plainly don’t
    realize about. You controlled to hit the nail upon the top as neatly as outlined out the whole thing without having side-effects , folks could
    take a signal. Will likely be back to get more. Thanks

  3. Having read this I believed it was really enlightening.
    I appreciate you spending some time and effort to put this article together.
    I once again find myself spending a significant amount
    of time both reading and posting comments.

    But so what, it was still worthwhile!

  4. Excellent web site you’ve got here.. It’s difficult to find high quality writing like yours these days.

    I really appreciate people like you! Take care!!

  5. Good post but I was wondering iif you cluld write a litte more on this subject?
    I’d be very grateful if you could elaboprate
    a little bit more. Kudos!

  6. Hello there, You’ve done a fantastic job. Iwill certainly digg it andd personally recommend to
    my friends. I am suree they’llbe benefited from tis site.

  7. Started in July of 2008 as a part of Just Develop It,
    Just Host has quickly grown to become mid-sized player in the large
    arena of budget web hosting. With a search option, they
    are able to locate the posts to quench the necessity for
    information. They just choose the cloud solution from the supplier,
    without learning the features or options available.

  8. Post conversion, you’ll be able to showcase your whole product range in internet shopping
    portals and produce high volume organic
    traffic for your virtual shopping portal.
    Now it’s time to upload (transfer) your file (web page
    ) in your host. Since Linux & open source solutions are movable
    and compressed, it is going to consume very less hardware power when compared
    to the one which runs on the server.

  9. Abroad, modified cars long, first appeared in the modified car to better participate in the competition, drag racing, like so many people
    have converted their car engines,. Strict standards and excellence in service is what made Cullitons the premiere limo service of choice for thousands of Torontonians as well as visiting guests
    from all over the world. According to Campbell Fuller, spokesman for the ICA, buyers need to contact their insurer
    before agreeing to a purchase.

  10. Hmm it appears lik your blog aate my first comment (it was extremely
    long) so I guess I’ll juszt suum it up what I had written and
    say, I’m thoroughly enjoying your blog. I
    too am an aspiring bllog wrriter but I’m still new to everything.
    Do you have any helpful hints for first-time blog writers?

    I’d certainly appreciate it.

  11. Good day I am so glad I found your website, I really found you by mistake,
    while I was browsing on Digg for something else, Anyhow I am here now and would just like to say thanks a lot for a marvelous post
    and a all round exciting blog (I also love the theme/design), I don’t have
    time to read it all at the minute but I have saved it and also
    added in your RSS feeds, so when I have time I will be back to read much more, Please do keep up the great
    work.

  12. Hmm is anyone else having problems with the
    pictures on this blog loading? I’m trying to determine if its
    a problem on my end or if it’s the blog. Any
    feed-back would be greatly appreciated.

  13. Howdy great website! Does running a blog such as this take a lot of work?
    I’ve absolutely no understanding of computer programming but I
    had been hoping to start my own blog soon. Anyways, should
    you have any suggestions or techniques for new blog owners please share.

    I understand this is off subject however I simply had to ask.
    Many thanks!

  14. Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point.
    You clearly know what youre talking about,
    why waste your intelligence on just posting videos to your blog when you could
    be giving us something enlightening to read?

  15. When a home renovation adviser is brought in at the beginning of a job, he
    or she can work harmoniously with the contractor to set realistic budgets and timelines.

  16. Appreciating the time and energy you put into your website and in depth information you
    present. It’s great to come across a blog every once in a while that isn’t the same
    outdated rehashed information. Fantastic read!

    I’ve bookmarked your site and I’m adding your RSS feeds
    to my Google account.

  17. After I initially left a comment I appear to have clicked the -Notify me when new comments are added- checkbox
    and now whenever a comment is added I receive 4 emails
    with the exact same comment. Is there a means you are able to remove me from that service?
    Thanks!

  18. hello there andd thank you for your information ? I have certainly picked up anything
    neew from right here. I did however expertise some technical points using this website, as I experienced
    to reload the wsbsite a lot of times previous
    to I could get it too load correctly. I had been wondering if your hosting is OK?
    Not that I aam complaining, but slow loading instances times will very
    frequently affect your placement in google and can damage your high
    quality score if advertising and marketing with Adwords.

    Well I’m adding thiis RSS to my email and can look out for much more of your respective exciting content.
    Make sure you update this again soon.

  19. Wheen I originally commented I appear to have clicked the -Notiify me hen nnew comments aree added- checkbox
    and now each time a comment iis added I get 4 emails with the
    same comment. There has to be a means you are able
    tto remove me from that service? Thanks!

LEAVE A REPLY

Please enter your comment!
Please enter your name here