Javascript is a very popular programming language. It is used for many things such as servers, games, robots, widgets, websites and the list goes on. I feel it's popularity is mainly based on the ability to learn (the basics) very easy. I mean the hello world of Javascript is alert("HelloWorld"); talk about getting started quick:P It is also work on almost anything connected on the internet.
Background
I spend most of my spare time coding widgets, lockscreens, and websites. Throughout the years of working on these projects I have learned to use Javascript better (without jQuery) and it enabled me to make better running projects for iOS.
A love hate relationship
When I began coding with Javascript, I fell in love with jQuery. It just seemed easier to memorize. After awhile of using jQuery and the need to get more out of my projects, I have a little hatred towards it. Now I only use it when I absolutely need to. I will explain why.
jQuery
First off what is jQuery. "jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers." -jQuery.com
In layman's terms and a simplified definition, jQuery allows you to do what Javascript does, but with an easy to use API:)
The Bright Side
In my opinion jQuery is amazing for cross browser compatibility. There are tons of browsers that require "special" Javascript. It is very hard to keep a mental note of everything that doesn't work on each browser, this is where jQuery shines. Since I mainly dabble in iOS and most of you reading do too, we don't need to bother with cross browser compatibility.
Javascript on mobile iOS
When creating lock screens, iWidgets, GroovyLocks, Cydgets, HTML3s etc. We need to make them as efficient and fast as we can. This is mainly due to the lack of processing power we have. I could write the most horrible Javascript, run it on my mac and it will most likely run it with no issues. If I did the same for a mobile phone, crash city. This is why it is very important for us to learn to use Javascript the best we can.
What did you do?
I view different peoples code in the Jailbreak world. It can be from editing someone else's work to fit what my customer wants, testing a widget/lockscreen, or giving pointers on how to fix something. At times this can be very frustrating. Mostly because the original person who created this widget, left the widget in a disaster. Most of the time it's just easier to rewrite the entire thing (plus I sleep better at night). Sadly this is everywhere, people give these widgets away for free so no one really complains, but I hope some of them read this and maybe try a better way of doing things.
Back on topic
Lets look at some code. <div id="city>MyCity</div> is our html. What we want to do is get this element (city) and change the MyCity to YourCity.
How to do this in jQuery and in Vanilla Javascript
jQuery: $('#city).html("YourCity");
Javascript: document.getElementById('city').innerHTML = "YourCity";
Wow, jQuery sure does look better! This is why many people choose to use it. BUT lets do some tests.
Testing jQuery vs Javascript
Lets test the speed of $('#city') vs document.getElementById('city')
Run this test yourself
Clearly jQuery fails behind in this test. 94% slower than Vanilla Javascript. If you look inside the jQuery library you will see exactly how $('#foo') works. It does a lot more than document.get and is the reason it's 94% slower. jQuery must parse the selector string and then search for matching elements. You can even give it a class and jQuery will get it, unlike getElementById as it's named it strictly searches for an id.
Great video about the jQuery Library: Video - YouTube
Alternatives
If your goal is to just get a dom element by its id, create your own function. This will allow you to not have to type document.getElementById over and over, you will easily remember it (because you created the function) and you won't sacrifice the speed by using jQuery.
var getEL = function(el){
return document.getElementById(el);
};
getEL('city'); //Does the exact thing as document.getElementById.
So our code now could be getEL('city').innerHTML = "Your City"; Very simple. You could even add more to the function to check if the file exists or add class lookup.
Conclusion
I could fill this blog post with a lot more tests, but I won't. If you want to view statistics on jQuery vs Javascript simply search jQuery vs Javascript (insert code) jsperf in google. As mentioned earlier I try to create my mobile projects without jQuery. Just for the simple fact I have experienced better performance.
I am in no way saying never use jQuery or I never use jQuery, but just a reminder that you can do these little things in vanilla Javascript and most of the time it will perform better. Just because the Vanilla Javascript code is "bigger" than the jQuery equivalent doesn't mean jQuery is better, and just because you need jQuery library for one thing, you still don't need to use if for everything.
If you aren't familiar with Vanilla Javascript, and just use jQuery because it's easier, here is one of many sites that explain why you may not need jQuery. Also shows jQuery vs Vanilla Javascript, so you could easily translate your jQuery to Javascript.
http://youmightnotneedjquery.com/
Let me know what you thought of this blog post. Should I do more? Is this anything my readers are interested in? Thanks for reading:)
Follow
Previous Article - 7 Free Lockscreens
miWeather Forecast
Zen8
Alizhe
No comments:
Post a Comment