從頭建立一套 web-based 服務架構 (1) 前言

緣起

2016 是個前端技術變動快速的時代， 從早期停留在直接進行 DOM manipulation 的 jQuery 天下， 到後來出現 web app 概念後的產物 Backbone.js、Angular.js， 再到近年以 component 角度大放異彩的 React.js 與 Vue.js，每次都代表著相當大的變革與新的進入門檻。 相信大家都曾經有過類似的疑問：

我該使用哪個 library/framework？該怎麼互相搭配才是最好的選擇？

許多套件的存在本身就是為了給出這些疑問的解答。 一代的 Angular.js 以 MVC framework 自居，能夠讓使用者以少少的 code 達到完整的 web app 架構。 撰寫 Angular app 時程式碼的風格也容易理解，只要弄清楚 Angular 的 module 系統和 dependency injection 概念，要自行撰寫套件擴充功能是相當容易的事情。

反過來說，雖然 Angular 提供了這麼多的便利性，當今天我們要整合其他的套件生態系、甚至寫作風格就顯得格格不入。 由於 Angular 自帶了完整的 module 系統，再使用 CommonJS/AMD 便顯得雞肋，也不容易整合 webpack 等打包系統； Angular 已有了方便的 $http 和 $q 等功能，但若是今天我們想要使用 superagent（或是使用了 superagent 的其他套件）或是 bluebird 提供的進階 promise 功能，這些功能重複的 code 不就徒增 bundle size？ Angular 帶給開發者快速與簡單的便利，不過同時也造成了這些限制。

並不是說 Angular 這樣的 framework 不好，而是在前端技術如此蓬勃發展的現在，開發者應該要擁有更多自主的套件使用權。 後來的 React.js、Vue.js 等 library 意識到這一點，均增加了自身的彈性，讓開發者更能夠自行選用習慣或合適的技術。 例如，React 以 MVC 中的 V 自居，讓自身能和其他 data control 套件輕鬆整合； Vue 的 .vue 格式設計能夠讓 HTML、CSS 和 JavaScript 採取不同的語言撰寫，例如使用者可以選擇 Pug 撰寫 Vue component 的 template，採用 LESS 或 SASS 等 CSS preprocessor 撰寫 CSS 樣式，並使用 ES6/Babel 甚至 CoffeeScript 撰寫核心的 JavaScript 邏輯。

Este，一套目前相當知名的 React project boilerplate，其作者曾經在 README 如此介紹自己的專案：

Forget about evil frameworks, learn laser focused libraries and patterns instead.

不使用 framework 進行開發，能夠更大幅度的自行選用不同的 library 以及組合方式。 雖然大部分的情況下這並不會對工作帶來便利性，但能夠更彈性的組合並使用這些技術是一件有挑戰性且能帶來成就感的事情。

本系列文章目標

預計以隨性的角度去撰寫內容，因此文章內會參雜著 code example、不同技術或套件比較、技術概念或語法介紹等。 （也就是說會寫得相當凌亂啦）

然後，希望讀者看了以後能夠反思： 同樣的功能，如何挑選自己適合的技術來達成同樣的效果？ 要如何做的比文章列的方式更好？ 然後能將這些想法回饋到自己的專案上，或是有所啟發。