JavaScript MVC Alternatives

Comments Off on JavaScript MVC Alternatives// Posted in Uncategorized by on 05.05.12.

I’ve been heavily working with jQueryMX for my latest web UI project, a JavaScript MVC chosen by my client. I’ve been wondering if there are alternative approaches. MVC wasn’t invented for UI after all, and quite often I find it confusing whether a certain piece of code should go in the model, view or controller.

Fortunately I ran across a few interesting alternatives lately and decided to share them. If you’re going to do some heavyweight JavaScript lifting for your next web app, and you feel experimental, you might try some of these JS frameworks out.

MVVM = Model View View-Model

This pattern was made for event driven UIs, thus making it perfect for web apps. Instead of writing loads of GUI code, it allows binding elements from the view to the model. Thus when one changes, so may the other.

Knockout.js uses this pattern. As you can see in their example code below, the HTML defines not only the layout, but also the events on each UI element and what it should trigger. The backend JS code binds to it and says what to do:

knockout.js example code

knockout.js example code

On first look I was shocked. Everything I know about JS so far, especially due to jQuery, was to keep Kosher and separate behavior from the view, i.e. the JS from the HTML. This framework puts at least part of the behavior in the HTML which is a big no no regularly.

On second look, what they did with a few lines of code would take plenty more if I had to write this otherwise. It also allows describing the UX in the HTML first and writing the backend code later, a rather cool way of development for a UX driven developer like me.

The real test would be to actually use it for a big ass web app and see what happens when the shit hits the fan. Does it work well with plugins and UI frameworks? Does it tango with AJAX? Is it easy to maintain?

Bottom line – looks really promising, needs to prove itself in big complicated web apps.

BEM = Block Element Modifier

One of my clients recently forwarded this Smash Magazine blog post about BEM. It was developed by Yandex, a big Russian search engine. Here is their full length article in GIT.

So, what is it all about? Elements are basic UI elements such as text boxes and buttons. Blocks are either groups of elements or other blocks, such as search (input + button), or site header (logo + nav + search).

The idea is that blocks are independent and can be glued anywhere in your project, thus allowing code reuse. In case you want them to be a little different somewhere in your app, a modifier is used. It could be implemented as an extra CSS class that’s appended to the HTML tag.

There’s logic to their approach. Recently I’ve separated myself UI elements in a web app to widgets and components, which correspond exactly to their separation between blocks and elements. However, is it worth it to throw away what we’ve learned from MVC and organize our code only by visual means?

Also, there’s too much custom stuff involved with BEM. They use their own language called BEMHTML which is based on XJST, their own JavaScript templating engine. Other frameworks have started as in-house frameworks, so maybe I’m being too suspicious. Still, I don’t see enough organized documentation in English, and they barely discuss the JavaScript behavioral part of it all which makes me reluctant to even try it out.

Bottom line – nice to see a different and logical approach, needs way more time to mature.

What to do? I may try knockout.js to prototype my next project and see how it handles. If it works well I’ll go with it, otherwise I’ll probably revert to the web’s most popular framework – backbone.js or stick with jQueryMX and JavaScriptMVC though it seems less popular.

Both comments and pings are currently closed.

Comments are closed.