Find a post...

DNN-Connect Blogs

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.



Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see forge), an open source module for creating attractive content and DNN Apps.



Read more posts by Daniel Mettler
Daniel Mettler learned programming with the bible translation computer of his parents, deep in the jungles of Indonesia. Since he was only 12 years old at that time and the BIOS only had a version of BASICA, that's what got him started. With 16 he went back to Switzerland and learned German and basic city-survival skills. Equipped with this know-how he founded 2sic internet solutions in 1999 which was focused on web solutions on the Microsoft platform. After a few self-developed CMSs 2sic switched to DNN in 2003 and has been one of the largest partners (17 employees, 700+ projects) in Europe. Daniel is also the chief architect behind the open source 2sxc, a strong promoter of standardization (boostrap, patterns, AngularJS, checklists, etc.) and loves to eat anything - dead or alive. His motto: if the natives eat it, it game.
Comment(s)

Hosting liberally provided by

Philipp Becker 6007 7
Geoff Barlow 543 4
DNN-Connect 431 6
Peter Donker 5052 30
Christopher Hammond 679 2
Olivier Jooris 418 1
Daniel Mettler 12001 88
Clint Patterson 1 1
Jos Richters 65 1
James Rosewell 325 2
Will Strohl 1546 27
Ernst Peter Tamminga 436 4
Barry Waluszko 2776 2
Declan Ward 439 1
Gifford Watkins 722 9
Torsten Weggen 2667 3