Meteor1.3七日谈 — Mantra核心简介
随着Meteor1.3 正式版的临近，我们再来回顾一下Mantra，并讲一下使用它的原因。Mantra是Meteor 1.3+React的一种应用架构规范，它包含了一系列的规范和约定，如果你遵循Mantra规范，那么你的应用将更加容易构建和扩展。
当我们最初看到Mantra的时候，会觉得它给Meteor应用增加了不少复杂度。为什么我们需要这么多额外的目录和文件呢？随着你认识的深入，你会逐渐意识到这些模块化组织结构的优势所在，它能让我们方便地了解应用的内部机制。同时，它也将让我们更方便地修改应用或者添加新的功能特性。
Mantra只要分为两大部分：模块（Modules）和组件（Components）。组件进一步分为容器组件（Container Components）和UI组件（UI Components）。我们来逐一看一下这些东西。
1. 模块 - 模块构建了我们的应用主体部分。每个应用都应该有一个核心模块（Core Module），这个模块会处理应用的核心功能。如果只是一个小型应用的话，只需要一个核心模块即可。一旦我们的应用有多个主函数后，我们需要把它们拆分成不同模块。举个例子，一个items模块可以是TodoList应用的模块，所有与items相关的功能都会放到这个模块中。
2. 组件 - 组件是模块的独立部分。比方说，在items模块里面，我们可能会有ItemList，NewItem，Item和EditItem这几个组件。每个组件都有两部分构成：一个容器组件和一个UI组件。容器组件负责获取数据，通过props传入子组件来渲染UI组件。我们可以使用React-Komposer来使这个过程更简单。如何创建容器组件和UI组件可以参见这篇文章。
这些就是Mantra的基本构件，我们基于这些基本构件来创建应用。
另一个关于Mantra的重点，你一开始可能会困惑，就是所有的代码关系都通过imports和exports来构建，并且以单一入口的形式。所以我们创建模块、组件和动作（actions）后都要导出它们，然后导入到index.js文件中，这些index.js再被导入到main.js中去。客户端和服务器端分别只有一个main.js文件。它们是整个应用的真实入口。
下面，我们谈谈动作（actions）。动作是Mantra中应用逻辑书写的地方。动作位于模块里面，和组件并列。任何实际上交互的组件，除了仅仅渲染数据的组件外，都应有一个对应的动作。所以我们的EditItem和NewItem组件，都会有一个对应的动作来处理数据操作。这些动作会调用服务器端的Meteor方法。
我们来看一下mantra-sample-blog-app的目录结构：
.
├── client
│ ├── configs
│ │ └── context.js
│ ├── main.js
│ └── modules
│ ├── comments
│ │ ├── actions
│ │ │ ├── comments.js
│ │ │ ├── index.js
│ │ │ └── tests
│ │ │ └── comments.js
│ │ ├── components
│ │ │ ├── comment_list.jsx
│ │ │ ├── create_comment.jsx
│ │ │ ├── style.css
│ │ │ └── tests
│ │ │ ├── comment_list.js
│ │ │ └── create_comment.js
│ │ ├── configs
│ │ │ └── method_stubs
│ │ │ ├── comments.js
│ │ │ └── index.js
│ │ ├── containers
│ │ │ ├── comment_list.js
│ │ │ ├── create_comment.js
│ │ │ └── tests
│ │ │ ├── comment_list.js
│ │ │ └── create_comment.js
│ │ └── index.js
│ └── core
│ ├── actions
│ │ ├── index.js
│ │ ├── posts.js
│ │ └── tests
│ │ └── posts.js
│ ├── components
│ │ ├── main_layout.jsx
│ │ ├── navigation.jsx
│ │ ├── newpost.jsx
│ │ ├── post.jsx
│ │ ├── postlist.jsx
│ │ ├── style.css
│ │ └── tests
│ │ ├── main_layout.js
│ │ ├── navigations.js
│ │ ├── newpost.js
│ │ ├── post.js
│ │ └── postlist.js
│ ├── configs
│ │ └── method_stubs
│ │ ├── index.js
│ │ └── posts.js
│ ├── containers
│ │ ├── newpost.js
│ │ ├── post.js
│ │ ├── postlist.js
│ │ └── tests
│ │ ├── newpost.js
│ │ ├── post.js
│ │ └── postlist.js
│ ├── index.js
│ └── routes.jsx
├── lib
│ └── collections.js
├── package.json
├── server
│ ├── configs
│ │ └── initial_adds.js
│ ├── main.js
│ ├── methods
│ │ ├── index.js
│ │ └── posts.js
│ └── publications
│ ├── index.js
│ └── posts.js
└── wallaby.js