How to use jQuery in MVC Architecture?

4

We know that MVC is a standard of software architecture (design pattern)  which makes a separation of:

  • View (UI),
  • Template (Business Rules),
  • Controller that communicates between the two.

Of course, MVC can be adopted as a template to create your own architectural style to solve a more specific problem.

Example Project 1:

Directories:

> Model
> Controller
> View
  > UX

Execution Diagram:

View → UX → Controller → Model

User enters with data of register in View, when sending is passed to UX jQuery that is done the validation of information from the client side and sent to the controller, the controller only redirects to the model that does the server side validations .

Sample Project 2:

Directories:

> Model
> Controller
> View

Execution Diagram:

View → Controller → Model

User enters with data of register in View, when sending is passed to Controller jQuery that the validation of the information of the client side is made and sent the model that does the validations of the server side.

When I asked why this separation took place the answers were like this:

Project 1:

jQuery is part of the user interaction, so it is present in the view.

Project 2:

jQuery performs all the interaction but also communicates with the model through ajax.

So my question is, where does jQuery go? And what specific tasks should it perform in this architecture?

    
asked by anonymous 07.04.2016 / 22:26

2 answers

1

jQuery is View, simple like this!

jQuery is client-side, where modifications can be made and manipulating the information.

The jquery website itself says:

  

jQuery is a fast, small, and feature rich JavaScript library. This makes things like document handoff and document manipulation, event handling, animation and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way millions of people write JavaScript.   - jQuery (Google Translation)

jQuery performs all the interaction but also communicates with the model layer through ajax.

If this is occurring, even though you do not know how, something is wrong with your model. Any external request first passes through the control layer, and the same that communicates with the model layer. The Ajax request only requests, just like a click on a submit button, so to speak.

So my question is, where does jQuery go? And what specific tasks should it perform in this architecture?

jQuery goes in the View to perform N functions, but in none of them will it communicate with the model layer. What you might be doing is making a request to a controller and the same "answering" you, but you are not "talking" directly to the Model.

    
07.04.2016 / 22:55
1

jQuery was created to manipulate DOM, that is, a priori it acts as part of the view. A good solution to this would be to use AngularJS, Ember or React.

If jQuery is really needed, use it along with one of the 3 frameworks above.

    
07.04.2016 / 22:32