From what I've read until now (this answer precisely), it tends more towards MVVM pattern. Considering the data from services as Model, Angular controllers as VM and the HTML containing angular bindings as the View.
Can we say that MVC is a pattern for server side and MVVM for client side?
Can someone explain with example (in context of Angular) how we can
implement MVC and MVVM.
I've read about the concept of using var vm = this; in Angular controllers. But does it mean by just using an alias for our controller we convert our Angular app from MVC to MVVM.
First I think, It is better to give some idea about MVC and MVVM.
More than describing on much more theoretical context. I'd rather explain with a simple example. Lets take buying a pizza.
MVC - It is something like what happens, when you call the pizza center and get delivered.
You call a Call Center Guy(Controller) and make an order(input).
Then the Call Center Guy(Controller) arranges Some Cooks(Model) to make the pizza, a Delivery Guy(View) to deliver the pizza.
Then Delivery Guy(View) gets the pizza from Cooks(Model), wrap it nicely(output) and deliver to you.
MVVM - More like, what happens, when you go the shop and place your order to the waiter.
You place your order(input) to the Waiter(View).
The Waiter(View) place you order to the Cafe Manager(View Model).
The Cafe Manager(View Model) arranges some Cooks(Model) to make the pizza.
Cooks(Model) makes it ready and pass it to the Cafe Manager(View Model).
Then the Cafe Manager(View Model) puts it into a nice plate, adds forks/knives, sauce dispenser etc. (Presentation).
Waiter(View) keeps track of Cafe Manager(View Model). Once it's ready, then the Waiter(View) delivers to you.
When getting back to your question,
Can we say that MVC is a pattern for server side and MVVM for client
side?
What I can say is Generally Yes. (might have some corner cases). I hope, you can use my above explanation to better deal in depth of your problem.
Addition to that since you are referring about AngularJS, in architecture, it is much close to MVVM (I am telling like that because it is more like there's no answer). Though we have Controllers in AngularJS, actually they exactly do the work of View-Models.
----------Update with AngularJS Specific Example----------
Since I would like to remain our scope inside Angular architecture. I am taking a general example.
You have your HTML template for the component you are going to implement with AngularJS. [View]
That HTML template is bound to a Controller, where inside that you would probably have something like this.controllerAs = vm. Actually this term vm refers to View-Model. [View-Model]
Ideally inside this controller, we should not implement business specific logic. If you want them to be included in the client side, you should have separate Factories, Services (custom) etc. to do that. What you can do is, you can include those (Factories, Services) inside the controller and call their required functions/methods to perform the operation required. Otherwise you can consider having your business logic in the server side and using inbuilt services(Ex: $http) to call them.
So Inside the controller we only have the implementations bound to view logic (display requirements) we want.
So as I mentioned in the second point, you have either your [custom Factories, Services] or [set of REST services + $http], which consists your business logic. [Model]
So inside the communication flow what really happens is,
A client(end user/another component) calls/initiates the HTML(View) preferably with some input.
Then the controller(View-Model) gets the inputs and knows what the required task is.
Then the controller calls the Factories, Services etc. inside the it(Model) to prepare the desired business specific output bound to the given input.
The Model then processes the input and gives the desired output to the controller.
Then the controller makes some display specific adjustments.
Then the HTML will display.
Let's just see a bit about the history of MVVM:
MVVM was originally defined by Microsoft for use with Windows Presentation Foundation (WPF) and Silverlight, having been officially announced in 2005 by John Grossman in a blog post about Avalon (the code-name for WPF). It also found some popularity in the Adobe Flex community as an alternative to simply using MVC.
In recent years, MVVM has been implemented in JavaScript in the form of structural frameworks such as KnockoutJS, Kendo MVVM and Knockback.js, with an overall positive response from the community.
Meanwhile, You are right, AngularJS was closer to MVC (or rather one of its client-side variants), but over time by many refactorings and API improvements, it's now closer to MVVM – the $scope object could be considered the ViewModel that is being decorated by a function that we call a Controller.
The software behaviors that are common to MVC, MVP, and MVVM are:
1)Data Layer / Business Logic (Model): This is the behavior which applies the business logic to the application's data
2) Presentation Layer / UI ( View ): View is responsible for the visual presentation of the application.
3) Application Logic ( Controller, Presentation or View Model ): This behavior holds the logic that implements the interaction between the model and the view.
MVVM
MVVM provides a clear separation between the UI and application logic.
Client-side library:Knockout.js, Kendo (MVVM)
Server-side library: Silverlight ,Windows Phone apps,Adobe Flex or Tanuki which is an MVVM-inspired web framework that fancies idiomatic Ruby, DRY and extensibility by its design, or another example would be The WebCore 3 PHP framework which is a platform-independent framework that uses the MVVM pattern.
So I would say this is not correct to say that a specific pattern is just for Client or Server side, It's totally related to the framework that we are using or probably environment that we are going to establish for our project whether in Front or in Back-end development.
Documentation: Here
Please read this article
Interesting Article for AngularJs MV*
Related
I got a source-code and was trying to understand it using the documentation.
In the documentation, it says that the code has used both MVP and MVVM in combination to make the project.
can someone answer these following questions of mine:-
What is point of using two design pattern in a single project(both MVP and MVVM) ?
How can I simple know by looking at some source code if it is made using mvp,MVC or any other design pattern?
can you tell me about ....what are layers in any design pattern? how many minimum layers are we gonna use to make a project in any design pattern? and what is the benefit of having as many layers as possible?
what is the difference between java logic and android logic? coz we're simply separating apart java from android logic for the better testing environment by using any design pattern. Give example.
If the code is using MVC you will see the following:
Models: Models contain data information. Does not call or use Controller and View. Contains the business logic and ways to represent data. Some of this data, in some form, may be displayed in the view. It can also contain logic to retrieve the data from some source.
Controller: Acts as the connection between view and model. View calls Controller and Controller calls the model. It basically informs the model and/or the view to change as appropriate.
View: Deals with UI part. Interacts with the user.
For MVVM (Model View View Model):
ViewModel:
It is the representation of the state of the view.
It holds the data that’s displayed in the view.
Responds to view events, aka presentation logic.
Calls other functionalities for business logic processing.
Never directly asks the view to display anything.
Now let's see MVP (Model View Presenter):
Similar to traditional MVC but Controller is replaced by Presenter. But the Presenter, unlike Controller is responsible for changing the view as well. The view usually does not call the presenter.
Now your questions:
What is point of using two design pattern in a single project(both MVP and MVVM)?
Ans: It may be the need. Also they both are very closely related and as I said it might be useful to mix the two to solve a particular type of problem.
How can I simple know by looking at some source code if it is made using mvp,MVC or any other design pattern?
Ans: Read the explanation I provided. Try to see which pattern closely matches the code. There might be multiple design patterns used.
can you tell me about ....what are layers in any design pattern? how many minimum layers are we gonna use to make a project in any design pattern? and what is the benefit of having as many layers as possible?
Ans: There are no such hard and fast rule on number of layers. To make your code reusable, maintainable, open for extension and follow the best practices of software engineering it is important that you follow the design patterns.
what is the difference between java logic and android logic? coz we're simply separating apart java from android logic for the better testing environment by using any design pattern. Give example.
Ans: There is no such thing called Java logic and Android logic.
I need to convert the following AngularJS application to a GWT application (though the question applies to any angular application). I would like to use the MVC pattern and UiBinder as suggested in the documentation but I'm unsure as to how the components of the angular application should correspond to the GWT one.
I've given it some thought already and here's my understanding - I'd be grateful if someone could say if I've got it right
Each module should become a presenter
One view per presenter
Services must be initialised in the AppController and passed to the relevant presenters (similarly to how an eventBus is implemented in the MVC description)
Now I don't know how to put multiple presenters together, though, so that they create one page. Should I create a main view that would correspond to the AppController and then pass the relevant parts of that view to each presenter?
Also, what's the best way to handle modal dialogs? Should I just include them in the view, bind to the presenter and keep them hidden initially?
I would recommend to use either Activities and Places or a fully fledged MVP framework like GWTP.
Regarding your questions:
I think that's right
One view per presenter is the usual approach. However you can also think of implementing different views for different devices (Desktop, Mobile, etc).
I would recommend to use a dependency injection framework like GIN to inject services and components into your Presenters
It depends if you use Activities and Places or GWTP. GWTP has the conecept of PresenterWidget that can be nested in Presenters. For Activities and Places you can follow Thomas Broyer's recommendation.
In general I think Presenters and their corresponding Views should be standalone components that are usually associated with a Place. GWTP has the concept of Slots (i.e. side navigation, etc) where Presenters can reveal themselves.
Communication between Presenters should be done via the EventBus.
GWTP has a concept of PopupPresenters but typically I think modal dialogs should be included in the View and handled by the parent Presenter (unless it contains a lot of business logic).
You said:
Each module should become a presenter
look at [GWT Organize Projects][1]http://www.gwtproject.org/doc/latest/DevGuideOrganizingProjects.html
It talks about modules in the section, "Modules: Units of Configuration"
Basically, a module is just for configuration. You need a module for each entry point. People often have 1 module per page.
You said:
One view per presenter
This is usually the case.
You said:
Services must be initialized in the AppController and passed to the relevant presenters (similarly to how an eventBus is implemented in the MVC description)
Like Ümit said you should use Gin
Ümit recommended GWTP I'm no expert on GWTP but I used it briefly when I was a beginner and it was hard. I don't think it's good for beginners. Admittedly, it might be worth the investment of learning it. Like I said I'm no expert on GWTP.
I have successfully created a asp mvc app which basically has interface, service and dataacces - AKA the repository pattern..
What would be the best way to call my service (my repository pattern) from an MVVM structured WPF app..
From what i see.. in the MODEL in wpf i presume i call my service (repository pattern) from the model and then return data to my viewmodel for displaying on the view??
Should this model be thin i.e. has little code and just call the service.. and return data to the viewmodel for processing or should the MODEL call the repository service and do the processing in the model before retruning to the viewmodel??
I am a little confused how i can use my WORKING repository pattern in the realm of a new WPF MMVM app i am designing...
Any ideas?
Thanks
I think you are complicating matters by focusing on the fact that your data access uses a repository pattern. It's irrelevant. You could be using Joe's Box' O' Data pattern and your underlying question would be the same. Let's forget you are using that pattern and focus on what you are doing: getting data from a data source.
When you get data from a data source, this is generally considered to be your Model. It's data, but it lacks certain behavioral things that make it appropriate for showing on the screen (lack of INotifyPropertyChanged implementation, for example). What people generally do with this is adapt their business objects into something that can be more readily used by a view (a view model).
You will use this technique regardless of the pattern in use for getting your data.
I don't develop too many desktop / Windows Forms applications, but it had occurred to me that there may be some benefit to using the MVC (Model View Controller) pattern for Windows Forms .NET development.
Has anyone implemented MVC in Windows Forms? If so, do you have any tips on the design?
What I've done in the past is use something similar, Model-View-Presenter.
[NOTE: This article used to be available on the web. To see it now, you'll need to download the CHM, and then view the file properties and click Unblock. Then you can open the CHM and find the article. Thanks a million, Microsoft! sigh]
The form is the view, and I have an IView interface for it. All the processing happens in the presenter, which is just a class. The form creates a new presenter, and passes itself as the presenter's IView. This way for testing you can pass in a fake IView instead, and then send commands to it from the presenter and detect the results.
If I were to use a full-fledged Model-View-Controller, I guess I'd do it this way:
The form is the view. It sends commands to the model, raises events which the controller can subscribe to, and subscribes to events from the model.
The controller is a class that subscribes to the view's events and sends commands to the view and to the model.
The model raises events that the view subscribes to.
This would fit with the classic MVC diagram. The biggest disadvantage is that with events, it can be hard to tell who's subscribing to what. The MVP pattern uses methods instead of events (at least the way I've implemented it). When the form/view raises an event (e.g. someButton.Click), the form simply calls a method on the presenter to run the logic for it. The view and model don't have any direct connection at all; they both have to go through the presenter.
Well, actually Windows Forms implements a "free-style" version of MVC, much like some movies implement some crappy "free-style" interpretation of some classic books (Romeo & Juliet come to mind).
I'm not saying Windows Forms' implementation is bad, it's just... different.
If you use Windows Forms and proper OOP techniques, and maybe an ORM like EntitySpaces for your database access, then you could say that:
The ORM/OOP infrastructure is the Model
The Forms are the Views
The event handlers are the Controller
Although having both View and Controller represented by the same object make separating code from representation way more difficult (there's no easy way to plug-in a "GTK+ view" in a class derived from Microsoft.Windows.Forms.Form).
What you can do, if you are careful enough. Is keep your form code completely separate from your controller/model code by only writing GUI related stuff in the event handlers, and all other business logic in a separate class. In that case, if you ever wanted to use GTK+ to write another View layer, you would only need to rewrite the GUI code.
Windows Forms isn't designed from the ground up to use MVC. You have two options.
First, you can roll your own implementation of MVC.
Second, you can use an MVC framework designed for Windows Forms.
The first is simple to start doing, but the further in you get, the more complex it is. I'd suggest looking for a good, preexisting and well-tested, MVC framework designed to work with Windows Forms. I believe this blog post is a decent starting point.
For anybody starting out, I'd suggest skipping Windows Forms and developing against WPF, if you have the option. It's a much better framework for creating the UI. There are many MVC frameworks being developed for WPF, including this one and that one.
According to Microsoft, the UIP Application Block mentioned by #jasonbunting is "archived." Instead, look at the Smart Client Application Block or the even newer Smart Client Software Factory, which supports both WinForms and WPF SmartParts.
Check into the User Interface Process (UIP) Application Block. I don't know much about it but looked at it a few years ago. There may be newer versions, check around.
"The UIP Application Block is based on the model-view-controller (MVC) pattern."
Take a look at the MS Patterns and Practices Smart Client application block which has some guidance and classes which walk you through implementing a model view presenter patter in windows forms - take a look at the reference application included.
For WPF this is being superseced by the prism project
The software factories approach is a great way to learn best practices
I am a bit confused in what the application controller should do? Because I see the functionality will also exists in your MVP pattern to make the decisions which form should be shown when a button is clicked? Are there any good examples for Windows Forms that uses the application controller pattern?
There is a difference in the MVC(ontroler) and the Application Controller. I know the MVC(ontroller), I am not sure what is the responsibilities for an Application Controller, and how does it fit into a WinForms application. Martin Fowler also calls this the Application Controller pattern, surely it is not the same thing as the MVC(ontroller)?
I recently wrote an article on creating and using an ApplicationController in a C# Winforms project, to decouple the workflow and presenters from the forms directly. It may help:
Decoupling Workflow And Forms With An Application Controller
edit:
Archive.org has got a more readable copy of the article at this time.
An Application Controller is a bit of a different beast than the controller used in MVC.
Martin Fowler's page on the Application Controller.
In the case of an MVP WinForms app, which seems to be what the question topic is about I think. You can put all the logic for "what form do I show now" into the Presenter, but as your application grows you're going to be duplicating a lot of code between Presenters.
Say you have 2 views that both have a button for "Edit this Widget", both of them would have to have logic to get a WidgetEditorPresenter and show the associated view. If you have an ApplicationController, you move that logic into the ApplicationController, and now you simply have a dependency in all your presenters on the ApplicationController and you can call appController.EditWidget() and it will pop up the correct view.
The application controller is an uber-controller that controls application flow throughout your system as you move from screen to screen.
Personally I have no experience with MVP or winforms, but I have worked with MVC. I hope this is what you're asking, otherwise ignore my answer completely.
The C in MVC is responsible for more than just choosing the next view to be presented to the client. It holds most, preferably all, business-logic of the application, including performance of system tasks (such as logging and enforcement of permissions upon the flow of data from the model and to it).
Its primary task is, naturally, to serve the presentation layer above it and separate it from the model layer below while mediating between them. I guess you can think of it as the brain of the application.
Hope this helps,
Yuval =8-)