Wizard flow a good use case for SPA?

[Reagan]

I've been tasked w/ creating a wizard-like, information collection workflow using Kendo MVVM. It was suggested SPA might be a good fit for this project. The basic idea is asking the user at the beginning which options they'd like to include, and then based on those choices, allow the user to configure each in detail using a Next page, previous page "wizard like" workflow. Does this sound like a good use for Kendo SPA? 

One of my concerns is my view model(s) getting too large. I might be able to mitigate this w/ proper object oriented Javascript class composition, but in general, should viewmodel size be a concern w/ SPA? The other concern is having to create a lot of new kendo.View instances to house all the different "content" areas of each pages. In total, there easily could be 40-50 different views for the different content.

I've seen the kendo music store SPA app as well as sushi, but these are very simple apps with only a small handful of different content views. 
Surely I wouldn't want to keep those in memory, right? Any insight on if this is a good idea (and if so) would be the best way to architect the application, would be most helpful. 

I'm sorry if this question seems elementary, I am new to both MVVM and SPA, not to mention modern OO Javascript. I come from ASP.NET MVC mainly.

Thanks in advance!

PS: I've read the three "A Day at the SPA" blog articles by Derick Bailey and the Getting Started SPA guide. I'm just looking for some guidance at this point. 

[Petyo]

Hello Reagan,

Your question is in fact, far from elementary. First of all, I would like to point out that our current SPA implementation is closer to a library of several decoupled building blocks (MVVM bindings, routers, views, templates, etc) than a full blown, monolithic web application framework, like ASP.NET MVC, for example.

While very powerful and flexible, this design leaves most of the application architecture decisions to the application developer. If you decide to follow the SPA pattern in your application, learning more about the object-oriented specifics of the language will be of great help. From there on, you should find the MVVM implementation easier to understand and apply to the case you are facing. 

Providing a concrete answer and detailed guidance for your concrete project requires a thorough analysis of the requirements. At this point, you may consider getting in touch with our professional services department. Once they get familiar with the requirements details, they should be able to advice you accordingly. In addition to that, you may request a proof of concept throw-away implementation, which, in my opinion, would be the best approach in this case. 

Regards,
Petyo
Telerik

[Reagan]

After some research, I have found something I'm going to try. Basically putting all the wizard steps in an array and then loading the "right" view dynamically like this KnockoutJS fiddle does: http://jsfiddle.net/rniemeyer/FyuSD/

I'll post back here when I get something like this working w/ the SPA framework. 

[Reagan]

I've tried, unsuccessfully, so far to convert the above KnockoutJS example to Kendo. Here's my progress so far: http://jsfiddle.net/raygunc/vKBa8/

Any ideas on what could be wrong? 

[Petyo]

Hi Reagan,

I would like to recommend that you extend the ObservableObject to create a new ViewModel class, instead of the runtime method assignment. Additionally, you should use your browser developer tools to debug your code - currently there are several errors reported, due to the incorrect observable object instantiation.

A general recommendation - while somewhat similar, Kendo MVVM and knockout.js have several design differences; converting an example from one framework to the other may be tricky and will result in non-idiomatic code. I would like to recommend that you look through the MVVM documentation resources and live demos instead.

Regards,
Petyo
Telerik

[Reagan]

Thanks for the reply Petyo. I have read and understood the "Intro Tutorial to Javascript inheritance w/ KendoUI" article and I think I have a good grasp on those concepts. However, I'm unable to find any examples where the ObservableObject is extended and used w/ MVVM binding. 

Should I simply extend the Class object and make certain members of type kendo.observable or should I inherit from ObservableObject like you said? Would extending ObservableObject make everything automatically observable? I've updated my example JSFiddle here: http://jsfiddle.net/raygunc/vKBa8/

I'm still getting Javascript errors, so I'm obviously doing something wrong, but not sure what yet. 

[Petyo]

Hi Reagan,

the problem in this case is due to not calling the base class constructor. It should be something like this:

that.stepModels = [
    new Step(1, "Welcome", "basic-tmpl", { message: "Hello and Welcome!" }),
    new Step(2, "Choices", "choice-tmpl", { choiceOne: kendo.observable(false),
        choiceTwo: kendo.observable(false) }),
        new Step(3, "Confirmation", "confirm-tmpl", { confirm: function() {
            that.set("currentStep", that.get("stepModels")[3]);
        }
        }),
        new Step(4, "Congratulations", "basic-tmpl", { message: "You are finished!" })
];

kendo.data.ObservableObject.fn.init.call(this, this);

that.currentStep = that.get("stepModels")[0];

The constructor should be called before the that.get call. In addition to that, you may simplify your code a lot by moving the methods to the prototype object instead of assigning them in the constructor. 

Regards,
Petyo
Telerik

[Reagan]

Thanks Petyo. That makes sense. I have added an init call to the base object. I also have moved my method declarations out of the constructor. I am now seeing the main view being bound. However, the nested template is not being bound for some reason. I also added an alert to the goNext() method but it doesn't seem to be firing.

Is what I'm doing possible with the approach I'm using? 

Thanks in advance. 

[Petyo]

Hi Reagan,

I assume that your progress is the current state of the fiddle mentioned below. There are some things that need to be fixed.

First of all, javascript errors are still present (missing that variable reference, etc). As a general, tip, please keep your browser developer tools open during development; they provide the much necessary feedback for your code state.

Second, you did not convert the Step model to a kendo observable. While not always necessary, this keeps things explicit and makes your code clearer.

Third, you are trying to create a dynamic nested template reference. This is somewhat tricky, but can be achieved using template expressions, which will get evaluated before the actual data-binding process. 

Fourth, your main template is invalid because it features multiple root level elements. 

I applied the changes needed above in this jsbin, and the initial template was displayed correctly.

Now, there are several more mistakes (for example, your next/prev logic does not work because you are comparing functions with numbers), but I hope that you will be able to complete this example from here. Use your browser JavaScript debugger to verify each step of your code and see what goes wrong. 

Regards,
Petyo
Telerik