工程開發 Engineering > :hamburger: 前端架構 Front-End Stack

繁體 | 简体 | English


前端畫面架構 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前端架構

優點

  1. 比較多工程師有經驗
  2. 很多第三方的package可以直接拿來套用
  3. Facebook和其他很大的公司有在支持
  4. ReactiveNative可以很快的開發iOS和Android的app

缺點

  1. 比Vue.js還難學
  2. 只用JSX,對大部分工程師比HTML templates還難上手

線上資源


Vue.js前端架構

優點

  1. 上手很快,新手比較容易學習
  2. 文件(中文)寫的不錯
  3. 架構比較簡單輕便
  4. 不需要用JSX,支持傳統HTML templates

缺點

  1. 缺乏類似ReactNative手機架構


主要考量因數

  1. ReactiveNative可以很快的開發iOS和Android的app


前端持續性資料架構

Redux的意義

  1. 跟React架構的結合非常密切
  2. 前端一定會需要維護持續性資料
  3. 一開始持續性資料就放在很清楚切割的Redux模組
  4. 商業邏輯可以放在Redux模組裡
  5. 一開始可能會有些開發成本,但之後程式比較好整理
  6. 純畫面模組也比較好測試Unit Test


前端持續性資料架構

線上資源