Goodbye jQuery - you were awesome!

It's time to let go, and letting go can be a bit tough on the soul. I remember when I started using jQuery I thought this is the best thing that happened since sliced bread - it was fun, it worked very often (as opposed to plain JavaScript in those days) and it worked cross browser: AWESOME! 

Time to say goodbye

But now it's time to say goodbye. If you've been in the Microsoft web-ecosystem for a long time you will be very surprised to hear this - so please let me explain. 

1. jQuery basically builds on the premise that you create an HTML setup - like a few div, span and button tags - and then "inject" both events and changes from "outside" - usually after the DOM has been fully setup. So the kickoff is usually a $(function() {…}) which ensures than this kind of binding happens once the DOM is here.
2. Then within our jQuery code we usually use special selectors like ".rotator" to find all the tags we're about to modify, apply some changes, and then wait for the next event. 
3. Once an event kicks in - say a click - we again will use selectors to navigate the DOM, apply some changes (like toggle show/hide, start an animation, etc.) often by adding / removing CSS-Classes, and waiting again. 
4. And when all is said and done, jQuery has a great simple ajax-helper to get things done. 
5. jQuery also has loads of plugins… 
6. …and themes 
7. …and UI widgets 
8. …and handles cross-browser stuff 
9. ...and much more

Awesome, right? 

Here's the catch: the basic development model works great for controlled environments and simple functionality. 

When we go any further, things begin to get difficult. If you take a step back and analyze the situation, and remember all the times you cursed when a selector or a change had unexpected side-effects, you'll have to admit the programming model is rather hacky. 

The core problems: no clear model/view binding and hacky outside control 

All the binding and changing strongly relies on "outside control" of your DOM which is not fully reliable and can easily affect other items as well. In addition to the side-effect which can be worked around with enough time, there is also the lifecycle of the application: when you create a real tool (like a UI for a data-system) which does not reload for a long time, things get hairy - because it's very easy to make DOM-changes (adding classes etc.) which cause problems later on because the application didn't expect it. Since there is no real model/view binding a lot can get out of sync with time if you're not extremely disciplined. 

This all didn't matter much when the page reloaded every few seconds, but now that an AJAX-style app can stay on screen for hours, it matters a lot. It also was ok with simple in-page image-rotators, but breaks down as your system scales into complexity. You can of course compensate a lot of this with brains - but it's an expensive price to pay. 

The future is moving away from jQuery 

If you've been looking in to the open-source JS-world, you'll notice that many plugins are proud to offer a version which works without jQuery. Be it JSPlumb, angular-toastr and more. 

So let's do another quick review - looking at the situation from 2015. 

1. Performance: jQuery has a real performance penalty, both in page-load-time as well as execution time, since it's usually in charge of the entire DOM. So even if you "only need a small part" of the DOM, jQuery still has to navigate everything. This is especially true for larger pages - like portal-style DNNs or single-pagers which are so popular now. You can optimize around this, but it's hard work. Leaving jQuery out can easily multiply perceived user performance. A common example of this performance hit is a dnn-page in edit-mode with a lot of modules. 
2. Cross-browser 
   1. not very important any more as most browsers are sticking to the same standards 
   2. AJAX - not a big issue any more 
   3. DOM selectors not very important any more as most browsers support much of this + it's actually one of the core problems - if you have view/data binding, you don't really need selectors 
3. Themes - never really caught on, and most of us use bootstrap anyhow 
4. UI-Widgets - many alternatives available, and these usually require Themes 
5. View/Data-Binding - almost all alternatives are better - knockoutJS for getting started, AngularJS once knockout gets too small/slow for your needs (or if you want to skip the knockout-phase) 

Summary and Future 

Basically the necessity for jQuery has dropped dramatically, as has its value, while the "cost" of using it is rising as JS-Apps become more complex and stay alive much longer. We from 2sic are moving out of it as fast as we can - and we believe so should you.