有鑑於最近旁聽Front-end meeting後，發現許多套件名詞擺在一起的時候好像會迷失方向，雖然一部分知道大概功能，但有一部分套件的角色與在整體生態圈的定位仍有些陌生

因此整理以下提供一個整體性的概念

前端框架工具介紹文：https://gist.github.com/weihanglo/ccefb5107b1d60669ded1177e6f954ca#es6babel

 

ReactJs：

React僅僅是Web應用程式中的視圖層(View)，定義上不能算是框架，應用程式中可以將之分解成一個一個小的組件，因此你的Web站台可以是經由各種型式的元件(Component)組裝而成，當Web的問題與場景愈來愈具備挑戰性的時候，元件導向開發(Component-Driven Development)可以達成問題分解解決與並易於重用，而React的開發方法就是符合元件導向開發模式。

React之於元件、元件之於類別的使用方法初探，可見：https://paulfun.net/wordpress/?p=471

React的革命：Virtual Dom

當React的View engine要追踪模型更改並將其應用於DOM ，這個動作又稱為渲染(Rendering)，React採用了Virtual Dom的演算法

Virtual Dom是可以加快渲染速度的機制，Dom的更改以往是透過在Browser層直接操作真實網頁上的Dom，React的差異化算法是使用Tree的形式去計算，在內存中，直接建立一組假的Dom，在內存中處理Dom的效能大幅提升，React同時也會盡可能的保持Dom大部分不變，保持最小幅度的更新

關於虛擬Dom的秘密：https://conferences.oreilly.com/fluent/fluent2014/public/schedule/detail/32395

在Server端渲染？

因為react對DOM的處理是使用假的DOM，都在內存中進行，因此更可以將此渲染工作拋到Server上。僅僅只剩下讓Browser客戶端處理事件就好

註：React呈現的HTML標記包含data-reactid屬性，這有助於React跟踪DOM節點。

更多好文：https://blog.risingstack.com/the-react-way-getting-started-tutorial/

進一步：JSX語法糖

JSX的特性是讓標籤更加語意，更加簡化，可以整合JavaScript，以單單組合Div包含Class定義的標籤工作，JSX讓我們可以有如使用Template一樣簡潔：

當然 JSX 並非強制使用，你也可以選擇不用，因為最終 JSX 的內容還是會轉化成 JavaScript（瀏覽器只看的懂 JavaScript）

更多好文：https://blog.techbridge.cc/2016/04/21/react-jsx-introduction/ 、https://reactjs.org/docs/jsx-in-depth.html

強化React

React-Flux

React本身只是個MVC架構中的View(視圖)函式庫，沒有類似Model或Controller的角色，這個最初是由React的最早的創作小組所提出的概念性架構，雖然利用Action與Store解決了React 控制視圖的問題，但Flux發表至今並沒有太多源碼更新, 一方面被認為學習曲線高，另一方面是很妥善的設計，重用程式碼不少，因此建議參考Redux。

更多好文：http://eddychang.me/blog/javascript/94-flux-concept.html

React-Redux

Redux 是管理應用狀態的js庫。是單向數據流應用架構中更優雅的實現，Redux 和 React 之間無依賴關係。Redux支持 React、Angular、Ember、jQuery 甚至純 JavaScript。

相較於Flux，Redux現在發展得很好，學習資源與使用者很多，也有很多週邊的擴充或應用可用，當遇到問題時比較容易找到解答，所以Redux應該是首選。

更多的Redux：https://noootown.gitbooks.io/deeperience-react-native-boilerplate/content/Redux/Redux%20&%20React.html

 

NodeJs：

Node.js模塊系統，它擁有強大的npm套件管理機制。我們將以“Node風格”編寫我們的代碼，並引用Require我們所需的一切。React可作為一個單獨的npm package引用進來。

現在我們使用Node來管理系統的相依性（統一ES6），我們幾乎所有的解決方案都有npm可以來使用，那接下來就是選擇打包工具。

WebPack+Babel

WebPack

Webpack 是德國開發者 Tobias Koppers 開發的模組整合工具。它的核心功能如下:

• 可同時整合 CommonJS 和 AMD 模組
• 轉換 JSX, Coffee Script, TypeScript 等
• 分散封裝專案使用的程式碼，使載入頁面時只需載入當頁所需的程式碼以加速載入速度
• 整合樣式表 (css, sass, less 等)
• 處理圖片與字型
• 建置 production-ready 的程式碼 (壓縮)

更多好文：https://rhadow.github.io/2015/03/23/webpackIntro/

 

Babel

 

整理至此，仍發現，每個環節其實都可以更深入的探討，不過對於overall的角色定位已經有了更具體的認識，因此我整理總心智圖如下(可能有誤或缺，歡迎指教)：

放大：https://paulfun.net/wordpress/wp-content/uploads/2018/03/591.png

 

若有新的消息或觀念上的修正，後續會再持續更新本文