[rtpg]

There's a lot of jquery code out there that's basically lines and lines of for loops to maintain a state machine. Stuff that all these nice frameworks handle for you in a clean, bug-free way.

Almost every day of the year,

   <div id='business-class' ng-class="{selected:seatType=='business'}">
     Business Class
   </div>

feels better to me than:

    $('#seat_type').on('change', function(){
     if(this.value == 'business'){ 
         $('#business-class').addClass('selected');
     } else {
         $('#business-class').removeClass('selected');
     }
    });

There are other considerations, angular/React aren't the only solutions to this... but having something to handle this sort of stuff cleanly and generally is a no-brainer to me.

jQuery's an amazing tool at the low level, but there are some higher-layer stuff we can easily apply to manage state.

[petilon]

Your Angular example appears to be an incomplete example, the jQuery one is more complete, so is this a valid comparison? When using jQuery you can still embed logic inside templates using something like https://github.com/wisercoder/uibuilder which is really tiny.

[rimliu]

   $('#business-class').toglleClass('selected', this.value === 'business');

And $('#business-class') should be in a var.

[rtpg]

this is indeed a cleaner example.

I think if you are diligent about your layout, you can separate out your DOM operations from your logic operations (think Flux) and end up with nice and simple code like this.

Personally I like the "rails" given to me in Angular/React (especially given I know how to circumvent them). I also am more productive in them. But I bet a lot of skilled programmers can go far with just simple tools like jQuery.

At least for me, having a paradigm enforced is useful, especially on larger projects with multiple stakeholders.