How to combine JMVC (javascript-mvc) and server side MVC together

Question

I have asked this quesion few days before here and no one answered it.
I had asked it in forum.javascriptMVC.com too and now I have a answer, however I need a a bit more idea.

Question:

I read javascriptMVC's documents and I loved it. 
But I don't know how to use it in a large scale project.

I think on the server-side a MVC framework is needed or can help so much. And I've worked with server side PHP frameworks.

I am confused, my understanding of JavascriptMVC projects is that they handle client side events on the browser capture events, execute AJAX requests, manage the responses/data from the server and also show them to user in a graphical interface.

I know that in PHP MVC projects we also have controllers (and actions) that any of them is a separate page with a single entry point, my point is that these pages are whole HTTP requests.

I think the combination of these two frameworks would be in a form of a single or few heavy files (including js , css , imgs etc) that loads and managed by another Javascript libary such as steal.js. Now user can work with site and its actions (as events) that result in running js functions that may change something in the UI or cause a AJAX request, as in Yahoo Mail where most things happens in one page.

So how will this affect the design of controllers and actions in PHP ? I mean normally in PHP MVC frameworks a lot of controllers and actions means a lot of pages. I think because of AJAX the number of controllers and actions should be actually less. I also think because of JMVC most controllers (and actions) should turn to AJAX responders, however how are layouts and views to be handled in this context?

Finally

• I want to know about different aspects of using this method(JMVC+MVC). (I am using Yii as my server-side MVC framework and JavascriptMVC as my client-side MVC).
• I also want to know about management of data on the client-side.
• I would like to understand how AJAX and web-sockets could be used, where we can use AJAX and where we can use websockets?.
• I want to understand about local-storage how we can use it for simulated page data management and maybe caching, how we can cache data coming from server as JSON in a form of a page? I am working on a very large project and I want to build its foundation very strong.

Vulpine

and alex from forum.javascript.com said this. 1) Generally with JMVC you are building single page applications (though you may have several pages for complex app with different layouts and share loaded code between) 2) with JMVC you will render all your views on client side using templates (EJS, Mustache) 3) on server with controller's actions should implement JSON API (RESTful or similar) - so your server responds with data, not html.You will represent this data to user using client logic (models, views, controls) if any body has other idea please help me. – Vulpine

It seems to me that javascript frameworks don't offer examples of working with a server side framework. – Feriga

As normal when a server side controller is routed to by a http request it will return a response in the form of a view (html markup). If the http request was an AJAX request the response from the server side controller would be returned to the AJAX callback. In this way javascript can retrieve data from the backend through a URI. This is the method that I currently use with the Kohana framework and using jQuery for generating http requests. – Feriga

I would however like the question to be answered, are there any javascript MVC frameworks designed to work with a server side backend instead of trying to replace the server side framework entirely. I've looked at Ember.js and in their example the entire application was built on the client side. – Feriga

ok, I participated :) – Feriga

If you want more detail, you have to say what you want more detail about. – Liederkranz

yes more details plz.I want to know about different things in this method(JMVC+MVC).Im using yii as server-side framework and javascriptMVC as client-side mvc. and also I want to know about managment data in client-side. and about how AJAX and websockets could be used(I mean in where we can use AJAX and where we can use websockets?). or about local-storage how we can use it for simulated page data managment and chaching maybe.I mean how we can cache data caming from server as JSON in a form of a page? I am working on a very large project and I want to build its base very strong. thanks a lot. – Vulpine

To answer your question about when to use AJAX (REST) and when to use websockets, it really depends on your application needs, do you need real-time (up to the second) data from server that changes unpredictably? Depending on your application (do you need full duplex connection for data?) and your user's browsers (currently only Chrome supports it), you may find more advantage in using websockets. (You can read more about websockets) Local storage can be used for non-sensitive data that doesn't change often from each user's visit. eg. profile settings – Chart

Answer 1

Say that you jave a JMVC framework where

• The model gets data from the server using AJAX request - expecting JSON results.
• The view does not rely on the server, for more that providing the raw HTML.
• The Controllers do not rely on the server, for more that serving the JS files.

Essentially you use the server what it "should" be used for, data storage and processing, while you let your client browser handle all the tedious stuff.

Now, lets see how to define a server-side framework. As I see it we have several options, all of them fairly similar, albeit somewhat different (all returning someing in JSON format):

• A fully fledged MVC such as cakePHP
• Custom implementation
• WebService implementation

Personally I would use a WebService, and I already have. Or rather, I used a WebSocket based JSON-RPC WebService. Using a fully fledged MVC will have it's drawbacks in maintainability and, not insignificantly, server load. But it is very possible, just implement a view which formats the page as JSON...

Making a JMVC client does not, in my view, mean that it cannot request new HTML from the server. But it does mean that that requested HTML should be free of data, other than meta-data the Java-View needs to know where to put data recieved from, for example, the WebService.

So a main page in the JMVC could just contain a single

<div id=content></div>

and menu clicks can fetch a subpage from the server and load the content into content. Then that loaded content can contain some more javascript which starts WebService requests to get data from the server, to display in the empty placefolders it in turn contains.

Liederkranz

Answer 2

First check https://stackoverflow.com/a/4458566/718224 after that you can move forward.

---

Try this (from https://mcmap.net/q/901683/-should-i-use-mvc-both-on-client-and-server)

No, you don't need to use it server-side, but it will help with organization / separation of application and business logic. Depending on the scale of your application, that could help tremendously in the future.

The key is just making sure you organize your backend code well, otherwise you will end up with a monolithic and/or difficult-to-maintain codebase.

Server-side views would contain your HTML and any JavaScript that may or may not make requests to the server. This assumes that you are actually using PHP to build the pages that a user navigates to.

If you have a static html page that builds itself using AJAX requests, then you may not need to use server-side views at all. Your controllers would more than likely be outputting JSON data. If this is the case, it doesn't make models and controllers any less useful.

---

Try this (from https://mcmap.net/q/901683/-should-i-use-mvc-both-on-client-and-server)

If you are using any of the major PHP frameworks (CakePHP, Code Igniter, Symfony, etc.) then you ARE using MVC already. If your server side logic is more complex than just a few really simple scripts than you probably should be using one of those frameworks listed, using MVC on the server and the client.

Many (most?) larger web apps being built today are moving towards using an MVC framework for both client-side and server-side application code. It's a fantastic pattern for separating concerns for many large applications, especially request/response server apps and event-driven browser apps.

---

Try this (from https://mcmap.net/q/901683/-should-i-use-mvc-both-on-client-and-server)

Backbone.js connects your application over a RESTful JSON interface. I honestly find that it works wonderfully in conjunction with the MVC framework. If you build a RESTful API, you can let you server manage CRUD updates quite easily. All your server side code will be responsible is saving and sending back JSON objects to Backbone.js. Then let most of your logic and magic happen within the Backbone.js framework.

---

Try this (from https://mcmap.net/q/901684/-javascript-mvc-frameworks-and-server-side-frameworks)

First, a client-side MVC framework like Backbone isn't just for single-paged apps. You can also use it to add some rich interaction to one or many views of a more traditional app. They simply provide structure and data abstractions on the client.

Next, these client-side frameworks are designed specifically to work with your back-end MVC frameworks. Backbone.js (since you tagged it specifically) models and collections work with REST services. They will talk via GET/POST/PUT/DELETE verbs and will ultimately communicate with your controllers on the back-end when they make asynchronous requests.

In the case of Backbone, it talks JSON instead of HTML. In the case of Rails, this is really easily handled in the controller. If the request is an HTML one, then you return a view as HTML. If it is a JSON request (*.json or Content-type) then the controller returns a JSON representation of the data. I am assuming that it is as easy in Django as it is in Rails to have the same controller respond to multiple content requests (HTML, XML, JSON, etc)

may this help you.

Arietta

Advait, it's ok to refer to other answers, but it's not ok to just copy-paste them directly without attribution. The first three sections are just copies of the answers to this question and the last is a copy of this answer. If you copy text from other answers or other web sites, please provide a link to the original and make it more clear that you did not write the text yourself. – Camelliacamelopard

@Juhana, ok i understand thanks. i changed it after sometime. – Arietta

Answer 3

client side web apps and rich client side web pages often use jmvc backbones and etc. and with that kind if js libraries and HTML5 technologies like webstorage you can have a more applocation like websites that all things happens in client side like templating management and etc. and just we have ajax request/response to servers to get/set data or update status. and abput first section they are right a jmvc site are more like a single pages websites. ie hotmail yahoo , etc.

Suitcase