So this has been bothering me, and maybe I’m underthinking this, but doesn’t it seem like Javascript frameworks these days are not only breaking the unobtrusive scripting mantra, but also breaking MVC? Example from knockout.js’s website:

Why on Earth would it be a good idea to “encapsulate data and behavior into a view model”, as their website suggests? Well, to “get a clean, extensible foundation on which to build sophisticated UIs without getting lost in a tangle of event handlers and manual DOM updates.” I’m really on the fence about this. While I’ve always suspected MVC can sometimes complicate development and refactoring, these days I live by unobtrusive scripting. HTML holds your structure. CSS holds your stylesheet. JS holds your business logic. SQL, JSON, XML, etc. hold your data. Why mix and match all that crap in your HTML file? Just because you can, doesn’t mean it’s a good idea, that’s why we all stopped doing that method years ago. And it’s not just Knockout doing this, it’s nearly every framework these days.

So to be fair, there are definitely arguments in some cases against MVC. Likewise, there are arguments against unobtrusive Javascript. For instance, jQuery event handlers can be used irresponsibly and make it easy for your designers to screw up the logic by renaming a class or restructuring the tag hierarchy. I’m definitely familiar with this. And with MVC, I can see the advantages of forsaking it in the backend for some projects since it’s often times building the view itself based on logic. However, in the case of Javascript, your view has already been generated so I fail to really see the benefit of decoupling them.

What is the best way to go about this problem? Honestly, we can chase our tails on MVC and UJ for another decade, but I think the only way to solve this is with smarter IDEs. Can you get “lost in a tangle of event handlers”? Sure, I guess. But you can also get lost in a tangle of MVVM… as a veteran of the “onclick=” era, you can trust me on that. We should demand a web development IDE that makes it easy to manage event handlers and functions, representing them visually in some fashion, and linking them to objects from the HTML side so we can instantly see what logic is attached to them. Then we won’t have to wade through tons of text files to locate what we want. This is the year 2013, why do we continue to pretend this problem doesn’t exist or doesn’t need to be solved?

I don’t mean to sound all negative; modern Javascript frameworks can do some cool stuff… automatic DOM updating, templating, ease of code generation from the backend, etc…. so for some projects, this is absolutely wonderful and perhaps merited, but honestly I can’t think of an everyday use for them that wouldn’t make things needlessly complicated. jQuery forever changed the way we code… it’s a great general-purpose framework that makes it easy to do event handlers and DOM updates, so in a way, doesn’t that already solve the problems that MVVM frameworks are trying to “re-solve”?

In closing, some of these MVVM Javascript frameworks infuriate me and make me want to develop my own cleaner, friendlier framework or IDE. It also makes me reflect on previous posts suggesting that we might be regressing back into 90’s web development; now I’m starting to think it really is happening.