INTRODUCTION

In this tutorial, we will be creating a very simple and the most basic ‘Todos’ app with Meteor. However, this one will not be the same as what Meteor’s Todo Tutorial shows you. In fact, it will be very different in structure and architecture. We will be using Mantra JS as our application code architecture.

Mantra JS is not a JavaScript framework like Meteor as I’ve mentioned, it is an application architecture for Meteor JS. You can use it with a non-Meteor project, though. But ini this guide, we will just be using Meteor.

PRE-REQUISITES

Before we start coding, you need to have a prior knowledge of developing meteor apps as what we are about to build is still a meteor app that follows the Mantra specification. You would also need a good or basic understanding of ES6 (EcmaScript 2015).

As javascript continues to grow, ES6 is not exactly the latest implementation of JavaScript, but has become one of the standards and is now beginning to climp up the charts in terms of usability, and bing aligned to the JavaScript environment. ES6 still hasn’t been implemented yet on all browsers, but developers believe that this is where it’s all going to in the future.

If you don’t have a prior experience with React, you can learn the basics while doing the Meteor Tutorial, or you can read directly from Facebook’s official documentation. There are tons of websites where you can watch or read good tutorials like Pluralsight or even from YouTube. You just have to do the hard work on searching.

You might want to learn the basics I’ve mentioned above for you to have a smooth learning experience especially if you’re a beginner looking to start with developing apps with Meteor.

WHAT IS MANTRA?

One thing we’ve noticed is that Meteor JS does not really have a common way of structuring the code. Of course, there’s nothing wrong with having multiple ways to structure your code. Because of this, though, some developers find themselves confused what really is the proper way of structuring their code. Some might end up just coding without realizing that the path they took might not last for long. As developers, we would like to follow a few protocols to help us align our coding environment, especially when we’re working with teams, and make the development a lot faster and organized.

Mantra solves this confusion for us. It gives us a set of standards that will help us architect our Meteor application code and of course, to help developers have a common base code that everyone can follow.

FILE STRUCTURE

Mantra JS implements a way of structuring your files. Below is a draft of how our folder structure is going to look like when we create a new meteor app with mantra specification:

 

 Look here for more info on file structuring on mantra.

Now, we will be placing our client code in the /client folder. and server code in /server. Notice that we have a /core directory under /client/modules directory. This is called a ‘module’ and mantra requires us to create at least one module for an app. Personally, I like to create one module per feature. That way it allows me to locate and debug my code much faster, and it’s a nice way to organize your codes, too.

Core module is just a simple module. However, it loads first before any other modules. This is where I put the core routes and compnents like navigation, layout, header, and footer.

Inside each modules, we will see a few more directories which handle the flow of data, routing, rendering of components, business login, and the entry point of each module.

These directories are the following:

 /components – this is where we store our React JS code for our app.

/actions – this is where we put the business logic for our app.

/containers – this is responsible for passing along the data, to the component for presentation.

/libs – this is where we store miscellaneous code which we use within that module

index.js – this is the entry point of the module. This imports the routes and actions for the module

I believe that it may be difficult for some to keep track of these files especially for those who are just beginning to understand Mantra. I, too, find it difficult even until now to remember and update every single entry point for each module every time I create a new component or write new logic that requires importing to a certain entry point.

Luckily, we have Mantra CLI which takes care of modules, collections, publications, containers, actions, and components creation. We can even create a new Meteor app which already has these files included with all the basic configuration. How awesome is that?

All we need to do is install mantra-cli:

 npm install -g mantra-cli

After that, just type:

mantra create <yourAppName>
cd <yourAppName>

Like this:

mantra create my-mantra-app

cd my-mantra-app