update tuts

Author: jcouyang

docs/src/main/tut/Fantasy.md

@@ -7,7 +7,7 @@ position: 3
 
 # XReact Fantasy
 
-xreact is already a Functional library that can integrete FRP lib rxjs or mostjs into react. But it's still too many details you need to care while modeling UI components.
+xreact is a Functional library that can integrete FRP lib rxjs or mostjs into react. But there're still too many details you need to care while modeling UI components.
 
 The implement of [Fantasy Land](https://github.com/fantasyland/fantasy-land), which will change the way you model and implement UI entirely.
 
@@ -25,66 +25,110 @@ lift(x=>x+1)([1,2,3]) // => [2,3,4]
 
 You should notice that both lift and map transform `x => x + 1` which should only able to apply to `Number`, to a function that can apply to `Array[Number]`
 
-We can now (from v2.3.0) lift a normal function to xReact as well.
+We can now (from v2.3.0) lift a normal function to which can apply to xReact FantasyX as well.
 
-Let's take BMI calculator for example.
-
-the key business logic of a BMI calculator is very simple
+Let's take a look at a really simple example, multiply 2 numbers.
 
 ```js
-function calcBMI(weight, height) {
-  let bmi = 0
-  let health = '...'
-  if (height && weight) {
-    bmi = height / (weight * weight)
-  }
-  if (bmi < 18.5) health = 'underweight'
-  else if (bmi < 24.9) health = 'normal'
-  else if (bmi < 30) health = 'Overweight'
-  else health = 'Obese'
-  return { bmi: bmi.toString(), health }
+// Number -> Number -> Number
+function mult(a, b) {
+  return a * b
 }
+mult(1, 2)
 ```
 
-The implementation doesn't seem to very Functional, but it doesn't matter since it's very low level implementation. It's a very easy to use, pure function:
+But if we need a React Component that multiply 2 numbers from 2 input box, how complicated it could be?
+
+Now you get simply get a free FantasyX from just any normal function, via `lift`.
 
 ```js
-calcBMI(65, 1.72)
-// => Object { bmi: "23.661438615467823", health: "normal" }
+// FantasyX -> FantasyX -> FantasyX
+let xMult = lift2(mult)
 ```
 
-Now we have a pretty simple function that can calc BMI and return health level and bmi score.
+`mult` need 2 arguments, that's why we use `lift2` here.
+
 
-How can we lift this function and make the exactly same functional React Component then?
+Now that we have on function `xMult` that can turn 2 FantasyX into one, lets do this:
 
 ```js
-let xplan = lift2(calcBMI)(xinput('weight'), xinput('height'))
+let XMult = xMult(xinput('a'), xinput('b'))
 ```
 
-Now we have a `xplan` of type `FantasyX`, simply apply it to a View and then you will get a React Component.
+and we got a new FantasyX `XMult` with the computation built in.
+
+`xinput` is an FantasyX abstraction of input box.
+
+All we have so far was just a FantasyX `XMult` with computation composed inside, and we need a View to display and interact with. Here comes a really simple Stateless Component
 
 ```js
-let View = props => (
+const View = props => (
   <div>
-    <label>
-      weight(kg):
-      <input type="number" name="weight" defaultValue="0" onChange={props.actions.fromEvent} />
-    </label>
-    <label>
-      height(m):
-      <input type="number" name="height" defaultValue="0" onChange={props.actions.fromEvent} />
-    </label>
-    <p>Your BMI is <b>{props.bmi}</b></p>
-    <p>which means you're <b>{props.health}</b></p>
+    <input name="a" onChange={props.actions.fromEvent} defaultValue={props.a}/>
+    <input name="b" onChange={props.actions.fromEvent} defaultValue={props.b}/>
+    <div>{props.output}</div>
   </div>
 )
-let BMICalc = xplan.apply(View)
+View.defaultProps = { a: "", b: "",output:""}
 ```
 
-Check out the Calculator:
+apply XMult to View then we'll get a React Component
 
-<iframe src="https://www.webpackbin.com/bins/-Ksaj0iHMWD2xC24bAqR" frameborder="0" width="100%" height="500"></iframe>
+```js
+let Mult = XMult.apply(View)
+```
+
+<https://www.webpackbin.com/bins/-KoGxSJ-3pOi4DicUvaq>
+
+<iframe src="https://www.webpackbin.com/bins/-KoGxSJ-3pOi4DicUvaq" frameborder="0" width="100%" height="500"></iframe>
+
+## Functor
+
+FantasyX also implemented Functor, so we can transform one FantasyX to another
+
+For example, from `XMult`, we could simply transform it into a `XMMP` with new computation
+
+```js
+let XMMP = XMult.map((s) => ({output: s.output * s.output}))
+```
+
+it's just like maping on a list
+
+```js
+[1,2,3].map(x=>x*x)
+// [2,4,6]
+```
+
+<https://www.webpackbin.com/bins/-Kss6m5ORK74CObhAPqB>
+
+<iframe src="https://www.webpackbin.com/bins/-Kss6m5ORK74CObhAPqB" frameborder="0" width="100%" height="500"></iframe>
+
+## Monoid
+
+It's actually Semigroup, but if we have a ID FantasyX, we have Monoid, a Identity FantasyX make sense in that the computation inside is just Identity.
+
+Anyway, let's see how can we combine two FantasyX together
+
+```js
+let XCOMBINE = XMMP.concat(XMult)
+```
+
+仅此, 我们就得到了一个同时具有 XMMP 与 XMult 行为的 FantasyX
 
-## `FantasyX`
+当然, 因为他们都会修改 `state.output`,  合并到一起会导致冲突, 我们稍微修改下 XMMP
 
-``FantasyX` implement `Applicative`, `Monoid`,
+```js
+let XMMP = XMult.map((s) => ({output2: s.output * s.output}))
+```
+
+nothing special just like how you concat two Arrays
+
+<https://www.webpackbin.com/bins/-Kss6m5ORK74CObhAPqB>
+
+<iframe src="https://www.webpackbin.com/bins/-Kss6m5ORK74CObhAPqB" frameborder="0" width="100%" height="500"></iframe>
+
+-------
+
+Check out a more complicated BMI Calculator:
+
+<iframe src="https://www.webpackbin.com/bins/-Ksaj0iHMWD2xC24bAqR" frameborder="0" width="100%" height="500"></iframe>

docs/src/main/tut/React-Most-函数式最佳实践.md

@@ -11,8 +11,10 @@ section: zh
 
 先来初级的函数式重构
 
-使用 union-type 定义 `Intent`
------------------------------
+JavaScript Union Types
+---------------
+
+### 使用 Union Type 定义 `Intent`
 
 [union-type](https://github.com/paldepind/union-type) 是一个简单的提供 union type，或者说 case class 的库。
 
@@ -34,8 +36,7 @@ export default Type({
 })
 ```
 
-case Intent, 别 switch
-----------------------
+### case Intent, 别 switch
 
 case union-type 是 pattern matching, 不是 switch case
 
@@ -56,8 +57,7 @@ const counterable = connect(intent$ => {
 })
 ```
 
-pattern match union type
-------------------------
+### pattern match union type
 
 union type 还可以带上值，比如 `Inc` 的内容是 `Number`
 
@@ -88,6 +88,42 @@ const counterable = connect(intent$ => {
 })
 ```
 
+TypeScript Union Types
+----------------------
+使用 TypeScript 的 Union Type 会简单得多, 而且运行时是zero cost, 只会在编译时检查.
+
+```ts
+export interface Inc {
+  kind: 'inc'
+}
+export interface Dec {
+  kind: 'dec'
+}
+export type Intent = Inc | Dec
+```
+
+稍微缺陷的是 TypeScript 没有 pattern matching
+
+```ts
+const counterable = x<"Observable", Intent, State>(intent$ => {
+    return {
+        update$: intent$.map(intent =>{
+          switch(intent.kind) {
+          case 'inc': return state => ({count: state.count + 1})
+          case 'dec': return state => ({count: state.count + 1})
+          default: return state => state'
+          }
+        }),
+        actions: {
+            inc: () => ({kind: 'inc'} as Inc),
+            dec () => ({kind: 'dec'} as Dec)
+        }
+    }
+})
+```
+
+但是没关系, 编译器会保证你case的类型正确, 比如你在case 里写错类型的字符串如 `incblahblah`, 编译不会通过.
+
 lens
 ----
 
@@ -99,7 +135,7 @@ lens 是 composable, immutable, functional 的更新，观察数据结构的方
 import {lens, over, inc, dec, identity} from 'ramda'
 const counterable = connect(intent$ => {
     let lensCount = lens(prop('count'))
-    return {
+     return {
         sink$: intent$.map(Intent.case({
             Inc: () => over(lensCount, inc)
             Dec: () => over(lensCount, dec),
@@ -188,6 +224,7 @@ const CounterView = props => (
 
 现在我们的Counter 就变成了[这样](https://github.com/reactive-react/react-most/blob/master/examples/frp-counter/src/app.jsx)
 
+
 搞基
 ====