核心組件
這里羅列了Mantra中的核心組件谚攒。
服務(wù)端與客戶(hù)端
Mantra非常關(guān)注客戶(hù)端止毕，因?yàn)槟鞘悄銓?xiě)大部分代碼的地方牌芋。我們?cè)试S客戶(hù)端緩存和連接器與服務(wù)端和遠(yuǎn)端數(shù)據(jù)層交互乎完。
此外，我們有一系列服務(wù)端的文件和目錄結(jié)構(gòu)標(biāo)準(zhǔn)亡容。
在Mantra中嗤疯，客戶(hù)端與服務(wù)端的分離必須是顯式的。我們不建議任何隱式的代碼共用闺兢。如果你想在客戶(hù)端實(shí)現(xiàn)延時(shí)補(bǔ)償茂缚，那么你應(yīng)當(dāng)寫(xiě)對(duì)應(yīng)的客戶(hù)端方法來(lái)調(diào)用服務(wù)端的方法，同時(shí)留下存根屋谭。參考client/configs/method_stubs/posts.js和server/methods/posts.js阱佛。注意到客戶(hù)端的存根是如何給到一個(gè)特定字段saving，并且這個(gè)字段只反映在用戶(hù)界面上戴而，并不給到服務(wù)器去持久化凑术。
可以看一下這么做的根本原因：Say no to universal apps
注意：以下的Mantra組件位于你app的客戶(hù)端部分。
ES2015 語(yǔ)法和 ES2015 模塊
我們依賴(lài)于ES2015的多個(gè)特性和它的模塊系統(tǒng)所意。為了使用Mantra淮逊，你首先需要使用Meteor 1.3，它包含了一個(gè)ES2015模塊系統(tǒng)的實(shí)現(xiàn)扶踊。
React 作為 UI
我們使用React作為Mantra的UI（表現(xiàn)層）泄鹏。你應(yīng)當(dāng)使用props來(lái)傳遞所有的數(shù)據(jù)，事件處理和庫(kù)函數(shù)秧耗。
你可以在React組件中處理狀態(tài)备籽，但是那不會(huì)和你app的其余部分交互。所以分井，Mantra強(qiáng)烈建議你不使用states车猬。
當(dāng)你編寫(xiě)UI組件時(shí)，你可以包含任何其他的React組件尺锚。以下是你可以導(dǎo)入組件的地方珠闰。
- 其他你app中定義的UI組件
- 來(lái)自于NPM的UI組件（如material-ui）
- 你app中的容器（我們一會(huì)兒會(huì)講到它）
任何給到組件的其他東西都應(yīng)當(dāng)通過(guò)props傳遞。
Actions
Actions是你寫(xiě)業(yè)務(wù)邏輯的地方瘫辩，其中包含：
- 驗(yàn)證
- 狀態(tài)管理
- 與遠(yuǎn)端數(shù)據(jù)源交互
一個(gè)action應(yīng)是一個(gè)簡(jiǎn)單的函數(shù)伏嗜，它的第一個(gè)參數(shù)是整個(gè)應(yīng)用的上下文。其他參數(shù)一般來(lái)自UI的調(diào)用或是容器伐厌。
注意：在action中承绸，你做的任何事都應(yīng)該基于應(yīng)用上下文以及其他傳入action的參數(shù)。你不能在action中或是模塊action停留處載入其他模塊或者使用全局變量挣轨。
狀態(tài)管理
在app中军熏，我們需要處理不同種類(lèi)的狀態(tài)。我們可以將其分為兩類(lèi)：
- 本地狀態(tài) — 客戶(hù)端的狀態(tài)永遠(yuǎn)不會(huì)被同步到一個(gè)遠(yuǎn)端服務(wù)器上（錯(cuò)誤刃唐，認(rèn)證消息羞迷，當(dāng)前頁(yè)面）
- 遠(yuǎn)端狀態(tài) — 這個(gè)狀態(tài)通常來(lái)自于遠(yuǎn)端服務(wù)器并且同步界轩。
我們有不同的方法來(lái)管理app的狀態(tài)画饥，其中包括：
- Meteor/MiniMongo (Remote State)
- Tracker/ReactiveDict (Local State)
- FlowRouter (Local State)
- Redux (Local State)
- GraphQL/Lokka (Remote State)
- GraphQL/Relay (Remote State)
- Falcor (Remote State)
此處就是JavaScript社區(qū)持續(xù)產(chǎn)生創(chuàng)新的地方衔瓮。所以Mantra的狀態(tài)管理相當(dāng)靈活。你可以使用你要的一切抖甘。
比如热鞍，你可以在app起步時(shí)使用這些：
- Meteor/MiniMongo (Remote State)
- Tracker/ReactiveDict (Local State)
- FlowRouter (Local State)
隨后你可以更換其他解決方案：
注意：盡管如此，Mantra仍然著重強(qiáng)調(diào)一些規(guī)則來(lái)管理狀態(tài)衔彻。
- 任何對(duì)于states的修改必須在action內(nèi)完成
- 你可以從actions或者containers中讀取states
- 你不應(yīng)該直接從UI組件中讀取states薇宠。UI組件不應(yīng)該知道app的任何states
查看下面鏈接獲取更多states的示例：
- Reading from local state - inside a container
- Writing into local state - inside an action
- Reading from a remote state - inside a container
容器
容器是Mantra的集成層。它做了下面這些事情：
- 將states傳遞給UI組件
- 將actions傳遞給UI組件
- 在應(yīng)用上下文中傳入任何配置項(xiàng)和庫(kù)函數(shù)
容器是React組件艰额，但是你不能直接創(chuàng)建它澄港。你不應(yīng)該在容器組件中使用JSX。
容器通常用類(lèi)似于 react-komposer 這樣的庫(kù)構(gòu)建柄沮。它支持不同的數(shù)據(jù)源回梧，包括 Meteor/Tracker, Promises, Rx.js Observable 等等。
通常的祖搓，在容器中你需要寫(xiě)如下函數(shù)：
- 構(gòu)建函數(shù)用來(lái)從states中獲取數(shù)據(jù)
- 映射函數(shù)用來(lái)從依賴(lài)注入層獲取數(shù)據(jù)并映射它到props中
我們也制定了一些規(guī)則：
- 所有這些函數(shù)應(yīng)當(dāng)在容器模塊被導(dǎo)出
- 構(gòu)建函數(shù)只能使用props傳來(lái)的變量
- 映射函數(shù)只能使用參數(shù)作為變量狱意。它能訪問(wèn)你整個(gè)應(yīng)用和所有actions
Note: If you need to pass the application context to a component, do it via props using a mapper.
注意：如果你需要傳遞應(yīng)用上下文到組件中，使用mapper并通過(guò)props傳遞拯欧。
應(yīng)用上下文
應(yīng)用上下文能被所有actions和容器獲取详囤，所以這里是app中提供共享變量的地方。它們包括：
- Meteor namespace
- Meteor Collections
- LocalState
- FlowRouter
- Any other Meteor package
- Redux Stores
- Lokka Client
- Rest Client
點(diǎn)擊此處查看Mantra中的示例應(yīng)用上下文
依賴(lài)注入
Mantra使用依賴(lài)注入來(lái)分離app的不同部分镐作，包括了UI組件和actions藏姐。
我們使用了一個(gè)名為 react-simple-di 的項(xiàng)目，它在背后使用了React的上下文该贾。它同時(shí)接受應(yīng)用上下文和actions作為依賴(lài)包各。
一旦配置好，應(yīng)用上下文就會(huì)被注入到每個(gè)action中靶庙，也就是action的第一個(gè)參數(shù)问畅。所以，你不需要手動(dòng)地傳遞應(yīng)用上下文六荒。
配置依賴(lài)注入
依賴(lài)會(huì)在你的頂級(jí)組件中注入护姆。在這里是Layout組件。
路由和組件加載
注意：此處掏击，當(dāng)談及組件時(shí)卵皂，我們包括了容器和UI組件。
我們通常使用路由來(lái)在UI中加載組件砚亭。
這里有多種選擇（例如灯变，F(xiàn)lowRouter和React Router）
路由在Mantra中的作用僅僅是在UI中加載組件殴玛。它只是一個(gè)工具。
點(diǎn)擊 此處 查看如何使用FlowRouter 和 React Layout 來(lái)加載組件.
單一入口
在Mantra中添祸，我們想要app變得可預(yù)測(cè)的滚粟。所以，你的app只有一個(gè)入口刃泌。通常這個(gè)文件會(huì)加載路由凡壤。
提示：在服務(wù)器端，你可以有另外的入口耙替。
庫(kù)
任何app都有功能函數(shù)來(lái)完成不同的任務(wù)亚侠。你可以通過(guò)NPM獲取它們。在Mantra中俗扇，庫(kù)需要在應(yīng)用上下文中導(dǎo)入硝烂。為此，我們提供了一個(gè)libs字段來(lái)包含它們铜幽。
測(cè)試
測(cè)試是Mantra的核心滞谢。Mantra幫助你測(cè)試應(yīng)用的每個(gè)部分。我們強(qiáng)調(diào)的規(guī)則會(huì)幫助你編寫(xiě)測(cè)試啥酱。你可以使用熟悉的工具爹凹，如Mocha, Chai和Sinon來(lái)進(jìn)行測(cè)試。
使用Mantra镶殷，你可以單元測(cè)試app的三個(gè)核心部分：
UI 測(cè)試
UI測(cè)試部分我們使用enzyme禾酱。點(diǎn)擊鏈接查看更多測(cè)試案例。
