jQuery is a great library. It came to be around the time when IE6 was the number one browser. Back then, there were quirks and differences that were tedious to work around and jQuery was the perfect tool for writing cross browser code.
Today, however, web browsers have advanced a great deal from those days. We can comfortably use all features provided by ES5, and we have at our disposal awesome HTML5 APIs that make working with the DOM so much nicer. Developers are now at a position where they can choose to leave out jQuery for some projects, and still retain their productivity.
Don’t get me wrong – jQuery is still a wonderful library and most often than not you will be better off using it. However, for smaller things like simple pages with limited JS interactions, browser extensions and mobile sites, you can use vanilla JS. Here are 10 tips that will help you in your endeavor.
1. Listening for Document Ready
The first thing you do when writing jQuery, is wrapping your code in a $(document).ready() call, so that you know when the DOM is ready for manipulation. Without jQuery, we have the DOMContentLoaded event. Here is how it is used:
(Play with our code editor on Tutorialzine.com)
2. Selecting elements
Once upon a time, we could only select elements by id, class and tag name, and jQuery was a life-saver with its smart css-like selectors. Browsers have caught on since, and introduced two imortant APIs – querySelector and querySelectorAll:
(Play with our code editor on Tutorialzine.com)
3. Attaching and removing event listeners
Listening for events is a fundamental part of building a web application. There used to be two major camps that differed in how this was done – IE and the rest. But today we just use addEventListener:
(Play with our code editor on Tutorialzine.com)
addEventListener used to require a third argument (useCapture) but that has been optional for some time. As a result, the code looks even more jQuery-like.
4. Manipulating classes and attributes
Manipulating the class names of an element without jQuery used to be very inconvenient. Not any more, thanks to the classList property. And if you need to manipulate attributes, you have setAttribute.
(Play with our code editor on Tutorialzine.com)
5. Getting and setting element content
jQuery has the handy text() and html() methods. In their place, you can use the textContent and innerHTML properties, which we’ve had for a very long time:
(Play with our code editor on Tutorialzine.com)
6. Inserting and removing elements
Although jQuery makes it a lot easier, adding and removing DOM elements isn’t impossible with plain JavaScript. Here is how to append, remove and replace any element you wish:
(Play with our code editor on Tutorialzine.com)
7. Walking the DOM tree
As every true JS ninja knows, there is a lot of power hidden in the DOM. Compared to jQuery, plain DOM APIs offer limited functionality for selecting ancestors or siblings. However, there are still plenty of things you can do to travel across the tree.
(Play with our code editor on Tutorialzine.com)
8. Looping over arrays
Some of the utility methods that jQuery provides are available with the ES5 standard. For iterating arrays, we can use forEach and map instead of their jQuery versions – each() and map(). Just be careful for the differences in arguments and default this value in the callbacks.
(Play with our code editor on Tutorialzine.com)
9. Animations
jQuery’s animate method is superior to anything that you could glue together by yourself, and if you need complex scriptable animations in your application you should still stick with it. But thanks to all the wonders of CSS3, some of the simple cases can be handled with a lightweight library like Animate.css, which enables you to trigger animations by adding or removing class names to elements.
(Play with our code editor on Tutorialzine.com)
10. AJAX
AJAX was another technology that used to be a cross-browser mess. The good news is that we can now use the same code everywhere. The bad news though, is that it is still cumbersome to instantiate and send AJAX requests with XMLHttpRequest, so it is best left to a library. But you don’t need to include the whole of jQuery only for that. You can use one of the numerous lightweight libraries that are available. Here is an example constructing an AJAX request directly, and by using the small reqwest lib:
(Play with our code editor on Tutorialzine.com)
Conclusion
Striving for minimal, zero bloat web pages is a worthy goal that will pay itself in faster load times and better user experience. You should be careful though – nobody would win if you reinvent the wheels that jQuery has given you. Don’t sacrifice good development practices only to bring the byte count down. But there are plenty of places where today’s tips are perfectly applicable. Try going vanilla next time, it might be all that you need!
10 Tips for Writing JavaScript without jQuery
Geen opmerkingen:
Een reactie posten