A Meal Calendar Made In Meteor

I’ve been on the lookout for a simple way to create rich SPA’s for a long time.

During the day I work on a very cool web app, HelpSocial.com with a strong PHP backend, but I’ve really liked the idea of using both the same language on the front and back ends.

I’ve worked at building APIs with node. Toyed with Ruby on Rails. Experimented with Ember. And fooled around with Angular, just to name a few…

And they all felt, ‘lacking’.

I don’t know. Something just felt off about the whole process. Not to mention Ember left me crying in the corner like a little girl. (But let’s not share that with anyone)

Well, yesterday I finally bit the bullet and tried out Meteor.

By George, I was hooked in the first 5 minutes.

In absolutely no time I was up and running with a simple web app that was controlled on both the front and back end via Javascript. Plus deploying to a simple server (kinda like Heroku’s free plan) was done in a single command.

You just can’t beat the simplicity yet underlying strength of the system.

Anyway, in maybe an hour and a half I built my first app in Meteor.

And here it is in all it’s glory. And here it is on Github.

Quick shout out for the Bootstrap Material Theme. It’s great for knocking out quick and pretty UIs.

Anyway, the goal here is to create a simple app that let’s you figure out a simple meal plan for X days.

In the future I plan on adding lunch/dinner, but let’s just assume it’s for dinner right now.

So let’s get started. Run this in your terminal.

meteor create FoodCal && cd FoodCal && meteor

This will go ahead and start your media server.

For this project we’re going to use the standard meteor structure that’s created by default.

In future posts we’ll use a better client/server structure, but this is fine since this is a small project.

The HTML & Template

To start, here’s the HTML we’ll be using for this project.

There’s a few things you’ll notice in here.

1. The {{#each}} statement.

In the Javascript we’ll be creating a collection called ‘meals’ and subscribing to it.

Here is where we’ll be printing them out. This handlebar-esque block will automatically handle updating the DOM when the collection changes. So freakin’ cool.

2. The template tag at the bottom

This is a special (and kinda new) HTML tag that’s going to be inserted in the aforementioned {{#each}} block.

So, for each entry in the meals collection you’ll be inserting {{> meal}} — which refers to the template name.

In the future you’ll want to separate these into different packages, but having it inline after the </body> is fine for now.

The Client

Next we’ll focus on the Javascript.

Once again, this should be separated into different files later, but since this is a simple project, leaving it all in one is fine.

There are two distinct sections here.

And…

These two sections are how we determine what happens in the browser vs on the server.

This is an important distinction because there are certain things we don’t want to happen in the browser side, like automatically updating the Collections. That exposes some security issues that we’ll talk about in another Munchie later on.

Anyway, the first thing we need to do is create the actual collection.

This will either create a new MongoDB collection or connect to an existing one. Unlike writing your first app in Angular or Ember, the data here is actually persistent because we’re connecting to a real MongoDB instance that’s bundled with Meteor. Again, so cool.

That means you can deploy this to a server (and we will later) and be up and running using real data in no time.

Next we need to subscribe to the collection.

In short, this just means ‘give me the data and keep me updated if something changes’.

Next, add this bit. It’ll create a connector between the actual data model and the DOM, allowing for automated (reactive) updates.

The next part is the most fun, for me anyway.

Handling DOM events.

Meteor makes this really, really easy.

Normally in the JQuery world a click handler would look something like this.

However, in Meteor, our event handlers are a bit different.

In the object key, ‘click #new-meal’, you’ve got two separate sections.

The first is the event, in this case ‘click’, and then the DOM element CSS selector.

So, when someone clicks on #new-meal, do something.

Now let’s add all our click handlers.

I won’t go into all the logic here, but I’ll talk about the Meteor specific things.

This is pretty similar to…

However, in Meteor we’re using these so that later on we can add some security into the system.

That won’t be added in this Munchie, but in the followup to this post we’ll be adding a login system.

Check out the project on GitHub if you want to see how all that works immediately.

You can see another example of a Meteor.call a bit further down in the delete function and in a little bit we’ll actually be adding these methods. So keep on scrolling.

The Server

In this project, the server is actually REALLY simple.

All we’re doing is ‘publishing’ the meals collection.

This is a connection to the subscription we created earlier so that the database will talk with the front end.

Meteor makes this system incredibly easy.

Publish a data source (database, API, file) and subscribe to it in the DOM for reactive updates. Pretty nifty.

And lastly…

The Methods

This is where we connect the front end to the back end. Earlier we were using Meteor.call methods and this is where we create them.

In here we’ve got two methods. addMeal and deleteMeal.

Both of them are interacting with the Meals model we created at the very top of the file.

Pay attention to the methods you’re calling on the model. Meteor makes it incredibly easy to manage your data.

And the really cool part is that Mongo is a schemaless database.

Unlike something like MySql, you don’t have to create a layout for your ‘tables’ (collections).

You can manage it on the fly.

That said, you should put some thought into your layout anyway. But that’s a chat for another day.

Now, slap it all together and you’re just about done.

Since you started the meteor server earlier, you can go to localhost:3000 and see the working site right in front of your eyes.

Great job!

Now, to deploy the project to the web for others to play with, just run this command.

meteor deploy YourProject.meteor.com

And you’re done.

You can now go to yourproject.meteor.com and see it live.

How easy is that?

Next time we’ll talk about adding a user system, which Meteor also makes stupidly easy.

If you want to see that live now, go check out the project on GitHub. It’s all there.

If you liked this post or have any questions, feel free to contact me and we can chat. I’d love to hear from you.