Can Sencha Touch fit well with a MVVM pattern like that of KnockoutJS?

Question

I am currently building a web-app on top of KnockoutJS - true, programming bliss to use!

I have reached a stage were I need to add a mobile development framework and have been contemplating my choices.

I am currently inclined to go with Sencha Touch because of its maturity and unique plugins which I need.

My only worry is will Sencha Touch's, OO + declarative javascript coding, be a good fit with a MVVM framework such as Knockout?

I mean Knockout leverages off the concept that a View (HTML page) will invoke the model by data-binding. ExtJS (Sencha Touch) does not enrich a View... instead it expects that all the HTML content gets written declaratively.

Am I dealing with oil and water here? What's your thoughts.

Note: I am interested to know if these two different architectures will go well together. Less interested to hear about how Sencha Touch compares to other frameworks out there.

Answer 1

GluJS provides MVVM for both ExtJS 3.x and 4.x . Sencha Touch binding is in the pipeline. These guys also provide a neat specification (SVVM) approach. This stuff should really be part of the Sencha core code base and the ExtJS 4.x class model would be a perfect fit as 4.x can provide hooks for the two way binding that GluJS uses.

DeftJS: Another nice option that has been well supported is DeftJS; an open source lib that adds MVC with ViewControllers (so not quite full MVVM) to both Sencha ExtJS and Touch. It also adds inversion of control (IoC) and Promises/Deferreds for cleaner asynchronous coding.

Update ...

Sencha ExtJS 5.x now supports full MVVM with View Models and we expect that the next major release ... Sencha Touch 3.x ... will likely do the same. ExtJS 5.x was also updated to include the same core classes and class model as Sencha Touch so this make it even more likely that Touch 3.x will match the same View Model as ExtJS 5.x .

KnockoutJS does what it does very well but it's just one part of what you need. The down side is that you end up having to go and hunt for all the missing pieces and then play "version me if you can" crossing your fingers that all the bits are still supported next year by "someone". In contrast, Sencha APIs provide most of what you need to build and maintain the whole app under one version cycle. Check out the heading "The Modern Web Stack" under this blog post.

Answer 2

This is oil and ... a different sort of oil. Sencha Touch has its own MVC'ish architecture with data binding and templating, and also a huge amount of other stuff like mobile widgetry, event handling, theming, charting & visualization libraries etc. I would forecast that you'll have severe difficulties trying to mix the two. But if you manage to do it, we'd love to hear about it (I'm a sencha person)

Update: As Tony mentions below - glu.js for Sencha has come out since I answered this question - http://www.conarrative.com/glujs.html. It's pretty much exactly what you're looking for if you want a MVVM style vs. a MVC (and we like their approach)

Answer 3

It's definitely possible and i did use both for my last project. However you need to let go knockouts most interesting part: dom element bindings and most of the stores' abilities. Instead you need to listen view model changes and update ExtJS views accordingly. Not all the ExtJS components are view bindable, lets take sliders for example. Since I am a Flex person (you can bind anything in flex and to be honest everything else sucks (yep even sencha) after getting used binding with just typing {}) I felt something wrong and used knockout for my model. We're talking about var a updating var b updating var c on change here so knockout was perfect there. A lot had to be done by hand, like model view bindings and in the end i can't say i'm proud of the result since it is not the most organized code (looks pretty ugly actually) and I wouldn't recommend it unless you have a lot of dependencies between your models.

Answer 4

I wrote a blog post that outlines one approach to a MVVM pattern in Sencha Touch that uses Sencha Touch's built-in MVC technology without replying on another framework.

Essentially the idea revolves around the fact that Sencha Touch is very "store-based": when a record is changed, the event fires on the record's store(s), not on the record itself. So if we associate the xtypes of model-views with a store, we can simply iterate over those views and update them as needed when a record changes.

In total this solution is just a couple dozen lines. It's a good lightweight alternative if you're not up to learning another framework like GluJS.