Help me understand MVC Implementation in a nutshell for meteor

I would like to know if there is a standard way to implement MVC in meteor. thanks i would appreciate if it is on a very simple explanation thank you

View:

<template name="views">
  <!-- -->
</template>

Model:

var Model = new Mongo.Collection('models');
if (Meteor.isServer) {
  Meteor.publish('models', function () {
    return Models.find();
  })
} else {
  Meteor.subscribe('models');
}

Controller:

Template.views.events({});
Template.views.onRendered()
Template.views.onCreated()
3 Likes

thanks corvid, so it means that the basic structure it self is already MVC thanks

A traditional MVC pattern is more or less implicit to a request/response model whereas in a reactive paradigm, such as Meteor, where both the application and the data can be partially, or even fully, be shared between the client and the server, you could be better off breaking out of common traditional patterns and looking at the best practices of what’s at hand.

That being said,

  • A collection is where you persist your data. It can be on the client, the server, or both. But that does not impose a model per se. You could either create one by plain objects or a schema enforcing package like simple-schema, astronomy or similar. This collection can be only on the server, only on the client, or published from the server and subscribed from the client to exist either completely or partially on both server and the client
  • Your controller can be composed by a few different pieces. Parts of it can exist in your publish function where you decide when, how, and how much of your data is published from the server to the client. It can also partly exist in your model where you create allow/deny (when and how documents are inserted/updated/removed/fetched) rules or schema rules. It can exist on the view layer in your Template.templateName.* namespace in terms of onCreated, onRendered, onDestroyed, events, helpers callbacks. It can also kind of exist within your router by iron router or Flow Router
  • Your view is then obviously your Template.templateName.* namespace coupled with your template html snippets themselves. I’m not getting into alternative view layers such as Angular or React here, but there are rather exhaustive descriptions of each of them on their corresponding docs. But you can get a quick comparative overview of each in this side-by-side tutorial.

Also, there is a rather controversial, but well thought-out definition of Meteor MVC that’s coined by @awatson1978. You can read more about it on her cookbook.

It is really hard to define MVC from ground-up since it has its roots in a different programming paradigm, therefore I believe you should take these highly overlapping layers and make the best of it.

Also, React in Meteor has its own set of solutions to common problems. But you can also achieve a similar set of componentization in Blaze as well with Flow Components which is maintained but not further developed, or Blaze Components which is slightly more popular.

Alternatively, you can give MVVM a try, using either one of the highly popular ViewModel from @manuel , a new package from @dalgard or perhaps good old Vue.js.

5 Likes

Great question, and nice answer by @serkandurusoy – it took me a while in the beginning to figure out that template.helpers and template.events make up the controller in MVC.

I’ve written a short ad hoc intro to viewmodels in the docs of dalgard:viewmodel:

1 Like

thank you @serkandurusoy for this wonderful links, and information you have shared me :slight_smile: and all the viewers of this thread… :smile:

1 Like

Is this explanation valid ?. With newer meteor versions how has things change or not. I am getting into software design patterns just curious to know more about the theory behind meteor’s design patterns.