JS with MVC(Model View Controller) Architecture

Question

I have created a Web Application Like this: We move step by step , in each step we query user about the data shown in the Data div , on coming to each step , we make an ajax call and get the data in JSON format and fill the new Div with the html content. So , it goes like this Step 1: we color step 1 with green , make an ajax call , get step1 data , form html content of data div and ask ques to user based on data , then after user's response, we move to step 2 , step 3, and then step 4,

I want to rewrite the JS code with MVC Model , which I have never written before, can somebody suggest a good design(what model should have , controller and view.) or direct me to some JS example already written in MVC architecture. User can always come back to any step and see its data again by clicking on Step block. Thanks in advance.

Answer 1

MVC is a design pattern used to help you keep separate and structure your code so each part has specific duties. The model is in charge of data, the view of is charge of presentation of UI and the controller is charge of user interaction. Now that explanation is to be taking with a grain of salt cause the controller and the view is implemented differently across each MVC design you may look at but that's a general explanation.

One thing to note is that there are a several variations to the MVC design pattern such as MVP and MVVM, and there are more so you may see people call it MV*. The asterisk is where the implementation of the design pattern may vary between implementations. The main thing is that they all attempt to solved the same fundamental issue but "MVC" can slightly vary especially when you started researching MVC on the client-side versus the server side.

There are many js frameworks out there that implement a MVC like design pattern, Backbone, Knockout, Angular and Ember to name a few. You can choose to use one of them or you can hand roll and write your own for academic purposes.

I would suggest to Google "TodoMVC" and go to that website. It has a long list of frameworks and you can see how they developed that todo app in each framework. After looking through each you can see which framework syntax you like and try it.

I use ember.js but I'm not going to say "oh use ember it is the best" look around try them all cause you will learn something from each one. I would say though that backbone, Angular and Ember have large communities and many resources for you to utilize.

Both angular and Ember website do a great job of taking you through building a app to get you rolling and have great documentation. If you want to hand roll or just get a better idea about MVC how it relates to the client and how the various frameworks approach a solution. I would suggest reading "Javascript web applications" by Alex MacCaw it's pretty good.

Well hope this helps when you have some code post it and someone on stack overflow will be able to help. But this is a starting point to get you there.