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.
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).
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.
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:
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>
mantra create my-mantra-app cd my-mantra-app