• Meteor
  • Tutorial

Giving Meteor a little Posture

The couple of weeks, I've been working really hard on the next version of Evented Mind. And as part of that project, I've worked on the next version of a router that we'll be releasing soon, and also on a couple of other projects. As part of the router project, I've built up a Class In Module system, and that's what I'm going to show you around today. I haven't released it yet because it's still in a lot of flux. But hopefully, this will give you an idea of some of the ideas that I have here. And feel free to provide some feedback.

Also, in other news, I'm releasing a screencast to the Meteor book shortly that will talk about live data and some of the memory and CPU characteristics of Meteor on the server side. So you should check that out if you don't already have the Meteor book.

OK. So let's get started, and I'll show you around the new class system. I've called this new package Posture. It provides constructor functions for a module and for a class. And what those two things allow us to do is to organize our code and to reuse functionality. Let me give you an example.

In my code editor, I'm going to create a new class called Form. And I can create a new class by setting it equal to class.extends. In other words, I'm going to inherit from the class itself. Now, this also works in CoffeeScript, because the inheritance mechanism is the same. I'll show you an example of that at the end.

Instead, inside of the extends object, I can add instance methods, like On Submit. I can add class level methods by calling the extend without an s on the form class itself. And I can even include other modules or other classes or just new instance methods by calling the include method of the form class.

So over in the browser, we can play with the new form class. Let's type form and see that we have our class method defined. And then we can create a new instance of the form using the new keyword. And then we can call the On Submit Instance method or the Form Instance method that we created using the include.

And because my control inherits from class, I can call the extend method on it and add class level methods, just like I did with form. So for example, I might have a class level method called Events that takes an event map. And if I go over into the browser, I can play with the My Control object and call the class level method events or create a new instance of the control by saying New My Control and assigning it to the C variable. And then we can call the control method, for example.

But because we included form, we also get the form instance methods. And so in this case, I can call form instance method as well on C. So this is really useful for inheriting from objects or composing objects, and opens up a whole lot of possibilities.

Now, before we conclude, let me show you an example of where I'm actually using the class system in a sketch of a Controllers class that I've created. So I'll delete me code, and instead of having form inherit from class, I'm actually going to extend a class that I've already created called Controller. And then inside of the Extends object, I'm going to define some events. And then I'll create just one instance method called On Submit. That just takes a form object and prints it to the console.

Now I'll create a custom control called My Control. And I'll just have that inherit from Controller as well. But what I'll do is include the form behaviors. Now, what's neat about this is I can still define my own events on this class as well. And so I might, for example, have an event for clicking a button.

And just because I've included form here, these events get merged together. And I also get the On Submit Instance method. So let's jump over to the browser and take a look at it.

So I'll create a new instance of the My Control class by actually using the new keyword. And if I look at the metaproperty of the new control instance, I can see that new control instance gets the click button event from my control, but it also gets the Forms Submit Form event just by including the Form class. And I also get Inherit Some Methods, like On Submit.

One really cool aspect of postures implementation of classes is that they work properly with CoffeeScript as well. So I've redone the previous example in CoffeeScript. And you can see up top that when we create the form class, we just use the Class keyword and extend it using the Extends keyword from Controller. And the other thing you might notice is that Events is a class level method. And so we're using this at symbol here to call the events method and then passing in our event map.

And then down below on My Control, we're extending the controller class from above. And then we call the Include Class Level method and pass the form as a parameter, and then similarly call the Events method and pass in an event map. And I've just done this down below here so we can play with these objects in the browser.

And so just like before in the browser, I just created a new instance of my control. And if I look at the metaproperty of the instance, I can see that I have the Click Button event and the Submit Form event properly registered.

So I'll open source this package sometime in the near future. I haven't done it yet, because I want to make sure that all the tests are really good and that the API doesn't change too much. And if you have any feedback in the meantime, I'd love to hear it. And I hope you guys have a good weekend.