Understanding MeteorJS and Isomorphic Javascript

Question

Throughout my prior experience with web development, I've always been afloat the LAMP stack. As of recent I've become infatuated with the MEAN stack, and have built a couple of neat little applications. Moving onward, I heard Meteor mentioned over an IRC chat and decided to jump on the bandwaggon.

For the past week, I've been trying to set up an application within Meteor. I start planning concise structures and documenting control flow, but when it gets to the actual application, I start to lose myself during development. My problem standing, is I don't truly understand isomorphic javascript.

Using Meteor, when exactly is server code executed? Server code is beyond the scope of the client, as it should be for security purposes, but then how is it actually isomorphic? I know of mongo-client, and I find it pretty nifty. Though how exactly should I be structuring an application within Meteor?

Let's say I'm creating a controller for "users", and this controller will be loaded into two possible solutions.

./server/app.js

$scope.controller = {  };
if( !$scope.session.exists )
{
  $scope.controller =
  {
    authenticate: function(email, password) {
      // authenticate credentials and create session
    },
    create: function(form) {
      // create new user
    }
  };
}
else
{
  $scope.controller =
  {
    end: function(call) {
      try {
        call();
      } catch(err) {
        // do nothing, optional callback
      }

      // end user session
    }
  };
}

How will the above code work in coherence with my client code? If I create a simple login form

./client/login.html

<template name="login">
  <form>
    <input type="text" name="email" placeholder="Email Address">
    <input type="password" name="password" placeholder="Password">
    <button type="submit">Login</button>
  </form>
</template>

./client/login.js

Template.login.events({

  // handle the form submission
  'submit form': function(event) {

    // stop the form from submitting
    event.preventDefault();

    // ???
      // event.target.email.value
      // event.target.password.value
  }

});

How will this template event make use of $scope.controller.authenticate? Well, it can't, because authenticate is exclusively on the server. Hence, I would need to move the authentication process to the client, which wouldn't make any sense, therefore making my brain numb at the ideology of isomorphic javascript.

I know these questions are somewhat vague, but to put it short and simple, what is the extent of the relationship between server sided and client sided code within Meteor?

Answer 1

Foreword: It seems that you are using Angular on the backend, but Meteor is supposed to be self sufficient out of the box (you can of course integrate other frameworks like Angular, but it is sometimes hacky and not required).

In Meteor the "communication" between client and server works in two ways:

1. DB reactivity: Depending on your allow/deny rules for each Collection, the client can directly interact with the client side DB (miniMongo). Such interactions (delete, update, etc) will be replicated on the server DB (and validated against your allow/deny rules for security). Be careful, any app comes with the insecure package installed which allows for total control on the DB from the client (for prototyping purpose, but this can be confusing).

2. Methods (best way IMO, and complementary): This is the part where Meteor may be truly isomorphic. Methods can be declared on server only, to be accessed from the client, or on both client and server (in a file located outside /client and /server for example). In the first case the client will call the method and wait for the answer from the server in the Meteor.call callback, in the second case, the client will call the method but the method will be run on both client and server, server actually doing the job and client simulating the method in order to compensate the latency between the client and the server (and give the impression of instantaneity to the user). If the result on the Server is different (i.e. different data after modification) the client's method result will be invalidated and reverted.

Methods work like below (example without latency compensation), and I think it is what you are currently looking for:

//SERVER
Meteor.methods({
  doSomething: function (params) {
    //method logic
  },
  doSomethingElse: function (params) {
    //method logic
  }
});

//CLIENT
Meteor.call('doSomething', params, function (error, result) {
  //get the error or the result of the call
});

You have to remember that Meteor is really about data synchronization through publish/subscribe. lots of what you will do inside methods will be translated in a DB modification and then synchronized to the client through reactivity (provided that these data are published on the client). So depending on your publications/subscriptions you may not need to handle servers calls and results like in a usual application, i.e. you may call the method and do nothing else as the data will be automatically synchronized through a publication.