前端畫面架構 | React.js |
前端Server Side Rendering架構 | Next.js |
手機前端畫面架構 | ReactNative |
前端持續性資料架構 | Redux |
前端表格架構 | Chart.js |
前端畫面架構
React.js及Vue.js的共同優點
其實選擇使用Vue.js或是React.js不是那麼容易。
1. 虛擬DOM Virtual DOM
當有需要更新畫面,只需更新一部分。這會省時間和提高效率。
2. 另件組合前端開發 Component-based UI Development
把前端切成可以重複使用的components,提高開發前端的效能和數度。
3. 針對前端 Front-end Focused
這些架構會要求開發者一開始就把前後端分離。
React.js前端架構
優點
- 比較多工程師有經驗
- 很多第三方的package可以直接拿來套用
- Facebook和其他很大的公司有在支持
- ReactiveNative可以很快的開發iOS和Android的app
缺點
- 比Vue.js還難學
- 只用JSX,對大部分工程師比HTML templates還難上手
線上資源
Vue.js前端架構
優點
- 上手很快,新手比較容易學習
- 文件(中文)寫的不錯
- 架構比較簡單輕便
- 不需要用JSX,支持傳統HTML templates
缺點
- 缺乏類似ReactNative手機架構
主要考量因數
- ReactiveNative可以很快的開發iOS和Android的app
前端持續性資料架構
Redux的意義
- 跟React架構的結合非常密切
- 前端一定會需要維護持續性資料
- 一開始持續性資料就放在很清楚切割的Redux模組
- 商業邏輯可以放在Redux模組裡
- 一開始可能會有些開發成本,但之後程式比較好整理
- 純畫面模組也比較好測試Unit Test