路人甲：Hey! 我想要學習寫那種跟類似桌面應用程式一樣具有高度互動性及酷炫 UIUX 的網站，啊！聽說叫 RIA，我聽說您已經在那個領域很有經驗。
路人乙：沒錯，我就是一個前端攻城獅。而且我用過蠻多新的工具和技術的。
路人甲：酷斃了！我現在想要用 HTML, CSS 和 Javascript 做一個簡單的待辦清單網站，然後我想說要用 jQuery ，用 jQuery 可以嗎？
路人乙：嗯... 不行，那個東西已經太舊了。jQuery 差不多沒人在用了，現在你需要使用 React，那才是趨勢。
路人甲：喔喔！好啊！不過那是啥？
路人乙：針對建置網站的部分 React 是一種新的方式。使用了 Virtual DOM 來實作底層並且讓我們可以用 JSX 來寫
路人甲：虛擬...？JSX？那些又是啥米
路人乙：JSX 您可以把它想成強化版的 HTML ，它擴充 Javascript 的功能讓你可以在 JS 中撰寫 XML。而 Virtal DOM 用一個特殊的樹狀結構物件來表示 DOM 並且讓我們可以直接透過他們來操作實際的 DOM ，效能超級好
路人甲：在 JS 中撰寫 XML 是什麼意思？
路人乙：聽著！React 就是未來。它讓您可以建立元件並且重複使用
路人甲：喔～你的意思是說就像 Backbone 的 view？
路人乙：不是！Backbone 已經沒人用了，現在所有的東西都要變成元件才行
路人甲：所以我不需要懂 JSX 或 Virtual DOM？
路人乙：不是啦！你還是要學底層的觀念，然後你就可以不用擔心自己操作 DOM 而產生效能不好的問題，元件自己會根據狀態去更新 DOM
路人甲：ㄜ！你搞得我好亂啊。意思是說有一個叫做 React 的新技術可以用來建置元件。那我可以搭配 jQuery 嗎？
路人乙：嗯... React 只幫助我們處理程式中的一部分，剩下的東西你可以自己搭配。不過我剛剛已經跟你說了 jQuery 已經過氣了。喔對了！你可能會需要使用 webpack 來打包封裝你的元件
路人甲：嗯！那是啥
路人乙：簡單說它是一個模組的封裝打包工具。正常情況下你的程式依據模組的原則分成很多檔案達到關注點分離，接著你會希望將他們彙整成單一檔案或者是載入客戶端中的程式碼片段。同時你甚至不需要 react-tools 就是官方提供的那套，你只需要使用 babel 來編譯 JSX
路人甲：Babel ？
路人乙：沒錯！Babel。這是一個很屌的工具可以幫助我們轉換 ES6+ 和 JSX 的程式碼變成可以執行的 ES5 ，當然它也支援 source map，它已經廣泛地被很多人採用甚至 Facebook 也是用它
路人甲：ES6+ ？
路人乙：ES6+ 或稱 ES2015 是下一版的 EcmaScript 讓 Javascript 具備更多新的功能例如：類別 class，新的陣列函式，maps，sets 等等。幾乎所有的人現在都用 ES6+ 來寫他們的程式了
路人甲：很強大嗎？
路人乙：當然啊，ES6 就是未來的趨勢啊！
路人甲：那我要怎樣才能用它
路人乙：首先你需要安裝 NodeJS....
路人甲：安裝 NodeJS？不是吧...你剛剛才說了 React 和元件
路人乙：是的！所以你現在也可以用 Flux 架構來建立程式，遵循它的規則建立 actions, stores, 加上元件
路人甲：Flux？
路人乙：簡單說就是透過 Flux 你的程式會被分成 stores, actions, views 搭配單一方向的資料流原則。views 透過 dispatcher 驅動 actions ，stores 監聽 dispatcher 然後發動事件同時也讓那些監聽同一事件的 view 一起觸發事件
路人甲：嗯...像 MVC 嗎？
路人乙：不是啦 MVC 已經是過去式了，Flux 才是未來。外面已經有很多 Flux 的實作了
路人甲：什麼？Flux 實作？
路人乙：對啊！Flux 只是一個設計模式。你去查 #alt, #flummox, #marty, #fluxxor, #fluxible 等等就知道了。喔！還有 Facebook 官方的 Dispatcher
路人甲：那為什麼不要就用官方的東西就好？
路人乙：因為那對於初學者來說有點複雜，所以你只要選一個外面既有的實作來用就好
路人甲：好啊！因為我真的不希望把程式碼搞得太難懂
路人乙：就像我剛剛說過的，去找那些實作來學就好
路人甲：那 Angular 勒
路人乙：噁
路人甲：噁？
路人乙：噁
路人甲：其實我就是不想把樣板弄的很髒很複雜而已
路人乙：它真的很簡單，而且網路上有一些 starter kit 或者你可以使用 Yeoman 的產生器
路人甲：需要用一個產生器？Yeoman？那又是啥？
路人乙：產生器就是用來幫你產生一些常用或範例程式碼的東西，而且你可以用它們打造很多的程式。使用 webpack 新支援的 DLL 可以單獨編譯每一隻 app 或者整合在一起
路人甲：ㄜ...我就只有一個 app 或者說就只有一頁, 一個元件而已。隨便啦反正就是一個小東西而已
路人乙：不可能啦，考慮到可組成的元件。意思是說你應該要依據每一個小區塊的功能拆分元件盡可能讓他們一個元件只做一件事。
路人甲：太多東西了啦，是不是捨本逐末了。
路人乙：這是唯一的方式，如果你想要保持程式碼整潔，並且讓其他開發者可以輕鬆看懂你的程式碼，喔還有效能。然後你可以用 hot reload...
路人甲：hot reload？跟 livereload 一樣的東西嗎？
路人乙：不對！這是 webpack 支援的一項厲害的功能，叫做 hot module replacement 其意義就是執行時期注入更換那些要更新的 module 如果你是用 React 的話你可以在網路上找到 react-hot-loader 來幫助你開發元件，重點是可以針對每一個元件單獨處理修改，然後即時更新不需要整個頁面全部重新載入。再加上如果你是用 Flux 架構的話你甚至可以就單獨重複測試 actions。
路人甲：所以我現在已經下載這一堆工具和函式庫，還有其他東西嗎？
路人乙：我剛剛提到啊 Flux 它讓你的程式有良好的架構。如果搭配 Observables 和 Immutable 類型的資料會讓程式更好
路人甲：Observables？我還需要 Immutable 資料？
路人乙：你需要 Observables 來讓處理事件更簡潔而且確保其他非同步函式的執行結果正確，Observables 的意思就是實作觀察者模式，舉實際的例子來說就是透過實作可觀察類別的物件接著訂閱的物件或其他東西就可以在該資料發生改變時同時反應出對應的行為。加上使用 Immutable 最後我們的程式就會具備資料一致，有效率，單純。然後 Observables 將來可以回傳 ES2016 async-generator 函式，
路人甲：什麼？async generator？那是啥
路人乙：一個 generator 函式加強了原本的函式讓其可以回傳多個值，然後非同步修飾子可以讓函式在未來 push 他們的值，所以一個 async generator 函式就是這兩者的結合。透過 yeild 在未來帶入多個值，不過作者 Jafar Husain 已經撤回他的建議，且正在和 Kevin Smith 研究 ES7/ES2016 es-observable 建議
路人甲：靠！我只是想要做個簡單的 app 就得研究這麼多東西，還得關注那些規格？
路人乙：嗯...好吧你可以用 RxJS 它很接近 observable 的規格。已經被很產品廣泛地使用
路人甲：RxJS？為什麼要用它？
路人乙：它可以和已經存在的 Promises, 事件機制搭配，而且運作良好。你可以從任何非同步的程式中建立一個 Observable ，其會被優先處理，繞過處理非同步的值，錯誤等等。如果你要找 Reactive 相關的東西可以去查 cycle framework
路人甲：什麼鬼啊！我只是要建立一個簡單的 app 然後 demo 。確定我能夠做到這些嗎？
路人乙：當然可以啊，不過部署又是另外一個有趣的主題了
路人甲：好！我想我大概明白了一些東西，謝謝你的解釋
路人乙：很好
路人甲：可以讓我整理一遍剛剛你說的那些
路人乙：可以啊
路人甲：所以總結來說我需要將我們程式碼拆成 actions, stores 和元件並且遵循單一方向資料流的原則，用 ES6+ 的語法來撰寫可以讓我用最新版的 JS 的功能這樣一來程式碼會更加簡潔，使用 babel 來轉換編譯 ES6+ 成 ES5 這樣這些 ES6+ 的程式碼就可以在所有瀏覽器上執行，使用 webpack 來處理這些分散的模組檔案，使用 ImmutableJS 來處理所有的資料以及用 RxJS 來處理所有的事件機制以及非同步的函式。
路人乙：是不是很讚
路人甲：我想我忘記了關於那些靜態的資料以及優化就是壓縮檔案的部分
路人乙：小事！webpack 可以讓你匯入這些東西，你所需要做的就是安裝並設定一些 loaders, plugins 而且基本上你已經完成了。你可以匯入元件的 CSS 和圖片然後使用他們，喔對了還有一些取代 CSS 的東西讓你可以在 JS 裡面寫 CSS。
路人甲：...我要回去用 jQuery 了