Can Sencha Touch work well with the MVVM pattern like KnockoutJS?

Question

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

I have reached the stage: I need to add a platform for mobile applications and consider my options.

Currently, I tend to go with Sencha Touch because of its maturity and the unique plugins that I need.

My only concern is Senca Touch, OO + declarative javascript coding, will fit well with MVVM framework like Knockout?

I mean, Knockout uses the concept that a View (HTML page) will reference a model by binding data. ExtJS (Sencha Touch) doesn't enrich the view ... instead, it expects all HTML content to be written declaratively.

Am I dealing with oil and water here? What do you think.

Note. I am interested to know if these two different architectures will blend in well. It’s less interesting to know how Sencha Touch compares with other frameworks.

Answer 1

GluJS provides MVVM for ExtJS 3.x and 4.x. Sencha Touch is tied to work. These guys also provide a simple approach (SVVM). This stuff really should be part of the Sencha core code base, and the ExtJS 4.x class model is perfect because 4.x can provide the two-way bindings that GluJS uses.

DeftJS . Another good option that has been well supported is DeftJS ; An open source lib that adds MVC with ViewControllers (so not quite complete MVVM) for Sencha ExtJS and Touch. It also adds inverse control (IoC) and Promises / Deferred operations for cleaner asynchronous coding.

Refresh ...

Sencha ExtJS 5.x now supports full MVVM with view models, and we expect the next major release ... Sencha Touch 3.x ... is likely to do the same. ExtJS 5.x has also been updated to include the same core classes and class model as Sencha Touch, so it is even more likely that Touch 3.x will fit the same view model as ExtJS 5.x.

KnockoutJS does what it does very well, but this is just one part of what you need. The downside is that you need to go and look for all the missing parts, and then play the “version of me if you can,” crossing your fingers so that all the bits are still supported next year by someone. In contrast, the Sencha APIs provide most of what you need to create and maintain an entire application within a single version cycle. Check out the “Modern Web Stack” heading for this blog post .

Answer 2

This is oil and ... another oil. Sencha Touch has its own MVC'ish architecture with data binding and templates, as well as a huge number of other things, such as mobile widgets, event processing, thematic, graphic and visual libraries, etc. I would suggest that you would have serious difficulties trying to mix them. But if you manage to do this, we will be happy to hear about it (I'm a sancha person)

Update: as Tony mentions below - glu.js for Sencha came out since I answered this question - http://www.conarrative.com/glujs.html . This is pretty accurate what you are looking for if you want the MVVM and MVC style (and we like their approach)

Answer 3

This is definitely possible, and I used both for my last project. However, you need to let go of the knockouts for the most interesting part: bindings of dom elements and most of the stores features. Instead, you need to listen for changes to the view model and update ExtJS views accordingly. Not all ExtJS components are visible, so you can take the sliders. Since I'm a Flex person (you can bind something in flex and, frankly, everything else sucks (yep even sencha) after you used the binding, just typing {}), I felt something was wrong and used the knockout for my model. We are talking about var, updating var b, updating var c when changing here, so that the knockout is perfect. Much had to be done manually, like binding model bindings, and in the end I cannot say that I am proud of the result, because it is not the most organized code (it looks pretty ugly in fact), and I would not recommend it if There are not many dependencies between your models.

Answer 4

I wrote a blog post that describes one approach to the Sencha Touch MVVM template , which uses the built-in MVC Sencha Touch technology without responding to another framework.

In essence, the idea is that Sencha Touch is very "store-based": when a record changes, the event is triggered in the storage (s) of the record, and not on the record itself. Therefore, if we map the xtypes of the model’s views to the repository, we can simply iterate over these views and update them as needed when the record changes.

In general, this solution is only a couple of dozen lines. This is a good easy alternative if you are not learning another structure such as GluJS.